源代碼
點擊運行
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery UI 標籤頁(Tabs) - 簡單的操作</title> <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css"> <script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <link rel="stylesheet" href="/try/demo_source/jqueryui/style.css"> <style> #dialog label, #dialog input { display:block; } #dialog label { margin-top: 0.5em; } #dialog input, #dialog textarea { width: 95%; } #tabs { margin-top: 1em; } #tabs li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; } #add_tab { cursor: pointer; } </style> <script> $(function() { var tabTitle = $( "#tab_title" ), tabContent = $( "#tab_content" ), tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>", tabCounter = 2; var tabs = $( "#tabs" ).tabs(); // 模態對話框的初始化:自定義按鈕和一個重置內部表單的 "close" 回調 var dialog = $( "#dialog" ).dialog({ autoOpen: false, modal: true, buttons: { Add: function() { addTab(); $( this ).dialog( "close" ); }, Cancel: function() { $( this ).dialog( "close" ); } }, close: function() { form[ 0 ].reset(); } }); // addTab 表單:當提交時調用 addTab 函數,併關閉對話框 var form = dialog.find( "form" ).submit(function( event ) { addTab(); dialog.dialog( "close" ); event.preventDefault(); }); // 實際的 addTab 函數:使用上面表單的輸入添加新的標籤頁 function addTab() { var label = tabTitle.val() || "Tab " + tabCounter, id = "tabs-" + tabCounter, li = $( tabTemplate.replace( /#{href}/g, "#" + id ).replace( /#{label}/g, label ) ), tabContentHtml = tabContent.val() || "Tab " + tabCounter + " content."; tabs.find( ".ui-tabs-nav" ).append( li ); tabs.append( "<div id='" + id + "'><p>" + tabContentHtml + "</p></div>" ); tabs.tabs( "refresh" ); tabCounter++; } // addTab 按鈕:值打開對話框 $( "#add_tab" ) .button() .click(function() { dialog.dialog( "open" ); }); // 關閉圖標:當點擊時移除標籤頁 tabs.delegate( "span.ui-icon-close", "click", function() { var panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" ); $( "#" + panelId ).remove(); tabs.tabs( "refresh" ); }); tabs.bind( "keyup", function( event ) { if ( event.altKey && event.keyCode === $.ui.keyCode.BACKSPACE ) { var panelId = tabs.find( ".ui-tabs-active" ).remove().attr( "aria-controls" ); $( "#" + panelId ).remove(); tabs.tabs( "refresh" ); } }); }); </script> </head> <body> <div id="dialog" title="Tab data"> <form> <fieldset class="ui-helper-reset"> <label for="tab_title">標題</label> <input type="text" name="tab_title" id="tab_title" value="" class="ui-widget-content ui-corner-all"> <label for="tab_content">內容</label> <textarea name="tab_content" id="tab_content" class="ui-widget-content ui-corner-all"></textarea> </fieldset> </form> </div> <button id="add_tab">添加標籤頁</button> <div id="tabs"> <ul> <li><a href="#tabs-1">Nunc tincidunt</a> <span class="ui-icon ui-icon-close" role="presentation">移除標籤頁</span></li> </ul> <div id="tabs-1"> <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p> </div> </div> </body> </html>
運行結果