<li><a href="#html-examples0.8655443852767348">HTML Examples</a>
</li>
-
- <li><a href="#context-popup with arrow0.9959437232464552">Context Popup with Arrow</a>
-
- </li>
-
-
<li><a href="#options-list">Options</a>
+
+ <li><a href="#popup-ctxpopup">Popup / ContextPopup</a>
+
+ </li>
+
+ <li><a href="#options-list">Options</a>
</li>
-
+
+
<li><a href="#events-list">Events</a>
</li>
-
- <li><a href="#methods-list">Methods</a>
-
- </li>
-
- <li><a href="#opening-popup0.4268628491554409">Opening a Popup</a>
+
+ <li><a href="#managing-popup">Managing a Popup</a>
</li>
-
- <li><a href="#closing-popup0.4531055218540132">Closing a Popup</a>
-
- </li>
+
</ol>
<h2><a id="default-selectors0.8939050626941025"></a>Default Selectors</h2>
-<p>By default, all elements with the <code>data-role="popup"</code> attribute are displayed as Tizen Web UI popups.</p>
+<p>By default, all elements with the <code>class="ui-popup"</code> and <code>data-role="popup"</code> attribute are displayed as Tizen Web UI popups.</p>
<h2><a id="manual-constructor0.5366392943542451"></a>Manual Constructor</h2>
-<p>To manually create a button component, use the component constructor from the <code>tau</code> namespace (<strong>RECOMMENDED</strong>):</p>
+<p>To manually create a button component, use the component constructor from the <code>tau</code> namespace:</p>
<pre class="prettyprint"><div id="popup">
- <p>This is a completely basic popup, no options set.</p>
+ <p>This is not a popup yet. But when TAU namespace calls me as widget, I will be popup.</p>
</div>
<script>
var popupElement = document.getElementById("popup"),
popup = tau.widget.Popup(popupElement);
- popup.open();
-</script>
-</pre>
-
-<p>If the jQuery library is loaded, you can use its method (<strong>support for backward compatibility</strong>):</p>
-
-<pre class="prettyprint"><div id="popup">
- <p>This is a completely basic popup, no options set.</p>
-</div>
-<script>
- var popup = $("#popup").popup();
- popup.popup("open");
</script>
</pre>
-
<h2><a id="html-examples0.8655443852767348"></a>HTML Examples</h2>
-<p>If the link has the <span style="font-family: Courier New,Courier,monospace">data-position-to="window"</span> option in the popup, the popup is opened to a new window after clicking.</p>
-<ul>
-
-<li>To create a simple popup positioned to a window.
-
-<pre class="prettyprint"><!--Definition of the link, which opens the popup and sets its position-->
-<a href="#center_info" data-position-to="window">Click to open popup</a>
-<!--Definition of the popup, which inherits property position from link-->
-<div id="center_info" data-role="popup" class="center_info">
- <div class="ui-popup-text">
- <p>Pop-up dialog box, a child window that blocks user interaction to the parent windows</p>
- </div>
-</div>
-</pre></li>
-
-<li>To create a popup with a title and button:
-
-<pre class="prettyprint"><a href="#center_title_1btn" data-position-to="window">Click to open popup</a>
-<!--Definition of popup with a title and button-->
-<div id="center_title_1btn" data-role="popup" class="center_title_1btn">
- <div class="ui-popup-title">
- <h1>Popup title</h1>
- </div>
- <div class="ui-popup-text">
- Pop-up dialog box, a child window that blocks user interaction to the parent windows
- </div>
- <div class="ui-popup-button-bg">
- <a data-role="button" data-rel="back" data-inline="true">Button</a>
- </div>
-</div>
-</pre></li>
-
-<li>To create a popup with a menu.
-
-<p>A menu can be created by placing a <a href="ns_widget_mobile_Listview.htm">list view component</a> inside a popup.</p>
-
-<pre class="prettyprint"><a href="#center_liststyle_1btn" data-position-to="window">Click to open popup</a>
-<div id="center_liststyle_1btn" data-role="popup" class="center_liststyle_1btn">
- <div class="ui-popup-title">
- <h1>Popup title</h1>
- </div>
- <div class="ui-popup-scroller-bg" data-scroll="y">
- <ul data-role="listview" data-icon="1line-textonly">
- <li><a href="#">List item 1</a></li>
- <li><a href="#">List item 2</a></li>
- </ul>
+<h3>Basic structure of Popup</h3>
+<p>As basically, popup has <code>class="ui-popup-header"</code> as Header, <code>class="ui-popup-content"</code> as body and <code>class="ui-popup-footer"</code> as button area. Here is simple example:</p>
+<pre class="prettyprint"><div id="1btn_popup" class="ui-popup">
+ <div class="ui-popup-header">Popup Header</div>
+ <div class="ui-popup-content popup-content-padding">
+ Lorem ipsum dolor sit amet,
+ consectetur adiptiscing elit, sed
+ doei usmod tempore sit ipsum
</div>
- <div class="ui-popup-button-bg">
- <a data-role="button" data-rel="back" data-inline="true">Cancel</a>
+ <div class="ui-popup-footer">
+ <a class="ui-btn" data-rel="back" data-inline="true">Cancel</a>
</div>
</div>
-</pre></li>
-
-</ul>
-
-
-<h2><a id="context-popup with arrow0.9959437232464552"></a>Context Popup with Arrow</h2>
-
-<p>If the <code>id</code> property is set in the link and the <code>data-position-to="origin"</code> option in the popup, the context popup is opened after clicking.</p>
-
-<pre class="prettyprint"><!--Definition of the link, which opens a popup with popup id in context style with an arrow-->
-<a href="#popup" id="linkId" data-position-to="origin" data-role="button" data-inline="true">Click to open context popup</a>
-<div id="popup" data-role="popup">
- <p>This is a completely basic context popup, no options set.</p>
-</div>
</pre>
-
-<p>The <code>positionTo</code> option has the <code>"origin"</code> value in the popup by default. However, the <code>positionTo</code> property is inherited from the related link and the inherited value has a higher priority during the opening process and overwrites the previous value. So, if you do not change it in the popup and do not set the <code>data-position-to</code> value to other than <code>"origin"</code> in the link, the popup connected with the link is always opened in the context style.</p>
-
-<p>To make sure that the popup is opened in the context style with an arrow, set the <code>data-position-to="origin"</code> property as well as <code>id</code> as in the example above.</p>
-
-<p>The same result can be achieved by setting the <code>id</code> property only and not setting the <code>positionTo</code> option in the link. This is because the popup has the <code>"origin"</code> value for the <code>positionTo</code> option by default.</p>
-
-<pre class="prettyprint"><!--In link, id is set-->
-<a href="#popup" id="linkId" data-role="button" data-inline="true">Click to open context popup</a>
-<div id="popup" data-role="popup">
- <p>This is a completely basic popup, no options set.</p>
+<h3>Context Popup</h3>
+<p>Context popup(ctxpopup) has very simple structure. It does not need header or footer. So, just put content in <code><div></code> area. Please refer this example: </p>
+<pre class="prettyprint"><div id="ctxpopup_vertical_basic" class="ui-popup" data-overlay="false">
+ <ul class="ui-listview">
+ <li class="ui-li-anchor"><a href="#" data-rel="back">Copy</a></li>
+ <li class="ui-li-anchor"><a href="#" data-rel="back">Cut</a></li>
+ <li class="ui-li-anchor"><a href="#" data-rel="back">Paste</a></li>
+ <li class="ui-li-anchor"><a href="#" data-rel="back">Clipboard</a></li>
+ </ul>
</div>
</pre>
-<p>After building the popup, the value of the <code>positionTo</code> option can be changed by using the <code>option</code> method:</p>
-
-<ul><li>With the TAU API (<strong>RECOMMENDED</strong>):
-<pre class="prettyprint"><a href="#popup" id="linkId" data-role="button" data-inline="true">Click to open context popup</a>
-<div id="popup" data-role="popup">
- <p>This is a completely basic popup, no options set.</p>
-</div>
-<script>
- // Change value of positionTo option by option method
- var popupWidget = tau.widget.Popup(document.getElementById("popup"));
- popupWidget.option("positionTo", "origin");
-</script>
-</pre></li>
-<li>With the jQuery API (<strong>support for backward compatibility</strong>):
-
-<pre class="prettyprint"><a href="#popup" id="linkId" data-role="button" data-inline="true">Click to open context popup</a>
-<div id="popup" data-role="popup">
- <p>This is a completely basic popup, no options set.</p>
-</div>
-<script>
- // Change value of positionTo option by option method
- $("#popup").popup("option", "positionTo", "origin");
-</script>
-</pre></li></ul>
-
-<p>The context popup can also be created manually for elements other than a link by pushing the options, such as <code>positionTo</code> and <code>link</code> to the <code>_open</code> method:</p>
-
-<ul><li>With the TAU API (<strong>RECOMMENDED</strong>):
-<pre class="prettyprint"><!--Element with no properties - popup is opened next to it in context style manually-->
-<div id="linkId">Click to open context popup</div>
-<div id="popup" data-role="popup">
- <p>This is a completely basic popup, no options set.</p>
+<h3>Toast Popup</h3>
+<p>If you want to show popup as toast, please add <code>"ui-popup-toast"</code> class with <code>"ui-popup"</code></p>
+<pre class="prettyprint"><div id="popup_toast" data-role="popup" class="ui-popup ui-popup-toast">
+ <div class="ui-popup-content">
+ Toast popup text Toast popup text
+ </div>
</div>
-<script>
- // Set opening popup on click event
- document.getElementById("linkId").addEventListener("click", function ()
- {
- // Open context popup
- var popupWidget = tau.widget.Popup(document.getElementById("popup"));
- // Open with options
- popupWidget.open({link: "linkId", positionTo: "origin"});
- });
-</script>
</pre>
-</li>
-<li>With the jQuery API (<strong>support for backward compatibility</strong>):
-
-<pre class="prettyprint"><!--Element with no properties - popup is opened next to it in context style manually-->
-<div id="linkId">Click to open context popup</div>
-<div id="popup" data-role="popup">
- <p>This is a completely basic popup, no options set.</p>
-</div>
-<script>
- // Set opening popup on click event
- $("#linkId").on("click", function ()
- {
- // Open with options
- $("#popup").popup("open", {link: "linkId", positionTo: "origin"});
- });
-</script>
-</pre></li></ul>
-
-<p>These options can be also set globally, and then the <code>open</code> method can be called without options:</p>
-<ul><li>This solution can be used only for the TAU API (<strong>RECOMMENDED</strong>):
-<pre class="prettyprint"><!--Element with no properties - popup is opened next to it in context style manually-->
-<div id="linkId">Link for popup</div>
-<div id="popup" data-role="popup">
- <p>This is a completely basic popup, no options set.</p>
+<h2><a id="popup-ctxpopup"></a>Popup / ContextPopup</h2>
+<p>There's one different factor between popup and context popup. It is <code>data-position-to</code> options of popup opener element.</p>
+<h3>Open Popup as window popup</h3>
+<p>When element has <code>data-position-to="window"</code>, it opens window popup(as known as normal popup window).</p>
+<pre class="prettyprint"><div data-role="page" class="ui-page" id="demo-page">
+ <div class="ui-content">
+ <ul class="ui-listview">
+ <li class="ui-li-anchor"><a href="#1btn_popup" data-inline="true" data-rel="popup" data-position-to="window">1btn popup</a></li>
+ </ul>
+
+ <div id="1btn_popup" class="ui-popup">
+ <div class="ui-popup-header">Popup Header</div>
+ <div class="ui-popup-content popup-content-padding">
+ Lorem ipsum dolor sit amet,
+ consectetur adiptiscing elit, sed
+ doei usmod tempore sit ipsum
+ </div>
+ <div class="ui-popup-footer">
+ <a class="ui-btn" data-rel="back" data-inline="true">Cancel</a>
+ </div>
+ </div>
+ </div>
</div>
-<script>
- // Set options
- var popupWidget = tau.widget.Popup(document.getElementById("popup"));
- popupWidget.option({positionTo: "origin", link: "linkId"}); // here we set positionTo and id of link, which sets placement of popup
+</pre>
- // Set opening popup on click event
- document.getElementById("linkId").addEventListener("click", function ()
- {
- // If options are set, call open method without options
- popupWidget.open();
- });
-</script>
-</pre></li>
-<li>For the jQuery API, the link ID must be always added as an option (<strong>support for backward compatibility</strong>):
-<pre class="prettyprint"><!--Element with no properties - popup is opened next to it in context style manually-->
-<div id="linkId">Link for popup</div>
-<div id="popup" data-role="popup">
- <p>This is a completely basic popup, no options set.</p>
+<h3>Open Popup as context popup</h3>
+<p>When element has <code>data-position-to="origin"</code>, it opens context popup.<br>
+In mobile profile, default value is "origin" and if popup has no option about <code>data-position-to</code>, it opened as context popup.</p>
+<pre class="prettyprint"><div data-role="page" class="ui-page" id="demo-page">
+ <div class="ui-content">
+ <ul class="ui-listview">
+ <li class="ui-li-anchor"><a href="#ctxpopup_vertical_basic" data-inline="true" data-rel="popup">Vertical Basic</a></li>
+ </ul>
+
+ <div id="ctxpopup_vertical_basic" class="ui-popup" data-overlay="false">
+ <ul class="ui-listview">
+ <li class="ui-li-anchor"><a href="#" data-rel="back">Copy</a></li>
+ <li class="ui-li-anchor"><a href="#" data-rel="back">Cut</a></li>
+ <li class="ui-li-anchor"><a href="#" data-rel="back">Paste</a></li>
+ <li class="ui-li-anchor"><a href="#" data-rel="back">Clipboard</a></li>
+ </ul>
+ </div>
+ </div>
</div>
-<script>
- // Set positionTo option
- $("#popup").popup("option", "positionTo", "origin");
+</pre>
- // Set opening popup on click event
- $("#linkId").on("click", function ()
- {
- // For jQuery API, link has to be added as an option
- $("#popup").popup("open", {link: "linkId"});
- });
-</script>
-</pre></li></ul>
<h2><a id="options-list"></a>Options</h2>
<th>Input type</th>
<th>Default value</th>
<th>Description</th>
- </tr>
-
- <tr>
+ </tr>
+
+ <tr>
+ <td class="option"><span style="font-family: Courier New,Courier,monospace">data-position-to</span></td>
+ <td class="option">string</td>
+ <td class="option">"origin"</td>
+ <td class="option">Element relative to which the popup is centered.</td>
+ </tr>
+
+ <tr>
<td class="option"><span style="font-family: Courier New,Courier,monospace">data-close-link-selector</span></td>
<td class="option">string</td>
<td class="option">'a[data-rel="back"]'</td>
- <td class="option">Selector for the buttons in the popup.</td>
- </tr>
-
- <tr>
- <td class="option"><span style="font-family: Courier New,Courier,monospace">data-direction-priority</span></td>
- <td class="option">Array</td>
- <td class="option">"bottom","top", "right", "left"</td>
- <td class="option">Directions of the popup placement by priority. First one has the highest priority, last one the lowest.</td>
- </tr>
-
- <tr>
- <td class="option"><span style="font-family: Courier New,Courier,monospace">data-history</span></td>
- <td class="option">boolean</td>
- <td class="option">false</td>
- <td class="option">Sets whether the URL is altered when the popup is open to support the back button.</td>
+ <td class="option">Selector for the close buttons in the popup.</td>
</tr>
<tr>
- <td class="option"><span style="font-family: Courier New,Courier,monospace">data-position-to</span></td>
- <td class="option">string</td>
- <td class="option">"origin"</td>
- <td class="option">Element relative to which the popup is centered.</td>
- </tr>
-
- <tr>
- <td class="option"><span style="font-family: Courier New,Courier,monospace">data-shadow</span></td>
- <td class="option">boolean</td>
- <td class="option">true</td>
- <td class="option">Sets whether a shadow is drawn around the popup.</td>
- </tr>
-
- <tr>
- <td class="option"><span style="font-family: Courier New,Courier,monospace">data-tolerance</span></td>
- <td class="option">Object</td>
- <td class="option">{t: 10, r: 10, b: 10, l: 10}</td>
- <td class="option">Minimum distance from the edge of the window for the corresponding edge of the popup.</td>
- </tr>
-
- <tr>
<td class="option"><span style="font-family: Courier New,Courier,monospace">data-transition</span></td>
<td class="option">string</td>
<td class="option">"pop"</td>
<td class="option">Default transition for the popup.</td>
</tr>
+ <tr>
+ <td class="option"><span style="font-family: Courier New,Courier,monospace">data-arrow</span></td>
+ <td class="option">string</td>
+ <td class="option">"b, t, r, l"</td>
+ <td class="option">Sets directions of popup's arrow by priority ("l" for left, "t" for top, "r" for right, and "b" for bottom).<br>
+ The first one has the highest priority.</td>
+ </tr>
+
+ <tr>
+ <td class="option"><span style="font-family: Courier New,Courier,monospace">data-direction-priority</span></td>
+ <td class="option">Array</td>
+ <td class="option">["bottom","top", "right", "left"]</td>
+ <td class="option"><span style="color:red;"><i>DEPRECATED since 2.4</i></span></td>
+ </tr>
</tbody>
</table>
</pre>
<h3>Summary</h3>
-
+<p>Mobile Popup has three more events including <a href="../Base/popup.htm#popup-events">Base Popup Events</a>. Here is mobile-specific popup events.</p>
<table>
<tbody>
<tr>
</table>
+<h2><a id="managing-popup"></a>Managing a Popup</h2>
- <h2><a id="methods-list"></a>Methods</h2>
-
- <p>To call a method on the component, use one of the existing APIs:</p>
-
-<ul><li><p>TAU API (<strong>RECOMMENDED</strong>):</p>
-
-<pre class="prettyprint">var popupElement = document.getElementById("popup"),
- popup = tau.widget.Popup(popupElement);
-
-popup.methodName(methodArgument1, methodArgument2, ...);
-</pre>
-
-</li>
-
-<li><p>jQuery API (<strong>support for backward compatibility</strong>):</p>
-
-<pre class="prettyprint">$(".selector").popup("methodName", methodArgument1, methodArgument2, ...);
-</pre></li></ul>
-
- <h3>Summary</h3>
- <table class="informaltable">
- <thead>
- <tr>
- <th>Method</th>
- <th>Description</th>
- </tr>
- </thead>
- <tbody>
-
-
- <tr>
- <td>
- <pre class="intable prettyprint">* <a href="#method-option">option</a> ( string | Object? name, * value ) </pre>
- </td>
- <td><p>Gets and sets component options.</p></td>
- </tr>
-
-
-
- <tr>
- <td>
- <pre class="intable prettyprint">Popup <a href="#method-refresh">refresh</a> ( Object? options, number? options.positionX, number? options.positionY ) </pre>
- </td>
- <td><p>Refreshes the position of the opened popup.</p></td>
- </tr>
-
- <tr>
- <td>
- <pre class="intable prettyprint"><a href="#opening-popup0.4268628491554409">Open</a> ( Object? options ) </pre>
- </td>
- <td><p>Opens the popup.</p></td>
- </tr>
-
- <tr>
- <td>
- <pre class="intable prettyprint"><a href="#closing-popup0.4531055218540132">Close</a> ( Boolean immediate ) </pre>
- </td>
- <td><p>Closes the popup.</p></td>
- </tr>
-
-
-
- <tr>
- <td>
- <pre class="intable prettyprint"><a href="#method-setPositionCB">setPositionCB</a> ( Function callback ) </pre> - <i style="color:red">deprecated</i>
- </td>
- <td><p>Sets a callback, which is called on the <code>resize</code> event. This callback is used to return the desired position of the popup after resizing.</p></td>
- </tr>
-
-
-
- <tr>
- <td>
- <pre class="intable prettyprint"><a href="#method-setPositionCallback">setPositionCallback</a> ( Function callback )</pre>
- </td>
- <td><p>Sets a callback, which is called on the <code>resize</code> event. This callback is used to return the desired position of the popup after resizing.</p></td>
- </tr>
-
-
-
-
- </tbody>
- </table>
- <dl>
-
- <dt class="method" id="addidp28072"><code><b><span class="methodName"
- id="method-option">option</span></b></code></dt>
- <dd>
- <div class="brief">
- <p>Gets and sets component options.</p>
- </div>
- <div class="synopsis">
- <pre class="signature prettyprint">* option ( string | Object? name, * value) </pre>
- </div>
-
- <div class="description">
- <p>
- <p>The method can work in many contexts:</p>
- <ul><li>If first argument is of the object type, the method sets values for the options given in the object. The object keys are the names of the options and the values from the object are the values to set.</li>
-
- <li>If you give only 1 string argument, the method returns the value for the given option.</li>
-
- <li>If you give 2 arguments, and the first argument is a string, the second argument is interpreted as the value to set.</li></ul>
-
-
- </p>
- </div>
-
- <div class="parameters">
- <p><span class="param">Parameters:</span></p>
- <table>
- <tbody>
- <tr>
- <th>Parameter</th>
- <th>Type</th>
- <th>Required/optional</th>
- <th>Default value</th>
- <th>Description</th>
- </tr>
-
-
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">name</span></td>
- <td>string | Object</td>
- <td>Optional</td>
- <td></td>
- <td>Name of the option.</td>
- </tr>
-
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">value</span></td>
- <td>*</td>
- <td>Required</td>
- <td></td>
- <td>Value to set.</td>
- </tr>
-
-
- </tbody>
- </table>
- </div>
-
- <div class="returntype">
- <p><span class="return">Return value:</span></p>
-
- <table>
- <tbody>
- <tr>
- <th>Type</th>
- <th>Description</th>
- </tr>
- <tr>
- <td>*</td>
- <td>Return value of the option or undefined if method is used to set a value.</td>
- </tr>
- </tbody>
- </table>
-
-
- </div>
-
- <div class="example">
- <span class="example"><p>Code
- example (TAU API <strong>RECOMMENDED</strong>):</p><p></p></span>
- <pre name="code" class="examplecode
- prettyprint">
-<div id="popup" data-role="popup">
- <p>This is a completely basic popup, no options set.</p>
-</div>
-<script>
- var popupWidget = tau.widget.Popup(document.getElementById("popup")),
- optionValue;
-
- optionValue = popupWidget.option("positionTo"); // Read positionTo value
- popupWidget.option("positionTo", "window") // Set value
-</script>
-</pre>
- </div>
-
- <div class="example">
- <span class="example"><p>Code
- example (jQuery API <strong>support for backward compatibility</strong>):</p><p></p></span>
- <pre name="code" class="examplecode
- prettyprint">
-<div id="popup" data-role="popup">
- <p>This is a completely basic popup, no options set.</p>
-</div>
-<script>
- optionValue = $("#popup").popup("option", "positionTo");
- $("#popup").popup("option", "positionTo", "window");
-</script>
-</pre>
- </div>
-
- </dd>
-
-
-
- <dt class="method" id="addidp28072"><code><b><span class="methodName"
- id="method-refresh">refresh</span></b></code></dt>
- <dd>
- <div class="brief">
- <p>
-Refreshes the position of the opened popup.</p>
- </div>
- <div class="synopsis">
- <pre class="signature prettyprint">Popup refresh ( Object? options) </pre>
- </div>
-
- <div class="description">
- <p>
- <p>In case of the context popup, the position of the arrow is not changed after calling this method. If the new position of the popup content causes disconnection from the arrow, the popup position is corrected automatically. Popup content is always set so that the arrow is placed between the left and right side of the popup container with a proper margin set in the <code>data-tolerance</code> option.</p>
-
- </p>
- </div>
-
- <div class="parameters">
- <p><span class="param">Parameters:</span></p>
- <table>
- <tbody>
- <tr>
- <th>Parameter</th>
- <th>Type</th>
- <th>Required/optional</th>
- <th>Default value</th>
- <th>Description</th>
- </tr>
-
-
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">options</span></td>
- <td>Object</td>
- <td>Optional</td>
- <td></td>
- <td>Options.</td>
- </tr>
- </tbody>
- </table>
-
- <div class="parameters">
- <p>The <span style="font-family: Courier New,Courier,monospace">options</span> object contains the following values:</p>
- <table>
- <tbody>
- <tr>
- <th>Name</th>
- <th>Type</th>
- <th>Description</th>
- </tr>
-
-
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">options.positionX</span></td>
- <td>number</td>
- <td>Desired horizontal coordinate of the center point in the popup in pixels (it only works if both coordinates are set - top and left).</td>
- </tr>
-
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">options.positionY</span></td>
- <td>number</td>
- <td>Desired vertical coordinate of the center point in the popup in pixels (it only works if both coordinates are set - top and left).</td>
- </tr>
- </tbody>
- </table>
- </div>
-
- <div class="returntype">
- <p><span class="return">Return value:</span></p>
-
- <table>
- <tbody>
- <tr>
- <th>Type</th>
- <th>Description</th>
- </tr>
- <tr>
- <td>Popup</td>
- <td>Returns this.</td>
- </tr>
- </tbody>
- </table>
-
-
- </div>
-
- <div class="example">
- <span class="example"><p>Code
- example (TAU API <strong>RECOMMENDED</strong>):</p><p></p></span>
- <pre name="code" class="examplecode
- prettyprint">
-<div id="popup" data-role="popup">
- <p>This is a completely basic popup, no options set.</p>
-</div>
-<script>
- var popupWidget = tau.widget.Popup(document.getElementById("popup"));
-
- popupWidget.refresh(); // Only refresh original position
-</script>
-</pre>
- </div>
-
- <div class="example">
- <span class="example"><p>Code
- example (jQuery API <strong>support for backward compatibility</strong>):</p><p></p></span>
- <pre name="code" class="examplecode
- prettyprint">
-<div id="popup" data-role="popup">
- <p>This is a completely basic popup, no options set.</p>
-</div>
-<script>
- $("#popup").popup("refresh", {top: 10, left: 10}); // Set new position for the center point of popup
-</script>
-</pre>
- </div>
-
- </dd>
-
-
-
- <dt class="method" id="addidp28072"><code><b><span class="methodName"
- id="method-setPositionCB">setPositionCB: <strong style="color:red">deprecated</strong></span></b></code></dt>
- <dd>
- <div class="brief">
- <p>Sets a callback, which is called on the resize event. This callback is used to return the desired position of the popup after resizing.</p>
- </div>
- <div class="synopsis">
- <pre class="signature prettyprint">setPositionCB ( Function callback) </pre>
- </div>
-
- <div class="description">
- <p>
- <p>This method is deprecated, and the <code>setPositionCallback</code> method must be used to set the callback.</p>
-
- </dd>
-
-
-
- <dt class="method" id="addidp28072"><code><b><span class="methodName"
- id="method-setPositionCallback">setPositionCallback</span></b></code></dt>
- <dd>
- <div class="brief">
- <p>Sets a callback, which is called on the resize event. This callback is used to return the desired position of the popup after resizing.</p>
- </div>
- <div class="synopsis">
- <pre class="signature prettyprint">setPositionCallback ( Function callback) </pre>
- </div>
-
- <div class="description">
- <p>
- <p>Use this method instead of the deprecated <code>setPositionCB</code>.</p>
-
-
-
-
-
-
- </p>
- </div>
-
- <div class="parameters">
- <p><span class="param">Parameters:</span></p>
- <table>
- <tbody>
- <tr>
- <th>Parameter</th>
- <th>Type</th>
- <th>Required/optional</th>
- <th>Default value</th>
- <th>Description</th>
- </tr>
-
-
- <tr>
- <td><span style="font-family: Courier New,Courier,monospace">callback</span></td>
- <td>Function</td>
- <td>Required</td>
- <td></td>
- <td>Method called on resizing. It is used to return the desired position of the popup as an object with the "x" and "y" properties.</td>
- </tr>
-
-
- </tbody>
- </table>
- </div>
-
- <div class="returntype">
- <p><span class="return">Return value:</span></p>
-
-
- No return value
-
- </div>
-
- <div class="example">
- <span class="example"><p>Code
- example (TAU API <strong>RECOMMENDED</strong>):</p><p></p></span>
- <pre name="code" class="examplecode
- prettyprint">
-<div id="popup" data-role="popup">
- <p>This is a completely basic popup, no options set.</p>
-</div>
-<script>
- var popupWidget = tau.widget.Popup(document.getElementById("popup"));
-
- popupWidget.setPositionCallback(function()
- {
- return {x: 10, y: 20};
- });
-</script>
-</pre>
- </div>
-
- <div class="example">
- <span class="example"><p>Code
- example (jQuery API <strong>support for backward compatibility</strong>):</p><p></p></span>
- <pre name="code" class="examplecode
- prettyprint">
-<div id="popup" data-role="popup">
- <p>This is a completely basic popup, no options set.</p>
-</div>
-<script>
- $("#popup").popup("setPositionCallback", function()
- {
- return {x: 10, y: 20};
- });
-</script>
-</pre>
- </div>
-
- </dd>
-
-
-
-
- </dl>
-
-<h2><a id="opening-popup0.4268628491554409"></a>Opening a Popup</h2>
-
+<h3>Open Popup</h3>
<p>There are 2 ways to open a popup:</p>
<ul><li>Open by clicking on a link:
-<ul><li><p>If the link has the <code>id</code> of the popup set as the value of the <code>href</code> property, the popup is opened after clicking on the link.</p>
+<p>If the link has the <code>id</code> of the popup set as the value of the <code>href</code> property, the popup is opened after clicking on the link.</p>
<pre class="prettyprint"><!--Definition of link, which opens popup with popup id-->
<a href="#popup">Click to open popup</a>
<div id="popup" data-role="popup">
<p>This is a completely basic popup, no options set.</p>
</div>
-</pre></li>
-
-<li><p>Be aware that a context popup with an arrow is opened if the link has the <code>id</code> property and <code>data-position-to="origin"</code> set as in this example:</p>
-
-<pre class="prettyprint"><!--Definition of link, which opens context popup with popup id-->
-<a href="#popup" id="linkId" data-position-to="origin" data-role="button" data-inline="true">Click to open context popup</a>
-<div id="popup" data-role="popup">
- <p>This is a completely basic popup, no options set.</p>
-</div>
-</pre></li>
-
-<li><p>To open a window popup, the <code>data-position-to="window"</code> property must be set in the link or popup.</p>
-
-<pre class="prettyprint"><!--Definition of link, which opens window popup with popup id-->
-<a href="#popup" id="linkId" data-position-to="window">Click to open popup</a>
-<div id="popup" data-role="popup">
- <p>This is a completely basic popup, no options set.</p>
-</div>
-</pre></li></ul></li>
+</pre>
+</li>
<li>Open manually:
-<ul><li><p>To open a popup with the "popup" <code>id</code> property, the <code>tau</code> namespace can be used (<strong>RECOMMENDED</strong>):</p>
+<p>To open a popup with the "popup" <code>id</code> property, the <code>tau</code> namespace can be used.:</p>
<pre class="prettyprint"><div id="popup">
<p>This is a completely basic popup, no options set.</p>
popup = tau.widget.Popup(popupElement);
popup.open();
</script>
-</pre></li>
-
-<li><p>If the jQuery library is loaded, this method can be used (<strong>support for backward compatibility</strong>):</p>
-
-<pre class="prettyprint"><div id="popup" data-role="popup">
- <p>This is a completely basic popup, no options set.</p>
-</div>
-<script>
- var popup = $("#popup").popup();
- popup.popup("open");
-</script>
-</pre></li>
+</pre>
-<li><p>With the TAU API, you can open a popup anywhere (<strong>RECOMMENDED</strong>):</p>
+<p>With the TAU API, you can open a popup anywhere:</p>
<pre class="prettyprint"><div id="popup">
<p>This is a completely basic popup, no options set.</p>
<script>
tau.openPopup("#popup");
</script>
-</pre></li></ul></li></ul>
-
-<h2><a id="closing-popup0.4531055218540132"></a>Closing a Popup</h2>
+</pre></li></ul>
+<h3>Close Popup</h3>
<p>There are 2 ways to close a popup:</p>
<ul><li>Close by clicking on a button inside:
-<p>If the link inside the popup has the <code>data-rel="back"</code> property, the popup is closed after clicking on it:</p>
-
-<pre class="prettyprint"><a href="#center_title_1btn" data-position-to="window">Click to open popup</a>
-<!--Definition of popup with a title and button-->
-<div id="center_title_1btn" data-role="popup" class="center_title_1btn">
- <div class="ui-popup-title">
- <h1>Popup title</h1>
+<p>If the link inside the popup has the <code>data-rel="back"</code> property, the popup is closed after clicking on it.<br>
+The selector, which causes closing on click, can be changed by setting the <code>closeLinkSelector</code> option in the popup: </p>
+<pre class="prettyprint"><div id="1btn_popup" class="ui-popup">
+ <div class="ui-popup-header">Popup Header</div>
+ <div class="ui-popup-content popup-content-padding">
+ Lorem ipsum dolor sit amet,
+ consectetur adiptiscing elit, sed
+ doei usmod tempore sit ipsum
</div>
- <div class="ui-popup-text">
- Pop-up dialog box, a child window that blocks user interaction to the parent windows
- </div>
- <div class="ui-popup-button-bg">
- <a data-role="button" data-rel="back" data-inline="true">Button</a>
+ <div class="ui-popup-footer">
+ <a class="ui-btn" data-rel="back" data-inline="true">Cancel</a>
</div>
</div>
</pre>
-<p>The selector, which causes closing on click, can be changed by setting the <code>closeLinkSelector</code> option in the popup.</p></li>
+</li>
<li>Close manually:
-<ul><li><p>To close a popup with the "popup" <code>id</code> property, the <code>tau</code> namespace can be used (<strong>RECOMMENDED</strong>):</p>
+<p>To close a popup with the "popup" <code>id</code> property, the <code>tau</code> namespace can be used:</p>
<pre class="prettyprint"><a href="#popup" data-position-to="window">Click to open popup</a>
<div id="popup" data-role="popup">
popup.close();
});
</script>
-</pre></li>
+</pre>
-<li><p>If jQuery library is loaded, this method can be used (<strong>support for backward compatibility</strong>):</p>
-<pre class="prettyprint"><a href="#popup" data-position-to="window">Click to open popup</a>
-<div id="popup" data-role="popup">
- <p>This is a completely basic popup, no options set.</p>
-</div>
-<script>
- $("#popup").on("popupafteropen", function ()
- {
- $("#popup").popup("close");
- });
-</script>
-</pre></li>
-
-<li><p>With the TAU API, you can close a popup anywhere (<strong>RECOMMENDED</strong>):</p>
+<p>With the TAU API, you can close a popup anywhere:</p>
<pre class="prettyprint"><div id="popup">
<p>This is a completely basic popup, no options set.</p>
</div>
<script>
- tau.closePopup("#popup");
+ tau.closePopup();
</script>
-</pre> </li></ul></li></ul>
+</pre></li></ul>
<div id="footer">
projects / sdk / online-doc.git / commitdiff