Wijmo UI for the Web
クイックスタート
| Wijmo ユーザーガイド > ウィジェット > Splitter > クイックスタート |
このクイックスタートでは、Web ページの作成、wijsplitter ウィジェットの追加、およびウィジェットの外観と動作のカスタマイズを行うことができます。
ドロップダウンしてマークアップをコピーします
| テキストエディタに張り付けます |
コードのコピー |
|---|---|
<!DOCTYPE HTML> <HTML> <head> </head> <body> </body> </HTML> | |
ドロップダウンからリファレンスをコピーして 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="vsplitter"> <div> Roo oodely shnizzle razzle wacko yap woogle. Blippity Fling-Flang by <a href="http://bff.orangehairedboy.com/">orangehairedboy</a>. </div> <div> <div id="hsplitter"> <div> Blob FRAGGLE nizzleflung, zip wacko zoom doof duh shnuzzle-whack...crangle yap dee! </div> <div> <img src="images\wijmo_footer_tooltip.png"> Blop boo zong-shizzle. Hizzy duh blab yip flap flee doo bizzle? </div> </div> </div> </div> | |
<head> タグ内の参照の下に、次のスクリプトを追加して jQuery ウィジェットを初期化します。
このスクリプトは、両方のスプリッタに複数のスプリッタウィジェットオプションを設定します。
ドロップダウンからスクリプトをコピーして head タグ内に貼り付けます
| スクリプト |
コードのコピー |
|---|---|
<script type="text/javascript"> $(document).ready(function () { $("#vsplitter").wijsplitter({ panel1: {minSize: 50}, fullSplit: false, // The following refresh functions ensure that after resizing // the vertical splitter, each of the horizontal panels shows its // contents correctly. This prevents repainting issues. expanded: function (e) {$("#hsplitter").wijsplitter("refresh");}, collapsed: function (e) {$("#hsplitter").wijsplitter("refresh");}, sized: function (e) {$("#hsplitter").wijsplitter("refresh");} }); $("#hsplitter").wijsplitter({ orientation: "horizontal", fullSplit: true }); }); </script> | |
ドロップダウンからマークアップをコピーして head タグ内に貼り付けます
| スタイル |
コードのコピー |
|---|---|
<style type="text/css"> #vsplitter { height: 300px; width: 630px; } </style> | |
全て展開
すべて折りたたむ