- <div data-role="page" id="ctxpopup-demo" data-add-back-btn="true">
- <div data-role="header" data-position="fixed">
- <h1>Contextual Popup</h1>
- </div>
- <div class="content" data-role="content">
- <div>
- <!-- target button -->
- <a href="#pop_js" id="btn_js" data-role="button" data-inline="true" data-rel="popup">Touch me!</a>
- <!-- context popup -->
- <div id="pop_js" data-role="popup" >
- <ul data-role="listview">
- <li><a href="#" data-rel="back">Close</a></li>
- <li><a href="#" data-rel="back" id="ctxpopup_update">Update Button Text</a></li>
- </ul>
- </div>
- <br>
- <br>
+ <!DOCTYPE html>
+ <html>
+ <head>
+ <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8" >
+ <script src="../tizen-web-ui-fw/latest/js/jquery.min.js"></script>
+ <script src="../configure.js"></script>
+ <script src="../tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>
+ <script src="../tizen-web-ui-fw/latest/js/tizen-web-ui-fw.min.js"
+ data-framework-theme="tizen-white"
+ data-framework-viewport-width="device-width">
+ </script>
+ <script src="../main.js"></script>
+ <title>Tizen UI - CtxPopup</title>
- <!-- target button -->
- <a href="#pop_icon_text" id="btn_icon_text" data-role="button" data-inline="true" data-rel="popup">Icon+Text</a>
- <!-- context popup -->
- <div id="pop_icon_text" data-role="popup" >
- <ul data-role="listview">
- <li class="ui-li-1line-bigicon1">
- <a href="#">
- <img class="ui-li-bigicon" src="test/ctxpopup_1.png">
- <span class="ui-li-text-main">Eenie</span>
- </a>
- </li>
- <li class="ui-li-1line-bigicon1">
- <a href="#">
- <img class="ui-li-bigicon" src="test/ctxpopup_2.png">
- <span class="ui-li-text-main">Meenie</span>
- </a>
- </li>
- <li class="ui-li-1line-bigicon1">
- <a href="#">
- <img class="ui-li-bigicon" src="test/ctxpopup_3.png">
- <span class="ui-li-text-main">Mynie</span>
- </a>
- </li>
- <li class="ui-li-1line-bigicon1">
- <a href="#">
- <img class="ui-li-bigicon" src="test/ctxpopup_4.png">
- <span class="ui-li-text-main">Mo</span>
- </a>
- </li>
- </ul>
- </div>
- <br>
- <br>
+ <!-- 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" />
+ </head>
+ <body>
+ <div data-role="page" id="ctxpopup-demo" data-add-back-btn="true">
+ <div data-role="header" data-position="fixed">
+ <h1>Contextual Popup</h1>
+ </div>
+ <div class="content" data-role="content">
+ <div>
+ <!-- target button -->
+ <a href="#pop_js" id="btn_js" data-role="button" data-inline="true" data-rel="popup">Touch me!</a>
+ <!-- context popup -->
+ <div id="pop_js" data-role="popup" >
+ <ul data-role="listview">
+ <li><a href="#" data-rel="back">Close</a></li>
+ <li><a href="#" data-rel="back" id="ctxpopup_update">Update Button Text</a></li>
+ </ul>
+ </div>
+ <br>
+ <br>
- <a href="#pop_copy_paste" id="btn_copy_paste" data-role="button" data-inline="true" data-rel="popup">CopyPaste</a>
+ <!-- target button -->
+ <a href="#pop_icon_text" id="btn_icon_text" data-role="button" data-inline="true" data-rel="popup">Icon+Text</a>
+ <!-- context popup -->
+ <div id="pop_icon_text" data-role="popup" >
+ <ul data-role="listview">
+ <li class="ui-li-1line-bigicon1">
+ <a href="#">
+ <img class="ui-li-bigicon" src="test/ctxpopup_1.png">
+ <span class="ui-li-text-main">Eenie</span>
+ </a>
+ </li>
+ <li class="ui-li-1line-bigicon1">
+ <a href="#">
+ <img class="ui-li-bigicon" src="test/ctxpopup_2.png">
+ <span class="ui-li-text-main">Meenie</span>
+ </a>
+ </li>
+ <li class="ui-li-1line-bigicon1">
+ <a href="#">
+ <img class="ui-li-bigicon" src="test/ctxpopup_3.png">
+ <span class="ui-li-text-main">Mynie</span>
+ </a>
+ </li>
+ <li class="ui-li-1line-bigicon1">
+ <a href="#">
+ <img class="ui-li-bigicon" src="test/ctxpopup_4.png">
+ <span class="ui-li-text-main">Mo</span>
+ </a>
+ </li>
+ </ul>
+ </div>
+ <br>
+ <br>
- <div id="pop_copy_paste" data-role="popup" >
- <ul data-role="listview">
- <li class='text'>
- <a href="#">Copy</a>
- </li>
- <li class='text'>
- <a href="#">All</a>
- </li>
- <li class='text'>
- <a href="#">Paste</a>
- </li>
- </ul>
- </div>
- <br>
- <br>
+ <a href="#pop_copy_paste" id="btn_copy_paste" data-role="button" data-inline="true" data-rel="popup">CopyPaste</a>
- <a href="#pop_text_only" id="btn_text_only" data-role="button" data-inline="true" data-rel="popup">Text Only</a>
+ <div id="pop_copy_paste" data-role="popup" >
+ <ul data-role="listview">
+ <li class='text'>
+ <a href="#">Copy</a>
+ </li>
+ <li class='text'>
+ <a href="#">All</a>
+ </li>
+ <li class='text'>
+ <a href="#">Paste</a>
+ </li>
+ </ul>
+ </div>
+ <br>
+ <br>
- <div id="pop_text_only" data-role="popup" >
- <ul data-role="listview">
- <li>
- <a href="#">Menu1</a>
- </li>
- <li>
- <a href="#">Menu2</a>
- </li>
- <li>
- <a href="#">Menu3</a>
- </li>
- <li>
- <a href="#">Menu4</a>
- </li>
- </ul>
- </div>
- <br>
- <br>
- <span id="codeSample">
- "Position to origin button" popup is located in this text
- </span>
- <br>
- <br>
+ <a href="#pop_text_only" id="btn_text_only1" data-role="button" data-inline="true" data-rel="popup">Text Only</a>
- <!-- target button -->
- <a href="#pop_buttons" id="btn_buttons" data-role="button" data-inline="true" data-rel="popup">Buttons</a>
- <!-- context popup -->
- <div id="pop_buttons" data-role="popup" >
- <ul data-role="listview">
- <li><a href="#">Meenie</a></li>
- <li><a href="#">Mynie</a></li>
- <li><a href="#">Mo</a></li>
- </ul>
- </div>
- <br>
- <br>
+ <div id="pop_text_only" data-role="popup" >
+ <ul data-role="listview">
+ <li>
+ <a href="#">Menu1</a>
+ </li>
+ <li>
+ <a href="#">Menu2</a>
+ </li>
+ <li>
+ <a href="#">Menu3</a>
+ </li>
+ <li>
+ <a href="#">Menu4</a>
+ </li>
+ </ul>
+ </div>
+ <br>
+ <br>
+ <span id="codeSample">
+ "Position to origin button" popup is located in this text
+ </span>
+ <br>
+ <br>
- <a href="#pop_text_only" id="btn_text_only" data-role="button" data-transition="flip" data-inline="true" data-rel="popup">Animation</a>
+ <!-- target button -->
+ <a href="#pop_buttons" id="btn_buttons" data-role="button" data-inline="true" data-rel="popup">Buttons</a>
+ <!-- context popup -->
+ <div id="pop_buttons" data-role="popup" >
+ <ul data-role="listview">
+ <li><a href="#">Meenie</a></li>
+ <li><a href="#">Mynie</a></li>
+ <li><a href="#">Mo</a></li>
+ </ul>
+ </div>
+ <br>
+ <br>
- <div id="pop_text_only" data-role="popup" >
- <ul data-role="listview">
- <li>
- <a href="#">Menu1</a>
- </li>
- <li>
- <a href="#">Menu2</a>
- </li>
- <li>
- <a href="#">Menu3</a>
- </li>
- <li>
- <a href="#">Menu4</a>
- </li>
- </ul>
- </div>
- <br>
- <br>
- <a onclick="popupTest()" id="btn_text_only" data-role="button" data-transition="flip" data-inline="true" data-rel="popup">MethodOpen</a>
- <br>
- <br>
- <a href="#closeTest" id="close_btn_buttons" data-role="button" data-inline="true" data-rel="popup">CloseTest</a>
- <div id="closeTest" data-role="popup" >
- <ul data-role="listview">
- <li><a data-rel="back" href="#">Close</a></li>
- <li><a data-rel="back" onclick="closeTest()" href="#">Close/javascript</a></li>
- </ul>
- </div>
- <br>
- <br>
- </div>
- <a href="#positionOrigin" data-role="button" data-inline="true" data-rel="popup" data-position-to="#codeSample">Position to origin</a>
- <div data-role="popup" id="positionOrigin" class="ui-content" data-theme="d">
- <p style="color:white">I am positioned over the origin.</p>
- </div>
- <br>
- <br>
- <input type="button" data-inline="true" onclick="popupTest()" value="Open Popup - input type button"/>
- <br>
- <br>
- <div data-role="button" "button" data-inline="true" onclick="popupTest()">Open Popup - div button</div>
- </div> <!-- /content -->
+ <a href="#pop_text_only" id="btn_text_only2" data-role="button" data-transition="flip" data-inline="true" data-rel="popup">Animation</a>
- <div data-role="footer">
- <a href="#navi" data-role="button" data-icon="naviframe-more" data-rel="popup"></a>
+ <br>
+ <br>
+ <a id="btn_text_only3" data-role="button" data-transition="flip" data-inline="true" data-rel="popup">MethodOpen</a>
+ <br>
+ <br>
+ <a href="#closeTest" id="close_btn_buttons" data-role="button" data-inline="true" data-rel="popup">CloseTest</a>
+ <div id="closeTest" data-role="popup" >
+ <ul data-role="listview">
+ <li><a data-rel="back" href="#">Close</a></li>
+ <li><a data-rel="back" onclick="closeTest()" href="#">Close/javascript</a></li>
+ </ul>
+ </div>
+ <br>
+ <br>
+ </div>
+ <a href="#positionOrigin" data-role="button" data-inline="true" data-rel="popup" data-position-to="#codeSample">Position to origin</a>
+ <div data-role="popup" id="positionOrigin" class="ui-content" data-theme="d">
+ <p style="color:white">I am positioned over the origin.</p>
+ </div>
+ <br>
+ <br>
+ <input type="button" data-inline="true" id="buttonPopup1" value="Open Popup - input type button"/>
+ <br>
+ <br>
+ <div data-role="button" data-inline="true" id="buttonPopup2">Open Popup - div button</div>
+ </div> <!-- /content -->
- <div id="navi" data-role="popup" >
- <ul data-role="listview">
- <li><a href="#" data-rel="back">Settings</a></li>
- <li><a href="#" data-rel="back">Add to contact</a></li>
- <li><a href="#" data-rel="back">Call log</a></li>
- <li><a href="#" data-rel="back">Music</a></li>
- <li><a href="#" data-rel="back">File manager</a></li>
- <li><a href="#" data-rel="back">Internal Link</a></li>
- </ul>
- </div>
- </div>
- </div> <!-- /page -->
+ <div data-role="footer">
+ <a href="#navi" data-role="button" data-icon="naviframe-more" data-rel="popup"></a>
+
+ <div id="navi" data-role="popup" >
+ <ul data-role="listview">
+ <li><a href="#" data-rel="back">Settings</a></li>
+ <li><a href="#" data-rel="back">Add to contact</a></li>
+ <li><a href="#" data-rel="back">Call log</a></li>
+ <li><a href="#" data-rel="back">Music</a></li>
+ <li><a href="#" data-rel="back">File manager</a></li>
+ <li><a href="#" data-rel="back">Internal Link</a></li>
+ </ul>
+ </div>
+ </div>
+ <script src="ctxpopup.js"></script>
+ </div> <!-- /page -->
+ </body>
-</html>
++</html>
- <div id="radio-demo" data-role="page" data-add-back-btn="true">
-
- <div data-role="header" data-position="fixed">
- <h1>Radio</h1>
-
- </div>
-
- <div data-role="content">
- <div class="content-primary">
- <fieldset data-role="controlgroup">
- <legend>Choose a pet:</legend>
- <input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1" checked="checked" />
- <label for="radio-choice-1">Cat</label>
-
- <input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2" />
- <label for="radio-choice-2">Dog</label>
-
- <input type="radio" name="radio-choice" id="radio-choice-3" value="choice-3" />
- <label for="radio-choice-3">Hamster</label>
-
- <input type="radio" name="radio-choice" id="radio-choice-4" value="choice-4" />
- <label for="radio-choice-4">Lizard</label>
- </fieldset>
- <p> Trigged When user clicks a radio button :
- <span class="triggered-radio">
- <em>(This is updated when user clicks a radio button )</em>
- </span>
- </p>
-
- <input type="radio" name="radio-2" id="radio-2" checked="checked" disabled="disabled" />
- <label for="radio-2">Checked, Disabled</label>
- <input type="radio" name="radio-3" id="radio-3" disabled="disabled"/>
- <label for="radio-3">Disabled</label>
- <input type="radio" name="radio-4" id="radio-4"/>
-
- </div><!--/content-primary -->
- </div>
- <div data-role="footer">
- </div>
- </div> <!-- page -->
+ <!DOCTYPE html>
+ <html>
+ <head>
+ <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8" >
+ <script src="../../tizen-web-ui-fw/latest/js/jquery.min.js"></script>
+ <script src="../../configure.js"></script>
+ <script src="../../tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>
+ <script src="../../tizen-web-ui-fw/latest/js/tizen-web-ui-fw.min.js"
+ data-framework-theme="tizen-white"
+ data-framework-viewport-width="device-width">
+ </script>
+ <script src="../../main.js"></script>
+ <title>Tizen UI - Radio</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" />
+ </head>
+ <body>
+ <div id="radio-demo" data-role="page" data-add-back-btn="true">
+
+ <div data-role="header" data-position="fixed">
+ <h1>Radio</h1>
+
+ </div>
+
+ <div data-role="content">
+ <div class="content-primary">
+ <fieldset data-role="controlgroup">
+ <legend>Choose a pet:</legend>
+ <input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1" checked="checked" />
+ <label for="radio-choice-1">Cat</label>
+
+ <input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2" />
+ <label for="radio-choice-2">Dog</label>
+
+ <input type="radio" name="radio-choice" id="radio-choice-3" value="choice-3" />
+ <label for="radio-choice-3">Hamster</label>
+
+ <input type="radio" name="radio-choice" id="radio-choice-4" value="choice-4" />
+ <label for="radio-choice-4">Lizard</label>
+ </fieldset>
+ <p> Trigged When user clicks a radio button :
+ <span class="triggered-radio">
+ <em>(This is updated when user clicks a radio button )</em>
+ </span>
+ </p>
+
+ <input type="radio" name="radio-2" id="radio-2" checked="checked" disabled="disabled" />
+ <label for="radio-2">Checked, Disabled</label>
+ <input type="radio" name="radio-3" id="radio-3" disabled="disabled"/>
+ <label for="radio-3">Disabled</label>
+ <input type="radio" name="radio-4" id="radio-4"/>
+
+ </div><!--/content-primary -->
+ </div>
+ <div data-role="footer">
+ </div>
+ <script src="radio.js"></script>
+ </div> <!-- page -->
+ </body>
-</html>
++</html>