1 <div data-role="page" id="ctxpopup-demo" data-add-back-btn="true">
2 <div data-role="header" data-position="fixed">
3 <h1>Contextual Popup</h1>
5 <div class="content" data-role="content">
8 <a href="#pop_js" id="btn_js" data-role="button" data-inline="true" data-rel="popupwindow">Touch me!</a>
10 <div id="pop_js" data-role="popupwindow" data-show-arrow="true">
11 <ul data-role="listview">
12 <li><a href="#" class="ui-btn-ctxpopup-close">Close</a></li>
13 <li><a href="#" class="ui-btn-ctxpopup-close" id="ctxpopup_update">Update Button Text</a></li>
19 <!-- target button -->
20 <a href="#pop_icon_text" id="btn_icon_text" data-role="button" data-inline="true" data-rel="popupwindow">Icon+Text</a>
21 <!-- context popup -->
22 <div id="pop_icon_text" data-role="popupwindow" data-show-arrow="true">
23 <ul data-role="listview">
24 <li class="ui-li-1line-bigicon1">
26 <img class="ui-li-bigicon" src="test/ctxpopup_1.png">
27 <span class="ui-li-text-main">Eenie</span>
30 <li class="ui-li-1line-bigicon1">
32 <img class="ui-li-bigicon" src="test/ctxpopup_2.png">
33 <span class="ui-li-text-main">Meenie</span>
36 <li class="ui-li-1line-bigicon1">
38 <img class="ui-li-bigicon" src="test/ctxpopup_3.png">
39 <span class="ui-li-text-main">Mynie</span>
42 <li class="ui-li-1line-bigicon1">
44 <img class="ui-li-bigicon" src="test/ctxpopup_4.png">
45 <span class="ui-li-text-main">Mo</span>
53 <!-- target button -->
54 <a href="#pop_3_icons" id="btn_3_icons" data-role="button" data-inline="true" data-rel="popupwindow">3 Icons</a>
55 <!-- context popup -->
56 <div class="horizontal" id="pop_3_icons" data-role="popupwindow" data-show-arrow="true">
59 <a href="#" data-role="button" data-icon="call"></a>
62 <a href="#" data-role="button" data-icon="favorite"></a>
65 <a href="#">Function</a>
72 <!-- target button -->
73 <a href="#pop_6_icons" id="btn_6_icons" data-role="button" data-inline="true" data-rel="popupwindow">6 Icons-Grid</a>
74 <!-- context popup -->
75 <div class="horizontal" id="pop_6_icons" data-role="popupwindow" data-show-arrow="true">
79 <a href="#" data-role="button" data-icon="call"></a>
82 <a href="#" data-role="button" data-icon="favorite"></a>
85 <a href="#">Eeenie</a>
90 <a href="#" data-role="button" data-icon="call"></a>
96 <a href="#" data-role="button" data-icon="favorite"></a>
104 <a href="#pop_copy_paste" id="btn_copy_paste" data-role="button" data-inline="true" data-rel="popupwindow">CopyPaste</a>
106 <div id="pop_copy_paste" class="horizontal" data-role="popupwindow" data-show-arrow="true">
115 <a href="#">Paste</a>
122 <a href="#pop_text_only" id="btn_text_only" data-role="button" data-inline="true" data-rel="popupwindow">Text Only</a>
124 <div id="pop_text_only" data-role="popupwindow" data-show-arrow="true">
125 <ul data-role="listview">
127 <a href="http://www.naver.com">www.naver.com</a>
130 <a href="http://www.naver.com">www.naver.com</a>
133 <a href="http://www.samsung.com">www.samsung.com</a>
136 <a href="http://www.apple.com">www.apple.com</a>
143 <!-- target button -->
144 <a href="#pop_buttons" id="btn_buttons" data-role="button" data-inline="true" data-rel="popupwindow">Buttons</a>
145 <!-- context popup -->
146 <div id="pop_buttons" class="button" data-role="popupwindow" data-show-arrow="true">
151 <a href="#" data-role="button">Meenie</a>
154 <a href="#" data-role="button">Mynie</a>
157 <a href="#" data-role="button">Mo</a>
162 <a href="#" data-role="button">Catch-a</a>
165 <a href="#" data-role="button">Tiger</a>
168 <a href="#" data-role="button">By-the</a>
176 </div> <!-- /content -->
178 </div> <!-- /page -->