jQuery UI 實例 - 按鈕（Button） · W3School jQuery UI 教程

# jQuery UI 實例 - 按鈕（Button）用帶有適當的懸停（hover）和激活（active）的樣式的可主題化按鈕來加強標準表單元素（比如按鈕、輸入框、錨）的功能。如需了解更多有關 button 部件的細節，請查看 API 文檔 [按鈕部件（Button Widget）](api-button.html)。 ## 默認功能可用于按鈕的標記實例：一個 button 元素，一個類型為 submit 的 input 元素和一個錨。 ``` <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI 按鈕（Button） - 默認功能</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"> <script> $(function() { $( "input[type=submit], a, button" ) .button() .click(function( event ) { event.preventDefault(); }); }); </script> </head> <body> <button>一個 button 元素</button> <input type="submit" value="一個提交按鈕"> <a href="#">一個錨</a> </body> </html> ``` ## 復選框通過 button 部件把復選框顯示為切換按鈕樣式。與復選框相關的 label 元素作為按鈕文本。本實例通過在一個公共的容器上調用 `.buttonset()`，演示了三個顯示為按鈕樣式的復選框。 ``` <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI 按鈕（Button） - 復選框</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"> <script> $(function() { $( "#check" ).button(); $( "#format" ).buttonset(); }); </script> <style> #format { margin-top: 2em; } </style> </head> <body> <input type="checkbox" id="check"><label for="check">切換</label> <div id="format"> <input type="checkbox" id="check1"><label for="check1">B</label> <input type="checkbox" id="check2"><label for="check2">I</label> <input type="checkbox" id="check3"><label for="check3">U</label> </div> </body> </html> ``` ## 圖標一些帶有文本和圖標的各種組合的按鈕 ``` <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI 按鈕（Button） - 圖標</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"> <script> $(function() { $( "button:first" ).button({ icons: { primary: "ui-icon-locked" }, text: false }).next().button({ icons: { primary: "ui-icon-locked" } }).next().button({ icons: { primary: "ui-icon-gear", secondary: "ui-icon-triangle-1-s" } }).next().button({ icons: { primary: "ui-icon-gear", secondary: "ui-icon-triangle-1-s" }, text: false }); }); </script> </head> <body> <button>只帶有圖標的按鈕</button> <button>圖標在左側的按鈕</button> <button>帶有兩個圖標的按鈕</button> <button>帶有兩個圖標且不帶文本的按鈕</button> </body> </html> ``` ## 單選三個單選按鈕轉變為一套按鈕。 ``` <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI 按鈕（Button） - 單選</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"> <script> $(function() { $( "#radio" ).buttonset(); }); </script> </head> <body> <form> <div id="radio"> <input type="radio" id="radio1" name="radio"><label for="radio1">選擇 1</label> <input type="radio" id="radio2" name="radio" checked="checked"><label for="radio2">選擇 2</label> <input type="radio" id="radio3" name="radio"><label for="radio3">選擇 3</label> </div> </form> </body> </html> ``` ## 分割按鈕 ``` <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI 按鈕（Button） - 分割按鈕</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"> <style> .ui-menu { position: absolute; width: 100px; } </style> <script> $(function() { $( "#rerun" ) .button() .click(function() { alert( "Running the last action" ); }) .next() .button({ text: false, icons: { primary: "ui-icon-triangle-1-s" } }) .click(function() { var menu = $( this ).parent().next().show().position({ my: "left top", at: "left bottom", of: this }); $( document ).one( "click", function() { menu.hide(); }); return false; }) .parent() .buttonset() .next() .hide() .menu(); }); </script> </head> <body> <div> <div> <button id="rerun">運行最后的動作</button> <button id="select">選擇一個動作</button> </div> <ul> <li><a href="#">打開...</a></li> <li><a href="#">保存</a></li> <li><a href="#">刪除</a></li> </ul> </div> </body> </html> ``` ## 工具欄一個多媒體播放器的工具欄。請看基礎的標記：一些 button 元素，Shuffle 按鈕是一個類型為 checkbox 的 input，Repeat 選項是三個類型為 radio 的 input。 ``` <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI 按鈕（Button） - 工具欄</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"> <style> #toolbar { padding: 4px; display: inline-block; } /* support: IE7 */ *+html #toolbar { display: inline; } </style> <script> $(function() { $( "#beginning" ).button({ text: false, icons: { primary: "ui-icon-seek-start" } }); $( "#rewind" ).button({ text: false, icons: { primary: "ui-icon-seek-prev" } }); $( "#play" ).button({ text: false, icons: { primary: "ui-icon-play" } }) .click(function() { var options; if ( $( this ).text() === "play" ) { options = { label: "pause", icons: { primary: "ui-icon-pause" } }; } else { options = { label: "play", icons: { primary: "ui-icon-play" } }; } $( this ).button( "option", options ); }); $( "#stop" ).button({ text: false, icons: { primary: "ui-icon-stop" } }) .click(function() { $( "#play" ).button( "option", { label: "play", icons: { primary: "ui-icon-play" } }); }); $( "#forward" ).button({ text: false, icons: { primary: "ui-icon-seek-next" } }); $( "#end" ).button({ text: false, icons: { primary: "ui-icon-seek-end" } }); $( "#shuffle" ).button(); $( "#repeat" ).buttonset(); }); </script> </head> <body> <div id="toolbar" class="ui-widget-header ui-corner-all"> <button id="beginning">開頭</button> <button id="rewind">快退</button> <button id="play">播放</button> <button id="stop">停止</button> <button id="forward">快進</button> <button id="end">結尾</button> <input type="checkbox" id="shuffle"><label for="shuffle">Shuffle</label> <span id="repeat"> <input type="radio" id="repeat0" name="repeat" checked="checked"><label for="repeat0">No Repeat</label> <input type="radio" id="repeat1" name="repeat"><label for="repeat1">Once</label> <input type="radio" id="repeatall" name="repeat"><label for="repeatall">All</label> </span> </div> </body> </html> ``` 'Attr.nodeValue' is deprecated. Please use 'value' instead. adsbygoogle.js:32 href http://www.w3cschool.cc/jqueryui/example-datepicker.html example-datepicker.html:438 tmp_url http://www.w3cschool.cc/jqueryui/example-datepicker.html example-datepicker.html:450 example-button.html jQuery UI 實例 – 按鈕（Button） example-datepicker.html:495 example-dialog.html jQuery UI 實例 – 對話框（Dialog） example-datepicker.html:496