2 <div data-role="page" data-add-back-btn="true">
3 <div data-role="header" data-position="fixed">
6 <div data-role="content">
7 <div data-role="splitview" data-divider-vertical="true" data-fixed="false" data-ratio="0.5, 0.5">
8 <div class="ui-pane" id="menu" data-scroll="y">
9 <ul data-role="listview">
10 <li><a id="testSetRatio"><h2>Ratio setting</h2></a></li>
11 <li><a id="testGetRatio"><h2>Current ratio</h2></a></li>
12 <li><a id="testSetConents"><h2>Set contents of "Up"</h2></a></li>
13 <li><a id="testGetConents"><h2>Get contents</h2></a></li>
14 <li><a id="testFixed"><h2>Fixed / Flexible</h2></a></li>
15 <li><a id="testDirection"><h2>divider: Vertical / Horizontal</h2></a></li>
16 <li><a id="testMaximize"><h2>Maximize "Up" / Restore</h2></a></li>
19 <div class="ui-pane" id="main" data-scroll="y">
20 <div id="test" data-role="splitview" data-divider-vertical="false" data-ratio="0.6, 0.4">
21 <div class="ui-pane" id="up" data-scroll="y">
24 <div class="ui-pane" id="down" data-scroll="y">
31 <div data-role="footer">
35 $( document ).ready( function () {
36 var mainSplitview = $( ":jqmData(role='splitview'):first" ),
37 testSplitview = $( "#test" ),
39 dividerVertical = false,
42 $( "#testSetRatio" ).bind( "vclick", function () {
43 mainSplitview.splitview( "option", "ratio", [ 0.5, 0.5 ] );
44 testSplitview.splitview( "option", "ratio", [ 0.5, 0.5 ] );
47 $( "#testGetRatio" ).bind( "vclick", function () {
48 var ratio = testSplitview.splitview( "option", "ratio" );
49 window.alert( "Up : Down = \n" + ratio[ 0 ].toFixed( 2 ) + " : " + ratio[ 1 ].toFixed( 2 ) );
52 $( "#testSetConents" ).bind( "vclick", function () {
53 var element = $( "<div><h4>Changed \"Up\" pane</h4> Contents changed!!</div>" );
54 testSplitview.splitview( "pane", "#up", element );
57 $( "#testGetConents" ).bind( "vclick", function () {
59 upContents = testSplitview.splitview( "pane", "#up" ),
60 downContents = testSplitview.splitview( "pane", "#down" );
62 contents = "* Up pane: \n" +
63 ( ( typeof upContents === "undefined" || !upContents ) ? "" : upContents[ 0 ].outerHTML ) + "\n" +
65 ( ( typeof downContents === "undefined" || !downContents ) ? "" : downContents[ 0 ].outerHTML );
67 contents = contents.substring(0, 120) + "..." ;
68 window.alert( contents );
72 $( "#testFixed" ).bind( "vclick", function () {
74 mainSplitview.splitview( "option", "fixed", fixed );
75 testSplitview.splitview( "option", "fixed", fixed );
78 $( "#testDirection" ).bind( "vclick", function () {
79 dividerVertical = !dividerVertical;
80 testSplitview.splitview( "option", "dividerVertical", dividerVertical );
83 $( "#testMaximize" ).bind( "vclick", function () {
86 testSplitview.splitview( "maximize", "#up");
88 testSplitview.splitview( "restore" );