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" href="#splitview_popup" data-rel="popup" data-position-to="window"><h2>Current ratio</h2></a></li>
  12                                         <li><a id="testSetContents"><h2>Set contents of "Up"</h2></a></li>
  13                                         <li><a id="testGetContents" href="#splitview_popup" data-rel="popup" data-position-to="window"><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
  30                         <div id="splitview_popup" data-role="popup" class="splitview-popup">
  31                                 <div class="ui-popup-text">
  32                                 </div>
  33                         </div>
  34                 </div>
  35         </div>
  36         <div data-role="footer">
  37         </div>
  38
  39         <script>
  40         $( document ).ready( function () {
  41                 var mainSplitview = $( ":jqmData(role='splitview'):first" ),
  42                         testSplitview = $( "#test" ),
  43                         fixed = false,
  44                         dividerVertical = false,
  45                         maximize = false;
  46
  47                 $( "#testSetRatio" ).bind( "vclick", function () {
  48                         mainSplitview.splitview( "option", "ratio", [ 0.5, 0.5 ] );
  49                         testSplitview.splitview( "option", "ratio", [ 0.5, 0.5 ] );
  50                 });
  51
  52                 $( "#testGetRatio" ).bind( "vclick", function () {
  53                         var ratio = testSplitview.splitview( "option", "ratio" );
  54                         $( ".splitview-popup" ).text( "Up : Down = \n" + ratio[ 0 ].toFixed( 2 ) + " : " + ratio[ 1 ].toFixed( 2 ) );
  55                 });
  56
  57                 $( "#testSetContents" ).bind( "vclick", function () {
  58                         var element = $( "<div><h4>Changed \"Up\" pane</h4> Contents changed!!</div>" );
  59                         testSplitview.splitview( "pane", "#up", element );
  60                 });
  61
  62                 $( "#testGetContents" ).bind( "vclick", function () {
  63                         var contents = "",
  64                                 upContents = testSplitview.splitview( "pane", "#up" ),
  65                                 downContents = testSplitview.splitview( "pane", "#down" );
  66
  67                         contents = "* Up pane: \n" +
  68                                                 ( ( typeof upContents === "undefined" || !upContents ) ? "" : upContents[ 0 ].outerHTML ) + "\n" +
  69                                                 "* Down pane: \n" +
  70                                                 ( ( typeof downContents === "undefined" || !downContents ) ? "" : downContents[ 0 ].outerHTML );
  71
  72                         contents = contents.substring(0, 120) + "..." ;
  73                         $( ".splitview-popup" ).text( contents );
  74
  75                 });
  76
  77                 $( "#testFixed" ).bind( "vclick", function () {
  78                         fixed = !fixed;
  79                         mainSplitview.splitview( "option", "fixed", fixed );
  80                         testSplitview.splitview( "option", "fixed", fixed );
  81                 });
  82
  83                 $( "#testDirection" ).bind( "vclick", function () {
  84                         dividerVertical = !dividerVertical;
  85                         testSplitview.splitview( "option", "dividerVertical", dividerVertical );
  86                 });
  87
  88                 $( "#testMaximize" ).bind( "vclick", function () {
  89                         maximize = !maximize;
  90                         if ( maximize ) {
  91                                 testSplitview.splitview( "maximize", "#up");
  92                         } else {
  93                                 testSplitview.splitview( "restore" );
  94                         }
  95                 });
  96         });
  97         </script>
  98 </div>