diff options
author | Minkyu Kang <mk7.kang@samsung.com> | 2012-09-10 17:04:29 +0900 |
---|---|---|
committer | Minkyu Kang <mk7.kang@samsung.com> | 2012-09-10 17:04:29 +0900 |
commit | f3bc06001f660ef156e0895f4be1e81a0ac99502 (patch) | |
tree | 4319859b727600c6d8382b95e68a0c0d52cf38f0 /demos/tizen-winsets/index.html | |
parent | b087adb7b7df900f9656425e5cea9dc7abdf935b (diff) | |
download | web-ui-fw-f3bc06001f660ef156e0895f4be1e81a0ac99502.tar.gz web-ui-fw-f3bc06001f660ef156e0895f4be1e81a0ac99502.tar.bz2 web-ui-fw-f3bc06001f660ef156e0895f4be1e81a0ac99502.zip |
Revert "Export"
This reverts commit b087adb7b7df900f9656425e5cea9dc7abdf935b.
Diffstat (limited to 'demos/tizen-winsets/index.html')
-rwxr-xr-x | demos/tizen-winsets/index.html | 1152 |
1 files changed, 1152 insertions, 0 deletions
diff --git a/demos/tizen-winsets/index.html b/demos/tizen-winsets/index.html new file mode 100755 index 00000000..85506cfa --- /dev/null +++ b/demos/tizen-winsets/index.html @@ -0,0 +1,1152 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8" > + <script src="tizen-web-ui-fw/latest/js/jquery.js"></script> + <script src="configure.js"></script> + <script src="tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.js"></script> + <script src="tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js" + data-framework-theme="tizen-white" + data-framework-viewport-scale=false> + </script> + <script src="main.js"></script> + <link rel="stylesheet" href="custom.css" /> + + <title>Tizen UI</title> + + <!-- for compatibility test --> + <meta name="apple-mobile-web-app-capable" content="yes" /> + <meta name="apple-mobile-web-app-status-bar-style" content="black" /> + <link rel="apple-touch-icon" href="icon-tizen.png" /> + <link rel="stylesheet" href="./widgets/grid/css/namecard.css" /> +</head> + +<body> + <div data-role="page"> + <div data-role="header" data-position="fixed"> + <h1>Tizen UI</h1> + </div> + <div data-role="content"> + <p id="current_date"></p> + <p id="html_font_size"></p> + <fieldset data-role="controlgroup" id="input-select-theme"> + <legend>Select theme</legend> + <input type="radio" name="select-theme" id="select-theme-tizen-black" value="tizen-black"/> + <label for="select-theme-tizen-black">tizen-black</label> + <input type="radio" name="select-theme" id="select-theme-tizen-white" value="tizen-white" checked="true" /> + <label for="select-theme-tizen-white">tizen-white</label> + </fieldset> + <script> + $( document ).one( "pagecreate", function ( ) { + $("#input-select-theme").find("input[name='select-theme']").bind( "change", + function ( ev, data ) { + var radio = this, + theme = "tizen-white"; + if( radio.checked ) { + theme = radio.value; + console.log( "Request theme change: " + theme ); + $.tizen.loadTheme( theme ); + } + } + ); + } ); + </script> + <ul data-role="listview" data-icon="1line-textonly"> + <li data-role="list-divider">Controls</li> + <li><a href="widgets/button/button.html">Button</a></li> + <li><a href="widgets/checkbox/checkbox.html">Check</a></li> + <li><a href="widgets/switch/switch.html">Switch</a></li> + <li><a href="widgets/radio/radio.html">Radio</a></li> + <li><a href="widgets/colorpicker.html">Color picker</a></li> + <li><a href="widgets/datefield.html">Time picker</a></li> + <li><a href="widgets/progressbar.html">Progressbar</a></li> + <li><a href="widgets/entry.html">Entry</a></li> + <li><a href="widgets/searchbar.html">Searchbar</a></li> + <li><a href="#slider-demo">Slider</a></li> + <li><a href="widgets/day-selector.html" >Day Selector</a></li> + <li><a href="#NavigationbarMain">Navigation Bar</a></li> + <li><a href="widgets/imageslider.html">ImageSlider</a></li> + <li><a href="widgets/pagecontrol/pagecontrol.html">PageControl</a></li> + <li><a href="widgets/selectioninfo.html">SelectionInfo</a></li> + <li><a href="widgets/handler.html">Handler</a></li> + <li><a href="widgets/scroll_jump.html">Scroll Jump</a></li> + <li><a href="#multibuttonentry">Multi-Button Entry</a></li> + <li data-role="list-divider">ControlBar</li> + <li><a href="#controlbar-demo">ControlBar</a></li> + + <li data-role="list-divider">List</li> + <li><a href="widgets/list/list.html">List</a></li> + <li><a href="widgets/auto-dividers.html">Auto-Dividers</a></li> + <li><a href="widgets/fast-scroll.html">Short cut scroll (aka fast-scroll)</a></li> + + <li data-role="list-divider">Navigation Bar</li> + <li><a href="widgets/segmentctrl.html">Segment Control</a></li> + <li><a href="#option-header-demo">Optional Header</a></li> + + <li data-role="list-divider">Popup</li> + <li><a href="widgets/popupwindow/popup.html">Popup</a></li> + <li><a href="widgets/ctxpopup.html">CxtPopup</a></li> + + <li data-role="list-divider">Notification (ticker)</li> + <li><a href="widgets/tickernoti.html">TickerNoti</a></li> + <li><a href="widgets/small-popup.html">Small Popup</a></li> + + <li data-role="list-divider">No Contents</li> + <li><a href="#no-contents-0">No Contents - Text</a></li> + <li><a href="#no-contents-1">No Contents - Picture</a></li> + <li><a href="#no-contents-2">No Contents - Multimedia</a></li> + <li><a href="#no-contents-3">No Contents - Unnamed</a></li> + + <li data-role="list-divider">Grid view</li> + <li><a href="widgets/grid/virtualgrid.html">Virtual Grid</a></li> + <li><a href="widgets/grid/virtualgrid-rotation.html">Virtual Grid - Rotation</a></li> + <li><a href="widgets/grid/virtualgrid-list.html">Virtual Grid - List</a></li> + <li><a href="widgets/grid/virtualgrid-x.html">Virtual Grid - X</a></li> + <li><a href="widgets/grid/virtualgrid-auto.html">Virtual Grid - Auto</a></li> + <li data-role="list-divider">Multimedia view</li> + <li><a href="widgets/multimediaview/multimediaview.html">Multimedia view</a></li> + <li data-role="list-divider">PageLayout</li> + <li><a href="widgets/pagelayout/barcontrol.html">Header/Footer(fixed/non-fixed) Control</a></li> + <li><a href="widgets/pagelayout/backbutton-control.html">Back Button Control</a></li> + + <li data-role="list-divider">Programming Tips</li> + <li><a href="tips/generate-elements-dynamically.html">Generate Elements by JS</a></li> + <li><a href="tips/custom-globalize-culture/custom-globalize-culture.html">Using custom Globalize culture files</a></li> + <li><a href="tips/two-line-text/two-line-text.html">2 line text</a></li> + <li><a href="tips/list-sample/list-sample.html">Example for using listview</a></li> + <li><a href="tips/list-sample/expandable.html">Example for using expandable list</a></li> + <li><a href="tips/page-transition/transition.html">Page transitions</a></li> + + + + </ul> + </div> + </div> + + <div data-role="page" id="notImplemented"> + <div data-role="header" data-position="fixed"> + <h1>Not Implemented</h1> + </div> + <div data-role="content"> + <p> Not Implemented </p> + </div> + </div> + + <div data-role="page" id="slider-demo" data-add-back-btn="true"> + <div data-role="header" data-position="fixed"> + <h1>Slider</h1> + </div> + <div data-role="content"> + <ul data-role="listview"> + <li data-role="list-divider">Normal Slider</li> + <li><input id="mySlider" name="mySlider" data-popup='false' type="range" name="slider" value="5" min="0" max="10" /></li> + <li data-role="list-divider">Popup Slider</li> + <li><input id="mySlider2" name="mySlider2" type="range" value="50" min="0" max="100" /></li> + <li data-role="list-divider">Icon Slider</li> + <li><input id="mySlider3" name="mySlider3" data-popup='false' type="range" name="slider" value="5" min="0" max="10" data-icon='bright'/></li> + <li><input id="mySlider4" name="mySlider4" data-popup='false' type="range" name="slider" value="5" min="0" max="10" data-icon='volume'/></li> + <li data-role="list-divider">Text Slider</li> + <li><input id="mySlider5" name="mySlider5" data-popup='false' type="range" name="slider" value="50" min="0" max="99" data-icon='text' data-text-left='0' data-text-right='99'/></li> + <li><input id="mySlider5" name="mySlider5" data-popup='false' type="range" name="slider" value="5" min="0" max="10" data-icon='text' data-text-left='Min' data-text-right='Max'/></li> + </ul> + </div><!-- /content --> + </div> <!-- /page --> + + <div data-role="page" id="option-header-demo" data-add-back-btn="true"> + <div data-role="header" data-position="fixed"> + <h1>Optional Header</h1> + </div> + <div data-role="content"> + <ul data-role="listview" data-icon="1line-textonly"> + <li><a href="#optionheader1line2btn">1 line 2 buttons</a></li> + <li><a href="#optionheader1line3btn">1 line 3 buttons</a></li> + <li><a href="#optionheader1line4btn">1 line 4 buttons</a></li> + </ul> + </div> + </div> + + <div data-role="page" id="optionheader1line2btn" data-add-back-btn="true"> + <div data-role="header" data-position="fixed"> + + <h1>Option header</h1> + <a id="123">TestBtn</a> + <a id="opt_text" data-icon="optiontray"></a> + <a id="1234">TestBtn</a> + + <div id="myoptionheader1" data-role="optionheader" data-for="opt_text"> + <div class="ui-grid-a "> + <div class="ui-block-a"><a data-role="button">Save</a></div> + <div class="ui-block-b"><a data-role="button">Next</a></div> + </div> + </div> + </div> + <div data-role="content"> + <p>Some content would be here</p> + </div> + </div> + + <div data-role="page" id="optionheader1line3btn" data-add-back-btn="true"> + <div data-role="header" data-position="fixed"> + <h1>Option header - 3 buttons</h1> + <div id="myoptionheader2" data-role="optionheader"> + <div class="ui-grid-b "> + <div class="ui-block-a"><a data-role="button">Previous</a></div> + <div class="ui-block-b"><a data-role="button">Cancel</a></div> + <div class="ui-block-c"><a data-role="button">Save</a></div> + </div> + </div> + </div> + <div data-role="content"> + <p>Some content would be here</p> + </div> + </div> + + <div data-role="page" id="optionheader1line4btn" data-add-back-btn="true"> + <div data-role="header" data-position="fixed"> + <h1>Option header - 4 buttons</h1> + <div id="myoptionheader3" data-role="optionheader"> + <div class="ui-grid-c "> + <div class="ui-block-a"><a data-role="button">Previous</a></div> + <div class="ui-block-b"><a data-role="button">Cancel</a></div> + <div class="ui-block-c"><a data-role="button">Save</a></div> + <div class="ui-block-d"><a data-role="button">Next</a></div> + </div> + </div> + </div> + <div data-role="content"> + <p>Some content would be here</p> + </div> + </div> + + <div data-role="page" id="controlbar-demo" data-add-back-btn="true"> + <div data-role="header" data-position="fixed"> + <h1>ControlBar</h1> + </div> + <div data-role="content"> + <div class="content-primary"> + <ul data-role="listview"> + <li><a href="#Tabbar_Main">Tabbar Style</a></li> + <li><a href="#Toolbar">Toolbar Style</a></li> + </ul> + </div><!--/content-primary --> + </div> + </div> + + <!-- ControlBar Tabbar Style --> + <div data-role="page" id="Tabbar_Main"> + <div data-role="header" data-position="fixed"> + <h1>Tabbar</h1> + </div> + <div data-role="content"> + <div class="content-primary"> + <ul data-role="listview"> + <li><a href="#TabbarInHeader">Tabbar in Header</a></li> + <li><a href="#Tabbar2Items">2 Items Style</a></li> + <li><a href="#Tabbar3Items">3 Items Style</a></li> + <li><a href="#Tabbar4Items">4 Items Style</a></li> + <li><a href="#Tabbar5Items">5 Items Style</a></li> + <li><a href="#TabbarText">Only Text Style</a></li> + <li><a href="#TabbarIcon">Only Icon Style</a></li> + </ul> + </div><!--/content-primary --> + </div> + <div data-role="footer"data-position ="fixed"> + <div data-role="controlbar" data-style="tabbar" > + <ul> + <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li> + <li><a href="#" data-icon="ctrlbar-save" >Save</a></li> + <li><a href="#" data-icon="ctrlbar-share" >Share</a></li> + <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li> + <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li> + </ul> + </div> + </div> + </div> + <div data-role="page" id="TabbarInHeader"> + <div data-role="header" data-position="fixed"> + <div data-role="controlbar" data-style="tabbar" > + <ul> + <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li> + <li><a href="#" data-icon="ctrlbar-save" >Save</a></li> + <li><a href="#" data-icon="ctrlbar-share" >Share</a></li> + <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li> + <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li> + </ul> + </div><!-- /navbar --> + </div> + <div data-role="content"> + <div class="content-primary"> + <ul data-role="listview"> + <li><a href="#">Test</a></li> + </ul> + </div><!--/content-primary --> + </div> + <div data-role="footer"data-position ="fixed"> + </div> + </div> + <div data-role="page" id="Tabbar2Items"> + <div data-role="header" data-position="fixed"> + <h1>Tabbar</h1> + </div> + <div data-role="content"> + <div class="content-primary"> + <ul data-role="listview"> + <li><a href="#">2 Items Style List</a></li> + </ul> + </div><!--/content-primary --> + </div> + <div data-role="footer"data-position ="fixed"> + <div data-role="controlbar" data-style="tabbar" > + <ul> + <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li> + <li><a href="#" data-icon="ctrlbar-save" >Save</a></li> + </ul> + </div><!-- /controlbar --> + </div> + </div> + + <div data-role="page" id="Tabbar3Items"> + <div data-role="header" data-position="fixed"> + <h1>Tabbar</h1> + </div> + <div data-role="content"> + <div class="content-primary"> + <ul data-role="listview"> + <li><a href="#">3 Items Style List</a></li> + </ul> + </div><!--/content-primary --> + </div> + <div data-role="footer"data-position ="fixed"> + <div data-role="controlbar" data-style="tabbar" > + <ul> + <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li> + <li><a href="#" data-icon="ctrlbar-save" >Save</a></li> + <li><a href="#" data-icon="ctrlbar-share" >Share</a></li> + </ul> + </div><!-- /controlbar --> + </div> + </div> + + <div data-role="page" id="Tabbar4Items"> + <div data-role="header" data-position="fixed"> + <h1>Tabbar</h1> + </div> + <div data-role="content"> + <div class="content-primary"> + <ul data-role="listview"> + <li><a href="#">4 Items Style List</a></li> + </ul> + </div><!--/content-primary --> + </div> + <div data-role="footer"data-position ="fixed"> + <div data-role="controlbar" data-style="tabbar" > + <ul> + <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li> + <li><a href="#" data-icon="ctrlbar-save" >Save</a></li> + <li><a href="#" data-icon="ctrlbar-share" >Share</a></li> + <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li> + </ul> + </div><!-- /controlbar --> + </div> + </div> + + <div data-role="page" id="Tabbar5Items"> + <div data-role="header" data-position="fixed"> + <h1>Tabbar</h1> + </div> + <div data-role="content"> + <div class="content-primary"> + <ul data-role="listview"> + <li><a href="#">5 Items Style List</a></li> + </ul> + </div><!--/content-primary --> + </div> + <div data-role="footer"data-position ="fixed"> + <div data-role="controlbar" data-style="tabbar" > + <ul> + <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li> + <li><a href="#" data-icon="ctrlbar-save" >Save</a></li> + <li><a href="#" data-icon="ctrlbar-share" >Share</a></li> + <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li> + <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li> + </ul> + </div><!-- /controlbar --> + </div> + </div> + + <div data-role="page" id="TabbarText"> + <div data-role="header" data-position="fixed"> + <h1>Tabbar</h1> + </div> + <div data-role="content"> + <div class="content-primary"> + <ul data-role="listview"> + <li><a href="#">Text Style List</a></li> + </ul> + </div><!--/content-primary --> + </div> + <div data-role="footer"data-position ="fixed"> + <div data-role="controlbar" data-style="tabbar" > + <ul> + <li><a href="#" class="ui-btn-active">Songs</a></li> + <li><a href="#">Favorites</a></li> + <li><a href="#">Group</a></li> + <li><a href="#">Message</a></li> + <li><a href="#">Contact</a></li> + </ul> + </div><!-- /controlbar --> + </div> + </div> + + <div data-role="page" id="TabbarIcon"> + <div data-role="header" data-position="fixed"> + <h1>Tabbar</h1> + </div> + <div data-role="content"> + <div class="content-primary"> + <ul data-role="listview"> + <li><a href="#">Icon Style List</a></li> + </ul> + </div><!--/content-primary --> + </div> + <div data-role="footer"data-position ="fixed"> + <div data-role="controlbar" data-style="tabbar" > + <ul> + <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active"></a></li> + <li><a href="#" data-icon="ctrlbar-save" ></a></li> + <li><a href="#" data-icon="ctrlbar-share" ></a></li> + <li><a href="#" data-icon="ctrlbar-timeline" ></a></li> + <li><a href="#" data-icon="ctrlbar-world_clock" ></a></li> + </ul> + </div><!-- /controlbar --> + </div> + </div> + + <!-- Toolbar Style --> + <div data-role="page" id="Toolbar"> + <div data-role="header" data-position="fixed"> + <h1>Toolbar</h1> + </div> + <div data-role="content"> + <div class="content-primary"> + <ul data-role="listview"> + <li><a href="#ToolbarInHeader">Toolbar in Header</a></li> + <li><a href="#Toolbar2Items">2 Items Style</a></li> + <li><a href="#Toolbar3Items">3 Items Style</a></li> + <li><a href="#Toolbar4Items">4 Items Style</a></li> + <li><a href="#Toolbar5Items">5 Items Style</a></li> + <li><a href="#ToolbarText">Only Text Style</a></li> + <li><a href="#ToolbarIcon">Only Icon Style</a></li> + </ul> + </div><!--/content-primary --> + </div> + <div data-role="footer"data-position ="fixed"> + <div data-role="controlbar" data-style="toolbar" > + <ul> + <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li> + <li><a href="#" data-icon="ctrlbar-save" >Save</a></li> + <li><a href="#" data-icon="ctrlbar-share" >Share</a></li> + <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li> + <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li> + </ul> + </div><!-- /controlbar --> + </div> + </div> + + <div data-role="page" id="ToolbarInHeader"> + <div data-role="header" data-position="fixed"> + <div data-role="controlbar" data-style="toolbar" > + <ul> + <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li> + <li><a href="#" data-icon="ctrlbar-save" >Save</a></li> + <li><a href="#" data-icon="ctrlbar-share" >Share</a></li> + <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li> + <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li> + </ul> + </div><!-- /controlbar --> + </div> + <div data-role="content"> + <div class="content-primary"> + <ul data-role="listview"> + <li><a href="#">Test</a></li> + </ul> + </div><!--/content-primary --> + </div> + <div data-role="footer"data-position ="fixed"> + </div> + </div> + + + <div data-role="page" id="Toolbar2Items"> + <div data-role="header" data-position="fixed"> + <h1>Toolbar</h1> + </div> + <div data-role="content"> + <div class="content-primary"> + <ul data-role="listview"> + <li><a href="#">2 Items Style</a></li> + </ul> + </div><!--/content-primary --> + </div> + <div data-role="footer"data-position ="fixed"> + <div data-role="controlbar" data-style="toolbar" > + <ul> + <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li> + <li><a href="#" data-icon="ctrlbar-save" >Save</a></li> + </ul> + </div><!-- /controlbar --> + </div> + </div> + + <div data-role="page" id="Toolbar3Items"> + <div data-role="header" data-position="fixed"> + <h1>Toolbar</h1> + </div> + <div data-role="content"> + <div class="content-primary"> + <ul data-role="listview"> + <li><a href="#">3 Items Style</a></li> + </ul> + </div><!--/content-primary --> + </div> + <div data-role="footer"data-position ="fixed"> + <div data-role="controlbar" data-style="toolbar" > + <ul> + <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li> + <li><a href="#" data-icon="ctrlbar-save" >Save</a></li> + <li><a href="#" data-icon="ctrlbar-share" >Share</a></li> + </ul> + </div><!-- /controlbar --> + </div> + </div> + + <div data-role="page" id="Toolbar4Items"> + <div data-role="header" data-position="fixed"> + <h1>Toolbar</h1> + </div> + <div data-role="content"> + <div class="content-primary"> + <ul data-role="listview"> + <li><a href="#">4 Items Style</a></li> + </ul> + </div><!--/content-primary --> + </div> + <div data-role="footer"data-position ="fixed"> + <div data-role="controlbar" data-style="toolbar" > + <ul> + <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li> + <li><a href="#" data-icon="ctrlbar-save" >Save</a></li> + <li><a href="#" data-icon="ctrlbar-share" >Share</a></li> + <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li> + </ul> + </div><!-- /controlbar --> + </div> + </div> + + <div data-role="page" id="Toolbar5Items"> + <div data-role="header" data-position="fixed"> + <h1>Toolbar</h1> + </div> + <div data-role="content"> + <div class="content-primary"> + <ul data-role="listview"> + <li><a href="#">5 Items Style</a></li> + </ul> + </div><!--/content-primary --> + </div> + <div data-role="footer"data-position ="fixed"> + <div data-role="controlbar" data-style="toolbar" > + <ul> + <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li> + <li><a href="#" data-icon="ctrlbar-save" >Save</a></li> + <li><a href="#" data-icon="ctrlbar-share" >Share</a></li> + <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li> + <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li> + </ul> + </div><!-- /controlbar --> + </div> + </div> + + <div data-role="page" id="ToolbarText"> + <div data-role="header" data-position="fixed"> + <h1>Toolbar</h1> + </div> + <div data-role="content"> + <div class="content-primary"> + <ul data-role="listview"> + <li><a href="#">Text Style</a></li> + </ul> + </div><!--/content-primary --> + </div> + <div data-role="footer"data-position ="fixed"> + <div data-role="controlbar" data-style="toolbar" > + <ul> + <li><a href="#" class="ui-btn-active">Songs</a></li> + <li><a href="#">Favorites</a></li> + <li><a href="#">Group</a></li> + <li><a href="#">Message</a></li> + <li><a href="#">Contact</a></li> + </ul> + </div><!-- /controlbar --> + </div> + </div> + + <div data-role="page" id="ToolbarIcon"> + <div data-role="header" data-position="fixed"> + <h1>Toolbar</h1> + </div> + <div data-role="content"> + <div class="content-primary"> + <ul data-role="listview"> + <li><a href="#">Only Icon Style</a></li> + </ul> + </div><!--/content-primary --> + </div> + <div data-role="footer"data-position ="fixed"> + <div data-role="controlbar" data-style="toolbar" > + <ul> + <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active"></a></li> + <li><a href="#" data-icon="ctrlbar-save" ></a></li> + <li><a href="#" data-icon="ctrlbar-share" ></a></li> + <li><a href="#" data-icon="ctrlbar-timeline" ></a></li> + <li><a href="#" data-icon="ctrlbar-world_clock" ></a></li> + </ul> + </div><!-- /controlbar --> + </div> + </div> + <!-- Toolbar Style --> + + <!-- Mixed Style --> + + <div data-role="page" id="Mixed" > + <div data-role="header" data-position="fixed"> + <h1>Mixed Toolbar</h1> + </div> + <div data-role="content"> + <p>Not Supported for winset</p> + </div> + </div> + <!-- Mixed Style --> + + <!-- ControlBar Left Style --> + <div data-role="page" id="ControlBarVerticalLeft" > + <div data-role="header" data-position="fixed"> + <h1>Vertical Toolbar</h1> + </div> + <div data-role="content"> + <ul data-role="listview" data-icon="1line-textonly"> + <li><a href="#notImplemented" data-rel="dialog">AutoScroll</a></li> + <li><a href="#notImplemented">Button</a></li> + <li><a href="#notImplemented">Check</a></li> + </ul> + <div data-role="controlbar" data-style="left"> + <ul> + <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li> + <li><a href="#" data-icon="ctrlbar-save" >Save</a></li> + <li><a href="#" data-icon="ctrlbar-share" >Share</a></li> + <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li> + <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li> + </ul> + </div><!-- /controlbar --> + </div> + </div> + <!-- ControlBar Left Style --> + + <!-- ControlBar Right Style --> + <div data-role="page" id="ControlBarVerticalRight" > + <div data-role="header" data-position="fixed"> + <h1>Vertical Toolbar</h1> + </div> + <div data-role="content"> + <ul data-role="listview" data-icon="1line-textonly"> + <li><a href="#notImplemented" data-rel="dialog">AutoScroll</a></li> + <li><a href="#notImplemented">Button</a></li> + </ul> + <div data-role="controlbar" data-style="right"> + <ul> + <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li> + <li><a href="#" data-icon="ctrlbar-save" >Save</a></li> + <li><a href="#" data-icon="ctrlbar-share" >Share</a></li> + <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li> + <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li> + </ul> + </div><!-- /controlbar --> + </div> + </div> + <!-- ControlBar Right Style --> + + <!-- ControlBar Animation --> + <div data-role="page" id="ControlBarAnimation" > + <div data-role="header" data-position="fixed"> + <h1>Vertical Toolbar</h1> + </div> + <div data-role="content"> + </div> + <div data-role="footer"data-position ="fixed"> + <div data-role="controlbar" data-style="tabbar"> + <ul> + <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li> + <li><a href="#" data-icon="ctrlbar-save" >Save</a></li> + <li><a href="#" data-icon="ctrlbar-share" >Share</a></li> + <li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li> + <li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li> + </ul> + </div><!-- /controlbar --> + </div> + </div> + <!-- ControlBar Animation --> + + <div data-role="page" id="NavigationbarMain" data-add-back-btn="true"> + <div data-role="header" data-position="fixed"> + <h1>ControlBar</h1> + </div> + <div data-role="content"> + <div class="content-primary"> + <ul data-role="listview"> + <li><a href="#normalstyle">Normal style title</a></li> + <li><a href="#extendedstyle">Extended style title</a></li> + </ul> + </div><!--/content-primary --> + </div> + </div> + + <div data-role="page" id="normalstyle" data-add-back-btn="true"> + <div data-role="header" data-position="fixed"> + <h1>Normal Title</h1> + </div> + <div data-role="content"> + <ul data-role="listview"> + <li><a href="#normal1btn">Title 1 button</a></li> + <li><a href="#normal2btn">Title 2 button</a></li> + <li><a href="#normal2btnicononly">Title 2 button Icon only</a></li> + <li><a href="#normal3btn">Title 3 button</a></li> + <li><a href="#iconTitle">Icon + Title</a></li> + <li><a href="#customTitle1">Custom Title with button position: left</a></li> + <li><a href="#customTitle2">Custom Title with button position: right</a></li> + <li><a href="#customTitle3">Custom Title with button position: mix</a></li> + <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li> + </ul> + </div> + </div> + + <div data-role="page" id="normal1btn"> + <div data-role="header" data-position="fixed"> + <h1>Normal Title - 1Btn</h1> + <a>text1</a> + </div> + <div data-role="content"> + <ul data-role="listview"> + <li><a href="#normal1btn">Title 1 button</a></li> + <li><a href="#normal2btn">Title 2 button</a></li> + <li><a href="#normal2btnicononly">Title 2 button Icon only</a></li> + <li><a href="#normal3btn">Title 3 button</a></li> + <li><a href="#iconTitle">Icon + Title</a></li> + <li><a href="#customTitle1">Custom Title with button position: left</a></li> + <li><a href="#customTitle2">Custom Title with button position: right</a></li> + <li><a href="#customTitle3">Custom Title with button position: mix</a></li> + <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li> + </ul> + </div> + </div> + + <div data-role="page" id="normal2btn"> + <div data-role="header" data-position="fixed"> + <h1>Normal Title - 2Btn</h1> + <a>text1</a> + <a>text2</a> + </div> + <div data-role="content"> + <ul data-role="listview"> + <li><a href="#normal1btn">Title 1 button</a></li> + <li><a href="#normal2btn">Title 2 button</a></li> + <li><a href="#normal2btnicononly">Title 2 button Icon only</a></li> + <li><a href="#normal3btn">Title 3 button</a></li> + <li><a href="#iconTitle">Icon + Title</a></li> + <li><a href="#customTitle1">Custom Title with button position: left</a></li> + <li><a href="#customTitle2">Custom Title with button position: right</a></li> + <li><a href="#customTitle3">Custom Title with button position: mix</a></li> + <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li> + </ul> + </div> + </div> + + <div data-role="page" id="normal2btnicononly"> + <div data-role="header" data-position="fixed"> + <h1>Normal Title+2Buttons Icon only</h1> + <a data-icon="plus"></a> + <a data-icon="minus"></a> + </div> + <div data-role="content"> + <ul data-role="listview"> + <li><a href="#normal1btn">Title 1 button</a></li> + <li><a href="#normal2btn">Title 2 button</a></li> + <li><a href="#normal2btnicononly">Title 2 button Icon only</a></li> + <li><a href="#normal3btn">Title 3 button</a></li> + <li><a href="#iconTitle">Icon + Title</a></li> + <li><a href="#customTitle1">Custom Title with button position: left</a></li> + <li><a href="#customTitle2">Custom Title with button position: right</a></li> + <li><a href="#customTitle3">Custom Title with button position: mix</a></li> + <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li> + </ul> + </div> + </div> + + + <div data-role="page" id="normal3btn" data-add-back-btn="true"> + <div data-role="header" data-position="fixed"> + <h1>Normal Title - 3Btn</h1> + <a>text1</a> + <a>text2</a> + <a>text3</a> + </div> + <div data-role="content"> + <ul data-role="listview"> + <li><a href="#normal1btn">Title 1 button</a></li> + <li><a href="#normal2btn">Title 2 button</a></li> + <li><a href="#normal2btnicononly">Title 2 button Icon only</a></li> + <li><a href="#normal3btn">Title 3 button</a></li> + <li><a href="#iconTitle">Icon + Title</a></li> + <li><a href="#customTitle1">Custom Title with button position: left</a></li> + <li><a href="#customTitle2">Custom Title with button position: right</a></li> + <li><a href="#customTitle3">Custom Title with button position: mix</a></li> + <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li> + </ul> + </div> + </div> + + <div data-role="page" id="iconTitle"> + <div data-role="header" data-position="fixed"> + <img src="icon-tizen.png"/> + <h1>Icon Title</h1> + <a>text1</a> + </div> + <div data-role="content"> + <ul data-role="listview"> + <li><a href="#normal1btn">Title 1 button</a></li> + <li><a href="#normal2btn">Title 2 button</a></li> + <li><a href="#normal2btnicononly">Title 2 button Icon only</a></li> + <li><a href="#normal3btn">Title 3 button</a></li> + <li><a href="#iconTitle">Icon + Title</a></li> + <li><a href="#customTitle1">Custom Title with button position: left</a></li> + <li><a href="#customTitle2">Custom Title with button position: right</a></li> + <li><a href="#customTitle3">Custom Title with button position: mix</a></li> + <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li> + </ul> + </div> + </div> + + <div data-role="page" id="customTitle1"> + <div data-role="header" data-position="fixed"> + <h1>Title with Left button</h1> + <a class="ui-btn-left">Left1</a> + <a class="ui-btn-left">Left2</a> + <a class="ui-btn-left">Left3</a> + </div> + <div data-role="content"> + <ul data-role="listview"> + <li><a href="#normal1btn">Title 1 button</a></li> + <li><a href="#normal2btn">Title 2 button</a></li> + <li><a href="#normal2btnicononly">Title 2 button Icon only</a></li> + <li><a href="#normal3btn">Title 3 button</a></li> + <li><a href="#iconTitle">Icon + Title</a></li> + <li><a href="#customTitle1">Custom Title with button position: left</a></li> + <li><a href="#customTitle2">Custom Title with button position: right</a></li> + <li><a href="#customTitle3">Custom Title with button position: mix</a></li> + <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li> + </ul> + </div> + </div> + + <div data-role="page" id="customTitle2"> + <div data-role="header" data-position="fixed"> + <h1>Title with Right button</h1> + <a class="ui-btn-right">Right1</a> + <a class="ui-btn-right">Right2</a> + <a class="ui-btn-right">Right3</a> + </div> + <div data-role="content"> + <ul data-role="listview"> + <li><a href="#normal1btn">Title 1 button</a></li> + <li><a href="#normal2btn">Title 2 button</a></li> + <li><a href="#normal2btnicononly">Title 2 button Icon only</a></li> + <li><a href="#normal3btn">Title 3 button</a></li> + <li><a href="#iconTitle">Icon + Title</a></li> + <li><a href="#customTitle1">Custom Title with button position: left</a></li> + <li><a href="#customTitle2">Custom Title with button position: right</a></li> + <li><a href="#customTitle3">Custom Title with button position: mix</a></li> + <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li> + </ul> + </div> + </div> + + <div data-role="page" id="customTitle3"> + <div data-role="header" data-position="fixed"> + <a class="ui-btn-left">Left</a> + <h1>Title with Left/Right button</h1> + <a class="ui-btn-right">Right1</a> + <a class="ui-btn-right">Right2</a> + </div> + <div data-role="content"> + <ul data-role="listview"> + <li><a href="#normal1btn">Title 1 button</a></li> + <li><a href="#normal2btn">Title 2 button</a></li> + <li><a href="#normal2btnicononly">Title 2 button Icon only</a></li> + <li><a href="#normal3btn">Title 3 button</a></li> + <li><a href="#iconTitle">Icon + Title</a></li> + <li><a href="#customTitle1">Custom Title with button position: left</a></li> + <li><a href="#customTitle2">Custom Title with button position: right</a></li> + <li><a href="#customTitle3">Custom Title with button position: mix</a></li> + <li><a href="#NavigationbarMain">Go back to Navigation Bar</a></li> + </ul> + </div> + </div> + + + + + + <div data-role="page" id="extendedstyle" data-add-back-btn="true"> + <div data-role="header" data-position="fixed"> + <h1>Extended Title</h1> + </div> + <div data-role="content"> + <div class="content-primary"> + <ul data-role="listview"> + <li><a href="#extendedstyle2btn">2 Button</a></li> + <li><a href="#extendedstyle3btn">3 Button</a></li> + <li><a href="#extendedstyle4btn">4 Button</a></li> + <li><a href="#footerExtendedStyle">Footer Extended Style</a></li> + </ul> + </div><!--/content-primary --> + </div> + </div> + + <div data-role="page" id="extendedstyle2btn"> + <div data-role="header" data-position="fixed"> + <h1>Extended Title 2 Button </h1> + <div data-role="fieldcontain"> + <fieldset data-role="controlgroup" data-type="horizontal"> + <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment1" value="on" checked="checked" /> + <label for="segment1">All</label> + <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment2" value="off" /> + <label for="segment2">Call</label> + </fieldset> + </div> + </div> + <div data-role="content"> + <div class="content-primary"> + <ul data-role="listview"> + <li><a href="#extendedstyle2btn">2 Button</a></li> + <li><a href="#extendedstyle3btn">3 Button</a></li> + </ul> + </div><!--/content-primary --> + </div> + </div> + + <div data-role="page" id="extendedstyle3btn"> + <div data-role="header" data-position="fixed"> + <h1>Extended Title 3 Button </h1> + <div data-role="fieldcontain"> + <fieldset data-role="controlgroup" data-type="horizontal"> + <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment71" value="on" checked="checked" /> + <label for="segment71">All</label> + <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment72" value="off" /> + <label for="segment72">Call</label> + <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment73" value="off" /> + <label for="segment73">Message</label> + </fieldset> + </div> + </div> + <div data-role="content"> + <div class="content-primary"> + <ul data-role="listview"> + <li><a href="#extendedstyle2btn">2 Button</a></li> + <li><a href="#extendedstyle3btn">3 Button</a></li> + </ul> + </div><!--/content-primary --> + </div> + </div> + + <div data-role="page" id="extendedstyle4btn"> + <div data-role="header" data-position="fixed"> + <h1>Extended Title 4 Button </h1> + <div data-role="fieldcontain"> + <fieldset data-role="controlgroup" data-type="horizontal"> + <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment71" value="on" checked="checked" /> + <label for="segment71">All</label> + <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment72" value="off" /> + <label for="segment72">Call</label> + <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment73" value="off" /> + <label for="segment73">Message</label> + <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment74" value="off" /> + <label for="segment74">Contact</label> + </fieldset> + </div> + </div> + <div data-role="content"> + <div class="content-primary"> + <ul data-role="listview"> + <li><a href="#extendedstyle2btn">2 Button</a></li> + <li><a href="#extendedstyle3btn">3 Button</a></li> + </ul> + </div><!--/content-primary --> + </div> + </div> + + <div data-role="page" id="footerExtendedStyle"> + <div data-role="header" data-position="fixed"> + <h1>Extended Footer style</h1> + </div> + <div data-role="content"> + <p> test page </p> + </div> + <div data-role="footer" data-position="fixed"> + <div data-role="fieldcontain"> + <fieldset data-role="controlgroup" data-type="horizontal"> + <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment1" value="on" checked="checked" /> + <label for="segment1">All</label> + <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment2" value="off" /> + <label for="segment2">Call</label> + <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment3" value="off" /> + <label for="segment3">Contact</label> + </fieldset> + </div> + <a>Edit</a> + </div> + </div> + + <div data-role="page" id="multibuttonentry"> + <div data-role="header" data-position="fixed"> + <h1>Multi-button Entry</h1> + </div> + <div data-role="content"> + <div data-role="multibuttonentry" data-list-id="#addressbook"></div> + <br> + <ul data-role="listview"> + <li><a id='MBTaddItemTest'>Append Item</a></li> + <li><a id='MBTremoveItemTest'>Remove first Item</a></li> + <li><a id='MBTinputTextTest'>Input 'Hello'</a></li> + <li><a id='MBTgetInputTextTest'>Get input text</a></li> + <li><a id='MBTselectItemTest'>Select 1</a></li> + <li><a id='MBTgetSelectedItemTest'>Selected item</a></li> + <li><a id='MBTlengthTest'>Length</a></li> + <li><a id='MBTfocusOutTest'>Grouping On</a></li> + <li><a id='MBTfocusInTest'>Grouping Off</a></li> + <li><a id='MBTremoveAllItemTest'>Remove All Item</a></li> + </ul> + </div> + </div> + <div data-role="page" id="addressbook" data-footer-Exist="false" > + <div data-role="header" data-position="fixed"> + <h1>Address Book</h1> + <a id="cancelBtn" href="#multibuttonentry" data-role="button" class="ui-btn-right" >Cancel</a> + </div> + <div data-role="content" id="contentList"> + <ul data-role="listview"> + <li data-role="list-divider">A</li> + <li><a href="#multibuttonentry">Adam Kinkaid</a></li> + <li><a href="#multibuttonentry">Alex Wickerham</a></li> + <li><a href="#multibuttonentry">Avery Johnson</a></li> + <li data-role="list-divider">B</li> + <li><a href="#multibuttonentry">Bob Cabot</a></li> + <li data-role="list-divider">C</li> + <li><a href="#multibuttonentry">Caleb Booth</a></li> + <li><a href="#multibuttonentry">Christopher Adams</a></li> + <li><a href="#multibuttonentry">Culver James</a></li> + <li data-role="list-divider">D</li> + <li><a href="#multibuttonentry">David Walsh</a></li> + <li><a href="#multibuttonentry">Drake Alfred</a></li> + <li data-role="list-divider">E</li> + <li><a href="#multibuttonentry">Elizabeth Bacon</a></li> + <li><a href="#multibuttonentry">Emery Parker</a></li> + <li><a href="#multibuttonentry">Enid Voldon</a></li> + <li data-role="list-divider">F</li> + <li><a href="#multibuttonentry">Francis Wall</a></li> + <li data-role="list-divider">G</li> + <li><a href="#multibuttonentry">Graham Smith</a></li> + <li><a href="#multibuttonentry">Greta Peete</a></li> + <li data-role="list-divider">H</li> + <li><a href="#multibuttonentry">Harvey Walls</a></li> + <li data-role="list-divider">M</li> + <li><a href="#multibuttonentry">Mike Farnsworth</a></li> + <li><a href="#multibuttonentry">Murray Vanderbuilt</a></li> + <li data-role="list-divider">N</li> + <li><a href="#multibuttonentry">Nathan Williams</a></li> + <li data-role="list-divider">P</li> + <li><a href="#multibuttonentry">Paul Baker</a></li> + <li><a href="#multibuttonentry">Pete Mason</a></li> + <li data-role="list-divider">R</li> + <li><a href="#multibuttonentry">Rod Tarker</a></li> + <li data-role="list-divider">S</li> + <li><a href="#multibuttonentry">Sawyer Wakefield</a></li> + </ul> + </div> <!--/content --> + </div> <!--/page --> + + <!-- nocontents --> + <div data-role="page" id="no-contents-0" data-add-back-btn="true"> + <div data-role="header" data-position="fixed"> + <h1>No Contents</h1> + </div> + <div data-role="content"> + <div data-role="nocontents" id="nocontents0" data-type="text"> + <p>Text Type</p> + <p>Text</p> + </div> + </div> <!-- /content --> + </div> <!-- /page --> + + <div data-role="page" id="no-contents-1" data-add-back-btn="true"> + <div data-role="header" data-position="fixed"> + <h1>No Contents</h1> + </div> + <div data-role="content"> + <div data-role="nocontents" id="nocontents1" data-type="picture"> + <p>Picture Type</p> + <p>Text</p> + </div> + </div> <!-- /content --> + </div> <!-- /page --> + + <div data-role="page" id="no-contents-2" data-add-back-btn="true"> + <div data-role="header" data-position="fixed"> + <h1>No Contents</h1> + </div> + <div data-role="content"> + <div data-role="nocontents" id="nocontents2" data-type="multimedia"> + <p>Multimedia Type</p> + <p>Text</p> + </div> + </div> <!-- /content --> + </div> <!-- /page --> + + <div data-role="page" id="no-contents-3" data-add-back-btn="true"> + <div data-role="header" data-position="fixed"> + <h1>No Contents</h1> + </div> + <div data-role="content"> + <div data-role="nocontents" id="nocontents3"> + <p>Unnamed Type</p> + </div> + </div> <!-- /content --> + </div> <!-- /page --> + + + <script src="widgets/checkbox/checkbox.js"></script> + <script src="widgets/switch/switch.js"></script> + <script src="widgets/radio/radio.js"></script> + <script src="widgets/progressbar.js"></script> + <script src="widgets/ctxpopup.js"></script> + <script src="widgets/popupwindow/popupwindow.js"></script> + <script src="tips/generate-elements-dynamically.js"></script> + <script src="tips/two-line-text/two-line-text.js"></script> + <script src="tips/list-sample/list-sample.js"></script> + <script src="tips/list-sample/expandable.js"></script> + <script src="widgets/pagecontrol/pagecontrol-demo.js"></script> + <script src="widgets/multibuttonentry-demo.js"></script> + <script src="widgets/pagelayout/barcontrol.js"></script> + <script src="widgets/pagelayout/backbutton-control.js"></script> + <!-- test file for content div control, not completed yet --> + <script src="widgets/pagelayout/ctrl-test.js"></script> +</body> +</html> |