<li><a href="widgets/pagecontrol/pagecontrol.html">PageControl</a></li>
<li><a href="widgets/selectioninfo.html">SelectionInfo</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><a href="widgets/grid/virtualgrid-auto.html">Virtual Grid - Auto</a></li>
<li data-role="list-divider">Multimedia view</li>
<li><a href="widgets/multimediaview/multimediaview.html">Multimedia view</a></li>
- <li data-role="list-divider">Map view</li>
-
<li data-role="list-divider">PageLayout</li>
<li><a href="widgets/pagelayout/barcontrol.html">Header/Footer(fixed/non-fixed) Control</a></li>
<li><a href="widgets/pagelayout/backbutton-control.html">Back Button Control</a></li>
<li><a href="tips/list-sample/list-sample.html">Example for using listview</a></li>
<li><a href="tips/list-sample/expandable.html">Example for using expandable list</a></li>
<li><a href="tips/page-transition/transition.html">Page transitions</a></li>
+
+
+
</ul>
</div>
</div>
<li><a href="#optionheader1line2btn">1 line 2 buttons</a></li>
<li><a href="#optionheader1line3btn">1 line 3 buttons</a></li>
<li><a href="#optionheader1line4btn">1 line 4 buttons</a></li>
- <li><a href="#optionheader2line4btn">2 line 4 buttons</a></li>
</ul>
</div>
</div>
<div data-role="page" id="optionheader1line2btn" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
+
+ <h1>Option header</h1>
<a id="123">TestBtn</a>
- <h1>Option header - 2 buttons</h1>
<a id="opt_text" data-icon="optiontray"></a>
<a id="1234">TestBtn</a>
</div>
</div>
- <div data-role="page" id="optionheader2line4btn" data-add-back-btn="true">
- <div data-role="header" data-position="fixed">
- <h1>Option header - 4 buttons</h1>
- <div id="myoptionheader" data-role="optionheader">
- <div class="ui-grid-c ">
- <div class="ui-block-a"><a data-role="button">Previous</a></div>
- <div class="ui-block-b"><a data-role="button">Cancel</a></div>
- <div class="ui-block-c"><a data-role="button">Save</a></div>
- <div class="ui-block-d"><a data-role="button">Next</a></div>
- <div class="ui-block-a"><a data-role="button">Left</a></div>
- <div class="ui-block-b"><a data-role="button">1st Middle</a></div>
- <div class="ui-block-c"><a data-role="button">2nd Middle</a></div>
- <div class="ui-block-d"><a data-role="button">Right</a></div>
- </div>
- </div>
- </div>
- <div data-role="content">
- <p>Some content would be here</p>
- </div>
- </div>
-
<div data-role="page" id="controlbar-demo" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<h1>ControlBar</h1>
<div data-role="page" id="normal1btn">
<div data-role="header" data-position="fixed">
<h1>Normal Title - 1Btn</h1>
- <a>default</a>
+ <a>text1</a>
</div>
<div data-role="content">
<ul data-role="listview">
<div data-role="page" id="normal2btn">
<div data-role="header" data-position="fixed">
<h1>Normal Title - 2Btn</h1>
- <a>default1</a>
- <a>default2</a>
+ <a>text1</a>
+ <a>text2</a>
</div>
<div data-role="content">
<ul data-role="listview">
<div data-role="page" id="normal2btnicononly">
<div data-role="header" data-position="fixed">
- <h1>Normal Title+2Buttons Icon only - Not Implemented Yet</h1>
+ <h1>Normal Title+2Buttons Icon only</h1>
<a data-icon="plus"></a>
<a data-icon="minus"></a>
</div>
<div data-role="page" id="normal3btn" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
- <a>default1</a>
<h1>Normal Title - 3Btn</h1>
- <a>default2</a>
- <a>default3</a>
+ <a>text1</a>
+ <a>text2</a>
+ <a>text3</a>
</div>
<div data-role="content">
<ul data-role="listview">
<div data-role="header" data-position="fixed">
<img src="icon-tizen.png"/>
<h1>Icon Title</h1>
- <a>default</a>
+ <a>text1</a>
</div>
<div data-role="content">
<ul data-role="listview">
<h1>Multi-button Entry</h1>
</div>
<div data-role="content">
- <div data-role="multibuttonentry" data-listuri="addressbook"></div>
+ <div data-role="multibuttonentry" data-list-id="#addressbook"></div>
<br>
<ul data-role="listview">
<li><a id='MBTaddItemTest'>Append Item</a></li>
<div data-role="content">
<ul data-role = "listview">
<li><a href="buttonNolist.html">Buttons Pages(not in list) </a></li>
- <li class="ui-li-1line-btn1">Custom <div data-role="button" data-inline="true" data-icon="test">T</div></li>
- <li class="ui-li-1line-btn1">Custom Width <div data-role="button" style="width:300px" data-inline="true" data-icon="test">Test</div></li>
- <li class="ui-li-1line-btn1">Custom Width, Height <div data-role="button" style="width:300px;height:40px" data-icon="test" >Test</div> </li>
- <li class="ui-li-1line-btn1">Custom Width, Height, Right <div data-role="button" style="width:300px;height:40px" data-iconpos="right" data-icon="test" >Test</div> </li>
- <li class="ui-li-1line-btn1">Circle-Custom <div data-role="button" data-inline="true" data-icon="test2" data-style="circle" ></div> </li>
- <li class="ui-li-1line-btn1">Custom Top <div data-role="button" data-iconpos="top" data-icon="test" >tEST</div> </li>
- <li class="ui-li-1line-btn1">Custom Bottom <div data-role="button" data-iconpos="bottom" data-icon="test">Test</div></li>
<li class="ui-li-1line-btn1">List item 1<div data-role="button" data-inline="true">Text Button TesT</div></li>
<li class="ui-li-1line-btn1">List item 2<div data-role="button" data-inline="true" data-icon="reveal">Call Icon</div></li>
<li class="ui-li-1line-btn1">List item 3<div data-role="button" data-inline="true" data-icon="reveal">Longer Call Icon</div></li>
style="position: absolute; top: 0px; margin-top: 0px; left:70%"></div></li>
<li>List item 12<div data-role="button" data-inline="true" data-style="edit"
style="position: absolute; top: 0px; margin-top: 0px; left:70%">Delete</div></li>
+ <li class="ui-li-1line-btn1">Custom <div data-role="button" data-inline="true" data-icon="test">T</div></li>
+ <li class="ui-li-1line-btn1">Custom Width <div data-role="button" style="width:300px" data-inline="true" data-icon="test">Test</div></li>
+ <li class="ui-li-1line-btn1">Custom Width, Height <div data-role="button" style="width:300px;height:40px" data-icon="test" >Test</div> </li>
+ <li class="ui-li-1line-btn1">Custom Width, Height, Right <div data-role="button" style="width:300px;height:40px" data-iconpos="right" data-icon="test" >Test</div> </li>
+ <li class="ui-li-1line-btn1">Circle-Custom <div data-role="button" data-inline="true" data-icon="test2" data-style="circle" ></div> </li>
+ <li class="ui-li-1line-btn1">Custom Top <div data-role="button" data-iconpos="top" data-icon="test" >tEST</div> </li>
+ <li class="ui-li-1line-btn1">Custom Bottom <div data-role="button" data-iconpos="bottom" data-icon="test">Test</div></li>
</ul>
</div>
</div>
</div>
<div data-role="content">
<ul data-role="listview">
- <li class="ui-li-2line-sub-main">
- <span class="ui-li-text-main">
+ <li class="ui-li-dialogue ui-datetime">
+ <div class="ui-datetime-text-main">
<input type="datetime" name="demo-date" id="demo-date"
data-format="MMM dd yyyy hh:mm tt" value="2012-06-30T00:00:00+09:00" />
- </span>
- <span class="ui-li-text-sub">
+ </div>
+ <div class="ui-datetime-text-sub">
Date/Time Picker(Custom) - <span id="selected-date1"><em>(select a date first)</em></span>
- </span>
+ </div>
</li>
- <li class="ui-li-2line-sub-main">
- <span class="ui-li-text-main">
+ <li class="ui-li-dialogue ui-datetime ui-datetime">
+ <div class="ui-datetime-text-main">
<input type="datetime" name="demo-date2" id="demo-date2" />
- </span>
- <span class="ui-li-text-sub">
+ </div>
+ <div class="ui-datetime-text-sub">
Date/Time Picker - <span id="selected-date2"><em>(select a date first)</em></span>
- </span>
+ </div>
</li>
- <li class="ui-li-2line-sub-main">
- <span class="ui-li-text-main">
+ <li class="ui-li-dialogue ui-datetime ui-datetime">
+ <div class="ui-datetime-text-main">
<input type="date" name="demo-date3" value="2012-06-30" id="demo-date3"/>
- </span>
- <span class="ui-li-text-sub">
+ </div>
+ <div class="ui-datetime-text-sub">
Date Picker - <span id="selected-date3"><em>(select a date first)</em></span>
- </span>
+ </div>
</li>
- <li class="ui-li-2line-sub-main">
- <span class="ui-li-text-main">
+ <li class="ui-li-dialogue ui-datetime ui-datetime">
+ <div class="ui-datetime-text-main">
<input type="time" name="demo-date4" id="demo-date4" />
- </span>
- <span class="ui-li-text-sub">
+ </div>
+ <div class="ui-datetime-text-sub">
Time Picker - <span id="selected-date4"><em>(select a date first)</em></span>
- </span>
+ </div>
</li>
</ul>
</div><!-- /content -->
--- /dev/null
+<div data-role="page" data-add-back-btn="true">
+ <div data-role="header" data-position="fixed">
+ <h1>Normal Divider </h1>
+ </div>
+ <div class="content" data-role="content" data-scroll="y">
+ <ul data-role="listview">
+ <li data-role="list-divider" data-style="checkexpandable"><form><input type="checkbox" name="c2line-check1" /></form>Test</li>
+ <li class="ui-li-has-checkbox"><a href="#" ><form><input type="checkbox" name="c2line-check1" /></form>Normal lists</a></li>
+ <li class="ui-li-has-checkbox"><a href="#" ><form><input type="checkbox" name="c2line-check1" /></form>Normal lists</a></li>
+ <li class="ui-li-has-checkbox"><a href="#" ><form><input type="checkbox" name="c2line-check1" /></form>Normal lists</a></li>
+ <li data-role="list-divider" data-style="checkexpandable"><form><input type="checkbox" name="c2line-check1" /></form></li>
+ <li class="ui-li-has-checkbox"><a href="#" ><form><input type="checkbox" name="c2line-check1" /></form>Normal lists</a></li>
+ <li class="ui-li-has-checkbox"><a href="#" ><form><input type="checkbox" name="c2line-check1" /></form>Normal lists</a></li>
+ <li class="ui-li-has-checkbox"><a href="#" ><form><input type="checkbox" name="c2line-check1" /></form>Normal lists</a></li>
+ <li data-role="list-divider" data-style="checkexpandable"><form><input type="checkbox" name="c2line-check1" /></form></li>
+ <li class="ui-li-has-checkbox">Normal lists</li>
+ <li class="ui-li-has-checkbox">Normal lists</li>
+ <li class="ui-li-has-checkbox">Normal lists</li>
+ </ul>
+ </div>
+</div>
+
--- /dev/null
+<div data-role="page" data-add-back-btn="true">
+ <div data-role="header" data-position="fixed">
+ <h1>Normal Divider </h1>
+ </div>
+ <div class="content" data-role="content" data-scroll="y">
+ <ul data-role="listview">
+ <li data-role="list-divider" data-style="expandable">Item styles</li>
+ <li><a href="#" >Normal lists</a></li>
+ <li><a href="#" >Normal lists</a></li>
+ <li><a href="#" >Normal lists</a></li>
+ <li data-role="list-divider" data-style="expandable">Item styles</li>
+ <li><a href="#" >Normal lists</a></li>
+ <li><a href="#" >Normal lists</a></li>
+ <li><a href="#" >Normal lists</a></li>
+ <li data-role="list-divider" data-style="expandable">Item styles</li>
+ <li><a href="#" >Normal lists</a></li>
+ <li><a href="#" >Normal lists</a></li>
+ <li><a href="#" >Normal lists</a></li>
+ </ul>
+ </div>
+</div>
+
<li><a href="list-divider_normal.html">Normal divider</a></li>
<li><a href="list-divider_groupped.html">Groupped divider</a></li>
<li><a href="list-divider_check.html">Check divider</a></li>
+ <li><a href="list-divider_expandable.html">Expandable divider</a></li>
+ <li><a href="list-divider_checkexpandable.html">CheckExpandable divider</a></li>
<li data-role="list-divider">Etc...</li>
<li><a href="list-bubble.html">bubble</a></li>
$( ":jqmData(role='multibuttonentry')" ).multibuttonentry( "focusOut", 0 );\r
});\r
\r
- $( "#MBTdestoryTest" ).click( function () {\r
- $( ":jqmData(role='multibuttonentry')" ).multibuttonentry( "destory" );\r
+ $( "#MBTdestroyTest" ).click( function () {\r
+ $( ":jqmData(role='multibuttonentry')" ).multibuttonentry( "destroy" );\r
});\r
\r
$( "#contentList a" ).click( function () {\r
--- /dev/null
+<!DOCTYPE html>
+<div data-role="page">
+ <div data-role="header" data-position="fixed">
+ <h1>Scroll Jump</h1>
+ </div>
+ <div data-role="content" data-scroll-jump="true">
+ <ul data-role="listview">
+ <li>item00</li>
+ <li>item01</li>
+ <li>item02</li>
+ <li>item03</li>
+ <li>item04</li>
+ <li>item05</li>
+ <li>item06</li>
+ <li>item07</li>
+ <li>item08</li>
+ <li>item09</li>
+ <li>item10</li>
+ <li>item11</li>
+ <li>item12</li>
+ <li>item13</li>
+ <li>item14</li>
+ <li>item15</li>
+ <li>item16</li>
+ <li>item17</li>
+ <li>item18</li>
+ <li>item19</li>
+ <li>item20</li>
+ <li>item21</li>
+ <li>item22</li>
+ <li>item23</li>
+ <li>item24</li>
+ <li>item25</li>
+ <li>item26</li>
+ <li>item27</li>
+ <li>item28</li>
+ <li>item29</li>
+ </ul>
+ </div><!-- /content -->
+</div> <!-- /page -->
--- /dev/null
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+//>>description: Feature test for orientation
+//>>label: Orientation support test
+//>>group: Core
+
+define( [ "jquery" ], function( jQuery ) {
+//>>excludeEnd("jqmBuildExclude");
+ (function( $, undefined ) {
+ $.extend( $.support, {
+ orientation: "orientation" in window && "onorientationchange" in window
+ });
+ }( jQuery ));
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+});
+//>>excludeEnd("jqmBuildExclude");
--- /dev/null
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+//>>description: Touch feature test
+//>>label: Touch support test
+//>>group: Core
+
+define( [ "jquery" ], function( jQuery ) {
+//>>excludeEnd("jqmBuildExclude");
+ (function( $, undefined ) {
+ var support = {
+ touch: "ontouchend" in document
+ };
+
+ $.mobile = $.mobile || {};
+ $.mobile.support = $.mobile.support || {};
+ $.extend( $.support, support );
+ $.extend( $.mobile.support, support );
+ }( jQuery ));
+//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
+});
+//>>excludeEnd("jqmBuildExclude");
// TODO expose properties for less brittle tests
$.extend(window, {
WebKitTransitionEvent: true,
- orientation: true,
- onorientationchange: true
});
- document.ontouchend = true;
-
window.history.pushState = function(){};
window.history.replaceState = function(){};
$.mobile.media = function(){ return true; };
$.testHelper.reloadModule( moduleName ).done( function() {
- ok($.support.orientation);
- ok($.support.touch);
- ok($.support.cssTransitions);
- ok($.support.pushState);
- ok($.support.mediaquery);
- start();
+ ok($.support.cssTransitions, "css transitions are supported" );
+ ok($.support.pushState, "push state is supported" );
+ ok($.support.mediaquery, "media queries are supported" );
+ start();
+ });
+ });
+
+ asyncTest( "detects orientation change", function() {
+ $.extend(window, {
+ orientation: true,
+ onorientationchange: true
+ });
+
+ $.testHelper.reloadModule( "jquery.mobile.support.orientation" ).done( function() {
+ ok($.support.orientation, "orientation is supported" );
+ start();
+ });
+ });
+
+ asyncTest( "detects touch", function() {
+ document.ontouchend = true;
+
+ $.testHelper.reloadModule( "jquery.mobile.support.touch" ).done( function() {
+ ok( $.mobile.support.touch, "touch is supported" );
+ ok( $.support.touch, "touch is supported" );
+ start();
});
});
asyncTest( "detects functionality from basic negative properties and attributes (where possible)", function(){
delete window["orientation"];
- delete document["ontouchend"];
- $.testHelper.reloadModule( moduleName ).done( function() {
- ok(!$.support.orientation);
- ok(!$.support.touch);
+ $.testHelper.reloadModule( "jquery.mobile.support.orientation" ).done( function() {
+ ok(!$.support.orientation, "orientation is not supported" );
start();
});
});
jqmdetectedver = $.mobile.browser.ie;
if( ie ){
- same(version, jqmdetectedver, "It's IE and the version is correct");
+ deepEqual(version, jqmdetectedver, "It's IE and the version is correct");
}
else{
- same(ie, jqmdetectedver, "It's not IE");
+ deepEqual(ie, jqmdetectedver, "It's not IE");
}
start();
});
+
+ if ( o.icon ) {
+ if ( $(el).text().length > 0 ) {
-+ o.iconpos == "right" ?
++ /* o.iconpos == "right" ?
+ textClass += " ui-btn-text-padding-right" :
-+ textClass += " ui-btn-text-padding-left";
++ textClass += " ui-btn-text-padding-left"; */
+
+ switch ( o.iconpos ) {
+ case "right" :
Name: web-ui-fw
-Version: 0.1.38
+Version: 0.1.41
Release: 0
Summary: Tizen Web UI Framework Library
Group: Development/Other
Summary: Tizen Web UI Framework Theme : tizen-gray
%Description -n web-ui-fw-theme-tizen-gray
Tizen Web UI Framework Theme : tizen-gray
-%files -n web-ui-fw-theme-tizen-gray
-/usr/share/tizen-web-ui-fw/*/themes/tizen-gray
+
+###############################
+%package -n web-ui-fw-theme-tizen-black
+BuildArch: noarch
+Summary: Tizen Web UI Framework Theme : tizen-black
+%Description -n web-ui-fw-theme-tizen-black
+ Tizen Web UI Framework Theme : tizen-black
+%files -n web-ui-fw-theme-tizen-black
+/usr/share/tizen-web-ui-fw/*/themes/tizen-black
###############################
%package -n web-ui-fw-theme-tizen-white
###############################
%changelog
-* Mon Aug 20 2012 Minkyu Kang <mk7.kang@samasung.com> 0.1.38
+* Mon Aug 27 2012 Jinhyuk Jun <jinhyuk.jun@samsung.com> 0.1.41
+- FIX:
+ - radio/check button : button size bug fix
+
+* Fri Aug 24 2012 Minkyu Kang <mk7.kang@samsung.com> 0.1.40
+- FIX:
+ - build error fixed
+
+* Fri Aug 24 2012 Minkyu Kang <mk7.kang@samsung.com> 0.1.39
+- FIX:
+ - listview: style fix, remove filter placeholder
+ - controlbar: divide styles
+ - scrollview: don't skip dragging when click button or inputbox
+ - slider: trim the text on text slider
+- Spec changes:
+ - remove gray and blue theme
+ - add white and black theme
+ - support new GUI guide
+
+* Mon Aug 20 2012 Minkyu Kang <mk7.kang@samsung.com> 0.1.38
- FIX:
- fix coment of version tag
-* Fri Aug 17 2012 Minkyu Kang <mk7.kang@samasung.com> 0.1.37
+* Fri Aug 17 2012 Minkyu Kang <mk7.kang@samsung.com> 0.1.37
- FIX :
- button: fix alignment
- listview: adjust the main text width
.ui-btn:focus, .ui-btn:active { outline: none; }
.ui-header .ui-btn, .ui-footer .ui-btn, .ui-bar .ui-btn { display: inline-block; font-size: 13 * @unit_base; margin: 0; }
.ui-btn-inline { display: inline-block; }
-.ui-btn-inner { padding: .5em 32 * @unit_base; display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; position: relative; zoom: 1; }
+.ui-btn-inner { padding: .5em 36 * @unit_base; display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; position: relative; zoom: 1; }
.ui-header .ui-btn-inner, .ui-footer .ui-btn-inner, .ui-bar .ui-btn-inner { padding: 0.7em 0 0.7em; } /* wongi_1024 : Button text middle align */
.ui-header .ui-btn-inner.ui-btn-icon-only , .ui-footer .ui-btn-inner, .ui-bar .ui-btn-inner.ui-btn-icon-only { padding: .4em 8 * @unit_base .5em; } /* wongi_1024 : Button text middle align */
.ui-btn-icon-notext { width: 24 * @unit_base; height: 24 * @unit_base; }
.ui-btn-text
{
/*padding-left : 80px;*/ //wongi_1017
- margin-left: auto;
- margin-right: auto;
+ margin-left: auto;
+ margin-right: auto;
+ padding:0 1px; /* Webkit width(ellipsis) problem workaround */
}
.ui-li .ui-btn.ui-btn-icon_only
width: 48 * @unit_base;
height: 38 * @unit_base;
}
+
+.ui-icon-expandable-divider-opened {
+ width: 42 * @unit_base;
+ height: 42 * @unit_base;
+
+ position : absolute;
+ right : 28 * @unit_base;
+ top : 0 * @unit_base;
+
+ background-repeat: no-repeat;
+ background-size: 100% 100%;
+
+ background-image: url(images/00_indexlist_icon_opened.png);
+
+}
+
+.ui-icon-expandable-divider-closed {
+ width: 42 * @unit_base;
+ height: 42 * @unit_base;
+
+ position : absolute;
+ right : 28 * @unit_base;
+ top : 0 * @unit_base;
+
+ background-repeat: no-repeat;
+ background-size: 100% 100%;
+
+ background-image: url(images/00_indexlist_icon_closed.png);
+
+}
+
+
/* Pressed images */
.ui-btn-down-s .ui-icon-bg, .ui-btn-down-s.ui-tizen-icon-bg {.tizen-icon-common; background-image: url(images/00_btn_circle_bg_press.png); z-index:0; }
.ui-btn-down-s .ui-icon-reveal {.tizen-icon-common; background-image: url(images/00_button_reveal_press.png); }
padding: 32 * @unit_base 32 * @unit_base;
}
+.ui-btn-icon-only .ui-btn-text
+{
+ left: -9999px;
+ display: none;
+}
+
.ui-btn-edit .ui-btn-inner.ui-btn-icon-only
{
padding: @width_buttonEdit/2 @height_buttonEdit/2;
}
.ui-btn-text {
position: relative;
-
a.ui-link-inherit {
text-overflow: ellipsis;
overflow: hidden;
padding : 0px;
.LESSdialogue-divider;
+ background : @color_bg;
}
&[data-style="check"] {
padding-left : 92 * @unit_base;
line-height : 60 * @unit_base;
}
+
+ &[data-style="expandable"] {
+ height: 60 * @unit_base;
+ padding-top : 0px;
+ padding-bottom : 0px;
+
+ line-height : 60 * @unit_base;
+ }
}
.ui-divider-expand-div {
+ position : absolute;
+
+ width : 98 * @unit_base;
+ height : 42 * @unit_base;
+ top : 10 * @unit_base;
+ right : 0px;
+
+ border-left-width : 1px;
+ border-left-style : solid;
+ border-left-color : rgba(42, 137, 194, 0.5);
}
}
> .ui-btn{
- top : 12 * @unit_base;
+ position : absolute;
+ top : 20 * @unit_base;
margin-top : 0px;
font-size : 28 * @unit_base;
- height : 74 * @unit_base;
+ height : 60 * @unit_base;
+
+ background: none;
+ color : @color_bar_title_text;
+
- background: @color_bar_title_btn_bg;
- color : @color_bar_title_text;
+ border-left-style: solid;
+ border-left-width : 1px;
+ border-left-color : @color_bar_title_btn_border;
+
+ font-weight : bold;
+ -webkit-border-radius : 0px;
+
+ span.ui-btn-inner {
+ padding-top : 13 * @unit_base;
+ padding-bottom : 13 * @unit_base;
+ }
+ span.ui-btn-inner.ui-btn-icon-only {
+ padding-top : 0 * @unit_base;
+ padding-bottom : 0 * @unit_base;
+ }
+ }
- .LESStitle-border; /* different title style */
+ > .ui-btn.ui-btn-right:nth-child(2) {
+ right : 0px;
+ }
+
+ > .ui-btn.ui-btn-right:nth-child(3) {
+ right : 118 * @unit_base;
+ }
+
+ > .ui-btn.ui-btn-right:nth-child(4) {
+ right : 236 * @unit_base;
}
> .ui-btn.ui-btn-down-s {
background : @color_bar_btn_press;
color : @color_bar_title_text;
}
+
+ > img + h1 + a.ui-btn.ui-btn-right:nth-child(3) {
+ right : 0px;
+ }
+
+ > img + h1 + a.ui-btn.ui-btn-right:nth-child(4) {
+ right : 118 * @unit_base;
+ }
+
+ > img + h1 + a.ui-btn.ui-btn-right:nth-child(5) {
+ right : 236 * @unit_base;
+ }
}
.ui-header.ui-bar-s.ui-title-extended-height {
}
}
+.ui-landscape-controlbar.ui-controlbar-s.ui-navbar {
+ .ui-btn {
+ .ui-icon {
+ left : 20%;
+ top : 30 * @unit_base;
+ margin-left : -1.3em;
+ }
+
+ .ui-btn-text {
+ padding-left : 35%;
+ }
+
+ .ui-navbar-textonly .ui-btn-text {
+ padding-left : 0px;
+ }
+ }
+
+ .ui-ctrlbar-icononly.ui-btn {
+ padding-top : 0px;
+
+ .ui-icon {
+ left : 50%;
+ top : 30 * @unit_base;
+ margin-left : -29 * @unit_base;
+ }
+ }
+
+ .ui-btn , .ui-btn-icon-top, .ui-btn-hover-s, .ui-btn-active, .ui-btn-up-s{
+ .ui-btn-inner{
+ padding-top : 40 * @unit_base;
+ padding-bottom : 39 * @unit_base;
+ }
+ }
+}
+
.ui-tabbar-s {
.ui-btn {
background: @color_controlbar_tabbbar_bg;
text-align: center;
}
- .ui-datefield-selected {
- color: @color_timepicker_selector_color;
- }
-
.date,.time,.ui-datefield-tab {
display: inline-block;
}
}
}
-.ui-li-text-main .ui-datefield-period.ui-btn {
+.ui-datetime {
+ margin: 0;
+ height: 72 * @unit_base;
+}
+
+.ui-datetime-text-main {
+ position: relative;
+ font-size: @font_size_list_main_text;
+ top: 28 * @unit_base;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ max-width: 90%;
+ padding-top: 0.3em;
+}
+
+.ui-datetime-text-main .ui-datefield-period.ui-btn {
margin-top: -0.3em;
height: 56 * @unit_base;
+ right: auto;
+ position: relative;
+}
- .ui-btn-inner.ui-btn-hastxt {
- padding-top: 0;
- padding-bottom: 0;
- }
+.ui-datetime-text-sub {
+ position: absolute;
+ top: 10 * @unit_base;
+ color: @color_list_sub_text_default;
+ font-size: @font_size_list_sub_text;
}
.ui-datetimepicker-selector {
}
}
}
-
.ui-dayselector.ui-controlgroup-vertical {
.ui-checkbox .ui-btn{
- width : 112 * @unit_base;
+ width : 128 * @unit_base;
.ui-btn-text {
margin-left : 16 * @unit_base;
}
display : inline-block;\r
text-align : center;\r
position : relative;\r
- margin : .3em;\r
- padding : .2em 0em;\r
+ margin-left : .3em;\r
+ margin-right : .3em;\r
+ padding : .6em 0em;\r
color : @color_multibuttonentry_input_text;\r
font-weight : bold;\r
text-align : center;\r
text-align : center;\r
cursor : pointer;\r
position : relative;\r
- margin : .3em;\r
+ margin-left : .3em;\r
+ margin-right : .3em;\r
+ margin-bottom : .3em;\r
+ margin-top : .3em;\r
padding : .2em .5em;\r
font-size : 1em;\r
text-shadow : 0 .1em .1em rgba(0,0,0,.3);\r
color : @color_multibuttonentry_block_text;\r
}\r
\r
-a.ui-multibuttonentry-link {\r
+a.ui-multibuttonentry-link-base {\r
float : right;\r
- color : @color_multibuttonentry_link !important;\r
font-size : 1em;\r
font-weight : bold;\r
text-decoration : none;\r
- border : solid 2px @color_multibuttonentry_link;\r
background-color : @color_multibuttonentry_bg;\r
}\r
\r
+a.ui-multibuttonentry-link {\r
+ color : @color_multibuttonentry_link !important;\r
+ border : solid 2px @color_multibuttonentry_link;\r
+}\r
+\r
+a.ui-multibuttonentry-link-dim {\r
+ color : @color_multibuttonentry_dim !important;\r
+ border : solid 2px @color_multibuttonentry_dim;\r
+}\r
+\r
div.ui-multibuttonentry-block {\r
border : solid 2px @color_multibuttonentry_block_border;\r
background-color : @color_multibuttonentry_block_bg;\r
font-size : 1em;\r
background-color : @color_multibuttonentry_bg;\r
}\r
+\r
+.ui-multibuttonentry-focus-button {\r
+ background-image : url(./images/00_button_expand_opened.png);\r
+ }
\ No newline at end of file
}\r
\r
.ui-multimediaview-control span.ui-play-icon {\r
- background-image : url(./images/controlbar/01_controlbar_icon_Play.png);\r
+ background-image : url(./images/00_button_play.png);\r
}\r
\r
.ui-multimediaview-control span.ui-pause-icon {\r
- background-image : url(./images/controlbar/01_controlbar_icon_pause.png);\r
+ background-image : url(./images/00_button_pause.png);\r
}\r
\r
.ui-multimediaview-control span.ui-volume-icon {\r
- background-image : url(./images/Volume/00_volume_icon.png);\r
+ background-image : url(./images/00_slider_btn_volume02.png);\r
}\r
\r
.ui-multimediaview-control span.ui-mute-icon {\r
- background-image : url(./images/Volume/00_volume_icon_Mute.png);\r
+ background-image : url(./images/00_slider_btn_volume01.png);\r
}\r
\r
.ui-multimediaview-control span.ui-fullscreen-on {\r
}
.ui-header {
- .ui-btn{
+ .ui-btn{
.ui-btn-icon-only {
padding : 0 0 0 0;
height : 100%;
.ui-icon-optiontray {
width: 56 * @unit_base;
height : 56 * @unit_base;
-
- top : 10 * @unit_base; /* temporary center align */
+
left : 30 * @unit_base;
}
}
&> div.page_n_dot {
.LESSpagecontrolIconCommonProperties('images/00_mainmenu_page_bar_001.png');
}
- &> div.page_n_1 { .LESSpagecontrolIconCommonProperties('images/00_mainmenu_page_bar_1.png'); }
- &> div.page_n_2 { .LESSpagecontrolIconCommonProperties('images/00_mainmenu_page_bar_2.png'); }
- &> div.page_n_3 { .LESSpagecontrolIconCommonProperties('images/00_mainmenu_page_bar_3.png'); }
- &> div.page_n_4 { .LESSpagecontrolIconCommonProperties('images/00_mainmenu_page_bar_4.png'); }
- &> div.page_n_5 { .LESSpagecontrolIconCommonProperties('images/00_mainmenu_page_bar_5.png'); }
- &> div.page_n_6 { .LESSpagecontrolIconCommonProperties('images/00_mainmenu_page_bar_6.png'); }
- &> div.page_n_7 { .LESSpagecontrolIconCommonProperties('images/00_mainmenu_page_bar_7.png'); }
- &> div.page_n_8 { .LESSpagecontrolIconCommonProperties('images/00_mainmenu_page_bar_8.png'); }
- &> div.page_n_9 { .LESSpagecontrolIconCommonProperties('images/00_mainmenu_page_bar_9.png'); }
+ &> div.page_n_1 { .LESSpagecontrolIconCommonProperties('images/00_mainmenu_page_bar_01.png'); }
+ &> div.page_n_2 { .LESSpagecontrolIconCommonProperties('images/00_mainmenu_page_bar_02.png'); }
+ &> div.page_n_3 { .LESSpagecontrolIconCommonProperties('images/00_mainmenu_page_bar_03.png'); }
+ &> div.page_n_4 { .LESSpagecontrolIconCommonProperties('images/00_mainmenu_page_bar_04.png'); }
+ &> div.page_n_5 { .LESSpagecontrolIconCommonProperties('images/00_mainmenu_page_bar_05.png'); }
+ &> div.page_n_6 { .LESSpagecontrolIconCommonProperties('images/00_mainmenu_page_bar_06.png'); }
+ &> div.page_n_7 { .LESSpagecontrolIconCommonProperties('images/00_mainmenu_page_bar_07.png'); }
+ &> div.page_n_8 { .LESSpagecontrolIconCommonProperties('images/00_mainmenu_page_bar_08.png'); }
+ &> div.page_n_9 { .LESSpagecontrolIconCommonProperties('images/00_mainmenu_page_bar_09.png'); }
&> div.page_n_10 { .LESSpagecontrolIconCommonProperties('images/00_mainmenu_page_bar_10.png'); }
}
color: @color_popup_font;
//FIXME : remove background & padding if there is no padding.
- padding: 2*@unit_base 2*@unit_base;
+ .LESSpopup_padding_style;
background: @color_popup_text_bg;
// --------- common style in popup window ------------- //
height: 10 * @unit_base;
}
+.ui-scroll-jump-top-bg {
+ position: absolute;
+ top: 16 * @unit_base;
+ right: 16 * @unit_base;
+ width: 76 * @unit_base;
+ height: 70 * @unit_base;
+ background: url(images/00_scroll_jump_bg.png) no-repeat;
+ .LESSbackground-size(76 * @unit_base, 70 * @unit_base);
+}
+
+.ui-scroll-jump-left-bg {
+ position: absolute;
+ bottom: 16 * @unit_base;
+ left: 16 * @unit_base;
+ width: 76 * @unit_base;
+ height: 70 * @unit_base;
+ background: url(images/00_scroll_jump_bg.png) no-repeat;
+ .LESSbackground-size(76 * @unit_base, 70 * @unit_base);
+}
+
+.ui-scroll-jump-top,
+.ui-scroll-jump-left {
+ position: relative;
+ top: 14 * @unit_base;
+ left: 17 * @unit_base;
+ width: 42 * @unit_base;
+ height: 42 * @unit_base;
+ background: url(images/00_scroll_icon_jump.png) no-repeat;
+ .LESSbackground-size(42 * @unit_base, 42 * @unit_base);
+}
+
+.ui-scroll-jump-left {
+ background: url(images/00_scroll_icon_jump_left.png) no-repeat;
+ .LESSbackground-size(42 * @unit_base, 42 * @unit_base);
+}
+
/*
* the values below are for the group index
*/
.ui-btn {
margin-top: -0.3em !important;
}
+
+ .ui-dummy {
+ padding-top : 30 * @unit_base;
+ padding-bottom : 30 * @unit_base;
+ }
}
.ui-swipelist-item-cover {
height: 80 * @unit_base;
width: 60 * @unit_base;
overflow: hidden;
- font-weight: bold;
.ui-toggleswitch-mover {
position: relative;
- font-size: 20 * @unit_base;
+ font-size : 26 * @unit_base;
+ line-height : 40 * @unit_base;
display: block;
.ui-toggleswitch-off {
.ui-toggleswitch-text {
width: 100%;
position: absolute;
- padding-top: 10 * @unit_base;
text-align: center;
text-overflow: ellipsis;
}
../common/jquery.mobile.tizen.scrollview.handler.less.css \
../common/jquery.mobile.tizen.virtualgridview.less.css \
../common/jquery.mobile.tizen.multimediaview.less.css \
-
all: prepare css images js
// Basic color set
-@color_bg: rgb(249, 249, 249); // 249 249 249
+@color_bg: rgb(0, 0, 0);
@color_bg_sub: rgb(36, 36, 36); // 36 36 36 // TODO: used only in dialog group. Check more.
@color_border: rgb(42, 42, 42); // 42 42 42
@color_header: rgb(68, 68, 74); // 68 68 74
-@color_scrollbar: rgb(218, 218, 218);
+@color_scrollbar: rgb(63, 63, 63);
-@color_text: rgb(0, 0, 0); // 0 0 0
+@color_text: rgb(249, 249, 249);
@color_text_dim: rgb(108, 115, 118); // 108 115 118
@color_text_focus: @color_text;
@color_text_sub: rgb(102, 102, 102); // 102 102 102
@color_text_segctrl: rgb(158, 195, 213); // 158 195 213 // TODO: used only in segctrl. Check more.
//Dialogue color set
-@color_dialogue_main_text: rgb(249,249,249);
+@color_dialogue_main_text: rgba(249, 249, 249, 1);
@color_dialogue_sub_text: rgb(146,146,146);
+@color_list_dialogue_bg : rgba(0, 0, 0, 1);
+@color_dialogue_border_right: rgba(68, 68, 68, 1);
//Dialogue Editor color set
@color_dialogue_editor_default_text: rgb(70, 70, 70);
@color_dialogue_editor_bg: rgb(0, 0, 0);
-@color_dialogue_editor_border: rgb(108, 168, 199);
-
+@color_dialogue_editor_border: rgb(37, 52, 78);
/*************************
Vars/Mixins for Widgets
/***************************************************************************
List
***************************************************************************/
-@color_list_border_bottom: rgb(169, 169, 169);
+@color_list_border_bottom: rgb(68, 68, 68);
@color_list_main_text_read: rgba(158, 158, 158, 1);
@color_list_main_text_unread: rgba(249, 249, 249, 1);
@color_list_main_text_focus: rgba(249, 249, 249, 1);
@color_list_bubble_name_text: rgb(57, 166, 215);
@color_list_bubble_help_text: rgb(146, 146, 146);
@color_list_divider_bg : -webkit-linear-gradient(top, rgb(73,73,73) 0%,rgb(22,22,22) 100%);
-@color_list_divider_text : rgb(0, 94, 160); /* #005ea0 */
-@color_list_expandable_expanded_bg: rgb(215, 225, 232);
+@color_list_divider_text : rgb(142, 174, 193); /* #005ea0 */
+@color_list_expandable_expanded_bg: rgb(26, 26, 26);
@font_size_list_main_text: 44 * @unit_base; //1.375rem; /* 44 px */
@font_size_list_sub_text: 32 * @unit_base; //1.0rem; /* 32 px */
@style_list_li_dialogue_border_left_width: 10 * @unit_base;
@style_list_bubble_date_height: 40 * @unit_base;
@style_list_bubble_date_text_align: center;
-
-@color_list_dialogue_bg : rgba(236, 240, 242, 1);
/***************************************************************************
Shortcut Scroll
***************************************************************************/
background: @color_popup_buttonbg_press_moz;
}
+.LESSpopup_padding_style{
+ padding: 2 * @unit_base 2 * @unit_base;
+}
+
/***************************************************************************
Button
***************************************************************************/
***************************************************************************/
@color_bar_bg : -webkit-linear-gradient(top, rgb(156,181,179) 0%,rgb(79,116,141) 100%);
@color_bar_back_btn_press : rgba(26, 82, 116, 0.3); /* #1A5274 */
-@color_bar_btn_press : -webkit-linear-gradient(top, rgb(74,164,218) 0%,rgb(43,138,195) 100%);
+@color_bar_btn_press : rgba(0, 0, 0, 0.1);
@color_bar_btn_bg : transparent;
@color_bar_back_btn_bg : transparent;
@color_bar_title_text : rgba(249, 249, 249, 1); /* #F9F9F9 */
@color_bar_title_bg : -webkit-linear-gradient(top, rgb(68,88,120) 0%,rgb(24,37,56) 100%);
-@color_bar_title_btn_bg : -webkit-linear-gradient(top, rgb(56,80,119) 10%,rgb(39,58,88) 90%);
-@color_bar_title_btn_border : rgba(0, 0, 0, 0.1);
+@color_bar_title_btn_border : rgba(0, 0, 0, 0.4);
@color_bar_footer_bg : -webkit-linear-gradient(top, rgb(43,54,71) 0%,rgb(17,24,35) 100%);
@color_bar_footer_btn_bg : transparent;
/***************************************************************************
Tickernoti
***************************************************************************/
-@color_ticker_bg: rgb(35, 90, 123);
+@color_ticker_bg: rgb(60, 84, 123);
@color_ticker_text1: rgb(249, 249, 249);
-@color_ticker_text2: rgb(142, 170, 186);
+@color_ticker_text2: rgb(211, 216, 224);
/***************************************************************************
Smallpopup
***************************************************************************/
-@color_smallpopup_bg: rgb(215, 225, 232);
-@color_smallpopup_text: rgb(77, 77, 77);
+@color_smallpopup_bg: rgb(76, 81, 88);
+@color_smallpopup_text: rgb(249, 249, 249);
/***************************************************************************
No Contents
***************************************************************************/
-@color_nocontents_text: rgb(154, 145, 154);
+@color_nocontents_text: rgb(102, 102, 102);
/***************************************************************************
@color_multibuttonentry_press_border : rgb(93, 187, 244);
@color_multibuttonentry_input_text : #222222;
@color_multibuttonentry_link : rgb(100, 100, 100);
+@color_multibuttonentry_dim : rgb(128, 128, 128);
+/***************************************************************************
+***************************************************************************/
/***************************************************************************
****************************************************************************
margin: 19*@unit_base 135*@unit_base 19*@unit_base 16*@unit_base;
}
-.LESStitle-border {
- border-style: solid;
- border-width : 1px;
- border-bottom-color: @color_border_bottom;
- border-bottom-width: 2px;
- border-top-color: @color_border_top;
-
- border-left-color : @color_bar_title_btn_border;
- border-right-color : @color_bar_title_btn_border;
-
- font-weight : bold;
-
- -webkit-border-radius: 0px;
-}
-
.LESSextended-controlgroup-border {
border-style : solid;
border-width : 1px;
.LESSdialogue-border-style {
border-right-style : solid;
- border-right-color : black;
+ border-right-color : @color_dialogue_border_right;
border-right-width : 1px;
}
margin-left : 16 * @unit_base;
margin-right : 16 * @unit_base;
- background : rgba(249, 249, 249, 1);
+ background : @color_list_dialogue_bg;
font-size : 32 * @unit_base;
font-weight : bold;
- color : rgba(92, 151, 187, 1);
+ color : @color_dialogue_main_text;
}
../common/jquery.mobile.tizen.scrollview.handler.less.css \
../common/jquery.mobile.tizen.virtualgridview.less.css \
../common/jquery.mobile.tizen.multimediaview.less.css \
-
all: prepare css images js
@color_text_segctrl: rgb(158, 195, 213); // 158 195 213 // TODO: used only in segctrl. Check more.
//Dialogue color set
-@color_dialogue_main_text: rgb(249,249,249);
+@color_dialogue_main_text: rgba(92, 151, 187, 1);
@color_dialogue_sub_text: rgb(146,146,146);
+@color_list_dialogue_bg : rgba(236, 240, 242, 1);
+@color_dialogue_border_right: rgba(142, 154, 163, 1);
//Dialogue Editor color set
@color_dialogue_editor_default_text: rgb(70, 70, 70);
@color_dialogue_editor_bg: rgb(0, 0, 0);
@color_dialogue_editor_border: rgb(108, 168, 199);
-
/*************************
Vars/Mixins for Widgets
@color_list_bubble_name_text: rgb(57, 166, 215);
@color_list_bubble_help_text: rgb(146, 146, 146);
@color_list_divider_bg : rgb(209, 227, 238); /* #d1e3ee */
-@color_list_divider_text : rgb(0, 94, 160); /* #005ea0 */
+@color_list_divider_text : rgb(29, 100, 149);
@color_list_expandable_expanded_bg: rgb(215, 225, 232);
@font_size_list_main_text: 44 * @unit_base; //1.375rem; /* 44 px */
@style_list_bubble_date_height: 40 * @unit_base;
@style_list_bubble_date_text_align: center;
-@color_list_dialogue_bg : rgba(236, 240, 242, 1);
/***************************************************************************
Shortcut Scroll
***************************************************************************/
background: @color_popup_buttonbg_press_moz;
}
+.LESSpopup_padding_style{
+}
+
/***************************************************************************
Button
***************************************************************************/
***************************************************************************/
@color_bar_bg : -webkit-linear-gradient(top, rgb(156,181,179) 0%,rgb(79,116,141) 100%);
@color_bar_back_btn_press : rgba(26, 82, 116, 0.3); /* #1A5274 */
-@color_bar_btn_press : -webkit-linear-gradient(top, rgb(74,164,218) 0%,rgb(43,138,195) 100%);
+@color_bar_btn_press : rgba(0, 0, 0, 0.1);
@color_bar_btn_bg : transparent;
@color_bar_back_btn_bg : transparent;
@color_bar_title_text : rgba(249, 249, 249, 1); /* #F9F9F9 */
@color_bar_title_bg : -webkit-linear-gradient(top, rgb(90,153,186) 0%,rgb(32,84,115) 100%);
-@color_bar_title_btn_bg : -webkit-linear-gradient(top, rgb(80,149,185) 10%,rgb(43,107,147) 90%);
-@color_bar_title_btn_border : rgba(0, 0, 0, 0.1);
+@color_bar_title_btn_border : rgba(0, 0, 0, 0.4);
@color_bar_footer_bg : -webkit-linear-gradient(top, rgb(156,181,179) 0%,rgb(79,116,141) 100%);
@color_bar_footer_btn_bg : transparent;
/***************************************************************************
Tickernoti
***************************************************************************/
-@color_ticker_bg: rgb(35, 90, 123);
+@color_ticker_bg: rgb(13, 60, 89);
@color_ticker_text1: rgb(249, 249, 249);
-@color_ticker_text2: rgb(142, 170, 186);
+@color_ticker_text2: rgb(202, 211, 217);
/***************************************************************************
@color_multibuttonentry_press_border : rgb(93, 187, 244);
@color_multibuttonentry_input_text : #222222;
@color_multibuttonentry_link : rgb(100, 100, 100);
+@color_multibuttonentry_dim : rgb(128, 128, 128);
+/***************************************************************************
+***************************************************************************/
/***************************************************************************
****************************************************************************
margin: 19*@unit_base 135*@unit_base 19*@unit_base 16*@unit_base;
}
-.LESStitle-border {
- border-style: solid;
- border-width : 1px;
- border-bottom-color: @color_border_bottom;
- border-bottom-width: 2px;
- border-top-color: @color_border_top;
-
- border-left-color : @color_bar_title_btn_border;
- border-right-color : @color_bar_title_btn_border;
-
- font-weight : bold;
-
- -webkit-border-radius: 0px;
-}
-
.LESSextended-controlgroup-border {
border-style : solid;
border-width : 1px;
.LESSdialogue-border-style {
border-right-style : solid;
- border-right-color : black;
+ border-right-color : @color_dialogue_border_right;
border-right-width : 1px;
}
margin-left : 16 * @unit_base;
margin-right : 16 * @unit_base;
- background : rgba(249, 249, 249, 1);
+ background : @color_list_dialogue_bg;
font-size : 32 * @unit_base;
font-weight : bold;
- color : rgba(92, 151, 187, 1);
+ color : @color_dialogue_main_text;
}
showScrollBars: true,
overshootEnable: false,
+ scrollJump: false,
},
_makePositioned: function ( $ele ) {
this._add_event();
this._add_scrollbar();
+ this._add_scroll_jump();
},
_startMScroll: function ( speedX, speedY ) {
return;
}
- if ( y >= 0 ) {
+ if ( y > 0 ) {
sy = -y;
} else if ( y < -scroll_height ) {
sy = -y - scroll_height;
this._stopMScroll();
this._didDrag = false;
+ this._skip_dragging = false;
var target = $( e.target ),
self = this,
$c = this._$clip,
svdir = this.options.direction;
- /* should skip the dragging when click the button */
- this._skip_dragging = target.is( '.ui-btn-text' ) ||
+ /* should prevent the default behavior when click the button */
+ this._is_button = target.is( '.ui-btn-text' ) ||
target.is( '.ui-btn-inner' ) ||
target.is( '.ui-btn-inner .ui-icon' );
- if ( this._skip_dragging ) {
- return;
- }
-
/*
* We need to prevent the default behavior to
* suppress accidental selection of text, etc.
*/
- this._shouldBlockEvent = !( target.is(':input') ||
- target.parents(':input').length > 0 );
+ this._is_inputbox = target.is(':input') ||
+ target.parents(':input').length > 0;
- if ( this._shouldBlockEvent ) {
- if ( this.options.eventType === "mouse" ) {
- e.preventDefault();
- }
- } else {
+ if ( this._is_inputbox ) {
target.one( "resize.scrollview", function () {
if ( ey > $c.height() ) {
self.scrollTo( -ex, self._sy - ey + $c.height(),
self.options.snapbackDuration );
}
});
-
- return;
}
this._lastX = ex;
return;
}
- if ( this._shouldBlockEvent ) {
+ if ( !this._is_inputbox && !this._is_button ) {
e.preventDefault();
}
this._scrollbar_showed = false;
},
+ _add_scroll_jump: function () {
+ var $c = this._$clip,
+ self = this,
+ top_btn,
+ left_btn;
+
+ if ( !this.options.scrollJump ) {
+ return;
+ }
+
+ if ( this._vTracker ) {
+ top_btn = $( '<div class="ui-scroll-jump-top-bg ui-btn" data-theme="s">' +
+ '<div class="ui-scroll-jump-top"></div></div>' );
+ $c.append( top_btn );
+
+ top_btn.bind( "vclick", function () {
+ self.scrollTo( 0, 0, self.options.overshootDuration );
+ } );
+ }
+
+ if ( this._hTracker ) {
+ left_btn = $( '<div class="ui-scroll-jump-left-bg ui-btn" data-theme="s">' +
+ '<div class="ui-scroll-jump-left"></div></div>' );
+ $c.append( left_btn );
+
+ left_btn.bind( "vclick", function () {
+ self.scrollTo( 0, 0, self.options.overshootDuration );
+ } );
+ }
+ },
+
_set_scrollbar_size: function () {
var $c = this._$clip,
$v = this._$view,
opts = {
direction: dir || undefined,
- scrollMethod: $( this ).jqmData("scroll-method") || undefined
+ scrollMethod: $( this ).jqmData("scroll-method") || undefined,
+ scrollJump: $( this ).jqmData("scroll-jump") || undefined
};
$( this ).scrollview( opts );
iconpos = $navbtns.filter( ":jqmData(icon)" ).length ?
this.options.iconpos : undefined,
theme = $.mobile.listview.prototype.options.theme, /* Get current theme */
- style = $controlbar.attr( "data-style" );
+ style = $controlbar.attr( "data-style" ),
+ ww = window.innerWidth || $( window ).width(),
+ wh = window.innerHeight || $( window ).height(),
+ isLandscape;
+
+ isLandscape = ww > wh && ( ww - wh );
+
+ if ( isLandscape ) {
+ $controlbar.removeClass( "ui-portrait-controlbar" ).addClass( "ui-landscape-controlbar" );
+ } else {
+ $controlbar.removeClass( "ui-landscape-controlbar" ).addClass( "ui-portrait-controlbar" );
+ }
if ( style === "left" || style === "right" ) {
$controlbar
.css( "height", controlbar_filter.height() );
}
});
+
+ this._bindControlbarEvents();
+ },
+
+ _bindControlbarEvents: function () {
+ var $controlbar = this.element;
+
+ $( window ).bind( "orientationchange", function ( e, ui ) {
+ ww = window.innerWidth || $( window ).width();
+ wh = window.innerHeight || $( window ).height();
+
+ isLandscape = ww > wh && ( ww - wh );
+
+ if ( isLandscape ) {
+ $controlbar.removeClass( "ui-portrait-controlbar" ).addClass( "ui-landscape-controlbar" );
+ } else {
+ $controlbar.removeClass( "ui-landscape-controlbar" ).addClass( "ui-portrait-controlbar" );
+ }
+ })
+
},
_setDisabled: function ( value, cnt ) {
};
$(window).bind("resize", obj._reflow);
}
+ // cause ctxpopup forced to subtract 10
$ctx.popupwindow( 'open',
- target.offset().left + target.width() / 2 - window.pageXOffset,
+ target.offset().left + ( target.width() / 2 ) + 10 - window.pageXOffset ,
target.offset().top + target.height() - window.pageYOffset );
$div.bind('popupafterclose', function ( e ) {
if ( obj._reflow ) {
--- /dev/null
+/* ***************************************************************************
+
+*/
+
+(function ( $, undefined ) {
+
+ $.widget( "tizen.listdivider", $.mobile.widget, {
+ options: {
+ initSelector: ":jqmData(role='list-divider')"
+ },
+
+ _create: function () {
+
+ var $listdivider = this.element,
+ openStatus = true,
+ iconStatus,
+ expandSrc,
+ style = $listdivider.attr( "data-style" );
+
+ if ( style === "expandable" || style === "checkexpandable" ) {
+ openStatus ? iconStatus = "opened" : iconStatus = "closed";
+ expandSrc = "<span class='ui-divider-expand-div'><span class='ui-icon-expandable-divider-" + iconStatus + "'/></span>";
+
+ $( expandSrc ).appendTo( $listdivider );
+ }
+
+ $listdivider.children( ".ui-divider-expand-div" ).bind( "vclick", function ( event, ui ) {
+ if ( openStatus ) {
+ $( this ).children( "span" ).removeClass( "ui-icon-expandable-divider-opened" );
+ $( this ).children( "span" ).addClass( "ui-icon-expandable-divider-closed" );
+ openStatus = false;
+ } else {
+ $( this ).children( "span" ).removeClass( "ui-icon-expandable-divider-closed" );
+ $( this ).children( "span" ).addClass( "ui-icon-expandable-divider-opened" );
+ openStatus = true;
+ }
+ });
+ },
+ });
+
+ //auto self-init widgets
+ $( document ).bind( "pagecreate create", function ( e ) {
+ $( $.tizen.listdivider.prototype.options.initSelector, e.target ).listdivider();
+ });
+}( jQuery ) );
*
* HTML Attributes:
*
- * data-listUrl : Represents the page id.
- * The page contains data for the user, for example, an address book.(Default : null)
+ * data-list-id : Represents the page id.
+ * The page contains data for the user, for example, an address book.
+ * If the value is null, anchor button doesn't work. (Default : null)
* data-label: Provide a label for a user-guide. (Default : 'To : ')
- * data-descMessage : This attribute is managing message format.
- * This message is displayed when widget status was changed to 'focusout'. (Default : '{0} & {1} more')
+ * data-description : This attribute is managing message format.
+ * This message is displayed when widget status was changed to 'focusout'. (Default : '+ {0}')
*
* APIs:
*
* The status is not able to manage a widget.
* All buttons that contained in the widget are removed and
* summarized message is displayed.
- *
+ * destroy ( void )
+ * : Remove all of the new DOM elements for the current widget that you created.
*
* Events:
*
*
* Examples:
*
- * <div data-role="multibuttonentry" data-label="To : " data-listUrl:"#addressbook" data-descMessage="{0} & {1} more...">
+ * <div data-role="multibuttonentry" data-label="To : " data-list-id:"#addressbook" data-description="+ {0}">
* </div>
*
*/
_marginWidth : 0,
options : {
label : "To : ",
- listUrl : "#addressbook",
- descMessage : "{0} & {1} more..."
+ listId : null,
+ description : "+ {0}"
},
+
_create : function () {
var self = this,
$view = this.element,
role = $view.jqmData( "role" ),
option = this.options,
+ className = "ui-multibuttonentry-link",
inputbox = $( document.createElement( "input" ) ),
labeltag = $( document.createElement( "label" ) ),
moreBlock = $( document.createElement( "a" ) );
$view.hide().empty().addClass( "ui-" + role );
// create a label tag.
- $( labeltag ).text( this.options.label ).addClass( "ui-multibuttonentry-label" );
+ $( labeltag ).text( option.label ).addClass( "ui-multibuttonentry-label" );
$view.append( labeltag );
// create a input tag
$view.append( inputbox );
// create a anchor tag.
- $( moreBlock ).text( "+" ).attr( "href", option.listUrl ).addClass( "ui-multibuttonentry-link" );
+ if ( option.listId === null || $.trim(option.listId).length < 1 ) {
+ className += "-dim";
+ }
+ $( moreBlock ).text( "+" ).attr( "href", $.trim(option.listId)).addClass( "ui-multibuttonentry-link-base" ).addClass( className );
// append default htmlelements to main widget.
$view.append( moreBlock );
self._fontSize = parseInt( $( moreBlock ).css( "font-size" ), 10 );
self._currentWidth = self._reservedWidth;
},
+
// bind events
_bindEvents : function () {
var self = this,
$view = self.element,
option = self.options,
inputbox = $view.find( ".ui-multibuttonentry-input" ),
- moreBlock = $view.find( ".ui-multibuttonentry-link" );
+ moreBlock = $view.find( ".ui-multibuttonentry-link-base" ),
+ isSeparator = false;
- inputbox.bind( "keydown", function ( event ) {
+ inputbox.bind( "keyup", function ( event ) {
// 8 : backspace
// 13 : Enter
+ // 186 : semi-colon
+ // 188 : comma
var keyValue = event.keyCode,
- valueString = $( inputbox ).val();
+ valueString = $( inputbox ).val(),
+ valueStrings = [],
+ index;
- if ( keyValue == 8 ) {
+ if ( keyValue === 8 ) {
if ( valueString.length === 0 ) {
self._validateTargetBlock();
}
- } else if ( keyValue == 13 ) {
+ } else if ( keyValue === 13 || keyValue === 186 || keyValue === 188 ) {
if ( valueString.length !== 0 ) {
- self._addTextBlock( valueString );
+ // split content by separators(',', ';')
+ valueStrings = valueString.split ( /[,;]/ );
+ for ( index = 0; index < valueStrings.length; index++ ) {
+ if ( valueStrings[index].length !== 0 && valueStrings[index].replace( /\s/g, "" ).length !== 0 ) {
+ self._addTextBlock( valueStrings[index] );
+ }
+ }
}
inputbox.val( "" );
+ isSeparator = true;
} else {
self._unlockTextBlock();
}
+
+ return !isSeparator;
});
moreBlock.click( function () {
+ if ( $( moreBlock ).hasClass( "ui-multibuttonentry-link-dim" ) ) {
+ return ;
+ }
+
$(inputbox).hide();
- $.mobile.changePage( option.listUrl, {
+ $.mobile.changePage( option.listId, {
transition: "slide",
reverse: false,
changeHash: false
var inputBox = $view.find( ".ui-multibuttonentry-input" );
if ( self._labelWidth === 0 ) {
self._labelWidth = $view.find( ".ui-multibuttonentry-label" ).outerWidth( true );
- self._anchorWidth = $view.find( ".ui-multibuttonentry-link" ).outerWidth( true );
+ self._anchorWidth = $view.find( ".ui-multibuttonentry-link-base" ).outerWidth( true );
self._marginWidth = parseInt( ( $( inputBox ).css( "margin-left" ) ), 10 );
self._marginWidth += parseInt( ( $( inputBox ).css( "margin-right" ) ), 10 );
self._viewWidth = $view.innerWidth();
self._modifyInputBoxWidth();
$(inputbox).show();
});
+
+ $view.bind( "click", function ( event ) {
+ if ( self._focusStatus === "focusOut" ) {
+ self.focusIn();
+ }
+ });
},
// create a textbutton and append this button to parent layer.
// @param arg1 : string
// @param arg2 : index
- _addTextBlock : function ( messages, blcokIndex ) {
+ _addTextBlock : function ( messages, blockIndex ) {
if ( arguments.length === 0 ) {
return;
}
var self = this,
$view = self.element,
content = messages,
- index = blcokIndex,
+ index = blockIndex,
blocks = null,
dataBlock = null,
displayText = null,
if ( self._viewWidth === 0 ) {
self._viewWidth = $view.innerWidth();
}
+
// save src data
dataBlock = $( document.createElement( 'input' ) );
dataBlock.attr( "value", content ).addClass( "ui-multibuttonentry-data" ).hide();
displayText = self._ellipsisTextBlock( content ) ;
textBlock.text( displayText ).addClass( "ui-multibuttonentry-block" );
textBlock.append( dataBlock );
+
// bind a event to HTMLDivElement.
textBlock.bind( "vclick", function ( event ) {
- if ( self._focusStatus === "focusOut" ) {
- self.focusInEvent();
- return;
- }
-
if ( $( this ).hasClass( "ui-multibuttonentry-sblock" ) ) {
// If block is selected, it will be removed.
self._removeTextBlock();
blockWidth = $( block ).outerWidth( true );
return blockWidth;
},
+
_unlockTextBlock : function () {
var $view = this.element,
lockBlock = $view.find( "div.ui-multibuttonentry-sblock" );
}
return ellipsisStr;
},
+
_modifyInputBoxWidth : function () {
var self = this,
$view = self.element,
}
$( inputBox ).width( inputBoxWidth - margin - 1 );
},
+
_stringFormat : function ( expression ) {
var pattern = null,
message = expression,
}
return message;
},
+
_resizeBlock : function () {
var self = this,
$view = self.element,
$view.show();
},
- //----------------------------------------------------//
- // Public Method //
+ //---------------------------------------------------- //
+ // Public Method //
//----------------------------------------------------//
//
// Focus In Event
// change focus state.
this._modifyInputBoxWidth();
this._focusStatus = "focusIn";
+ $view.removeClass( "ui-multibuttonentry-focusout" ).addClass( "ui-multibuttonentry-focusin" );
},
+
focusOut : function () {
if ( this._focusStatus === "focusOut" ) {
return;
more = $view.find( "span" ),
blocks = $view.find( "div" ),
currentWidth = $view.outerWidth( true ) - more.outerWidth( true ) - label.outerWidth( true ),
- textWidth = currentWidth;
+ blockWidth = 0;
$view.find( ".ui-multibuttonentry-input" ).hide();
$view.find( "a" ).hide();
blocks.hide();
- // div button
currentWidth = currentWidth - self._reservedWidth;
- for ( index = 0; index < blocks.length; index += 1 ) {
- currentWidth = currentWidth - $( blocks[index] ).outerWidth( true );
- statement += ", " + $( blocks[index] ).text();
- if ( currentWidth <= 0 ) {
- statement = "," + $( blocks[0] ).text();
- statement = self._stringFormat( self.options.descMessage, statement, blocks.length - 1 );
+
+ for ( index = 0; index < blocks.length; index++ ) {
+ blockWidth = $( blocks[index] ).outerWidth( true );
+ if ( currentWidth - blockWidth <= 0 ) {
+ lastIndex = index - 1;
break;
}
- lastIndex = statement.length;
+
+ $( blocks[index] ).show();
+ currentWidth -= blockWidth;
+ }
+
+ if ( lastIndex !== blocks.length ) {
+ statement = self._stringFormat( self.options.description, blocks.length - lastIndex - 1 );
+ tempBlock = $( document.createElement( 'label' ));
+ tempBlock.text( statement );
+ tempBlock.addClass( "ui-multibuttonentry-desclabel" ).addClass( "ui-multibuttonentry-desclabel" );
+ $( blocks[lastIndex] ).after( tempBlock );
}
- tempBlock = $( document.createElement( 'input' ) );
- tempBlock.val( statement.substr( 1, statement.length ) );
- tempBlock.addClass( "ui-multibuttonentry-desclabel" ).addClass( "ui-multibuttonentry-desclabel" );
- tempBlock.width( textWidth - ( self._reservedWidth ) );
- tempBlock.attr( "disabled", true );
- $view.find( "label" ).after( tempBlock );
+
// update foucs state
this._focusStatus = "focusOut";
+ $view.removeClass( "ui-multibuttonentry-focusin" ).addClass( "ui-multibuttonentry-focusout" );
},
+
inputText : function ( message ) {
var $view = this.element;
$view.find( ".ui-multibuttonentry-input" ).val( message );
return message;
},
+
select : function ( index ) {
var $view = this.element,
lockBlock = null,
if ( arguments.length === 0 ) {
// return a selected block.
- lockBlock = $view.find( "div.ui-multibuttonentry-sblock" );
+ lockBlock = $view.find( "div.ui-multibuttonentry-sblock" ).children( ".ui-multibuttonentry-data" );
if ( lockBlock) {
- return lockBlock.text();
+ return lockBlock.attr( "value" );
}
return null;
}
}
return null;
},
+
add : function ( message, position ) {
if ( this._focusStatus === "focusOut" ) {
return;
this._addTextBlock( message, position );
},
+
remove : function ( position ) {
var self = this,
$view = this.element,
}
self._modifyInputBoxWidth();
},
+
length : function () {
return this.element.find( "div" ).length;
},
+
refresh : function () {
var self = this;
self.element.hide();
self.element.show();
},
- destory : function () {
+
+ destroy : function () {
var $view = this.element;
$view.find( "label" ).remove();
$view.find( "div" ).unbind( "vclick" ).remove();
$view.find( "a" ).remove();
- $view.find( ".ui-multibuttonentry-input" ).unbind( "keydown" ).remove();
+ $view.find( ".ui-multibuttonentry-input" ).unbind( "keyup" ).remove();
- this._trigger( "destory" );
+ this._trigger( "destroy" );
}
});
},
_placementCoords: function ( x, y, cw, ch ) {
- var scrollTop = $( window ).scrollTop(),
- screenHeight = $( window ).height(),
+ var screenHeight = $( window ).height(),
screenWidth = $( window ).width(),
halfheight = ch / 2,
maxwidth = parseFloat( this._ui.container.css( "max-width" ) ),
- roomtop = y - scrollTop,
- roombot = scrollTop + screenHeight - y,
+ roomtop = y,
+ roombot = screenHeight - y,
newtop,
newleft;
if ( roomtop > ch / 2 && roombot > ch / 2 ) {
newtop = y - halfheight;
} else {
- newtop = roomtop > roombot ? scrollTop + screenHeight - ch - 30 : scrollTop + 30;
+ newtop = roomtop > roombot ? screenHeight - ch - 30 : 30;
}
if ( cw < maxwidth ) {
popupWidth,
menuHeight,
menuWidth,
- scrollTop,
screenHeight,
screenWidth,
roomtop,
menuHeight = this._ui.container.innerHeight();
menuWidth = this._ui.container.innerWidth();
- scrollTop = $( window ).scrollTop();
screenHeight = $( window ).height();
screenWidth = $( window ).width();
- roomtop = y - scrollTop;
- roombot = scrollTop + screenHeight - y;
+ roomtop = y;
+ roombot = screenHeight - y;
halfheight = menuHeight / 2;
maxwidth = parseFloat( this._ui.container.css( "max-width" ) );
- newtop = ( screenHeight - menuHeight ) / 2 + scrollTop;
+ newtop = ( screenHeight - menuHeight ) / 2;
if ( menuWidth < maxwidth ) {
newleft = ( screenWidth - menuWidth ) / 2;
case 'text':
slider.before( $('<div class="ui-slider-left-text">' +
'<span style="position:relative;top:0.4em;">' +
- inputElement.attr('data-text-left') +
+ inputElement.attr('data-text-left').substring( 0, 3) +
'</span></div>') );
slider.after( $('<div class="ui-slider-right-text">' +
'<span style="position:relative;top:0.4em;">' +
- inputElement.attr('data-text-right') +
+ inputElement.attr('data-text-right').substring( 0, 3) +
'</span></div>') );
break;
}
coverTheme = defaultCoverTheme,
// get the parent li element and add classes
item = cover.closest('li'),
+ btn,
itemHasThemeClass;
// add swipelist CSS classes
// any clicks on buttons inside the item also trigger
// the cover to slide back to the left
- item.find('.ui-btn').bind('vclick', cover.data('animateLeft'));
+ btn = item.find('.ui-btn');
+
+ if ( btn.length ) {
+ btn.bind('vclick', cover.data('animateLeft'));
+ } else {
+ item.append('<div class="ui-dummy"></div>');
+ }
});
},
ok(multibuttonentry.length > 0, "Create");
/* length */
- equal( multibuttonentry.multibuttonentry("length"), 0 ,"API : length ");
+ equal( multibuttonentry.multibuttonentry("length"), 0, "API : length ");
/* Add */
multibuttonentry.multibuttonentry("add", "string1");
/* Select */
multibuttonentry.multibuttonentry("select", 1);
outputText = multibuttonentry.multibuttonentry("select");
- equal( outputText, "..." , "API : select ( 1 )");
+ equal( outputText, "string2", "API : select ( 1 )");
/* Focus Out */
multibuttonentry.multibuttonentry("focusOut");
- status = multibuttonentry.find(".ui-multibuttonentry-desclabel").length === 1 ? true : false;
- equal( status, true , "API : focusOut ");
+ status = multibuttonentry.hasClass("ui-multibuttonentry-focusout");
+ equal( status, true, "API : focusOut ");
/* Focus In */
multibuttonentry.multibuttonentry("focusIn");
- status = multibuttonentry.find(".ui-multibuttonentry-desclabel").length === 1 ? true : false;
- equal(status, false, "API : focusIn ");
+ status = multibuttonentry.hasClass("ui-multibuttonentry-focusin");
+ equal(status, true, "API : focusIn ");
/* Remove */
multibuttonentry.multibuttonentry("remove", 0);
/* Reamove all */
multibuttonentry.multibuttonentry("remove");
- equal( multibuttonentry.multibuttonentry("length"), 0 ,"API : remove");
+ equal( multibuttonentry.multibuttonentry("length"), 0, "API : remove");
/* input */
inputText = "multibuttonentry";
x = 0,
y = 0,
parents = popup.parents(".ui-popupwindow"),
- popPos,
popDim,
+ popPosX = 0,
+ popPosY = 0,
segment = 5,
closed = 0,
open = 0;
while ( x <= width ) {
popup.popupwindow( "open", x, y );
open++;
- popPos = parents.position();
+ popPosX = parseInt( parents.css("left") );
+ popPosY = parseInt( parents.css("top") );
popDim = {
width: parents.width(),
height: parents.height()
};
- if ( popPos.left < 0 || popPos.top < 0 || popPos.left > (width - popDim.width) || popPos.top > (height - popDim.height) ) {
- throw "Pop up occured at wrong position: (" + parseInt(popPos.left, 10) + "," + parseInt(popPos.top, 10) + "," + popDim.width + "," + popDim.height + ")";
+ if ( popPosX < 0 || popPosY < 0 || popPosX > (width - popDim.width) || popPosY > (height - popDim.height) ) {
+ throw "Pop up occured at wrong position: (" + popPosX + "," + popPosY + "," + popDim.width + "," + popDim.height + ")";
}
popup.popupwindow( "close" );
<script>
$( ".virtualgrid_demo_page" ).live( "pagecreate", function() {
console.log("pagecreate...");
- $.getScript( "../../../demos/tizen-gray/widgets/grid/js/virtualgrid-db-demo.js", function( data, textStatus ) {
+ $.getScript( "../../../demos/tizen-winsets/widgets/grid/js/virtualgrid-db-demo.js", function( data, textStatus ) {
$(document).trigger("dataloaded");
});
});
</script>
<link rel="stylesheet" href="../../../libs/js/jquery-mobile-1.1.0/external/qunit.css" />
<script src="../../../libs/js/jquery-mobile-1.1.0/external/qunit.js"></script>
- <script src = "../../../demos/tizen-gray/widgets/list/virtuallist-db-demo.js"></script>
+ <script src = "../../../demos/tizen-winsets/widgets/list/virtuallist-db-demo.js"></script>
<script src="virtuallist-tests.js"></script>
<title>Virtuallist</title>
</head>
projects / framework / web / web-ui-fw.git / commitdiff
