站內搜尋

Wednesday, January 23, 2013

[jQuery] 利用jQuery ui 輕鬆做出漂亮的icon按鈕 ( button、link、text...等標籤 都可以)

步驟一、引入必要的檔案 <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.8.3.js"></script> <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
步驟二、定義class <script>   $(function() {     $( ".button_plus" ).button({       icons: {         primary: "ui-icon-plusthick"       }     });     $( ".button_query" ).button({       icons: {         primary: "ui-icon-search"       }     });     $( ".button_text" ).button();   }); </script>
步驟三、使用class <button class="button_plus">新增</button> <button class="button_query">查詢</button> <a href="http://www.google.com" class="button_text">Google連結</a> <span class="button_text">純文字</span>
備註:
1.參考文件 jQuery ui button 、 jQuery ThemeRoller
2.想更換風格主題的話 請參考 [jQuery][CSS] 輕鬆更改 jQuery UI 的主題(Theme)
3.如果要讓按鈕不能按(disabled),語法為:$('#my_button').attr('disabled','disabled');

No comments:

Post a Comment