demos/tizen-winsets/widgets/splitview.html

   1 <!DOCTYPE html>
   2 <div data-role="page" data-add-back-btn="true">
   3         <div data-role="header" data-position="fixed">
   4                 <h1>SPLITVIEW</h1>
   5         </div>
   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>
  17                                 </ul>
  18                         </div>
  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">
  22                                                 <h4>"Up" pane</h4>
  23                                         </div>
  24                                         <div class="ui-pane" id="down" data-scroll="y">
  25                                                 <h4>"Down" pane</h4>
  26                                         </div>
  27                                 </div>
  28                         </div>
  29                 </div>
  30         </div>
  31         <div data-role="footer">
  32         </div>
  33
  34         <script>
  35         $( document ).ready( function () {
  36                 var mainSplitview = $( ":jqmData(role='splitview'):first" ),
  37                         testSplitview = $( "#test" ),
  38                         fixed = false,
  39                         dividerVertical = false,
  40                         maximize = false;
  41
  42                 $( "#testSetRatio" ).bind( "vclick", function () {
  43                         mainSplitview.splitview( "option", "ratio", [ 0.5, 0.5 ] );
  44                         testSplitview.splitview( "option", "ratio", [ 0.5, 0.5 ] );
  45                 });
  46
  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 ) );
  50                 });
  51
  52                 $( "#testSetConents" ).bind( "vclick", function () {
  53                         var element = $( "<div><h4>Changed \"Up\" pane</h4> Contents changed!!</div>" );
  54                         testSplitview.splitview( "pane", "#up", element );
  55                 });
  56
  57                 $( "#testGetConents" ).bind( "vclick", function () {
  58                         var contents = "",
  59                                 upContents = testSplitview.splitview( "pane", "#up" ),
  60                                 downContents = testSplitview.splitview( "pane", "#down" );
  61
  62                         contents = "* Up pane: \n" +
  63                                                 ( ( typeof upContents === "undefined" || !upContents ) ? "" : upContents[ 0 ].outerHTML ) + "\n" +
  64                                                 "* Down pane: \n" +
  65                                                 ( ( typeof downContents === "undefined" || !downContents ) ? "" : downContents[ 0 ].outerHTML );
  66
  67                         contents = contents.substring(0, 120) + "..." ;
  68                         window.alert( contents );
  69
  70                 });
  71
  72                 $( "#testFixed" ).bind( "vclick", function () {
  73                         fixed = !fixed;
  74                         mainSplitview.splitview( "option", "fixed", fixed );
  75                         testSplitview.splitview( "option", "fixed", fixed );
  76                 });
  77
  78                 $( "#testDirection" ).bind( "vclick", function () {
  79                         dividerVertical = !dividerVertical;
  80                         testSplitview.splitview( "option", "dividerVertical", dividerVertical );
  81                 });
  82
  83                 $( "#testMaximize" ).bind( "vclick", function () {
  84                         maximize = !maximize;
  85                         if ( maximize ) {
  86                                 testSplitview.splitview( "maximize", "#up");
  87                         } else {
  88                                 testSplitview.splitview( "restore" );
  89                         }
  90                 });
  91         });
  92         </script>
  93 </div>