動的タブの作成

クイックスタートの例に基づき、Dialog ウィジェットと共に add メソッドと tabTemplate オプションを使用して、動的タブを作成できます。remove メソッドと CSS スタイルクラス "ui-icon-close" を使用して、タブを削除するボタンを提供できます。

このウィジェットに用意されているすべての CSS スタイル要素のリストについては、インストールフォルダで Wijmo の下にある wijtabs フォルダを開き、jquery.wijmo.wijtabs.css ファイルを参照してください。

Dialog ウィジェットに用意されているすべての CSS スタイル要素のリストについては、インストールフォルダで Wijmo の下にある wijdialog フォルダを開き、jquery.wijmo.wijdialog.css ファイルを参照してください。

HTML ファイルの <head> セクションで、ドキュメントの ready 関数を含むスクリプトを次のスクリプトに置き換えます。このスクリプトは、タブウィジェットを初期化し、タブウィジェットオプションを設定し、タブの追加関数を作成し、Dialog ウィジェットを初期化してカスタマイズします。

タブウィジェットとタブ追加関数

タブを新しい位置までドラッグしてタブの順序を変更できるように、sortable オプションを true に設定します。
ダイアログボックスから値を取得するようにタブタイトルとタブコンテンツを設定します。
既存の２つのタブの後の３番目の位置にタブを追加するようにタブカウンタを設定します。
<li> 要素を使用してタブをレンダリングするように tabTemplate を設定します。
呼び出されたときにウィジェットに新しいタブを追加するための add 関数を作成します。

ダイアログウィジェット

ボタンをクリックしたときにだけダイアログボックスが開くように、autoOpen オプションを false に設定します。
ダイアログボックスが閉じるまでページの他の部分が無効になるように、modal オプションを true に設定します。
ダイアログボックスに［Add］および［Cancel］ボタンを追加し、open 関数と close 関数を設定します。
ダイアログを addTab 関数に接続します。
カウンタとダイアログボックスから情報を収集するように addTab 関数を設定します。
ダイアログボックスを開くように［Add Tab］ボタンを設定します。
クリックされたらタブを削除するように閉じるアイコンを設定します。

ドロップダウンからスクリプトをコピーして、<head> セクション内に貼り付けます

スクリプト	コードのコピー
<script type="text/javascript"> $(document).ready(function () { $("#tabs").wijtabs({ sortable: true }); }); $(document).ready(function () { var $tab_title_input = $('#tab_title'), $tab_content_input = $('#tab_content'); var tab_counter = 3; // tabs initialize with a custom tab template and an "add" callback that fills in the content var $tabs = $('#tabs').wijtabs({ tabTemplate: '<li><a href="#{href}">#{label}</a> <span class="ui-icon ui-icon-close">Remove Tab</span></li>', add: function (event, ui) { var tab_content = $tab_content_input.val() \|\| 'Tab ' + tab_counter + ' content.'; $(ui.panel).append('<p>' + tab_content + '</p>'); } }); // modal dialog box initializes with custom buttons and a "close" callback that resets the form inside var $dialog = $('#dialog').wijdialog({ autoOpen: false, modal: true, buttons: { 'Add': function () {addTab(); $(this).wijdialog('close');}, 'Cancel': function () {$(this).wijdialog('close');} }, open: function () {$tab_title_input.focus();}, close: function () {$form.find('input').val("").end().find('textarea').val("");} }); // addTab form: calls the addTab function on submit and closes the dialog box var $form = $('fieldset', $dialog).submit(function () { addTab(); $dialog.wijdialog('close'); return false; }); // actual addTab function: adds a new tab using the title input from the form above function addTab() { var tab_title = $tab_title_input.val() \|\| 'Tab ' + tab_counter; $tabs.wijtabs('add', '#tabs-' + tab_counter, tab_title); tab_counter++; } // addTab button: opens the Add tab dialog box $('#add_tab') .button() .click(function () { $dialog.wijdialog('open'); }); // close icon: removes the tab on click $('#tabs').on('click', 'span.ui-icon-close', function () { var index = $('li', $tabs).index($(this).parent()); $tabs.wijtabs('remove', index); }); }); </script>

スクリプト

コードのコピー

<script type="text/javascript">
     $(document).ready(function () {
          $("#tabs").wijtabs({ sortable: true });
     });
 
     $(document).ready(function () {
          var $tab_title_input = $('#tab_title'), $tab_content_input = $('#tab_content');
          var tab_counter = 3;
 
          // tabs initialize with a custom tab template and an "add" callback that fills in the content
          var $tabs = $('#tabs').wijtabs({
               tabTemplate: '<li><a href="#{href}">#{label}</a> <span class="ui-icon ui-icon-close">Remove Tab</span></li>',
               add: function (event, ui) {
                    var tab_content = $tab_content_input.val() || 'Tab ' + tab_counter + ' content.';
                    $(ui.panel).append('<p>' + tab_content + '</p>');
                    }
          });
 
     // modal dialog box initializes with custom buttons and a "close" callback that resets the form inside
     var $dialog = $('#dialog').wijdialog({
          autoOpen: false,
          modal: true,
          buttons: {
                    'Add': function () {addTab(); $(this).wijdialog('close');},
                    'Cancel': function () {$(this).wijdialog('close');}
                    },
          open: function () {$tab_title_input.focus();},
          close: function () {$form.find('input').val("").end().find('textarea').val("");}
     });
 
     // addTab form: calls the addTab function on submit and closes the dialog box
     var $form = $('fieldset', $dialog).submit(function () {
          addTab();
          $dialog.wijdialog('close');
          return false;
     });
 
     // actual addTab function: adds a new tab using the title input from the form above
     function addTab() {
          var tab_title = $tab_title_input.val() || 'Tab ' + tab_counter;
          $tabs.wijtabs('add', '#tabs-' + tab_counter, tab_title);
          tab_counter++;
     }
 
     // addTab button: opens the Add tab dialog box
     $('#add_tab')
          .button()
          .click(function () {
               $dialog.wijdialog('open');
          });
 
     // close icon: removes the tab on click
     $('#tabs').on('click', 'span.ui-icon-close', function () {
          var index = $('li', $tabs).index($(this).parent());
          $tabs.wijtabs('remove', index);
          });
     });
</script>

HTML ファイルの <body> セクションで、基本のマークアップを、ボタンを含む次のマークアップに置き換えます。最初の <div> 要素は、タブウィジェットを作成します。その id オプションは 'tabs' に設定され、これを jQuery スクリプトで呼び出してウィジェットを初期化します。<ul> 要素は、初期表示される２つのタブに表示するラベルテキストを設定し、それぞれに［Remove Tab］ボタンを追加します。ネストされた最初の <div> 要素には、最初のタブに表示するコンテンツが含まれます。ネストされた２番目の <div> 要素には、２番目のタブに表示するコンテンツが含まれます。もう１つの <div> 要素は、ユーザーが独自のタブを設定できるようにダイアログボックスを追加し、最後に <input> 要素がダイアログボックスを呼び出すボタンを追加します。

ドロップダウンからマークアップをコピーして、<body> セクション内に貼り付けます

マークアップ	コードのコピー
<div id="tabs"> <ul> <li><a href="#tabs-1">Blippity Fling-Flang</a> <span class="ui-icon ui-icon-close">Remove Tab</span></li> <li><a href="#tabs-2">Blipnoodle</a> <span class="ui-icon ui-icon-close">Remove Tab</span></li></ul> <div id="tabs-1"> <p> Ho ha a doof cringlezowee bloo bing a dizzle flop yap dizzlenizzle zap boo flungwhack shnizzlegobble ho a blop bing bangflib yap boo weeble. Boo wacko ho dabba Ongle Fling ha bing ho wow a flap-boo-plop jingle funkzonk ho blatwiddle, nip dinglezoom duh dabba Shnizzlegobble blip, shnizzlegobble blip, wuggle ho zong bang flungwhack Razzbleeb. Wugglewheezer shnozingle dang blingdoof meep boo flong, flubzongle zap shnozzleflip, flubzongle yap wibblezowee (dazzleshnaz dazzle bla boo bang). <a href="http://bff.orangehairedboy.com/"> Blippity Fling-Flang by orangehairedboy</a></p> </div> <div id="tabs-2"> <p> Zip abracadabra bananaramaflup. Zip flunging dang boo bang yip zangle. Loo flupping funky zunkity roo tizzle boo twiddling flungfloo. Flobble jingle ting nip nizzle bleep dang yip zingle. "Duh zonk ho?" razz Tony Soprano. Miss Beasley zap blang loo zonk dingely dilznoofustwiddle. "Ho izzle dee?" bloo You. Blap ho flipping meepwow.</p> </div> </div> <div id="dialog" title="Add tab"> <fieldset class="ui-helper-reset"> <label for="tab_title"> Title</label> <input type="text" name="tab_title" id="tab_title" value="" class="ui-widget-content ui-corner-all" /> <label for="tab_content"> Content</label> <textarea name="tab_content" id="tab_content" class="ui-widget-content ui-corner-all" cols="" rows=""></textarea> </fieldset> </div> <input id="add_tab" type="button" value="Add Tab" />

HTML ファイルの <head> セクションで、スタイルを次のスタイルに置き換えます。これは、ダイアログと閉じるボタンのスタイルを設定します。

ドロップダウンからスタイルをコピーして、<head> セクション内に貼り付けます

HTML ファイルを保存し、それをブラウザで開きます。実際のウィジェットは次のように表示されます。［Add Tab］ボタンをクリックすると、ダイアログが開き、タブを追加できます。タブの隅にある［×］ボタンをクリックすると、タブが削除されます。

タブウィジェットとタブ追加関数

ダイアログウィジェット

関連トピック

参照