<p>Footer more sample</p>
</div>
<div data-role="footer">
- <a href="#pop_js" data-role="button" data-icon="naviframe-more" data-rel="popupwindow"></a>
+ <a href="#pop_js" data-role="button" data-icon="naviframe-more" data-rel="popup"></a>
- <div id="pop_js" data-role="popupwindow" data-show-arrow="true">
+ <div id="pop_js" data-role="popup" >
<ul data-role="listview">
- <li><a href="#" class="ui-btn-ctxpopup-close">Settings</a></li>
- <li><a href="#" class="ui-btn-ctxpopup-close">Add to contact</a></li>
- <li><a href="#" class="ui-btn-ctxpopup-close">Call log</a></li>
- <li><a href="#" class="ui-btn-ctxpopup-close">Music</a></li>
- <li><a href="#" class="ui-btn-ctxpopup-close">File manager</a></li>
- <li><a href="naviframe.html" class="ui-btn-ctxpopup-close">Internal Link</a></li>
+ <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="naviframe.html" data-rel="back">Internal Link</a></li>
</ul>
</div>
</div>
<p>Footer more sample</p>
</div>
<div data-role="footer">
- <a href="#pop_js" data-role="button" data-icon="naviframe-more" data-rel="popupwindow"></a>
+ <a href="#pop_js" data-role="button" data-icon="naviframe-more" data-transition="popbottom" data-rel="popup"></a>
<div data-role="button" data-inline="true" data-style="round">Button1</div>
<div data-role="button" data-inline="true" data-style="round">Button2</div>
- <div id="pop_js" data-role="popupwindow" data-show-arrow="true">
+ <div id="pop_js" data-role="popup" >
<ul data-role="listview">
- <li><a href="#" class="ui-btn-ctxpopup-close">Settings</a></li>
- <li><a href="#" class="ui-btn-ctxpopup-close">Add to contact</a></li>
- <li><a href="#" class="ui-btn-ctxpopup-close">Call log</a></li>
- <li><a href="#" class="ui-btn-ctxpopup-close">Music</a></li>
- <li><a href="#" class="ui-btn-ctxpopup-close">File manager</a></li>
+ <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>
</ul>
</div>
</div>
_setTolerance: function( value ) {
- var tol = { t: 30, r: 15, b: 30, l: 15 };
-+ var tol = { t: 10, r: 10, b: 10, l: 10 };
++ var tol = { t: 5, r: 5, b: 5, l: 5 };
if ( value ) {
var ar = String( value ).split( "," );
+ break;
+ case 1:
+ correctionValue = [ 0 , -(ret.y + menuSize.cy - linkOffset.top)];
-+ arrowtop = menuSize.cy;
++ arrowtop = menuSize.cy - 1;
+ arrowleft = (linkOffset.left - ret.x + correctionValue[0]) + ( $(this.link).width() / 2 ) - parseInt( $(this._ui.arrow).css("border-width") ) / 2;
+ $(this._ui.arrow).attr( "class", "" )
+ .addClass( "ui-arrow bottom" );
+ break;
+ case 2:
+ correctionValue = [ 0 , ( linkOffset.top + $(this.link).height() - ret.y ) ];
-+ arrowtop = - parseInt( $(this._ui.arrow).css("border-width") ) * 2;
++ arrowtop = - parseInt( $(this._ui.arrow).css("border-width") ) * 2 + 1;
+ arrowleft = (linkOffset.left - ret.x + correctionValue[0]) + ( $(this.link).width() / 2 ) - parseInt( $(this._ui.arrow).css("border-width") ) / 2;
+ $(this._ui.arrow).attr( "class", "" )
+ .addClass("ui-arrow top");
+ break;
+ case 3:
+ correctionValue = [ ( menuSize.cx < $(this.link).width() ) ? ( $(this.link).width() / 2 ) + ( menuSize.cx / 2) : $(this.link).width() , 0];
-+ arrowtop = ( linkOffset.top - ret.y ) + ( $(this.link).height() / 2 ) - parseInt( $(this._ui.arrow).css("border-width") );
++ arrowtop = ( linkOffset.top - ret.y ) + ( $(this.link).height() / 2 ) - parseInt( $(this._ui.arrow).css("border-width") ) ;
+ arrowleft = - parseInt( $(this._ui.arrow).css("border-width") ) * 2;
+ $(this._ui.arrow).attr( "class", "" )
+ .addClass("ui-arrow right");
+ }
- return { left: ret.x, top: ret.y };
-+ return { left: ret.x + correctionValue[0], top: ret.y + correctionValue[1] , arrowleft: arrowleft , arrowtop: arrowtop};
++ return { left: ret.x + correctionValue[0], top: ret.y + correctionValue[1] , arrowleft: arrowleft , arrowtop: arrowtop };
},
_createPrereqs: function( screenPrereq, containerPrereq, whenDone ) {
border-top-right-radius: @border_radius;
}
}
+
+.poptop {
+ -webkit-transform-origin: 0% 0%;
+ -moz-transform-origin: 0% 0%;
+}
+
+.poptop.in {
+ -webkit-transform: scale(1);
+ -moz-transform: scale(1);
+ opacity: 1;
+ -webkit-animation-name: scalepopin;
+ -moz-animation-name: scalepopin;
+ -webkit-animation-duration: 350ms;
+ -moz-animation-duration: 350ms;
+}
+
+.poptop.out {
+ -webkit-animation-name: fadeout;
+ -moz-animation-name: fadeout;
+ opacity: 0;
+ -webkit-animation-duration: 100ms;
+ -moz-animation-duration: 100ms;
+}
+
+.poptop.in.reverse {
+ -webkit-animation-name: fadein;
+ -moz-animation-name: fadein;
+}
+
+.poptop.out.reverse {
+ -webkit-transform: scale(.8);
+ -moz-transform: scale(.8);
+ -webkit-animation-name: scalepopout;
+ -moz-animation-name: scalepopout;
+}
+
+@-webkit-keyframes scalepopin {
+ from {
+ -webkit-transform: scale(.8);
+ opacity: 0;
+ }
+ to {
+ -webkit-transform: scale(1);
+ opacity: 1;
+ }
+}
+
+.popbottom {
+ -webkit-transform-origin: 0% 100%;
+ -moz-transform-origin: 0% 100%;
+}
+
+.popbottom.in {
+ -webkit-transform: scale(1);
+ -moz-transform: scale(1);
+ opacity: 1;
+ -webkit-animation-name: scalepopin;
+ -moz-animation-name: scalepopin;
+ -webkit-animation-duration: 350ms;
+ -moz-animation-duration: 350ms;
+}
+
+.popbottom.out {
+ -webkit-animation-name: fadeout;
+ -moz-animation-name: fadeout;
+ opacity: 0;
+ -webkit-animation-duration: 100ms;
+ -moz-animation-duration: 100ms;
+}
+
+.popbottom.in.reverse {
+ -webkit-animation-name: fadein;
+ -moz-animation-name: fadein;
+}
+
+.popbottom.out.reverse {
+ -webkit-transform: scale(.8);
+ -moz-transform: scale(.8);
+ -webkit-animation-name: scalepopout;
+ -moz-animation-name: scalepopout;
+}
+
+@-moz-keyframes scalepopin {
+ from {
+ -moz-transform: scale(.8);
+ opacity: 0;
+ }
+ to {
+ -moz-transform: scale(1);
+ opacity: 1;
+ }
+}
+
+@-webkit-keyframes scalepopout {
+ from {
+ -webkit-transform: scale(1);
+ opacity: 1;
+ }
+ to {
+ -webkit-transform: scale(.8);
+ opacity: 0;
+ }
+}
+
+@-moz-keyframes scalepopout {
+ from {
+ -moz-transform: scale(1);
+ opacity: 1;
+ }
+ to {
+ -moz-transform: scale(.8);
+ opacity: 0;
+ }
+}
\ No newline at end of file