4 <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8" >
5 <script src="../tizen-web-ui-fw/latest/js/jquery.min.js"></script>
6 <script src="../configure.js"></script>
7 <script src="../tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>
8 <script src="../tizen-web-ui-fw/latest/js/tizen-web-ui-fw.min.js"
9 data-framework-theme="tizen-white"
10 data-framework-viewport-width="device-width">
12 <script src="../main.js"></script>
13 <title>CONTEXTUAL POPUP</title>
15 <!-- for compatibility test -->
16 <meta name="apple-mobile-web-app-capable" content="yes" />
17 <meta name="apple-mobile-web-app-status-bar-style" content="black" />
18 <link rel="apple-touch-icon" href="../icon-tizen.png" />
21 <div data-role="page" id="ctxpopup-demo" data-add-back-btn="true">
22 <div data-role="header" data-position="fixed">
23 <h1>CONTEXT POPUP</h1>
25 <div class="content" data-role="content">
27 <!-- target button -->
28 <a href="#pop_js" id="btn_js" data-role="button" data-inline="true" data-rel="popup">Touch me!</a>
29 <!-- context popup -->
30 <div id="pop_js" data-role="popup" >
31 <ul data-role="listview">
32 <li><a href="#" data-rel="back">Close</a></li>
33 <li><a href="#" data-rel="back" id="ctxpopup_update">Update Button Text</a></li>
39 <!-- target button -->
40 <a href="#pop_icon_text" id="btn_icon_text" data-role="button" data-inline="true" data-rel="popup">Icon+Text</a>
41 <!-- context popup -->
42 <div id="pop_icon_text" data-role="popup" >
43 <ul data-role="listview">
44 <li class="ui-li-1line-bigicon1">
46 <img class="ui-li-bigicon" src="test/ctxpopup_1.png">
47 <span class="ui-li-text-main">Eenie</span>
50 <li class="ui-li-1line-bigicon1">
52 <img class="ui-li-bigicon" src="test/ctxpopup_2.png">
53 <span class="ui-li-text-main">Meenie</span>
56 <li class="ui-li-1line-bigicon1">
58 <img class="ui-li-bigicon" src="test/ctxpopup_3.png">
59 <span class="ui-li-text-main">Mynie</span>
62 <li class="ui-li-1line-bigicon1">
64 <img class="ui-li-bigicon" src="test/ctxpopup_4.png">
65 <span class="ui-li-text-main">Mo</span>
73 <a href="#pop_copy_paste" id="btn_copy_paste" data-role="button" data-inline="true" data-rel="popup">CopyPaste</a>
75 <div id="pop_copy_paste" data-role="popup" >
76 <ul data-role="listview">
91 <a href="#pop_text_only" id="btn_text_only1" data-role="button" data-inline="true" data-rel="popup">Text Only</a>
93 <div id="pop_text_only" data-role="popup" >
94 <ul data-role="listview">
102 <a href="#">Menu3</a>
105 <a href="#">Menu4</a>
111 <span id="codeSample">
112 "Position to origin button" popup is located in this text
117 <!-- target button -->
118 <a href="#pop_buttons" id="btn_buttons" data-role="button" data-inline="true" data-rel="popup">Buttons</a>
119 <!-- context popup -->
120 <div id="pop_buttons" data-role="popup" >
121 <ul data-role="listview">
122 <li><a href="#">Meenie</a></li>
123 <li><a href="#">Mynie</a></li>
124 <li><a href="#">Mo</a></li>
130 <a href="#pop_text_only" id="btn_text_only2" data-role="button" data-transition="flip" data-inline="true" data-rel="popup">Animation</a>
134 <a id="btn_text_only3" data-role="button" data-transition="flip" data-inline="true" data-rel="popup">MethodOpen</a>
137 <a href="#closeTest" id="close_btn_buttons" data-role="button" data-inline="true" data-rel="popup">CloseTest</a>
138 <div id="closeTest" data-role="popup" >
139 <ul data-role="listview">
140 <li><a data-rel="back" href="#">Close</a></li>
141 <li><a data-rel="back" onclick="closeTest()" href="#">Close/javascript</a></li>
147 <a href="#positionOrigin" data-role="button" data-inline="true" data-rel="popup" data-position-to="#codeSample">Position to origin</a>
148 <div data-role="popup" id="positionOrigin" class="ui-content" data-theme="d">
149 <p style="color:white">I am positioned over the origin.</p>
153 <input type="button" data-inline="true" id="buttonPopup1" value="Open Popup - input type button"/>
156 <div data-role="button" data-inline="true" id="buttonPopup2">Open Popup - div button</div>
157 </div> <!-- /content -->
159 <div data-role="footer">
160 <a href="#navi" data-role="button" data-icon="naviframe-more" data-rel="popup"></a>
162 <div id="navi" data-role="popup" >
163 <ul data-role="listview">
164 <li><a href="#" data-rel="back">Settings</a></li>
165 <li><a href="#" data-rel="back">Add to contact</a></li>
166 <li><a href="#" data-rel="back">Call log</a></li>
167 <li><a href="#" data-rel="back">Music</a></li>
171 <script src="ctxpopup.js"></script>
172 </div> <!-- /page -->