クイックスタート

このクイックスタートでは、Web ページの作成、wijtabs ウィジェットの追加、およびウィジェットの外観と動作のカスタマイズを行うことができます。

テキストエディタで新規の HTML ページを作成するには、下記コードを追加して文章を .html の拡張子で保存します。
ドロップダウンしてマークアップをコピーします
テキストエディタに張り付けます
コードのコピー

<!DOCTYPE HTML> <HTML> <head> </head> <body> </body> </HTML>

テキストエディタに張り付けます	コードのコピー
<!DOCTYPE HTML> <HTML> <head> </head> <body> </body> </HTML>

CDN から最新の依存ファイルを参照するには、wijmo cdnを確認してください。これらを HTML ページの <head> タグ内に追加します。たとえば、次のようになります。

ドロップダウンからリファレンスをコピーして head タグ内に貼り付けます

リファレンス	コードのコピー
<!--jQuery References--> <script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script> <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js" type="text/javascript"></script> <!--Theme--> <link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" /> <!--Wijmo Widgets CSS--> <link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20173.128.min.css" rel="stylesheet" type="text/css" /> <!--Wijmo Widgets JavaScript--> <script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20173.128.min.js" type="text/javascript"></script> <script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20173.128.min.js" type="text/javascript"></script> <script src="http://cdn.wijmo.com/interop/wijmo.data.ajax.3.20173.128.js" type="text/javascript"></script> <!--Knockout JS Library--> <script src="http://cdn.wijmo.com/external/knockout-3.1.0.js" type="text/javascript"></script> <!--Wijmo Knockout Integration Library--> <script src="http://cdn.wijmo.com/interop/knockout.wijmo.3.20173.128.js" type="text/javascript"></script>

<body> タグ内に、次のようにマークアップを追加します。最初の <div> 要素はタブウィジェットを作成し、その id オプションは 'tabs' に設定され、それを jQuery スクリプトに呼び出してウィジェットを初期化します。<ul> 要素は、初期表示される２つのタブに表示するラベルテキストを設定します。ネストされた最初の <div> 要素には、最初のタブに表示するコンテンツが含まれます。ネストされた２番目の <div> 要素には、２番目のタブに表示するコンテンツが含まれます。

ドロップダウンからマークアップをコピーして body タグ内に貼り付けます

マークアップ	コードのコピー
<div id="tabs"> <ul><li><a href="#tabs-1">Blippity Fling-Flang</a> </li> <li><a href="#tabs-2">Blipnoodle</a> </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>

<head> タグ内の参照の下に、次のスクリプトを追加して jQuery ウィジェットを初期化します。

このスクリプトは、タブウィジェットを初期化し、以下のオプションを設定してタブウィジェットをカスタマイズします。

sortable オプションは、ユーザーがタブを新しい位置にドロップすることでタブの順序変更を行えるように true に設定されます。
alignment オプションは、タブがコントロールの上端ではなく、左端に沿って表示されるように 'left' に設定されます。

ドロップダウンからスクリプトをコピーして head タグ内に貼り付けます

<head> タグ内のスクリプトの下に、次のスタイルを追加してダイアログボックスとタブウィジェットのサイズを設定します。
ドロップダウンからスタイルをコピーして head タグ内に貼り付けます
Style
コードのコピー

Type your example code here. It will be automatically colorized when you switch to Preview or build the help system.
HTML ファイルを保存し、それをブラウザで開きます。wijtabs ウィジェットは、次のように表示されます。

関連トピック

参照