amazeui學習筆記--js插件（UI加強2）--按鈕交互Button
1、總結
一、按鈕loading狀態：javascript
<button type="button" class="am-btn am-btn-primary btn-loading-example">Submit - Button</button> <input type="button" class="am-btn am-btn-primary btn-loading-example" value="Submit - Input" /> $('.btn-loading-example').click(function () { var $btn = $(this) $btn.button('loading'); setTimeout(function(){ $btn.button('reset'); }, 5000); });
二、按鈕loading狀態自定義選項（功能）：java
能夠在元素上添加 data-am-loading 來設置選項：ios
spinner加載動畫圖標，適用於支持 CSS3 動畫、非input元素，寫圖標名稱便可；loadingText加載時顯示的文字， 默認爲loading；resetText重置之後的顯示的文字，默認爲原來的內容。
<button type="button" class="am-btn am-btn-primary btn-loading-example" data-am-loading="{spinner: 'circle-o-notch', loadingText: '加載中...', resetText: '加載過了'}">按鈕 - button 元素</button> <input type="button" class="am-btn am-btn-secondary btn-loading-example" value="按鈕 - input 元素" data-am-loading="{loadingText: '努力加載中...'}" /> $('.btn-loading-example').click(function () { var $btn = $(this) $btn.button('loading'); setTimeout(function(){ $btn.button('reset'); }, 5000); });
三、單按鈕狀態切換：git
1 <button id="doc-single-toggle" type="button" class="am-btn am-btn-primary" data-am-button>切換狀態</button> 2 3 <p>按鈕狀態：<span id="doc-single-toggle-status" class="am-text-danger">未激活</span></p> 4 5 <script> 6 $(function() { 7 var $toggleButton = $('#doc-single-toggle'); 8 $toggleButton.on('click', function() { 9 setButtonStatus(); 10 }); 11 12 function setButtonStatus() { 13 var status = $toggleButton.hasClass('am-active') ? '未激活' : '激活'; 14 $('#doc-single-toggle-status').text(status); 15 } 16 }) 17 </script>
四、默認選中狀態： <label> 上添加 am-active 類名 <input> 上添加 checked 屬性。github
五、單選框：學習
1 <div class="am-btn-group doc-js-btn-1" data-am-button> 2 <label class="am-btn am-btn-primary"> 3 <input type="radio" name="options" value="選項 1" id="option1"> 選項 1 4 </label> 5 <label class="am-btn am-btn-primary"> 6 <input type="radio" name="options" value="選項 2" id="option2"> 選項 2 7 </label> 8 <label class="am-btn am-btn-primary"> 9 <input type="radio" name="options" value="選項 3" id="option3"> 選項 3 10 </label> 11 <label class="am-btn am-btn-primary am-disabled"> 12 <input type="radio" name="options" value="選項 4" id="option4"> 選項 4 13 </label> 14 </div> 15 <script> 16 // 獲取選中的值 17 $(function() { 18 var $radios = $('[name="options"]'); 19 $radios.on('change',function() { 20 console.log('單選框當前選中的是：', $radios.filter(':checked').val()); 21 }); 22 }); 23 </script>
六、複選框：動畫
<div class="am-btn-group" data-am-button> <label class="am-btn am-btn-primary"> <input type="checkbox" name="doc-js-btn" value="蘋果"> 蘋果 </label> <label class="am-btn am-btn-primary"> <input type="checkbox" name="doc-js-btn" value="橘子"> 橘子 </label> <label class="am-btn am-btn-primary"> <input type="checkbox" name="doc-js-btn" value="香蕉"> 香蕉 </label> </div> <script> $(function() { var $cb = $('[name="doc-js-btn"]'); $cb.on('change', function() { var checked = []; $cb.filter(':checked').each(function() { checked.push(this.value); }); console.log('複選框選中的是：', checked.join(' | ')); }); }); </script>
2、按鈕交互Button
Button JS 交互
Button 及 Button group 與 JS 交互。ui
按鈕 loading 狀態
默認文字
默認的文字爲 loading...。this
Copy
按鈕 - button 元素
<button type="button" class="am-btn am-btn-primary btn-loading-example">Submit - Button</button> <input type="button" class="am-btn am-btn-primary btn-loading-example" value="Submit - Input" />
Copy
$('.btn-loading-example').click(function () { var $btn = $(this) $btn.button('loading'); setTimeout(function(){ $btn.button('reset'); }, 5000); });
自定義選項
能夠在元素上添加 data-am-loading 來設置選項：url
spinner加載動畫圖標，適用於支持 CSS3 動畫、非input元素，寫圖標名稱便可；loadingText加載時顯示的文字， 默認爲loading；resetText重置之後的顯示的文字，默認爲原來的內容。
Copy
按鈕 - button 元素
<button type="button" class="am-btn am-btn-primary btn-loading-example" data-am-loading="{spinner: 'circle-o-notch', loadingText: '加載中...', resetText: '加載過了'}">按鈕 - button 元素</button> <input type="button" class="am-btn am-btn-secondary btn-loading-example" value="按鈕 - input 元素" data-am-loading="{loadingText: '努力加載中...'}" />
Copy
$('.btn-loading-example').click(function () { var $btn = $(this) $btn.button('loading'); setTimeout(function(){ $btn.button('reset'); }, 5000); });
單按鈕狀態切換
Copy
切換狀態
按鈕狀態：未激活
<button id="doc-single-toggle" type="button" class="am-btn am-btn-primary" data-am-button>切換狀態</button> <p>按鈕狀態：<span id="doc-single-toggle-status" class="am-text-danger">未激活</span></p> <script> $(function() { var $toggleButton = $('#doc-single-toggle'); $toggleButton.on('click', function() { setButtonStatus(); }); function setButtonStatus() { var status = $toggleButton.hasClass('am-active') ? '未激活' : '激活'; $('#doc-single-toggle-status').text(status); } }) </script>
複選框
注意：因爲 FastClick 的緣由，觸屏設備上使用時須要在 input 上添加 .needsclick，不然沒法獲取複選框的值。
Copy
蘋果橘子香蕉
<div class="am-btn-group" data-am-button> <label class="am-btn am-btn-primary"> <input type="checkbox" name="doc-js-btn" value="蘋果"> 蘋果 </label> <label class="am-btn am-btn-primary"> <input type="checkbox" name="doc-js-btn" value="橘子"> 橘子 </label> <label class="am-btn am-btn-primary"> <input type="checkbox" name="doc-js-btn" value="香蕉"> 香蕉 </label> </div> <script> $(function() { var $cb = $('[name="doc-js-btn"]'); $cb.on('change', function() { var checked = []; $cb.filter(':checked').each(function() { checked.push(this.value); }); console.log('複選框選中的是：', checked.join(' | ')); }); }); </script>
單選框
Copy
選項 1選項 2選項 3選項 4
<div class="am-btn-group doc-js-btn-1" data-am-button> <label class="am-btn am-btn-primary"> <input type="radio" name="options" value="選項 1" id="option1"> 選項 1 </label> <label class="am-btn am-btn-primary"> <input type="radio" name="options" value="選項 2" id="option2"> 選項 2 </label> <label class="am-btn am-btn-primary"> <input type="radio" name="options" value="選項 3" id="option3"> 選項 3 </label> <label class="am-btn am-btn-primary am-disabled"> <input type="radio" name="options" value="選項 4" id="option4"> 選項 4 </label> </div> <script> // 獲取選中的值 $(function() { var $radios = $('[name="options"]'); $radios.on('change',function() { console.log('單選框當前選中的是：', $radios.filter(':checked').val()); }); }); </script>
設置默認選中狀態
設置默認選中狀態涉及兩處：
<label>上添加am-active類名（2.7.0+無需添加此類名）；<input>上添加checked屬性。
Copy
蘋果橘子香蕉
<div class="am-btn-group" data-am-button> <!--默認選中狀態設置--> <label class="am-btn am-btn-primary am-active"> <input type="checkbox" class="needsclick" name="doc-js-btn" value="蘋果" checked> 蘋果 </label> <label class="am-btn am-btn-primary"> <input type="checkbox" class="needsclick" name="doc-js-btn" value="橘子"> 橘子 </label> <label class="am-btn am-btn-primary"> <input type="checkbox" class="needsclick" name="doc-js-btn" value="香蕉"> 香蕉 </label> </div>