<li><a href="widgets/imageslider.html">ImageSlider</a></li>
<li><a href="widgets/pagecontrol/pagecontrol.html">PageControl</a></li>
<li><a href="widgets/selectioninfo.html">SelectionInfo</a></li>
+ <li><a href="#multibuttonentry">Multi-Button Entry</a></li>
+
+ <li data-role="list-divider">Scrollview</li>
+ <li><a href="widgets/scrollview_x.html">Horizontal Scroll</a></li>
+ <li><a href="widgets/scrollview_y.html">Vertical Scroll</a></li>
<li><a href="widgets/handler.html">Handler</a></li>
<li><a href="widgets/scroll_jump.html">Scroll Jump</a></li>
- <li><a href="#multibuttonentry">Multi-Button Entry</a></li>
+
<li data-role="list-divider">ControlBar</li>
<li><a href="#controlbar-demo">ControlBar</a></li>
<li data-role="list-divider">Notification (ticker)</li>
<li><a href="widgets/tickernoti.html">TickerNoti</a></li>
+ <li><a href="widgets/tickernoti-interval.html">TickerNoti Interval</a></li>
<li><a href="widgets/small-popup.html">Small Popup</a></li>
+ <li><a href="widgets/small-popup-interval.html">Small Popup Interval</a></li>
<li data-role="list-divider">No Contents</li>
<li><a href="#no-contents-0">No Contents - Text</a></li>
--- /dev/null
+<!DOCTYPE html>
+<div data-role="page">
+ <div data-role="header" data-position="fixed">
+ <h1>Scrollview</h1>
+ </div>
+ <div data-role="content">
+ <p>Horizontal Scroll #1: inline block</p>
+ <div style="white-space:nowrap;" data-scroll="x">
+ <div class="ui-scrollview-view" style="display:inline-block">
+ <img src="./test/01.jpg" height="70px">
+ <img src="./test/02.jpg" height="70px">
+ <img src="./test/03.jpg" height="70px">
+ <img src="./test/04.jpg" height="70px">
+ <img src="./test/05.jpg" height="70px">
+ <img src="./test/06.jpg" height="70px">
+ <img src="./test/07.jpg" height="70px">
+ <img src="./test/08.jpg" height="70px">
+ <img src="./test/10.jpg" height="70px">
+ <img src="./test/11.jpg" height="70px">
+ </div>
+ </div>
+ <p>Horizontal Scroll #2: set the width of view</p>
+ <div data-scroll="x">
+ <div class="ui-scrollview-view" style="width:1176px">
+ <img src="./test/01.jpg" height="70px">
+ <img src="./test/02.jpg" height="70px">
+ <img src="./test/03.jpg" height="70px">
+ <img src="./test/04.jpg" height="70px">
+ <img src="./test/05.jpg" height="70px">
+ <img src="./test/06.jpg" height="70px">
+ <img src="./test/07.jpg" height="70px">
+ <img src="./test/08.jpg" height="70px">
+ <img src="./test/10.jpg" height="70px">
+ <img src="./test/11.jpg" height="70px">
+ </div>
+ </div>
+ </div><!-- /content -->
+</div> <!-- /page -->
--- /dev/null
+<!DOCTYPE html>
+<div data-role="page">
+ <div data-role="header" data-position="fixed">
+ <h1>Scrollview</h1>
+ </div>
+ <div data-role="content">
+ <p>Vertical Scroll</p>
+ <div style="height:300px;border-style:dotted;border-width:1px" data-scroll="y" align="center">
+ <img src="./test/01.jpg" width="95%">
+ <img src="./test/02.jpg" width="95%">
+ <img src="./test/03.jpg" width="95%">
+ <img src="./test/04.jpg" width="95%">
+ <img src="./test/05.jpg" width="95%">
+ <img src="./test/06.jpg" width="95%">
+ <img src="./test/07.jpg" width="95%">
+ <img src="./test/08.jpg" width="95%">
+ <img src="./test/09.jpg" width="95%">
+ <img src="./test/10.jpg" width="95%">
+ <img src="./test/11.jpg" width="95%">
+ </div>
+ </div><!-- /content -->
+</div> <!-- /page -->
--- /dev/null
+<!DOCTYPE html>
+<div data-role="page" data-add-back-btn="true">
+ <div data-role="notification" id="notification" data-type="popup" data-interval="3000">
+ <p>Notification Demo</p>
+ </div>
+ <div data-role="header" data-position="fixed">
+ <h1>Notification</h1>
+ </div>
+ <div data-role="content">
+ <div data-role="button" id="noti-demo">Show Smallpopup</div>
+ </div><!-- /content -->
+</div> <!-- /page -->
$("#switch-demo").live("pageshow", function(e) {
- $("#switch-1-coord").bind("changed", function(e) {
+ $("#switch-1-coord").bind("change", function(e) {
$("#switch-2-coord").toggleswitch("option", "checked", $("#switch-1-coord").toggleswitch("option", "checked"));
});
- $("#switch-2-coord").bind("changed", function(e) {
+ $("#switch-2-coord").bind("change", function(e) {
$("#switch-1-coord").toggleswitch("option", "checked", $("#switch-2-coord").toggleswitch("option", "checked"));
});
});
--- /dev/null
+<!DOCTYPE html>
+<div data-role="page" data-add-back-btn="true">
+ <div data-role="notification" id="notification" data-type="ticker" data-interval="3000">
+ <img src="./test/icon02.png">
+ <p>Hello World</p>
+ <p>Dennis</p>
+ </div>
+ <div data-role="header" data-position="fixed">
+ <h1>Notification</h1>
+ </div>
+ <div data-role="content">
+ <div data-role="button" id="noti-demo">Show TickerNoti</div>
+ </div><!-- /content -->
+</div> <!-- /page -->
Name: web-ui-fw
-Version: 0.1.55
+Version: 0.1.56
Release: 0
Summary: Tizen Web UI Framework Library
Group: Development/Other
###############################
%changelog
+* Mon Oct 15 2012 Youmin Ha <youmin.ha@samsung.com> 0.1.56
+- FIX:
+ - Toggleswitch: Change event name from 'changed' to 'change'
+ - Notification: Revert interval feature
+
* Tue Oct 09 2012 Youmin Ha <youmin.ha@samsung.com> 0.1.55
- FIX:
- Fix SMACK manifest bug (S1-9098)
self = this;
this._$clip = $( this.element ).addClass("ui-scrollview-clip");
- this._$view = this._$clip.wrapInner("<div></div>").children()
+
+ if ( this._$clip.children(".ui-scrollview-view").length ) {
+ this._$view = this._$clip.children(".ui-scrollview-view");
+ } else {
+ this._$view = this._$clip.wrapInner("<div></div>").children()
.addClass("ui-scrollview-view");
+ }
if ( this.options.scrollMethod === "translate" ) {
if ( this._$view.css("transform") === undefined ) {
newY,
dirLock;
- if ( Math.abs( this._startY - ey ) < mt && !this._didDrag ) {
- return;
- }
-
this._lastMove = getCurrentTime();
if ( !this._directionLock ) {
}
if ( dirLock !== "x" && this._vTracker ) {
+ if ( Math.abs( this._startY - ey ) < mt ) {
+ return;
+ }
+
y = this._sy;
this._speedY = dy;
newY = y + dy;
*
* data-role: set to 'notification'.
* data-type: 'ticker' or 'popup'.
+ * data-interval: time to showing. If don't set, will show infinitely.
*
* APIs
*
* Examples
*
* // tickernoti
- * <div data-role="notification" id="notification" data-type="ticker">
+ * <div data-role="notification" id="notification" data-type="ticker" data-interval="3000">
* <img src="icon01.png">
* <p>Hello World</p>
* <p>Denis</p>
* </div>
*
* // smallpopup
- * <div data-role="notification" id="notification" data-type="popup">
+ * <div data-role="notification" id="notification" data-type="popup" data-interval="3000">
* <p>Hello World</p>
* </div>
*
btn: null,
text_bg: [],
icon_img: [],
+ interval: null,
+ seconds: null,
running: false,
_get_text: function () {
$( container ).addClass("fix")
.removeClass("show")
.removeClass("hide");
+
+ this._set_interval();
},
open: function () {
if ( this.type === 'popup' ) {
this._set_position();
}
+
+ this._set_interval();
},
close: function () {
.removeClass("fix");
this.running = false;
+ clearInterval( this.interval );
},
destroy: function () {
return $( this.element ).find(".ui-smallpopup");
},
+ _set_interval: function () {
+ var self = this;
+
+ clearInterval( this.interval );
+
+ if ( this.seconds !== undefined && this.second !== 0 ) {
+ this.interval = setInterval( function () {
+ self.close();
+ }, this.seconds );
+ }
+ },
+
_add_event: function () {
var self = this,
container = this._get_container();
this.btn.unbind("vmouseup");
}
container.unbind('vmouseup');
+ clearInterval( this.interval );
},
_set_position: function () {
shadow: true
});
+ this.seconds = elem.jqmData('interval');
this.type = elem.jqmData('type') || 'popup';
if ( this.type === 'ticker' ) {
// textoff: String; "Off";
//
// Events:
-// changed: Emitted when the switch is changed
+// change: Emitted when the switch is changed.
(function ( $, undefined ) {
_value: {
attr: "data-" + ($.mobile.ns || "") + "checked",
- signal: "changed"
+ signal: "change"
},
_setTexton: function ( text ) {
projects / platform / framework / web / web-ui-fw.git / commitdiff