PROJECT_NAME = tizen-web-ui-fw
VERSION = 0.1
VERSION_COMPAT =
+PKG_VERSION = $(shell cat packaging/web-ui-fw.spec | grep Version: | sed -e "s@Version:\s*@@" )
THEME_NAME = default
PATH := $(CURDIR)/build-tools/bin:$(PATH)
loader: widgets globalize
cat 'src/loader/loader.js' >> ${FW_JS}
+ echo '(function($$){$$.tizen.frameworkData.pkgVersion="$(PKG_VERSION)";}(jQuery));' >> ${FW_JS}
globalize: widgets
<div data-role="page" id="multibuttonentry">
- <div data-role="header" data-position="fixed">
+ <div data-role="header" data-position="fixed">
<h1>Multi-button Entry</h1>
</div>
<div data-role="content">
</ul>
</div>
</div>
- <div data-role="page" id="addressbook" data-footer-Exist="false" >
+ <div data-role="page" id="addressbook" data-add-back-btn="none">
<div data-role="header" data-position="fixed">
<h1>Address Book</h1>
- <a id="cancelBtn" href="#multibuttonentry" data-role="button" class="ui-btn-right" >Cancel</a>
</div>
<div data-role="content" id="contentList">
<ul data-role="listview">
<li><a href="#multibuttonentry">Sawyer Wakefield</a></li>
</ul>
</div> <!--/content -->
+ <div data-role="footer">
+ <div align="right">
+ <a href="#multibuttonentry" data-role="button" style="margin-right : 1em;">Cancel</a>
+ </div>
+ </div>
</div> <!--/page -->
<!-- nocontents -->
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 data-role="footer">
<div data-role="controlbar">
<ul>
- <li><a href="#" data-icon="ctrl-edit" class="ui-btn-active">Menu</a></li>
- <li><a href="#" data-icon="ctrl-edit" >Save</a></li>
- <li><a href="#" data-icon="ctrl-edit" >Share</a></li>
+ <li><a href="#" data-icon="ctrl-edit" class="ui-btn-active"></a></li>
+ <li><a href="#" data-icon="ctrl-edit" ></a></li>
+ <li><a href="#" data-icon="ctrl-edit" ></a></li>
</ul>
</div>
</div>
.ui-demo-rotation-namecard {
position : fixed;
- width : 5.1rem;
+ width : 4.4rem;
height : 6.1rem;
margin-right: 0.3rem;
margin-left: 0.3rem;
- margin-bottom: 1.5rem;
+ margin-bottom: 0.5rem;
}
.ui-demo-namecard-pic {
}
.ui-demo-namecard-pic-img {
- height : 5rem;
- width : 5rem;
+ height : 4.3rem;
+ width : 4.3rem;
}
.ui-demo-namecard-contents {
.ui-demo-namecard-span-x {
color : gray;
- font : normal 0.8rem Georgia, serif !important;
+ font : normal 0.6rem Georgia, serif !important;
width: 5rem;
display: block;
.ui-demo-namecard-contents span.name {
color : gray;
- font : normal 0.8rem Georgia, serif !important;
-
- width: 5rem;
+ font : normal 0.6rem Georgia, serif !important;
+ width: 4rem;
display: inline-block;
white-space : nowrap;
overflow : hidden !important;
.ui-demo-namecard-list-contents span{
left : 9.6rem;
font-weight : normal;
- font-size : 1.2rem;
+ font-size : 0.9rem;
color : gray;
padding-top : 1rem;
font-family: Helvetica, Arial, sans-serif;
<h1>Switch</h1>
</div>
<div class="content" data-role="content">
- <p>Normal switches:</p>
- <div id="switch-2" data-role="toggleswitch"></div>
+ <p>Image switches:</p>
+ <div id="switch-1" data-role="toggleswitch" data-checked="false"></div>
+ <div id="switch-2" data-role="toggleswitch" data-checked="true"></div>
<br>
- <p>Circle switches:</p>
- <div id="switch-1" data-role="toggleswitch" data-icon="true" data-checked="false"></div>
- <div id="switch-2" data-role="toggleswitch" data-icon="true" data-checked="true"></div>
+ <p>Text switches (old UX):</p>
+ <div id="switch-2" data-style="text" data-role="toggleswitch"></div>
<br>
<p>Coordinated switches:</p>
<div id="switch-1-coord" data-role="toggleswitch"></div>
Name: web-ui-fw
-Version: 0.1.62
+Version: 0.1.63
Release: 0
Summary: Tizen Web UI Framework Library
Group: Development/Other
###############################
%changelog
+* Fri Nov 23 2012 Youmin Ha <youmin.ha@samsung.com> 0.1.63
+- FIX:
+ - dayselector: fix size
+ - remove unised styles
+ - divider: set non-press effect to default option
+ - popupwindow: fix window closing failure
+ - handler: GUI implementation
+ - TC: fix unit TCs
+ - scrollview: fix padding size
+- Spec changes:
+ - Remove color widgets
+ - add $.tizen.pkgVersion for SDK
+- Etc.
+ - JSDuck documents
+
* Fri Nov 16 2012 Youmin Ha <youmin.ha@samsung.com> 0.1.62
- FIX:
- Many winsets: Fix layout
}
}
+ &:not(.ui-btn) {
+ margin-left : 12 * @unit_base;
+ margin-right : 12 * @unit_base;
+ }
+
+ &>.ui-btn-text {
+ position : absolute;
+
+ top : 5 * @unit_base;
+ height : 18 * @unit_base;
+ padding-right : 10 * @unit_base;
+ }
+
&[data-style="dialogue"] {
height: 20 * @unit_base;
padding : 0px;
border: 0px none red;
padding: 0 0;
padding-top: 0.5em; // vertical text alignment to center
- text-align: @style_list_bubble_date_text_align;
+ text-align: center;
& * {
display: inline-block;
background-color: @color_bg;
+++ /dev/null
-@import "config.less";
-
-@todons-selected-color: #d9931a;
-@todons-selected-color-disabled: #999999;
-
-@colorpalette-choice-total-width: 54 * @unit_base;
-@colorpalette-choice-total-height: 54 * @unit_base;
-@colorpalette-item-border-width: 4 * @unit_base;
-@colorpalette-item-border-color: #c0c0c0;
-@colorpalette-preview-total-width: 304 * @unit_base;
-@colorpalette-preview-total-height: 109 * @unit_base;
-
-@colorpalette-choice-actual-width: @colorpalette-choice-total-width - 2 * @colorpalette-item-border-width;
-@colorpalette-choice-actual-height: @colorpalette-choice-total-height - 2 * @colorpalette-item-border-width;
-@colorpalette-preview-actual-width: @colorpalette-preview-total-width - 2 * @colorpalette-item-border-width;
-@colorpalette-preview-actual-height: @colorpalette-preview-total-height - 2 * @colorpalette-item-border-width;
-
-.todons-colorpalette-disabled {
- .colorpalette-table {
- .colorpalette-choice-active {
- border-color: @todons-selected-color-disabled !important;
- }
- }
-}
-
-.ui-colorpalette {
- display: table;
- padding-left: 24 * @unit_base;
- padding-right: 24 * @unit_base;
- padding-top: 15 * @unit_base;
- padding-bottom: 15 * @unit_base;
-
- .colorpalette-preview-container {
- padding-top: 48 * @unit_base;
- padding-bottom: 39 * @unit_base;
- display: table;
- margin: auto;
-
- .colorpalette-preview {
- display: table;
- margin: auto;
- width: @colorpalette-preview-actual-width;
- height: @colorpalette-preview-actual-height;
- border: @colorpalette-item-border-color @colorpalette-item-border-width solid;
- }
- }
-
- .colorpalette-table {
- .colorpalette-bottom-row {
- display: table-row;
- }
-
- .colorpalette-normal-row {
- .colorpalette-bottom-row;
- }
-
- .colorpalette-choice-container-left {
- display: table-cell;
- }
-
- .colorpalette-choice-container-rest {
- .colorpalette-choice-container-left;
- padding-left: 38 * @unit_base;
- }
-
- .colorpalette-normal-row .colorpalette-choice-container-left {
- padding-bottom: 16 * @unit_base;
- }
-
- .colorpalette-choice {
- width: @colorpalette-choice-actual-width;
- height: @colorpalette-choice-actual-width;
- border-width: @colorpalette-item-border-width;
- border-style: solid;
- border-color: @colorpalette-item-border-color;
- .LESSborder-radius-all(0.2em);
- }
-
- .colorpalette-choice-active {
- border-color: @todons-selected-color;
- }
- }
- .LESSpalette_background_style;
-}
-
-label.colorpickerbutton_label.ui-input-text {
- display:block !important;
-}
+++ /dev/null
-/* Own CSS */
-@import "config.less";
-
-/* @selector-size should be an odd number, in order to pixel-perfectly center on a given colour */
-@colorpicker-selector-size: 72 * @unit_base;
-@colorpicker-selector-border-width: 5 * @unit_base;
-@colorpicker-clrchannel-hs-width: 256 * @unit_base;
-@colorpicker-clrchannel-hs-height: 256 * @unit_base;
-@colorpicker-clrchannel-l-width: 18 * @unit_base;
-@colorpicker-clrchannel-l-height: 256 * @unit_base;
-
-@colorpicker-selector-total-size: @colorpicker-selector-size + 2 * @colorpicker-selector-border-width;
-@colorpicker-clrchannel-hs-padding: @colorpicker-selector-total-size / 2;
-@colorpicker-clrchannel-l-hpadding:
- ~`Math.max(0,
- parseInt("@{colorpicker-selector-total-size}") -
- parseInt("@{colorpicker-clrchannel-l-width}")) / 2 + "px"`;
-@colorpicker-clrchannel-l-selector-left:
- ~`Math.max(0,
- parseInt("@{colorpicker-clrchannel-l-width}") -
- parseInt("@{colorpicker-selector-total-size}")) / 2 + "px"`;
-
-.ui-colorpicker {
- display: table;
-
- .colorpicker-hs-container {
- position: relative;
- display: table-cell;
- float: left;
-
- width: @colorpicker-clrchannel-hs-width;
- height: @colorpicker-clrchannel-hs-height;
- padding: @colorpicker-clrchannel-hs-padding;
-
- .colorpicker-hs-mask {
- position: absolute;
- width: @colorpicker-clrchannel-hs-width;
- height: @colorpicker-clrchannel-hs-height;
- }
-
- .colorpicker-hs-selector {
- position: absolute;
- width: @colorpicker-selector-size;
- height: @colorpicker-selector-size;
- border: @colorpicker-selector-border-width solid black;
- }
- }
-
- .colorpicker-l-container {
- position: relative;
- float: left;
-
- width: @colorpicker-clrchannel-l-width;
- height: @colorpicker-clrchannel-l-height;
- padding-left: @colorpicker-clrchannel-l-hpadding;
- padding-right: @colorpicker-clrchannel-l-hpadding;
- padding-top: @colorpicker-clrchannel-hs-padding;
- padding-bottom: @colorpicker-clrchannel-hs-padding;
-
- .colorpicker-l-mask {
- position: absolute;
- width: @colorpicker-clrchannel-l-width;
- height: @colorpicker-clrchannel-l-height;
- left: ( @colorpicker-selector-size + ( @colorpicker-selector-border-width * 2 ) - @colorpicker-clrchannel-l-width ) / 2;
- }
-
- .colorpicker-l-selector {
- left: @colorpicker-clrchannel-l-selector-left;
- position: absolute;
- width: @colorpicker-selector-size;
- height: @colorpicker-selector-size;
- border: @colorpicker-selector-border-width solid black;
- }
- }
-}
-
-.ui-colorpicker .colorpicker-hs-container .sat-gradient {
- background: none; /* Old browsers */
- background: -webkit-gradient(linear, left top, left bottom,
- color-stop(0%,rgba(128,128,128,0)),
- color-stop(100%,rgba(128,128,128,1))); /* Chrome,Safari4+ */
- background: -moz-linear-gradient(top,
- rgba(128,128,128,0) 0%,
- rgba(128,128,128,1) 100%); /* FF3.6+ */
- background: -webkit-linear-gradient(top,
- rgba(128,128,128,0) 0%,
- rgba(128,128,128,1) 100%); /* Chrome10+,Safari5.1+ */
- background: -o-linear-gradient(top,
- rgba(128,128,128,0) 0%,
- rgba(128,128,128,1) 100%); /* Opera11.10+ */
- background: -ms-linear-gradient(top,
- rgba(128,128,128,0) 0%,
- rgba(128,128,128,1) 100%); /* IE10+ */
- background: linear-gradient(top,
- rgba(128,128,128,0) 0%,
- rgba(128,128,128,1) 100%); /* W3C */
- /* filter: progid:DXImageTransform.Microsoft.gradient (startColorstr='#00808080', endColorstr="#808080", GradientType = 0); */
-}
-
-.ui-colorpicker .colorpicker-l-container .l-gradient {
- background: none; /* Old browsers */
- background: -webkit-gradient(linear, left top, left bottom,
- color-stop(0%,rgba(0,0,0,1)),
- color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
- background: -moz-linear-gradient(top,
- rgba(0,0,0,1) 0%,
- rgba(255,255,255,1) 100%); /* FF3.6+ */
- background: -webkit-linear-gradient(top,
- rgba(0,0,0,1) 0%,
- rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
- background: -o-linear-gradient(top,
- rgba(0,0,0,1) 0%,
- rgba(255,255,255,1) 100%); /* Opera11.10+ */
- background: -ms-linear-gradient(top,
- rgba(0,0,0,1) 0%,
- rgba(255,255,255,1) 100%); /* IE10+ */
- background: linear-gradient(top,
- rgba(0,0,0,1) 0%,
- rgba(255,255,255,1) 100%); /* W3C */
- /* filter: progid:DXImageTransform.Microsoft.gradient (startColorstr='#000000', endColorstr="#ffffff", GradientType = 0); */
-}
-
-
+++ /dev/null
-/* Need to add !important below, because these classes are added before jqm enhancement */
-@import "config.less";
-
-.ui-colorpickerbutton-input {
- max-width: 150 * @unit_base;
- display: inline-block !important;
-}
-
-.ui-colorpickerbutton-input-hidden {
- display: none !important;
-}
+++ /dev/null
-@import "config.less";
-
-@colortitle-vpadding: 15 * @unit_base;
-
-.ui-colortitle {
- h1 {
- margin-left: 10 * @unit_base;
- }
- .LESScolortitle_background_style;
-}
-
-.todons-colortitle-disabled {
- h1 {
- color: #888888;
- }
-}
a.ui-btn {
background : @color_bg;
- color : rgba(153, 153, 153, 1);
+ color : @color_controlbar_btn_normal;
.ui-icon {
width: 32 * @unit_base;
background: @color_bg;
}
a.ui-state-persist, a.ui-state-persist.ui-btn-active, a.ui-btn-show-style {
- background: @color_controlbar_btn_press;
- color : rgba(59, 115, 182, 1);
+ color : @color_controlbar_btn_pressed;
}
a.ui-btn-hover-s.ui-btn-down-s {
&:not(.ui-state-persist) {
- color : rgba(59, 115, 182, 1);
- background: @color_controlbar_btn_press;
+ color : @color_controlbar_btn_pressed;
+ background: @color_controlbar_btn_tab_press;
}
}
}
a.ui-btn {
background: @color_bg;
}
- a.ui-btn-active, .ui-btn-show-style,
+ a.ui-btn-active, .ui-btn-show-style {
+ color : @color_controlbar_btn_pressed;
+ }
a.ui-btn.ui-btn-hover-s.ui-btn-down-s {
- color : rgba(59, 115, 182, 1);
- background: @color_controlbar_btn_press;
+ color : @color_controlbar_btn_pressed;
+ background: @color_controlbar_btn_tab_press;
}
}
.ui-header.ui-bar-s {
&.ui-title-controlbar-multiline {
height : 75 * @unit_base;
- .ui-portrait-controlbar {
+ .ui-controlbar {
height : 75 * @unit_base;
.ui-btn-inner {
padding-top : 45 * @unit_base;
border-width : 1 * @unit_base;
.ui-btn-inner {
text-align :center;
- padding : 0.8em 0px;
+ padding : 0.4em 0px;
}
}
.ui-checkbox-off {
}
}
.ui-checkbox {
- height : 90 * @unit_base;
+ height : 45 * @unit_base;
.ui-btn {
- width : 94 * @unit_base;
+ width : 47 * @unit_base;
}
.ui-btn.ui-corner-left {
border-top-left-radius : 5 * @unit_base;
.ui-dayselector.ui-controlgroup-vertical {
.ui-checkbox .ui-btn{
- width : 128 * @unit_base;
+ width : 64 * @unit_base;
.ui-btn-text {
- margin-left : 16 * @unit_base;
+ margin-left : 2 * @unit_base;
}
}
}
+++ /dev/null
-@import "config.less";
-
-@hsvpicker-clrchannel-masks-width: 300 * @unit_base;
-@hsvpicker-clrchannel-masks-height: 38 * @unit_base;
-@hsvpicker-clrchannel-selector-width: 10 * @unit_base;
-@hsvpicker-clrchannel-selector-height: 50 * @unit_base;
-@hsvpicker-clrchannel-selector-border-width: 5 * @unit_base;
-@hsvpicker-clrchannel-masks-container-hpadding: 12 * @unit_base;
-@hsvpicker-clrchannel-masks-container-vpadding: 16 * @unit_base;
-
-@hsvpicker-clrchannel-selector-actual-height: @hsvpicker-clrchannel-selector-height -
- 2 * @hsvpicker-clrchannel-selector-border-width;
-
-@hsvpicker-clrchannel-masks-container-actual-hpadding:
- @hsvpicker-clrchannel-selector-width / 2
- + @hsvpicker-clrchannel-selector-border-width;
-@hsvpicker-clrchannel-masks-container-actual-vpadding:
- (@hsvpicker-clrchannel-selector-actual-height - @hsvpicker-clrchannel-masks-height) / 2
- + @hsvpicker-clrchannel-selector-border-width;
-@hsvpicker-clrchannel-masks-container-hmargin:
- ~`Math.max(0,
- (parseInt("@{hsvpicker-clrchannel-masks-container-hpadding}") -
- parseInt("@{hsvpicker-clrchannel-masks-container-actual-hpadding}"))) + "px"`;
-@hsvpicker-clrchannel-masks-container-vmargin:
- ~`Math.max(0,
- (parseInt("@{hsvpicker-clrchannel-masks-container-vpadding}") -
- parseInt("@{hsvpicker-clrchannel-masks-container-actual-vpadding}"))) + "px"`;
-
-.ui-hsvpicker {
- .hsvpicker-clrchannel-container {
- display: table;
- padding-top: 5 * @unit_base;
- padding-bottom: 5 * @unit_base;
- padding-left: 27 * @unit_base;
- padding-right: 27 * @unit_base;
-
- .hsvpicker-arrow-btn-container {
- display: table-cell;
- vertical-align: middle;
- }
-
- .hsvpicker-arrow-btn {
- float: left;
- }
-
- .hsvpicker-clrchannel-masks-container {
- float: left;
- position: relative;
- width: @hsvpicker-clrchannel-masks-width;
- height: @hsvpicker-clrchannel-masks-height;
-
- margin-left: @hsvpicker-clrchannel-masks-container-hmargin;
- margin-right: @hsvpicker-clrchannel-masks-container-hmargin;
- margin-top: @hsvpicker-clrchannel-masks-container-vmargin;
- margin-bottom: @hsvpicker-clrchannel-masks-container-vmargin;
-
- padding-left: @hsvpicker-clrchannel-masks-container-actual-hpadding;
- padding-right: @hsvpicker-clrchannel-masks-container-actual-hpadding;
- padding-top: @hsvpicker-clrchannel-masks-container-actual-vpadding;
- padding-bottom: @hsvpicker-clrchannel-masks-container-actual-vpadding;
-
- .hsvpicker-clrchannel-mask {
- position: absolute;
- width: @hsvpicker-clrchannel-masks-width;
- height: @hsvpicker-clrchannel-masks-height;
- }
-
- .hsvpicker-clrchannel-mask-black {
- background: #000000;
- }
-
- .hsvpicker-clrchannel-mask-white {
- background: #ffffff;
- }
-
- .hsvpicker-clrchannel-selector {
- position: absolute;
- left: 0 * @unit_base;
- top: 0 * @unit_base;
- width: @hsvpicker-clrchannel-selector-width;
- height: @hsvpicker-clrchannel-selector-actual-height;
- border: @hsvpicker-clrchannel-selector-border-width solid black;
- }
- }
- }
- .LESShsvpicker_background_style;
-}
-
-.ui-popupwindow .colorpickerbutton-popup-container-style {
- display: table;
- width : 50%;
- margin : 0 auto;
-}
+++ /dev/null
-.tizen-huegradient {
- background: none; /* Old browsers */
- background: -webkit-gradient(linear, left top, right top,
- color-stop( 0% ,rgba(255, 0, 0,1)),
- color-stop( 16.666666667%,rgba(255,255, 0,1)),
- color-stop( 33.333333333%,rgba(0 ,255, 0,1)),
- color-stop( 50% ,rgba(0 ,255,255,1)),
- color-stop( 66.666666667%,rgba(0 , 0,255,1)),
- color-stop( 83.333333333%,rgba(255, 0,255,1)),
- color-stop(100% ,rgba(255, 0, 0,1))); /* Chrome,Safari4+ */
- background: -moz-linear-gradient(left,
- rgba(255, 0, 0,1) 0%,
- rgba(255,255, 0,1) 16.666666667%,
- rgba( 0,255, 0,1) 33.333333333%,
- rgba( 0,255,255,1) 50%,
- rgba( 0, 0,255,1) 66.666666667%,
- rgba(255, 0,255,1) 83.333333333%,
- rgba(255, 0, 0,1) 100%);
- background: -webkit-linear-gradient(left,
- rgba(255, 0, 0,1) 0%,
- rgba(255,255, 0,1) 16.666666667%,
- rgba( 0,255, 0,1) 33.333333333%,
- rgba( 0,255,255,1) 50%,
- rgba( 0, 0,255,1) 66.666666667%,
- rgba(255, 0,255,1) 83.333333333%,
- rgba(255, 0, 0,1) 100%);
- background: -o-linear-gradient(left,
- rgba(255, 0, 0,1) 0%,
- rgba(255,255, 0,1) 16.666666667%,
- rgba( 0,255, 0,1) 33.333333333%,
- rgba( 0,255,255,1) 50%,
- rgba( 0, 0,255,1) 66.666666667%,
- rgba(255, 0,255,1) 83.333333333%,
- rgba(255, 0, 0,1) 100%);
- background: -ms-linear-gradient(left,
- rgba(255, 0, 0,1) 0%,
- rgba(255,255, 0,1) 16.666666667%,
- rgba( 0,255, 0,1) 33.333333333%,
- rgba( 0,255,255,1) 50%,
- rgba( 0, 0,255,1) 66.666666667%,
- rgba(255, 0,255,1) 83.333333333%,
- rgba(255, 0, 0,1) 100%);
- background: linear-gradient(left,
- rgba(255, 0, 0,1) 0%,
- rgba(255,255, 0,1) 16.666666667%,
- rgba( 0,255, 0,1) 33.333333333%,
- rgba( 0,255,255,1) 50%,
- rgba( 0, 0,255,1) 66.666666667%,
- rgba(255, 0,255,1) 83.333333333%,
- rgba(255, 0, 0,1) 100%);
-}
-
-/* Full-saturation magic grayscale values were taken from the Gimp */
-.tizen-huegradient-disabled {
- background: none; /* Old browsers */
- background: -webkit-gradient(linear, left top, right top,
- color-stop( 0% ,rgba( 54, 54, 54,1)),
- color-stop( 16.666666667%,rgba(237,237,237,1)),
- color-stop( 33.333333333%,rgba(182,182,182,1)),
- color-stop( 50% ,rgba(201,201,201,1)),
- color-stop( 66.666666667%,rgba( 18, 18, 18,1)),
- color-stop( 83.333333333%,rgba( 73, 73, 73,1)),
- color-stop(100% ,rgba( 54, 54, 54,1))); /* Chrome,Safari4+ */
- background: -moz-linear-gradient(left,
- rgba( 54, 54, 54,1) 0%,
- rgba(237,237,237,1) 16.666666667%,
- rgba(182,182,182,1) 33.333333333%,
- rgba(201,201,201,1) 50%,
- rgba( 18, 18, 18,1) 66.666666667%,
- rgba( 73, 73, 73,1) 83.333333333%,
- rgba( 54, 54, 54,1) 100%);
- background: -webkit-linear-gradient(left,
- rgba( 54, 54, 54,1) 0%,
- rgba(237,237,237,1) 16.666666667%,
- rgba(182,182,182,1) 33.333333333%,
- rgba(201,201,201,1) 50%,
- rgba( 18, 18, 18,1) 66.666666667%,
- rgba( 73, 73, 73,1) 83.333333333%,
- rgba( 54, 54, 54,1) 100%);
- background: -o-linear-gradient(left,
- rgba( 54, 54, 54,1) 0%,
- rgba(237,237,237,1) 16.666666667%,
- rgba(182,182,182,1) 33.333333333%,
- rgba(201,201,201,1) 50%,
- rgba( 18, 18, 18,1) 66.666666667%,
- rgba( 73, 73, 73,1) 83.333333333%,
- rgba( 54, 54, 54,1) 100%);
- background: -ms-linear-gradient(left,
- rgba( 54, 54, 54,1) 0%,
- rgba(237,237,237,1) 16.666666667%,
- rgba(182,182,182,1) 33.333333333%,
- rgba(201,201,201,1) 50%,
- rgba( 18, 18, 18,1) 66.666666667%,
- rgba( 73, 73, 73,1) 83.333333333%,
- rgba( 54, 54, 54,1) 100%);
- background: linear-gradient(left,
- rgba( 54, 54, 54,1) 0%,
- rgba(237,237,237,1) 16.666666667%,
- rgba(182,182,182,1) 33.333333333%,
- rgba(201,201,201,1) 50%,
- rgba( 18, 18, 18,1) 66.666666667%,
- rgba( 73, 73, 73,1) 83.333333333%,
- rgba( 54, 54, 54,1) 100%);
-}
\r
.ui-multibuttonentry {\r
display : table;\r
- background-color : @color_multibuttonentry_bg;\r
outline : none;\r
}\r
\r
margin-left : .3em;\r
margin-right : .3em;\r
padding : .6em 0em;\r
- color : @color_multibuttonentry_input_text;\r
+ color : @color_multibuttonentry_label_text;\r
font-weight : bold;\r
text-align : center;\r
font-size : 1em;\r
- background-color : @color_multibuttonentry_bg;\r
}\r
\r
.ui-multibuttonentry-input {\r
color : @color_multibuttonentry_input_text;\r
text-align : left;\r
font-size : 1em;\r
- background-color : @color_multibuttonentry_bg;\r
}\r
\r
-.ui-multibuttonentry div, .ui-multibuttonentry a {\r
+.ui-multibuttonentry div {\r
display : inline-block;\r
text-align : center;\r
cursor : pointer;\r
padding : .2em .5em;\r
font-size : 1em;\r
text-shadow : 0 .1em .1em rgba(0,0,0,.3);\r
- -ms-border-radius : .5em;\r
- -o-border-radius : .5em;\r
- -webkit-border-radius : .5em;\r
- -moz-border-radius : .5em;\r
- border-radius : 1.5em;\r
+ -ms-border-radius : .2em;\r
+ -o-border-radius : .2em;\r
+ -webkit-border-radius : .2em;\r
+ -moz-border-radius : .2em;\r
+ border-radius : .2em;\r
.LESSbox-shadow(0, .1em, .1em, rgba(0,0,0,.2));\r
color : @color_multibuttonentry_block_text;\r
overflow : hidden;\r
white-space : nowrap;\r
}\r
\r
-a.ui-multibuttonentry-link-base {\r
- float : right;\r
- font-size : 1em;\r
- font-weight : bold;\r
- text-decoration : none;\r
- border : solid 2px @color_multibuttonentry_link_bg;\r
-}\r
-\r
-a.ui-multibuttonentry-link {\r
- color : @color_multibuttonentry_link !important;\r
- background-color : @color_multibuttonentry_link_bg;\r
-}\r
-\r
-a.ui-multibuttonentry-link-dim {\r
- color : @color_multibuttonentry_link_bg !important;\r
- background-color : @color_multibuttonentry_bg;\r
-}\r
-\r
div.ui-multibuttonentry-block {\r
- border : solid 2px @color_multibuttonentry_block_border;\r
background-color : @color_multibuttonentry_block_bg;\r
+ background-image: url(./images/00_contacts_button_header.png);\r
+ background-size: contain;\r
+ background-repeat: no-repeat;\r
+ padding-left : .7em;\r
}\r
\r
div.ui-multibuttonentry-sblock {\r
- border : solid 2px @color_multibuttonentry_press_border;\r
background : @color_multibuttonentry_press_bg;\r
+ padding-left : .7em;\r
}\r
\r
.ui-multibuttonentry .ui-multibuttonentry-desclabel {\r
outline : none;\r
position : relative;\r
border : 0;\r
- color : @color_multibuttonentry_input_text;\r
+ color : @color_multibuttonentry_label_text;\r
text-align : left;\r
font-size : 1em;\r
- background-color : @color_multibuttonentry_bg;\r
}\r
\r
.ui-multibuttonentry-focus-button {\r
@import "config.less";\r
\r
+@unit_base_multimediaview : @unit_base * 0.5;\r
+\r
.ui-multimediaview {\r
background-color : @color_multimediaview_bg;\r
overflow : hidden;\r
z-index : @z_base_header_footer + 100 !important;\r
}\r
\r
-.ui-multimediaview-audio {\r
- background-color : @color_multimediaview_bg !important;\r
+.ui-multimediaview-video {\r
+ background-color : @color_multimediaview_control_bg !important;\r
}\r
\r
.ui-multimediaview-control span {\r
}\r
\r
.ui-multimediaview-control span.ui-volume-icon {\r
- background-image : url(./images/00_slider_btn_volume02.png);\r
+ background-image : url(./images/00_slider_button_volume_02.png);\r
}\r
\r
.ui-multimediaview-control span.ui-mute-icon {\r
- background-image : url(./images/00_slider_btn_volume01.png);\r
+ background-image : url(./images/00_slider_button_volume_01.png);\r
}\r
\r
.ui-multimediaview-control span.ui-fullscreen-on {\r
margin : 0;\r
outline : 0;\r
border : 0;\r
- background-color : @color_multimediaview_control_bg;\r
- height : 84 * @unit_base;\r
+ height : 84 * @unit_base_multimediaview;\r
}\r
\r
.ui-multimediaview-control span.ui-button {\r
background-position : center center;\r
background-size : 80%;\r
background-repeat : no-repeat;\r
- width : 74 * @unit_base;\r
- height : 74 * @unit_base;\r
- .LESSborder-radius-all( 6 * @unit_base );\r
+ width : 74 * @unit_base_multimediaview;\r
+ height : 74 * @unit_base_multimediaview;\r
+ .LESSborder-radius-all( 6 * @unit_base_multimediaview);\r
background-color : @color_multimediaview_button_bg;\r
- margin : 4 * @unit_base;\r
+ margin : 4 * @unit_base_multimediaview;\r
}\r
\r
.ui-multimediaview-control .ui-playpausebutton {\r
}\r
\r
.ui-multimediaview-control .ui-timestamplabel p {\r
- margin-top : -6 * @unit_base;\r
- margin-left : 4 * @unit_base;\r
+ margin-top : -6 * @unit_base_multimediaview;\r
+ margin-left : 4 * @unit_base_multimediaview;\r
padding : 0;\r
text-align : center;\r
- font-size : 22 * @unit_base;\r
- line-height : 28 * @unit_base;\r
+ font-size : 22 * @unit_base_multimediaview;\r
+ line-height : 28 * @unit_base_multimediaview;\r
text-align : left;\r
}\r
\r
}\r
\r
.ui-multimediaview-control .ui-durationlabel p {\r
- margin-top : -6 * @unit_base;\r
- margin-right : 4 * @unit_base;\r
+ margin-top : -6 * @unit_base_multimediaview;\r
+ margin-right : 4 * @unit_base_multimediaview;\r
padding : 0;\r
text-align : center;\r
- font-size : 22 * @unit_base;\r
- line-height : 28 * @unit_base;\r
+ font-size : 22 * @unit_base_multimediaview;\r
+ line-height : 28 * @unit_base_multimediaview;\r
text-align : right;\r
}\r
\r
.ui-multimediaview-control .ui-seekbar {\r
- margin-top : 16 * @unit_base;\r
- padding-left : 4 * @unit_base;\r
- padding-right : 4 * @unit_base;\r
- height : 16 * @unit_base;\r
+ margin-top : 16 * @unit_base_multimediaview;\r
+ padding-left : 4 * @unit_base_multimediaview;\r
+ padding-right : 4 * @unit_base_multimediaview;\r
+ height : 16 * @unit_base_multimediaview;\r
float : left;\r
}\r
\r
margin : 0;\r
padding : 0;\r
width : 100%;\r
- height : 16 * @unit_base;\r
+ height : 16 * @unit_base_multimediaview;\r
background-color : @color_multimediaview_bar_gray;\r
- .LESSborder-radius-all(3 * @unit_base);\r
+ border-radius : 1.5em;\r
}\r
\r
.ui-multimediaview-control .ui-seekbar .ui-currenttime {\r
margin : 0;\r
padding : 0;\r
- height : 16 * @unit_base;\r
+ height : 16 * @unit_base_multimediaview;\r
position : absolute;\r
+ background : -webkit-gradient(linear, left top, left bottom, from(#6298D9), to(#295B98));\r
+ background : -moz-linear-gradient(top, #6298D9, #295B98);\r
+ background : -o-linear-gradient(top, #6298D9, #295B98);\r
+ background : -ms-linear-gradient(top, #6298D9, #295B98);\r
background-color : @color_multimediaview_bar_active;\r
- .LESSborder-radius-all(3 * @unit_base);\r
+ border-radius : 1.5em;\r
}\r
\r
.ui-multimediaview-control .ui-volumecontrol {\r
- width : 220 * @unit_base;\r
+ width : 220 * @unit_base_multimediaview;\r
height : 100%;\r
float : left;\r
}\r
\r
.ui-multimediaview-control .ui-volumecontrol .ui-volumebar {\r
height : 100%;\r
- padding-top : 35 * @unit_base;\r
- padding-left : 40 * @unit_base;\r
+ padding-top : 35 * @unit_base_multimediaview;\r
+ padding-left : 40 * @unit_base_multimediaview;\r
display : block;\r
}\r
\r
.ui-multimediaview-control .ui-volumecontrol .ui-volumebar .ui-guide {\r
- width : 160 * @unit_base;\r
- height : 16 * @unit_base;\r
+ width : 160 * @unit_base_multimediaview;\r
+ height : 16 * @unit_base_multimediaview;\r
position : absolute;\r
- background-color : white;\r
- .LESSborder-radius-all(3 * @unit_base);\r
background-color : @color_multimediaview_bar_gray;\r
+ border-radius : 1.5em;\r
}\r
\r
.ui-multimediaview-control .ui-volumecontrol .ui-volumebar .ui-value {\r
margin : 0;\r
padding : 0;\r
- height : 16 * @unit_base;\r
+ height : 16 * @unit_base_multimediaview;\r
position : absolute;\r
- .LESSborder-radius-all(3 * @unit_base);\r
+ background : -webkit-gradient(linear, left top, left bottom, from(#6298D9), to(#295B98));\r
+ background : -moz-linear-gradient(top, #6298D9, #295B98);\r
+ background : -o-linear-gradient(top, #6298D9, #295B98);\r
+ background : -ms-linear-gradient(top, #6298D9, #295B98);\r
background-color : @color_multimediaview_bar_active;\r
+ border-radius : 1.5em;\r
}\r
\r
.ui-multimediaview-control .ui-volumecontrol .ui-volumebar .ui-handler {\r
margin : 0;\r
padding : 0;\r
- width : 30 * @unit_base;\r
- height : 30 * @unit_base;\r
+ width : 30 * @unit_base_multimediaview;\r
+ height : 30 * @unit_base_multimediaview;\r
position : absolute;\r
- .LESSborder-radius-all(5 * @unit_base);\r
background-color : @color_multimediaview_bar_handle;\r
background : -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#E6E6E6));\r
background : -moz-linear-gradient(top, #FFFFFF, #E6E6E6);\r
background : -o-linear-gradient(top, #FFFFFF, #E6E6E6);\r
background : -ms-linear-gradient(top, #FFFFFF, #E6E6E6);\r
- border : solid 1px rgb(213, 213, 213);\r
+ border : solid 1px @color_multimediaview_button_border;\r
+ border-radius : 1.5em;\r
}\r
@import "config.less";
+@unit_base_handler : @unit_base * 0.5;
+
.ui-handler {
position : absolute;
overflow : hidden;
}
.ui-handler-y {
- top : 10 * @unit_base;
- right : 10 * @unit_base;
- bottom : 10 * @unit_base;
- width : 48 * @unit_base;
+ top : 10 * @unit_base_handler;
+ right : 10 * @unit_base_handler;
+ bottom : 10 * @unit_base_handler;
+ width : 48 * @unit_base_handler;
}
.ui-handler-x {
- right : 10 * @unit_base;
- bottom : 10 * @unit_base;
- left : 10 * @unit_base;
- height : 48 * @unit_base;
+ right : 10 * @unit_base_handler;
+ bottom : 10 * @unit_base_handler;
+ left : 10 * @unit_base_handler;
+ height : 48 * @unit_base_handler;
}
.ui-handler-track {
background-color : @color_scrollview_handler_bg;
background-position : center;
background-repeat : no-repeat;
- .LESSborder-radius-all(5 * @unit_base);
+ .LESSborder-radius-all(5 * @unit_base_handler);
}
.ui-handler-y .ui-handler-thumb {
- width : 48 * @unit_base;
- height : 214 * @unit_base;
+ width : 48 * @unit_base_handler;
+ height : 214 * @unit_base_handler;
background-image : url("images/00_scroll_bar_handler.png");
- background-size : 48 * @unit_base 40 * @unit_base;
+ background-size : 48 * @unit_base_handler 40 * @unit_base_handler;
}
.ui-handler-x .ui-handler-thumb {
- width : 214 * @unit_base;
- height : 48 * @unit_base;
+ width : 214 * @unit_base_handler;
+ height : 48 * @unit_base_handler;
background-image : url("images/00_scroll_bar_handler_hor.png");
- background-size : 40 * @unit_base 48 * @unit_base;
+ background-size : 40 * @unit_base_handler 48 * @unit_base_handler;
}
}
.ui-content.ui-scrollview-clip > div.ui-scrollview-view {
margin: 0;
- padding-left: 16 * @unit_base;
- padding-right: 16 * @unit_base;
+ padding-left: 8 * @unit_base;
+ padding-right: 8 * @unit_base;
}
/*
overflow: hidden;
}
-.ui-virtualgrid-content {
- background-color : @color_virtualgrid_bg;
-}
-
.ui-scrollbar-thumb-x {
width : 1.5rem !important;
}
-/******************************************************************************************************/
-/**************** Define ColorCode Here ************* Start ****************************************/
-/******************************************************************************************************/
-
+/***************************************************************************
+ Body
+***************************************************************************/
+@color_bg: rgb(248, 246, 239); // #F8F6EF // Main Background color
+@color_text: rgb(0, 0, 0); // 0 0 0
+@color_text_sub: rgb(102, 102, 102); // 102 102 102
+@color_text_setting: rgb(42, 109, 140); // 42 109 140
-/***************** Naviframe **********************************/
+/***************************************************************************
+ Naviframe
+***************************************************************************/
@color_bar_title_text : rgba(59, 115, 182, 1); /* #3b73b6 */ /* title text */
@color_bar_btn_press : rgba(0, 0, 0, 0.1);
-/***************** Controlbar *********************************/
-@color_controlbar_btn_press : -webkit-linear-gradient(top, rgba(169,165,151,1) 0%,rgba(246,248,239,1) 100%);
-/***************** Body ***************************************/
-@color_bg: rgb(248, 246, 239); // #F8F6EF // Main Background color
-@color_text: rgb(0, 0, 0); // 0 0 0
-@color_text_sub: rgb(102, 102, 102); // 102 102 102
-@color_text_setting: rgb(42, 109, 140); // 42 109 140
+/***************************************************************************
+ Controlbar
+***************************************************************************/
+@color_controlbar_btn_tab_press : -webkit-linear-gradient(top, rgba(169,165,151,1) 0%,rgba(246,248,239,1) 100%); /* B0514P1 : 00_tab_press_ef.9.png */
+@color_controlbar_btn_pressed : rgba(59, 115, 182, 1); /* B052L6P : Tab pressed */
+@color_controlbar_btn_normal : rgba(153, 153, 153, 1); /* B052L6 : Tab Normal */
-/***************** List ***************************************/
+/***************************************************************************
+ List
+***************************************************************************/
@color_list_bg: rgba(248, 246, 239, 1); /* B0211 : List bg color */
@color_list_press : rgba(87, 135, 194, 1); /* B041 : List Press color */
@color_list_border_bottom: rgba(211, 209, 203, 0.5); /* B0221 : 1px line Code */
@color_list_main_text_unfocus: rgba(0, 0, 0, 1);
@color_list_sub_text_default: rgba(100, 100, 100, 1);
-
@color_list_divider_expand_div : rgba(0, 0, 0, 0.5);
@color_list_divider_bg : rgba(248, 246, 239, 1); /* W021L1 : Index BG */
@color_list_divider_text : rgba(59, 115, 182, 1); /* W021L2 : Index bar */
@color_list_bubble_link_text: rgb(34, 129, 157);
-/****************** Shortcut Scroll *************************/
+/***************************************************************************
+ Shortcut Scroll
+***************************************************************************/
@color_shortcutscroll_rollover_bg: rgba(230, 227, 216, 1); /* B0723 : 00_fast_scroll_rollover_bg.9.png */
@color_shortcutscroll_rollover_text: rgba(160, 159, 154, 1); /* B0721 : Rollover text */
@color_shortcutscroll_popup_bg: rgba(59, 115, 182, 1); /* B0731 : 00_fast_scroll_popup_bg.png */
@color_shortcutscroll_popup_shadow: rgba(199, 199, 199, 0.5);
@color_shortcutscroll_popup_text: rgba(255, 255, 255, 1); /* B0732 : Scroll popup text */
-/***************** SearchBar(forms.textinput) *****************/
+
+/***************************************************************************
+ SearchBar(forms.textinput)
+***************************************************************************/
@color_searchbar_bg : rgba(248, 246, 239, 1);
@color_searchbar_default_text : rgba(121, 131, 138, 1); /* Search default text */
@color_searchbar_input_field_bg : rgba(255, 255, 255, 1); /* W301 : 00_search_edit_field_bg.png */
-/***************** Popup **************************************/
+
+/***************************************************************************
+ Popup
+***************************************************************************/
@font_size_popup_info_style: 24 * @unit_base;
@color_popup_text_bg: rgba(248, 246, 239, 1); /* B061L1 : Popop info */
-/***************** Button *************************************/
-
+/***************************************************************************
+ Button(connected with other winset)
+***************************************************************************/
@color_button_EditText: rgb(61, 61, 61);
@color_button_EditTextPress: rgb(61, 61, 61);
@color_button_inner_ms: -ms-linear-gradient(top, rgb(250, 247, 242), rgb(248, 245, 240));
@button_shadow_outer: 0 0 1px 1px rgba(255, 255, 255, 1);
-@button_shadow_inner: inset 0 0 3px rgba(255, 255, 255, 1);
+@button_shadow_inner: none;
.LESSbutton_box_style{
color: @color_button_text_normal;
color: @color_button_text_press;
}
-/***************** Datetime picker ****************************/
-@font_size_datetime_main_text: 22 * @unit_base;
-@font_size_datetime_sub_text: 16 * @unit_base;
/***************************************************************************
contextual popup
- ***************************************************************************/
+***************************************************************************/
@color_ctxpopup_text: rgb(255, 255, 255);
@color_ctxpopup_background: rgb(68, 68, 68);
@color_ctxpopup_border_left: rgb(91, 91, 91);
@color_ctxpopup_timepicker_text: rgba( 249, 249, 249, 0.4 );
@color_ctxpopup_timepicker_text_focus: rgba( 249, 249, 249, 1 );
+@color_bar_back_btn_press : rgba(26, 82, 116, 0.3); /* #1A5274 */
-/******************************************************************************************************/
-/**************** Define ColorCode Here ************* End ****************************************/
-/******************************************************************************************************/
-
-
-
-
-
-
-
-
-
-/************************** old color code ******************************/
-
-// Basic color set
-
-@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
+/***************************************************************************
+ Scrollview
+***************************************************************************/
@color_scrollbar: rgb(198, 196, 190);
-@color_text_dim: rgb(108, 115, 118); // 108 115 118
-@color_text_focus: @color_text;
-
-@color_text_input: rgb(70, 70, 70); // 70 70 70
-@color_text_cursor: @color_text_setting;
-@color_text_segctrl: rgb(158, 195, 213); // 158 195 213 // TODO: used only in segctrl. Check more.
-
-//Dialogue color set
-
-@color_dialogue_sub_text: rgb(146,146,146);
-
-
-//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
-
- NOTE:
- * Color variables' name: @color_<widget name>_<identifier>
- * Color values: Use rgb() or rgba()
- *************************/
+/***************************************************************************
+ Date Time picker
+***************************************************************************/
+@color_timepicker_selector_color: rgb(42,137,194);
+@font_size_datetime_main_text: 22 * @unit_base;
+@font_size_datetime_sub_text: 16 * @unit_base;
/***************************************************************************
- List
+ DaySelector
***************************************************************************/
+@color_dayselector_Btn_Sat: rgba(0, 168, 231, 1); /* #00a8e7 */
+@color_dayselector_Btn_Sun: rgba(240, 20, 2, 1); /* #f01402 */
+@color_dayselector_Btn_Mon_to_Fri: rgba(249, 249, 249, 1); /* #f9f9f9 */
+@color_dayselector_Btn_border: rgba(26, 82, 116, 1); /* #f9f9f9 */
+@color_dayselector_Btn_normal_start: rgb(126, 157, 178);
+@color_dayselector_Btn_normal_end: rgb(84,121,144);
-@color_list_main_text_read: rgba(158, 158, 158, 1);
-@color_list_main_text_unread: rgba(249, 249, 249, 1);
+@color_dayselector_Btn_press_start: rgb(59,119,150);
+@color_dayselector_Btn_press_end: rgb(47,91,117);
-@color_list_sub_text_settings: rgba(0, 140, 210, 1);
-@color_list_sub_text_focus: rgba(249, 249, 249, 1);
-@color_list_flexible_text_main: rgba(249, 249, 249, 1);
-@color_list_flexible_text_sub: rgba(149, 149, 149, 1);
-@color_list_index_list: rgba(164, 164, 164, 1);
-@color_list_editfield_text: rgba(70, 70, 70, 1);
-@color_list_editfield_text_cursor: rgba(0, 140, 210, 1);
-@color_list_multiline_text: rgba(149, 149, 149, 1);
-@color_list_3line_main_text: rgba(249, 249, 249, 1);
-@color_list_3line_main_text_read: rgba(249, 249, 249, 1);
-@color_list_3line_main_text_focus: rgba(249, 249, 249, 1);
-@color_list_3line_main_text2: rgba(104, 137, 152, 1);
-@color_list_3line_main_text2_focus: rgba(249, 249, 249, 1);
-@color_list_converter_style: rgba(249, 249, 249, 1);
-@color_list_converter_style_focus: rgba(249, 249, 249, 1);
-@color_list_unread_email: rgba(249, 249, 249, 1);
-@color_list_contents_text: rgba(210, 210, 210, 1);
-@color_list_name_text: rgba(129, 129, 129, 1);
-@color_list_name_text_dim: rgba(0, 140, 210, 1);
-@color_list_colorbar: rgba(80, 107, 207, 1); //Temp, not defined
+.LESSDayselectorButtonNormal{
+ .LESSbackground-with-gradient(top, @color_dayselector_Btn_normal_start, @color_dayselector_Btn_normal_end);
+}
+.LESSDayaselectorButtonPress{
+ .LESSbackground-with-gradient(top, @color_dayselector_Btn_press_start, @color_dayselector_Btn_press_end);
+}
+/***************************************************************************
+ OptionHeader
+***************************************************************************/
+@color_optionheader_Background: rgba(26, 82, 116, 1);
+@color_optionheader_bt: -webkit-linear-gradient(top, rgb(56,112,141) 0%,rgb(36,93,128) 100%);
+@color_optionheader_bt_press: -webkit-linear-gradient(top, rgb(74,164,218) 0%,rgb(43,138,195) 100%);
+@color_optionheader_tab_text: rgba(249, 249, 249, 1); /* #f9f9f9 */
-@font_size_list_main_text: 44 * @unit_base; //1.375rem; /* 44 px */
-@font_size_list_sub_text: 32 * @unit_base; //1.0rem; /* 32 px */
-@font_size_list_flexible_text_main: 48 * @unit_base; //1.5rem; /* 48 px */
-@font_size_list_flexible_text_sub: 36 * @unit_base; //1.125rem; /* 36 px */
-@font_size_list_index_list: 32 * @unit_base; //1.0rem; /* 32 px */
-@font_size_list_editfield_text: 44 * @unit_base; //1.375rem; /* 44 px */
-@font_size_list_multiline_text: 32 * @unit_base; //1.0rem; /* 32 px */
-@font_size_list_3line_main_text: 42 * @unit_base; //1.3125rem; /* 42 px */
-@font_size_list_3line_main_text2: 36 * @unit_base; //1.125rem; /* 36 px */
-@font_size_list_converter_style: 40 * @unit_base; //1.3rem; /* 40 px */
-@font_size_list_unread_email: 44 * @unit_base; //1.375rem; /* 44 px */
-@font_size_list_contents_text: 30 * @unit_base; //0.94rem; /* 30 px */
-@font_size_list_name_text: 32 * @unit_base; //1.0rem; /* 32 px */
+/***************************************************************************
+ SegmentControl
+***************************************************************************/
+@color_segmentcontrol_btn_normal : rgb(125,157,178);
+@color_segmentcontrol_btn_normal_start : rgb(125,157,178);
+@color_segmentcontrol_btn_normal_end : rgb(84,121,144);
-@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_segmentcontrol_btn_press : rgb(59,119,150);
+@color_segmentcontrol_btn_press_start : rgb(59,119,150);
+@color_segmentcontrol_btn_press_end : rgb(47,91,117);
+@color_segmentcontrol_Seg_text : rgba(249, 249, 249, 1); /* #F9F9F9*/
+@color_segmentcontrol_Seg_text_pressed : rgba(249, 249, 249, 1); /* #F9F9F9*/
+/***************************************************************************
+ ControlGroup
+***************************************************************************/
+@color_controlgroup_btn_border : rgba(26, 82, 116, 1); /* #252525 */
+
/***************************************************************************
Popup
***************************************************************************/
@color_popup_center_progressbar_title: rgba(153, 153, 153, 1);
@color_popup_text_progress_title: rgba(249, 249, 249, 1);
-/* TODO : ninepatch popup title */
+
@color_popup_title_bg: rgba(80, 147, 182, 255); /* popup_title_bg.png */
@color_popup_button_bg: rgba(248, 246, 239, 1);
@color_popup_buttonbg_o: -o-linear-gradient(top, rgb(84, 126, 153), rgb(69, 105, 128));
@color_popup_buttontext: rgb(249, 249, 249);
@color_popup_buttonbg_over: rgb(94, 136, 163);
+
@color_popup_buttonbg_press: rgb(67, 160, 217);
@color_popup_buttonbg_press_webkit: -webkit-gradient(linear, left top, left bottom, from(rgb(67, 160, 217)), to(rgb(56, 139, 185)));
@color_popup_buttonbg_press_moz: -moz-linear-gradient(top, rgb(67, 160, 217), rgb(56, 139, 185));
.LESSpopup_padding_style{
}
+
/***************************************************************************
Button
***************************************************************************/
-@color_button_press_webkit: -webkit-gradient(linear, left top, left bottom, from(rgb(67, 160, 217)), to(rgb(56, 139, 185)));
-@color_button_press_moz: -moz-linear-gradient(top, rgb(67, 160, 217), rgb(56, 139, 185));
-
-@color_button_hover: rgb(161, 171, 177);
-
@color_button_text_black: rgb(0, 0, 0);
@color_button_text_white: rgb(249, 249, 249);
@color_button_text_press: rgb(249, 249, 249);
@color_circlebutton_press_webkit: -webkit-gradient(linear, left top, left bottom, from(rgb(67, 160, 217)), to(rgb(56, 139, 185)));
@color_circlebutton_press_moz: -moz-linear-gradient(top, rgb(67, 160, 217), rgb(56, 139, 185));
-@color_button_EditText: rgb(249, 249, 249);
-@color_button_EditTextPress: rgb(249, 249, 249);
-@color_button_EditBG: rgb(0, 0, 0);
-@color_button_EditBGPress: rgb(0, 140, 210);
@color_button_switch_BGon: rgb(42, 126, 172);
@color_button_switch_BGon_webkit: -webkit-gradient(linear, left top, left bottom, from(rgb(33, 116, 167)), to(rgb(75, 165, 219)));
@color_button_edit_press_moz: -moz-linear-gradient(top, rgb(147, 24, 24), rgb(110, 23, 23));
-.LESSbutton_text1_style{
- font-family: @font_family;
- font-weight: normal;
- font-size: 1.0rem;
- font-style:normal;
- color: @color_button_text_black;
- &:hover {color: @color_button_text_black;}
-}
-
-.LESScirclebutton_hover_style{
- border-width: 0px;
- background: @color_circlebutton_hover;
- background: @color_circlebutton_hover_webkit;
- backgronnd: @color_circlebutton_hover_moz;
-}
-
-.LESScirclebutton_press_style{
- border-width: 0px;
- background: @color_circlebutton_press;
- background: @color_circlebutton_press_webkit;
- background: @color_circlebutton_press_moz;
-}
-
.LESStoggleswitch_on_style{
background: @color_button_switch_BGon;
background: @color_button_switch_BGon_webkit;
padding: 0.5em 0.8em;
}
-/***************************************************************************
- Date Time picker color set
-***************************************************************************/
-@color_timepicker_selector_color: rgb(42,137,194);
-
-
-/***************************************************************************
- DaySelector
-***************************************************************************/
-@color_dayselector_Btn_Sat: rgba(0, 168, 231, 1); /* #00a8e7 */
-@color_dayselector_Btn_Sun: rgba(240, 20, 2, 1); /* #f01402 */
-@color_dayselector_Btn_Mon_to_Fri: rgba(249, 249, 249, 1); /* #f9f9f9 */
-@color_dayselector_Btn_border: rgba(26, 82, 116, 1); /* #f9f9f9 */
-
-@color_dayselector_Btn_normal_start: rgb(126, 157, 178);
-@color_dayselector_Btn_normal_end: rgb(84,121,144);
-
-@color_dayselector_Btn_press_start: rgb(59,119,150);
-@color_dayselector_Btn_press_end: rgb(47,91,117);
-
-
-.LESSDayselectorButtonNormal{
- .LESSbackground-with-gradient(top, @color_dayselector_Btn_normal_start, @color_dayselector_Btn_normal_end);
-}
-
-.LESSDayaselectorButtonPress{
- .LESSbackground-with-gradient(top, @color_dayselector_Btn_press_start, @color_dayselector_Btn_press_end);
-}
-
-
-/***************************************************************************
- OptionHeader
-***************************************************************************/
-@color_optionheader_Background: rgba(26, 82, 116, 1);
-@color_optionheader_bt: -webkit-linear-gradient(top, rgb(56,112,141) 0%,rgb(36,93,128) 100%);
-@color_optionheader_bt_press: -webkit-linear-gradient(top, rgb(74,164,218) 0%,rgb(43,138,195) 100%);
-@color_optionheader_tab_text: rgba(249, 249, 249, 1); /* #f9f9f9 */
-
-
-
-
-/***************************************************************************
- SegmentControl
-***************************************************************************/
-@color_segmentcontrol_btn_normal : rgb(125,157,178);
-@color_segmentcontrol_btn_normal_start : rgb(125,157,178);
-@color_segmentcontrol_btn_normal_end : rgb(84,121,144);
-
-@color_segmentcontrol_btn_press : rgb(59,119,150);
-@color_segmentcontrol_btn_press_start : rgb(59,119,150);
-@color_segmentcontrol_btn_press_end : rgb(47,91,117);
-
-@color_segmentcontrol_Seg_text : rgba(249, 249, 249, 1); /* #F9F9F9*/
-@color_segmentcontrol_Seg_text_pressed : rgba(249, 249, 249, 1); /* #F9F9F9*/
-
-
-/* delete */
-/*
-.LESSSegmentControlBtnBackground
-{
- .LESSbackground-with-gradient(top, @color_segmentcontrol_btn_normal_start, @color_segmentcontrol_btn_normal_end);
-}
-
-.LESSSegmentControlBtnPressBackground
-{
- .LESSbackground-with-gradient(top, @color_segmentcontrol_btn_press_start, @color_segmentcontrol_btn_press_end);
-}
-*/
-
-/***************************************************************************
- ControlGroup
-***************************************************************************/
-@color_controlgroup_btn_border : rgba(26, 82, 116, 1); /* #252525 */
-
-
-/***************************************************************************
- Header / Footer
- NavigationBar / ControlBar
-***************************************************************************/
-@color_bar_bg : rgb(156, 181, 179);
-@color_bar_bg_start : rgb(156, 181, 179);
-@color_bar_bg_end : rgb(79,116,141);
-
-@color_bar_back_btn_press : rgba(26, 82, 116, 0.3); /* #1A5274 */
-
-@color_bar_btn_bg : transparent;
-@color_bar_back_btn_bg : transparent;
-
-@color_bar_seg_btn_border : rgba(0, 0, 0, 0.1);
-@color_bar_seg_text_press : rgba(249, 249, 249, 1);
-@color_bar_seg_text_normal : rgba(249, 249, 249, 1);
-@color_bar_seg_btn_press : -webkit-linear-gradient(top, rgb(61,120,151) 0%,rgb(48,91,118) 100%);
-@color_bar_seg_btn_normal : -webkit-linear-gradient(top, rgb(127,159,181) 0%,rgb(70,108,133) 100%);
-
-@color_bar_title_bg : rgb(90, 153, 186);
-@color_bar_title_bg_start : rgb(90, 153, 186);
-@color_bar_title_bg_end : rgb(32, 84, 115);
-
-@color_bar_title_btn_border : rgba(36, 93, 128, 0.4); /* 00_winset_divider_line.png temp value */
-
-@color_bar_footer_bg : -webkit-linear-gradient(top, rgb(156,181,179) 0%,rgb(79,116,141) 100%);
-@color_bar_footer_btn_bg : transparent;
-
-@color_controlbar_btn_border : rgba(0, 0, 0, 0.1); /* #000000 */
-@color_controlbar_tabbbar_bg : transparent;
-@color_controlbar_toolbbar_bg : transparent;
-@color_controlbar_bg : transparent;
-
-@color_controlbar_btn_text : rgba(249, 249, 249, 1); /* #F9F9F9 */
-
-
-@color_border_top : rgba(255, 255, 255, 0.5);
-@color_border_bottom : rgba(0, 0, 0, 0.5);
-
-.LESSHeaderFooterBackground
-{
- .LESSbackground-with-gradient(top, @color_bar_bg_start, @color_bar_bg_end);
-}
-
-.LESSColorBarTitleBackground
-{
- background : rgb(248, 246, 239); // #F8F6EF /* Header Background */
-}
/***************************************************************************
Tickernoti
***************************************************************************/
@color_scrollview_handler_bg : rgba(150, 150, 150, 0.5);
+
/***************************************************************************
multimediaview
***************************************************************************/
@color_multimediaview_bg : rgb(249, 249, 249);
-@color_multimediaview_control_bg : rgba(249, 249, 249, 0.5);
-@color_multimediaview_button_bg : rgb(249, 249, 249);
-@color_multimediaview_timestamp_text : rgb(42, 137, 194);
+@color_multimediaview_control_bg : rgba(248, 246, 239, 0.5);
+@color_multimediaview_button_bg : rgb(248, 246, 239);
+@color_multimediaview_timestamp_text : rgb(74, 132, 201);
@color_multimediaview_duration_text : rgb(128, 128, 128);
-@color_multimediaview_bar_gray : rgb(178, 178, 178);
-@color_multimediaview_bar_active : rgb(42, 137, 194);
+@color_multimediaview_bar_gray : rgb(203, 200, 197);
+@color_multimediaview_bar_active : rgb(74, 132, 201);
@color_multimediaview_bar_handle : rgb(249, 249, 249);
+@color_multimediaview_button_border : rgb(186, 185, 180);
+
/***************************************************************************
Color widgets
/***************************************************************************
multibutton entry
***************************************************************************/
-@color_multibuttonentry_bg : rgb(249, 249, 249);
@color_multibuttonentry_block_text : rgb(255, 255, 255);
-@color_multibuttonentry_block_bg : rgb(93, 160, 196);
-@color_multibuttonentry_block_border : rgb(88, 150, 184);
-@color_multibuttonentry_press_bg : rgb(40, 106, 145);
-@color_multibuttonentry_press_border : rgb(49, 126, 171);
+@color_multibuttonentry_block_bg : rgb(95, 138, 189);
+@color_multibuttonentry_press_bg : rgb(54, 89, 132);
@color_multibuttonentry_input_text : #222222;
-@color_multibuttonentry_link_bg : rgb(178, 178, 178);
-@color_multibuttonentry_link : rgb(249, 249, 249);
+@color_multibuttonentry_link : rgb(186, 185, 180);
+@color_multibuttonentry_label_text : rgb(102, 102, 102);
-/***************************************************************************
-***************************************************************************/
/***************************************************************************
- virtualgrid
***************************************************************************/
-@color_virtualgrid_bg : rgb(255, 255, 255);
-
-/***************************************************************************
-****************************************************************************
- Layout ( position, padding, margin etc...)
-****************************************************************************
-***************************************************************************/
-@style-title-font-size : 28 * @unit_base;
-
-@style-title-extended-2btn-width : 688 * @unit_base;
-@style-title-extended-2btn-radio-width : 343 * @unit_base;
-@style-title-extended-3btn-width : 688 * @unit_base;
-@style-title-extended-3btn-radio-width : 229 * @unit_base;
-@style-title-extended-4btn-width : 688 * @unit_base;
-@style-title-extended-4btn-radio-width : 171 * @unit_base;
-
-@style-back-btn-left : 44 * @unit_base;
-@style-back-btn-arrow-top : 30 * @unit_base;
-
-@style-title-min-height : 30 * @unit_base;
-@style-title-extended-margin : -30 * @unit_base;
-/***************************************************************************
- Navigation
-***************************************************************************/
-
-.LESStitle-diff-style {
- text-align: left;
- margin: 20*@unit_base 8*@unit_base 12*@unit_base 8*@unit_base;
-}
-
-.LESSextended-controlgroup-border {
- border-style : solid;
- border-width : 1px;
- border-bottom-width: 2px;
-
- border-bottom-color: @color_border_bottom;
- border-top-color: @color_border_top;
- border-left-color: @color_bar_seg_btn_border;
- border-right-color: @color_bar_seg_btn_border;
-}
-
-.LESSback-btn-background {
- background : none;
-}
-
-.LESSbtn-back {
- width : 144 * @unit_base;
- height : 114 * @unit_base;
- top : 0 * @unit_base;
- right : 0 * @unit_base;
-}
-
-.LESSbtn-back-inner {
- width : 144 * @unit_base;
- height : 114 * @unit_base;
-}
// this happens if list items are added to the listview,
// which causes the autodividers to be regenerated.
+/**
+ @class Autodivider
+ The auto-divider widget is used to automatically create dividers for a list view based on the list view items.
+ The dividers are applied using the link texts (in link lists) or texts (in read-only lists).
+ The element used to derive the text for the divider defaults to the first link inside the element; failing that, the text directly inside the element is used.
+ This widget automatically updates the dividers every time a list view item is added or deleted.
+
+ <ul data-role="listview" data-autodividers="alpha">
+ <li><a href="#">Amy</a></li>
+ <li><a href="#">Arabella</a></li>
+ <li><a href="#">Barry</a></li>
+ //Other list items
+ </ul>
+
+
+ @since tizen2.0
+
+*/
(function ( $, undefined ) {
var autodividers = function ( options ) {
o = $elPage.data( "page" ).options;
/* Back button skip case :
- * 1. tabbar
- * 2. footer does not exist and addBackBtn is set to "footer"
- * 3. user define data-add-Back-Btn = "false"
+ * 1. footer does not exist and addBackBtn is set to "footer"
+ * 2. user define data-add-Back-Btn = "false"
*/
if ( status != "external" ) {
- if ( ( $elFooter.children( ":jqmData(role='controlbar')" ).jqmData( "style" ) == "tabbar" && $elPage.jqmData( "addBackBtn" ) != "header" )
- || $elPage.data().page.options.addBackBtn == "none" || ( $elPage.data().page.options.addBackBtn == "footer" && $elPage.data().page.options.footerExist == false ) ) {
+ if ( $elPage.data().page.options.addBackBtn == "none" || ( $elPage.data().page.options.addBackBtn == "footer" && $elPage.data().page.options.footerExist == false ) ) {
return true;
}
}
--- /dev/null
+/**
+ @class Button
+ The button widget shows a control on the screen that you can use to generate an action event when it is pressed and released. This widget is coded with standard HTML anchor and input elements and then enhanced by jQueryMobile to make it more attractive and usable on a mobile device. Buttons can be used in Tizen as described in the jQueryMobile documentation for buttons.
+
+ To add a button widget to the application, use the following code
+
+ <div data-role="button" data-inline="true">Text Button Test</div>
+ <div data-role="button" data-inline="true" data-icon="plus" data-style="circle"></div>
+ <div data-role="button" data-inline="true" data-icon="plus" data-style="nobg"></div>
+
+ The button can define callbacks for events as described in the jQueryMobile documentation for button events.<br/>
+ You can use methods with the button as described in the jQueryMobile documentation for button methods.
+*/
+
+/**
+ @property {String} data-style
+ Defines the button style. <br/> The default value is box. If the value is set to circle, a circle-shaped button is created. If the value is set to nobg, a button is created without a background.
+
+*/
+/**
+ @property {String} data-icon
+ Defines an icon for a button. Tizen supports 12 icon styles: reveal, closed, opened, info, rename, call, warning, plus, minus, cancel, send, and favorite.
+
+*/
--- /dev/null
+/**\r
+ @class Checkbox\r
+ The check box widget shows a list of options on the screen where one or more can be selected. Check boxes can be used in Tizen as described in the jQueryMobile documentation for check boxes.<br/> To add a check box widget to the application, use the following code:\r
+\r
+ <input type="checkbox" name="mycheck" id="check-test" class="favorite" />\r
+ <label for="check-test">Favorite</label>\r
+ <input type="checkbox" name="check-favorite" id="check-test2" checked="checked" disabled="disabled" class="favorite" />\r
+ <label for="check-test2">Favorite Checked, Disabled</label>\r
+\r
+ The check box can define callbacks for events as described in the jQueryMobile documentation for check box events.\r
+ You can use methods with the check box as described in the jQueryMobile documentation for check box methods.\r
+\r
+*/\r
+/**\r
+ @property {String} class\r
+ Defines the check box style. <br/> The default value is check. If the value is set to favorite, a star-shaped check box is created.\r
+*/
\ No newline at end of file
disableSelection: function (element) {
var self = this;
$(element).find('*').each( function() {
- if( $(this).get(0).tagName !== 'INPUT' &&
- $(this).attr("type") !== 'text' ) {
+ if( ( $(this).get(0).tagName !== 'INPUT' &&
+ $(this).attr("type") !== 'text' ) &&
+ $(this).get(0).tagName !== 'TEXTAREA' ) {
self.enableSelection( this, 'none' );
}
} );
disableContextMenu: function(element) {
var self = this;
$(element).find('*').each( function() {
- if( $(this).get(0).tagName !== 'INPUT'
- && $(this).attr("type") !== 'text' ) {
+ if( ( $(this).get(0).tagName !== 'INPUT' &&
+ $(this).attr("type") !== 'text' ) &&
+ $(this).get(0).tagName !== 'TEXTAREA' ) {
self._disableContextMenu( this );
}
} );
c = this._$clip.width();
v = this._$view.width();
- if ( ( this._sx === 0 && speedX > 0 ) ||
- ( this._sx === -(v - c) && speedX < 0 ) ) {
+ if ( (( this._sx === 0 && speedX > 0 ) ||
+ ( this._sx === -(v - c) && speedX < 0 )) &&
+ v > c ) {
return;
}
c = this._$clip.height();
v = this._getViewHeight();
- if ( ( this._sy === 0 && speedY > 0 ) ||
- ( this._sy === -(v - c) && speedY < 0 ) ) {
+ if ( (( this._sy === 0 && speedY > 0 ) ||
+ ( this._sy === -(v - c) && speedY < 0 )) &&
+ v > c ) {
return;
}
if ( vt.getRemained() > this.options.overshootDuration ) {
scroll_height = this._getViewHeight() - this._$clip.height();
- if ( vt.isMin() ) {
+ if ( !vt.isAvail() ) {
+ if ( this._speedY > 0 ) {
+ this._outerScroll( vt.getRemained() / 3, scroll_height );
+ } else {
+ this._outerScroll( y - vt.getRemained() / 3, scroll_height );
+ }
+ } else if ( vt.isMin() ) {
this._outerScroll( y - vt.getRemained() / 3, scroll_height );
if ( scroll_height > 0 ) {
this._setBouncing( this._$view, "in" );
}
} else {
+ if ( this._bouncing && this._sy !== y ) {
+ this._bouncing = false;
+ }
+
this._sy = y;
}
$hsb = this._$hScrollBar,
$sbt;
- if ( this._sx === x && this._sy === y ) {
- return;
- }
-
this._setCalibration( x, y );
x = this._sx;
return;
}
- if ( scroll_height < 0 ) {
- return;
- }
-
if ( y > 0 ) {
sy = ( window.screenTop ? window.screenTop : -y );
} else if ( y < -scroll_height ) {
/* calibration - after triggered throttledresize */
setTimeout( function () {
if ( self._sy < $c.height() - self._getViewHeight() ) {
- self.scrollTo( 0, self._sy,
- self.options.snapbackDuration );
+ self.scrollTo( 0, $c.height() - self._getViewHeight(),
+ self.options.overshootDuration );
}
}, 260 );
return this.pos === this.maxPos;
},
+ isAvail: function () {
+ return !( this.minPos === this.maxPos );
+ },
+
getRemained: function () {
return this.remained;
},
* Controlbar can be created using data-role = "controlbar" inside footer
* Framework determine which controlbar will display with controlbar attribute
*
- * Attributes:
- *
- * data-style : determine which controlbar will use ( tabbar / toolbar )
- * tabbar do not have back button, toolbar has back button
- *
* Examples:
*
- * HTML markup for creating tabbar: ( 2 ~ 5 li item available )
- * icon can be changed data-icon attribute
- * <div data-role="footer"data-position ="fixed">
- * <div data-role="controlbar" data-style="tabbar" >
- * <ul>
- * <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
- * <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
- * <li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
- * </ul>
- * </div>
- * </div>
- *
- * HTML markup for creating toolbar: ( 2 ~ 5 li item available )
+ * HTML markup for creating controlbar: ( 2 ~ 5 li item available )
* icon can be changed data-icon attribute
* <div data-role="footer" data-position ="fixed">
- * <div data-role="controlbar" data-style="toolbar" >
+ * <div data-role="controlbar">
* <ul>
* <li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
* <li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
* });
*/
+/**
+ @class DateTimePicker
+ The picker widgets show a control that you can use to enter date and time values. <br/> To add a date time picker widget to the application, use the following code:
+
+ <li class="ui-li-dialogue ui-datetime">
+ <div class="ui-datetime-text-main">
+ <input type="datetime" data-format="MMM dd yyyy hh:mm:ss" name="demo-date" id="demo-date" />
+ </div>
+ <div class="ui-li-text-sub">Date/Time Picker
+ <span id="selected-date1"><em>(select a date first)</em></span>
+ </div>
+ </li>
+*/
+
( function ( $, window, undefined ) {
$.widget( "tizen.datetimepicker", $.tizen.widgetex, {
//
// days: array of day names, Sunday first; defaults to English day
// names; the first letters are used as text for the checkboxes
-
+/**
+ @class Dayselector
+ The day selector widget shows a grouped button on the screen for selecting weekdays. <br/> To add a day selector widget to the application, use the following code:
+
+ <fieldset id="dayselector1" data-role="dayselector" data-type="horizontal">
+ <legend><!-- Day selector description --></legend>
+ </fieldset>
+*/
(function ( $, window, undefined ) {
$.widget( "tizen.dayselector", $.mobile.widget, {
options: {
* <li data-expanded-by="exp1">Child</li>
*/
+/**
+ @class Expandablelist
+ The expandable list widget shows a parent list view where the list items expand into child lists. When the list is in a collapsed state, only the parent list items are shown. If the user clicks a list item, the child list for that list item is displayed with a transition effect. If the user clicks the parent list item again, the child list collapses and is hidden.<br/><br/>Each child list is created as part of its parent expandable list item so that the child list and its parent expandable list item share the same ID. The child list ID is defined with the data-expanded-by option.
+
+ <li data-expandable="true" id="exp1" data-initial-expansion="true">Parent</li>
+ // Rest of the parent list items
+ <li data-expanded-by="exp1">Child</li>
+*/
+/**
+ @property {String} data-expanded-by
+ Specifies the ID of the parent expandable list item
+*/
+/**
+ @property {Boolean} data-initial-expansion
+ Defines whether the child list is expanded when the parent expandable list is loaded.
+*/
+/**
+ @property {Boolean} data-expandable
+ Defines whether the list item can be expanded in to a child list.
+*/
( function ( $, undefined ) {
$.widget( "tizen.expandablelist", $.mobile.widget, {
*
*/
-
+/**
+ @class Extenablelist
+ In the Web environment, it is challenging to display a large amount of data in a list, such as displaying a contact list of over 1000 list items. It takes time to display the entire list in HTML and the DOM manipulation is complex.
+ The extendable list widget is used to display a list of unlimited data elements on the screen for better performance. The list is extended if you click the button at the bottom of the list to load more data elements. Extendable lists are based on the jQuery.template plugin as described in the jQuery documentation for jQuery.template plugin.<br/>
+ To add a extendable list widget to the application, use the following code:
+
+ <script id="tmp-3-1-1" type="text/x-jquery-tmpl">
+ <li class="ui-li-3-1-1"><span class="ui-li-text-main">${NAME}</span></li>
+ </script>
+ <script id="tmp_load_more" type="text/x-jquery-tmpl">
+ <li class="ui-li-3-1-1" style="text-align:center; margin:0 auto">
+ <div data-role="button">Load ${NUM_MORE_ITEMS} more items</div>
+ </li>
+ </script>
+ <ul id="extendable_list_main" data-role="extendablelist" data-extenditems="50" data-template="tmp-3-1-1">
+ </ul>
+*/
+/**
+ @property {String} data-role
+ Creates the extendable list view. The value must be set to extendablelist. Only the <ul> element, which a id attribute defined, supports this option. Also, the elLoadSuccess class attribute must be defined in the <ul> element to ensure that loading data from the database is complete.
+*/
+/**
+ @property {String} data-template
+ Specifies the jQuery.template element ID. The jQuery.template must be defined. The template style can use rem units to support scalability. For using the button at the bottom of the list to load more data elements, there must be list view template with the button. The attribute ID must be tmp_load_more.
+*/
+/**
+ @property {Integer} data-extenditems
+ Defines the number of data elements to be extended at a time.
+*/
( function ( $, undefined ) {
//Keeps track of the number of lists per page UID
* </div>
*/
+/**
+ @class handler
+ The handler widget enables the user to vertically scroll through a page or panel using a fixed-size handle. The widget indicates the position of the scrolled window, and only appears on the screen if the parent page or panel's scroll size is larger than the screen size. <br/> To add a handler widget to the application, use the following code:
+
+ <div data-role="content" data-scroll="y" data-handler="true">
+ <ul data-role="listview">
+ <li data-role="list-divider">A</li>
+ <li><a href="#">Adam Kinkaid</a></li>
+ ...
+ </ul>
+ </div>
+
+ You can use the enableHandler method with the handler widget to get (if no value is defined) or set the handler usage status. If the [enable] value is true, the handler is enabled; otherwise the handler is not used.
+
+ $("#.selector").scrollview("enableHandler", [enable]);
+*/
+/**
+ @property {Boolean} data-handler
+ Enables the handler widget. The value must be set to true.
+*/
+/**
+ @property {String} data-handler-theme
+ Sets the handler widget theme.
+*/
( function ( $, document, undefined ) {
// The options of handler in scrollview
$.tizen.scrollview.prototype.options.handler = false;
*
*/
+ /**
+ @class ImageSlider
+ The image slider widget shows images in a gallery on the screen. <br/><br/> To add an image slider widget to the application, use the following code:
+
+ <div data-role="imageslider" id="imageslider" data-vertical-align="middle" data-index="3">
+ <img src="01.jpg">
+ <img src="02.jpg">
+ <img src="03.jpg">
+ <img src="04.jpg">
+ <img src="05.jpg">
+ </div>
+*/
+/**
+ @property {Integer} data-index
+ Defines the index number of the first image in the gallery.
+ <br/>The default value is 0.
+*/
+/**
+ @property {String} data-vertical-align
+ Defines the image alignment. The alignment options are top, middle, and bottom.
+ <br/>The default value is top.
+*/
+/**
+ @method add
+ The add method is used to add an image to the image slider. The image_file attribute defines the image file URL.
+
+ <div id="imageslider" data-role="imageslider" data-vertical-align="middle"></div>
+ $("#imageslider").imageslider('add', [image_file]);
+*/
+/**
+ @method del
+ The del method is used to delete an image from the image slider. The image_index attribute defines the index of the image to be deleted.
+
+ <div id="imageslider" data-role="imageslider" data-vertical-align="middle"></div>
+ $("#imageslider").imageslider('del', [image_index]);
+*/
+/**
+ @method refresh
+ The refresh method is used to refresh the image slider. This method must be called after adding images to the image slider.
+
+ <div id="imageslider" data-role="imageslider" data-vertical-align="middle"></div>
+ $("#imageslider").imageslider('refresh');
+*/
(function ( $, window, undefined ) {
$.widget( "tizen.imageslider", $.mobile.widget, {
options: {
+++ /dev/null
-@import "config.less";
-
-.ui-imageslider {
- position: relative;
- width: 100%;
-}
-
-.ui-imageslider-bg {
- position: absolute;
- text-align: center;
- width: 100%;
-}
/* ***************************************************************************
* style : normal, check
-*
-*
+* option :
+* - folded : decide to show divider press effect or not
+* - line : decide to draw divider line or not
*/
+/**
+ @class ListDivider
+ The list divider widget is used as a list separator for grouping lists. List dividers can be used in Tizen as described in the jQueryMobile documentation for list dividers.<br/>
+ To add a list divider widget to the application, use the following code:
-(function ( $, undefined ) {
+ <li data-role="list-divider" data-style="check">
+ <form><input type="checkbox" name="c2line-check1" /></form></li>
+
+ The list divider can define callbacks for events as described in the jQueryMobile documentation for list events. <br/> You can use methods with the list divider as described in the jQueryMobile documentation for list methods.
+
+ @since tizen2.0
+*/
+/**
+ @property {String} data-style
+ Sets the style of the list divider. The style options are dialogue, check, expandable, and checkexpandable.
+*/
+(function ( $, undefined ) {
$.widget( "tizen.listdivider", $.mobile.widget, {
options: {
initSelector: ":jqmData(role='list-divider')",
+ folded : false,
+ listDividerLine : true,
},
_create: function () {
style = $listdivider.attr( "data-style" );
if ( $listdivider.data("line") === false ) {
- listDividerLine = false;
+ this.options.listDividerLine = false;
+ }
+
+ if ( $listdivider.data("folded") === true ) {
+ this.options.folded = true;
}
if ( style == undefined || style === "normal" || style === "check" ) {
- $listdivider.buttonMarkup();
+ if ( this.options.folded ) {
+ $listdivider.buttonMarkup();
+ } else {
+ $listdivider.wrapInner("<span class='ui-btn-text'></span>");
+ }
- if ( listDividerLine ) {
+ if ( this.options.listDividerLine ) {
expandSrc = "<span class='ui-divider-normal-line'></span>";
- $( expandSrc ).appendTo( $listdivider.children( ".ui-btn-inner" ) );
+ if ( this.options.folded ) {
+ $( expandSrc ).appendTo( $listdivider.children( ".ui-btn-inner" ) );
+ } else {
+ $( expandSrc ).appendTo( $listdivider);
+ }
}
-
}
$listdivider.bind( "vclick", function ( event, ui ) {
*
*/
+
+/**
+ @class MultiButtonEntry
+ The multi-button entry widget enables the user to enter text and convert it to a button. Each button that is created from entered text as a result of a change event forms a multi-button entry widget. This widget is useful in composing an e-mail or SMS message to a group of addresses, each of which is a clickable item for more actions, such as copying, editing, or removing the address.
+
+ To add a multi-button entry widget to the application, use the following code:
+
+ <div data-role="multibuttonentry" data-label="To:" data-theme="#addressbook" data-list-id="pageId">
+ </div>
+*/
+
+/**
+ @property {String} data-label
+ Sets a label as a guide for the user.
+ For example, while composing an e-mail message, the 'To: ' label is a guide for the user to enter e-mail addresses.
+*/
+
+/**
+ @property {String} data-decription
+ Manages the message format.
+ The message is displayed when the widget status changes to focus out
+ */
+/**
+ @property {String} data-list-id
+ Sets the ID of the page to which the button links.
+*/
+/**
+ @event create
+ The create event is fired when the multi-button view widget is created:
+
+ <div data-role="multibuttonentry" data-label="To:" data-theme="#addressbook">
+ </div>
+ // Option 01
+ $(".selector").multibuttonentry
+ ({
+ create: function(event, ui)
+ {
+ // Handle the create event
+ }
+ });
+ // Option 02
+ $(".selector").bind("create", function(event, ui)
+ {
+ // Handle the create event
+ });
+**/
+/**
+ @event select
+ The select event is fired when a multi-button view widget button is selected:
+
+ <div data-role="multibuttonentry" data-label="To:" data-theme="#addressbook">
+ </div>
+ // Option 01
+ $(".selector").multibuttonentry
+ ({
+ select: function(event, ui)
+ {
+ // Handle the select event
+ }
+ });
+ // Option 02
+ $(".selector").bind("multibuttonentryselect", function(event, ui)
+ {
+ // Handle the select event
+ });
+*/
+/**
+ @event add
+ The add event is fired when a multi-button view widget button is created:
+
+ <div data-role="multibuttonentry" data-label="To:" data-theme="#addressbook">
+ </div>
+ // Option 01
+ $(".selector").multibuttonentry
+ ({
+ add: function(event, ui)
+ {
+ // Handle the add event
+ }
+ });
+ // Option 02
+ $(".selector").bind("multibuttonentryadd", function(event, ui)
+ {
+ // Handle the add event
+ });
+*/
+/**
+ @event remove
+ The remove event is fired when a multi-button view widget button is removed:
+
+ <div data-role="multibuttonentry" data-label="To:" data-theme="#addressbook">
+ </div>
+ // Option 01
+ $(".selector").multibuttonentry
+ ({
+ remove: function(event, ui)
+ {
+ // Handle the remove event
+ }
+ });
+ // Option 02
+ $(".selector").bind("multibuttonentryremove", function(event, ui)
+ {
+ // Handle the remove event
+ });
+*/
+/**
+ @method destroy
+ The destroy method is used to remove in the current widget all the new DOM elements that you have created.
+
+ <div data-role="multibuttonentry" data-label="To:" data-theme="#addressbook">
+ </div>
+ $(".selector").multibuttonentry("destroy");
+
+ @since Tizen2.0
+*/
+/**
+ @method inputText
+ The inputText method is used to manage the widget input box text. If no parameter is set, the method gets the input box text. If a parameter is set, the parameter text is set in the input box.
+
+ <div data-role="multibuttonentry" data-label="To:" data-theme="#addressbook">
+ </div>
+ $(".selector").multibuttonentry("inputText", [text]);
+*/
+/**
+ @method select
+ The select method is used to select a multi-button entry widget button based on its index value. If no index value is defined, the method returns the string of the selected block. If there are no buttons present in the widget, the method returns null.
+
+ <div data-role="multibuttonentry" data-label="To:" data-theme="#addressbook">
+ </div>
+ $(".selector").multibuttonentry("select", [index]);
+*/
+/**
+ @method add
+ The add method is used to add a new multi-button entry widget button with the specified label text at the specified index position. If the index parameter is not defined, the widget button is added at the bottom of the list. For example, the $(".selector").multibuttonentry("add", "Tizen", 2) method call creates a new widget button labeled 'Tizen' at the third position in the widget.
+
+ <div data-role="multibuttonentry" data-label="To:" data-theme="#addressbook">
+ </div>
+ $(".selector").multibuttonentry("add", [text], [index]);
+*/
+/**
+ @method remove
+ The remove method is used to remove a multi-button entry widget button at the specified index position. If the parameter is not defined, all the widget buttons are removed.
+
+ <div data-role="multibuttonentry" data-label="To:" data-theme="#addressbook">
+ </div>
+ $(".selector").multibuttonentry("remove", [index]);
+*/
+/**
+ @method length
+ The length method is used to retrieve the number of buttons in the multi-button entry widget:
+ <div data-role="multibuttonentry" data-label="To:" data-theme="#addressbook">
+ </div>
+ $(".selector").multibuttonentry("length");
+*/
+/**
+ @method focusIn
+ The focusIn method is used to set the focus status to "focus in". This focus state enables the user to add or remove buttons in the multi-button entry widget.
+
+ <div data-role="multibuttonentry" data-label="To:" data-theme="#addressbook">
+ </div>
+ $(".selector").multibuttonentry("focusIn");
+*/
+/**
+ @method focusOut
+ The focusOut method is used to set the focus status to "focus out". In this focus state, the user cannot manage the buttons in the widget, all the buttons are removed, and a message is displayed.
+
+ <div data-role="multibuttonentry" data-label="To:" data-theme="#addressbook">
+ </div>
+ $(".selector").multibuttonentry("focusOut");
+*/
( function ( $, window, document, undefined ) {
$.widget( "tizen.multibuttonentry", $.mobile.widget, {
_focusStatus : null,
if ( option.listId === null || $.trim( option.listId ).length < 1 || $( option.listId ).length === 0 ) {
className += "-dim";
}
- $( moreBlock ).text( "+" ).attr( "href", $.trim( option.listId ) ).addClass( "ui-multibuttonentry-link-base" ).addClass( className );
+ $( moreBlock ).attr( "href", $.trim( option.listId ) ).attr( "data-role", "button" ).attr( "data-inline", "true" ).attr( "data-icon", "plus" ).attr( "data-style", "circle" ).addClass( "ui-multibuttonentry-link-base" ).addClass( className );
// append default htmlelements to main widget.
$view.append( moreBlock );
blocks = $view.find( "div" ),
blockWidth = 0,
index = 0,
+ inputBoxMargin = 10,
inputBox = $view.find( ".ui-multibuttonentry-input" );
if ( $view.width() === 0 ) {
if ( inputBoxWidth < anchorWidth * 2 ) {
inputBoxWidth = self._viewWidth - margin;
}
- $( inputBox ).width( inputBoxWidth - anchorWidth );
+ $( inputBox ).width( inputBoxWidth - anchorWidth - inputBoxMargin );
},
_stringFormat : function ( expression ) {
* </audio>
*
*/
+/**
+ @class MutimediaView
+ The multimedia view widget shows a player control that you can use to view and handle multimedia content. This widget uses the standard HTML video and audio elements, which have been enhanced for use on a mobile device.
+
+ To add a multimedia view widget to the application, use the following code:
+
+ // Video player control
+ <video data-controls="true" style="width:100%;" data-theme="c">
+ <source src="<VIDEO_FILE_URL>" type="video/mp4" /> Your browser does not support the video tag. </video>
+ // Audio player control
+ <audio data-controls="true" style="width:100%;"> <source src="<AUDIO_FILE_URL>" type="audio/mp3" /> Your browser does not support the audio tag.
+ </audio>
+
+ The multimedia view can define a callback for the create event, which is fired when the widget is created.
+ $('.selector').multimediaview({
+ create:function(event, u){...}
+ });
+ $(".selector").bind("create", function(event, ui)
+ {
+ // Respond to the multimedia view widget creation
+ });
+*/
+/**
+ @property {Boolean} data-control
+ Sets the controls for the widget.
+ The default value is true. If the value is set to true, the widget uses its own player controls. If the value is set to false, the widget uses the browser's player controls.
+*/
+/**
+ @property {Boolean} data-fullscreen
+ Defines whether the widget opens in the fullscreen view mode.
+ The default value is false.
+*/
+/**
+ @property {String} data-theme
+ Sets the widget theme.
+ If the value is not set, the parent control's theme is used
+*/
+/**
+ @method width
+ The width method is used to get (if no value is defined) or set the multimedia view widget width:
+ <video data-fullscreen="true">
+ <source src="test.mp4" type="video/mp4" />
+ </video>
+ $(".selector").multimediaview("width", [value]);
+*/
+/**
+ @method height
+ The height method is used to get (if no value is defined) or set the multimedia view widget height:
+ <video data-fullscreen="true">
+ <source src="test.mp4" type="video/mp4" />
+ </video>
+ $(".selector").multimediaview("height", [value]);
+*/
+/**
+ @method size
+ The size method is used to set the size of the multimedia view widget using the width and height parameters:
+ <video data-fullscreen="true">
+ <source src="test.mp4" type="video/mp4" />
+ </video>
+ $(".selector").multimediaview("size", width, height);
+*/
+/**
+ @method fullscreen
+ The fullscreen method is used to get (if no value is defined) or set the fullscreen mode of the multimedia view widget. If the value is true, the fullscreen mode is used; otherwise the multimedia view widget runs in the normal mode.
+ <video data-fullscreen="true">
+ <source src="test.mp4" type="video/mp4" />
+ </video>
+ $(".selector").multimediaview("fullscreen", [value]);
+*/
( function ( $, document, window, undefined ) {
$.widget( "tizen.multimediaview", $.mobile.widget, {
options : {
view.addClass( "ui-multimediaview" );
control = self._createControl();
- if ( view[0].nodeName === "AUDIO" ) {
- control.addClass( "ui-multimediaview-audio" );
+ if ( view[0].nodeName === "VIDEO" ) {
+ control.addClass( "ui-multimediaview-video" );
}
control.hide();
* <div data-role="nocontents" id="nocontents" data-type="unnamed"></div>
*
*/
-
+/**
+ @class NoContents
+ The no contents widget is used if a list has no items.
+ To add a no contents widget to the application, use the following code:
+
+ <div data-role="nocontents" data-type="Picture">
+ <p>Main Text</p>
+ <p>Sub Text</p>
+ </div>
+
+*/
+/**
+ @property {String} data-type
+ Defines the no contents widget type. The type options are text, picture, multimedia, and unnamed.
+ The default value is unnamed.
+*/
(function ( $, window, undefined ) {
$.widget( "tizen.nocontents", $.mobile.widget, {
max_height: 0,
*
*/
+/**
+ @class Notification
+ The notification widget shows a pop-up window on the screen to provide notifications.
+ To add a notification widget to the application, use the following code:
+
+ <div data-role="page">
+ <div data-role="notification" data-type="tickernoti">
+ <p>text1</p>
+ <p>text2</p>
+ </div>
+ <div data-role="header"></div>
+ <div data-role="content"></div>
+ <div data-role="footer"></div>
+ </div>
+ <script type="text/javascript">
+ $('#notification-demo').bind('tapped', function (e, m)
+ {
+ // Notification is tapped with parameter m
+ });
+*/
+/**
+ @property {String} data-type
+ Defines the notification type. The type options are tickernoti and smallpopup. <br/>The default value is smallpopup.
+
+*/
+/**
+ @method show
+ The show method is used to show the notification widget:
+
+ <div data-role="notification" data-type="tickernoti" data-interval="3000"></div>
+ $('#notification').notification('show');
+*/
+/**
+ @method hide
+ The hide method is used to hide the notification widget:
+
+ <div data-role="notification" data-type="tickernoti" data-interval="3000"></div>
+ $('#notification').notification('hide');
+*/
+/**
+ @method text
+ The text method is used to set or get the notification text:
+
+ <div data-role="notification" data-type="tickernoti" data-interval="3000"></div>
+ // Set notification text
+ $('#notification').notification('text', 'setThisText');
+ // Get notification text
+ texts = $('#notification').notification('text');
+ @since Tizen2.0
+*/
+/**
+ @method setIcon
+ The setIcon method is used to set the ticker notification icon. The icon can be set only if the notification type is set to tickernoti.
+
+ <div data-role="notification" data-type="tickernoti" data-interval="3000"></div>
+ $('#notification').notification('setIcon', './test.png');
+*/
(function ( $, window ) {
$.widget( "tizen.notification", $.mobile.widget, {
btn: null,
* </script>
*/
+/**
+ @class PageControl
+ The page control widget shows a numbered list on the screen. It can receive a touch event from each list item, and run a callback for each touch event. <br/>To add a page control widget to the application, use the following code:
+
+ <div id="foo" data-role="pagecontrol" data-max="5" data-value ="3"></div>
+ $("#foo").bind("change", function(ev, val)
+ {
+ Console.log("Value is changed to " + val);
+ } );
+
+ The page control can define a callback for the change event, which is fired when a list item value is changed.<br/> You can use the value method with the page control to set or get the current page control value:
+
+ <div id="foo" data-role="pagecontrol"></div>
+ var oldVal = $("#foo").pagecontrol("value");
+ $("#foo").pagecontrol("value", 2);
+*/
+/**
+ @property {Number} data-max
+ Defines the number of items in the list.
+ The value must be between 1 and 10, and the default value is 1.
+*/
+/**
+ @property {Number} data-value
+ Defines the number of the initially selected list item.
+ The value must be between 1 and data-max, and the default value is 1.
+*/
+
(function ($, undefined) {
$.widget( "tizen.pagecontrol", $.mobile.widget, {
options: {
},
- /* 1. Calculate toolbar width(only controlbar)
- * 2. Calculate and update content height */
+ /* 1. Calculate and update content height */
updatePageLayout: function ( receiveType ) {
var $elFooter,
$elFooterControlbar,
if (resultFooterHeight != 0 ) {
$elFooter.css( "bottom", 0 );
}
- if ( $elFooterControlbar.jqmData("style") == "toolbar" ) {
- $elFooterControlbar.css( "width", window.innerWidth - $elFooterControlbar.siblings( ".ui-btn" ).width() - parseInt($elFooterControlbar.siblings(".ui-btn").css("right"), 10 ) * 2 );
- }
resultContentHeight = window.innerHeight - resultFooterHeight - resultHeaderHeight;
* popupafterclose triggered when a popup has completely closed
*/
+/**
+ @class Popup
+ The pop-up widget shows a list of items in a pop-up window in the middle of the screen. It automatically optimizes the pop-up window size within the screen.
+ To add a pop-up widget to the application, use the following code:
+
+ // Basic pop-up
+ <div id="center_info" data-role="popup" data-style="center_info">
+ <div data-role="text">
+ <p>
+ Pop-up dialog box, a child window that blocks user interaction in the parent window
+ </p>
+ </div>
+ </div>
+ // Pop-up with a title and button
+ <div id="center_title_1btn" data-role="popup" data-style="center_title_1btn">
+ <p data-role="title">
+ Pop-up title
+ </p>
+ <p data-role="text">
+ Pop-up dialog box
+ </p>
+ <div data-role="button-bg">
+ <input type="button" value="Text Button" />
+ </div>
+ </div>
+
+ The pop-up can define callbacks for events as described in the jQueryMobile documentation for pop-up events. <br/>You can use methods with the pop-up as described in the jQueryMobile documentation for pop-up methods.
+*/
+
+/**
+ @property {String} data-style
+ Defines the pop-up window style.
+ The following styles are available:
+
+ center_info: basic pop-up message
+ center_title: pop-up message with a title
+ center_basic_1btn: pop-up message with 1 button
+ center_basic_2btn: pop-up message with 2 horizontal buttons
+ center_title_1btn: pop-up message with a title and 1 button
+ center_title_2btn: pop-up message with a title and 2 horizontal buttons
+ center_title_3btn: pop-up message with a title and 3 horizontal buttons
+ center_button_vertical: pop-up message with vertical buttons
+ center_checkbox: pop-up message with a check box
+ center_liststyle_1btn>: pop-up message with a list and 1 button
+ center_liststyle_2btn: pop-up message with a list and 2 horizontal buttons
+ center_liststyle_3btn: pop-up message with a list and 3 horizontal buttons
+*/
+
(function ( $, undefined ) {
$.widget( "tizen.popupwindow", $.tizen.widgetex, {
options: {
self.close();
return false;
} );
+
+ this.element.bind( "vclick", function( e ) {
+ if ( $( e.target ).is("ui-btn-ctxpopup-close") ) {
+ self.close();
+ }
+ } );
},
destroy: function () {
// to one in the superclass, upon calling $.widget the object is overwritten in both the prototype of the superclass and
// the prototype of the subclass. The prototype of the superclass should remain unchanged.
+/**
+ @class ContextPopup
+ The context pop-up widget shows a list of options and automatically optimizes its size within the screen. This widget is intended for a small list of options for a larger list, use the List widget. <br/>The context pop-up widget requires a target button, which must be clicked to open the context pop-up. In the default application theme, an arrow pointer is displayed at the top-left corner of the context pop-up widget when it is opened.<br/><br/> To add a context pop-up widget to the application, use the following code:
+
+ // Target button
+ <a href="#pop_3_icons" id="btn_3_icons" data-role="button" data-inline="true" data-rel="popupwindow">3 Icons</a>
+ // Context pop-up
+ <div class="horizontal" id="pop_3_icons" data-role="popupwindow" data-show-arrow="true">
+ <ul>
+ <li class="icon">
+ <a href="#" data-role="button" data-icon="call"></a>
+ </li>
+ <li class="icon">
+ <a href="#" data-role="button" data-icon="favorite"></a>
+ </li>
+ <li class="text">
+ <a href="#">Function</a>
+ </li>
+ </ul>
+ </div>
+ The context pop-up can define callbacks for events as described in the [jQueryMobile documentation for pop-up events.][1]
+ You can use methods with the context pop-up as described in the [jQueryMobile documentation for pop-up methods.][2]
+ [1]: http://jquerymobile.com/demos/1.2.0-alpha.1/docs/pages/popup/events.html
+ [2]: http://jquerymobile.com/demos/1.2.0-alpha.1/docs/pages/popup/methods.html
+*/
+
(function ( $, undefined ) {
$.widget( "tizen.ctxpopup", $.tizen.widgetex, {
options: $.extend( {}, $.tizen.popupwindow.prototype.options, {
*
*/
+/**
+ @class Progress
+ The progress widget shows that an operation is in progress. <br/>To add a progress widget to the application, use the following code:
+
+ <div data-role="progress" data-style="circle"></div>
+
+ The progress widget can define a callback for the change event, which is fired when the progress value is changed:
+
+ <div id="foo" data-role="progress"></div>
+ $("#foo").bind("change", function(ev, val)
+ {
+ Console.log("Value is changed to " + val);
+ });
+*/
+/**
+ @property {String} data-style
+ Sets the style of the progress widget. The style options are pending (pending progress style) and circle (circular progress status style).
+*/
+/**
+ @method value
+ The value method is used to set or get the current default progress widget value:
+
+ <div id="foo" data-role="progress"></div>
+ var oldVal = $("#foo").progress("option", "value");
+ $("#foo").progress("option", "value", 50);
+*/
+/**
+ @method running
+ The running method is used to set or get the current running state of the pending or circular progress widget:
+
+ <div id="foo" data-role="progress" data-style="pending"></div>
+ var currentRunning = $("#foo").progress("option", "running");
+ $("#foo").progress("option", "running", true);
+*/
+
(function ( $, window, undefined ) {
$.widget( "tizen.progress", $.mobile.widget, {
options: {
+++ /dev/null
-@import "config.less";
-
-@bar-height: 16px;
-@bar-margin: 16px;
-
-@-webkit-keyframes ui-scale-animation {
- from {
- -webkit-transform: scaleX(0);
- } to {
- -webkit-transform: scaleX(1);
- }
-}
-
-.ui-progressbar-value {
- background-image: url(images/00_winset_list_progress_bar.png);
- height: 100%;
-}
-
-.ui-progressbar {
- position: relative;
- background-image: url(images/00_winset_list_progress_bg.png);
- margin-left: @bar-margin;
- margin-right: @bar-margin;
- height: @bar-height;
-}
-
-.ui-progress-bg {
- position: relative;
- top: 0;
- background-image: url(images/00_winset_list_progress_bg.png);
- width: 100%;
- height: @bar-height;
-}
-
-.ui-progress-bar {
- position: relative;
- top: -@bar-height;
- width: 100%;
- height: @bar-height;
-
- background-image: url(images/00_winset_list_progress_bar.png);
-
- -webkit-animation: ui-scale-animation 5s infinite linear;
- -webkit-transform-origin: 0% 0%;
-}
*/
/* This is from jquery ui plugin - progressbar 11/16/2011 */
+
+/**
+ @class ProgressBar
+ The progress bar widget shows a control that indicates the progress percentage of an on-going operation. This widget can be scaled to fit inside a parent container.
+
+ To add a progress bar widget to the application, use the following code:
+
+ <div id="foo" data-role="progressbar"</div>
+*/
+/**
+ @event change
+ The progress bar can define a callback for the change event, which is fired when the progress value is changed:
+ <div id="foo" data-role="progressbar"></div>
+ $("#foo").bind("change", function (ev, val)
+ {
+ Console.log("Value is changed to " + val);
+ });
+*/
+/**
+ @method value
+ You can use the value method with the pickers to set or get the current default progress bar value:
+
+ <div id="foo" data-role="progressbar"></div>
+ var oldVal = $("#foo").progress("option", "value");
+ $("#foo").progress("option", "value", 50);
+*/
+
(function ( $, window, undefined ) {
$.widget( "tizen.progressbar", $.mobile.widget, {
* </div>
*/
+/**
+ @class SearchBar
+ The search bar widget is used to search for page content. This widget can be placed in the header, option header, or page content.
+
+ To add a search bar widget to the application, use the following code:
+
+ <label for="search-basic">Search Input:</label>
+ <input type="search" name="search" id="searc-basic" value="" data-mini="true" />
+
+ Tizen supports many search bar options as described in the jQueryMobile documentation for search bar options.
+ The search bar can define callbacks for events as described in the jQueryMobile documentation for search bar events.
+ You can use methods with the search bar as described in the jQueryMobile documentation for search bar methods.
+*/
+
(function ( $, undefined ) {
$.widget( "tizen.searchbar", $.mobile.widget, {
+++ /dev/null
-.ui-shortcutscroll {
- position: absolute;
- right: 0px;
- top: 0px;
- background-color: rgba(225, 221, 215,0.5);
- max-width: 20px;
- min-width: 12px;
- -webkit-user-select: none;
- margin:0;
- padding:0;
- opacity: 1;
-}
-.ui-shortcutscroll ul{
- list-style-type: none;
- margin: 0;
- padding: 0;
-}
-.ui-shortcutscroll li {
- cursor: pointer;
- color:rgba(0,0,0,0.6);
- padding: 2px 2px 2px 5px;
- text-shadow: none !important;
-}
-
-.ui-shortcutscroll-popup {
- position: absolute;
- background: rgba(255,255,255,1);
- padding:10px 30px;
- -moz-box-shadow: 8px 10px 0px rgb(199, 199, 199);
- -webkit-box-shadow: 8px 10px 0px rgb(199, 199, 199);
- box-shadow: 8px 10px 0px rgb(199, 199, 199);
- text-align: center;
- font-size: 75px;
- font-weight: bold;
- display:none;
- box-sizing:border-box;
- color: black;
-}
// If a listview has no dividers or a single divider, the widget won't
// display.
+/**
+ @class ShortcutScroll
+ The shortcut scroll widget shows a shortcut list that is bound to its parent scroll bar and respective list view. This widget is displayed as a text pop-up representing shortcuts to different list dividers in the list view. If you select a shortcut text from the shortcut scroll, the parent list view is moved to the location representing the selected shortcut.
+
+ To add a shortcut scroll widget to the application, use the following code:
+
+ <div class="content" data-role="content" data-scroll="y">
+ <ul id="contacts" data-role="listview" data-shortcutscroll="true">
+ <li>Anton</li>
+ </ul>
+ </div>
+
+ For the shortcut scroll widget to be visible, the parent list view must have multiple list dividers.
+*/
+
+/**
+ @property {Boolean} data-shortcutscroll
+ When set to true, creates a shortcut scroll using the HTML unordered list (<ul>) element.
+*/
+/**
+ @method shortcutscroll
+ The shortcut scroll is created for the closest list view with the ui-scrollview-clip class.
+*/
(function ( $, undefined ) {
$.widget( "tizen.shortcutscroll", $.mobile.widget, {
+++ /dev/null
-.ui-slider .ui-btn-inner {
- padding: 4px 0 0 0 !important;
-}
-
-.ui-slider-popup {
- position: absolute !important;
- width: 64px;
- height: 64px;
- text-align: center;
- font-size: 40px;
- padding-top: 12px;
- z-index: 100;
- opacity: 0.8;
-}
* });
*/
+/**
+ @class Slider
+ The slider widget shows a control on the screen that you can use to change values by dragging a handle on a horizontal scale. Sliders can be used in Tizen as described in the jQueryMobile documentation for sliders.
+
+ To add a slider widget to the application, use the following code:
+
+ <input data-popup='false' type="range" name="slider" value="5" min="0" max="10" data-icon="text" data-text-left="Min" data-text-right="Max" />
+
+ The slider can define callbacks for events as described in the jQueryMobile documentation for slider events.
+ You can use methods with the slider as described in the jQueryMobile documentation for slider methods.
+*/
+/**
+ @property {String} data-icon
+ Defines the icon style for the slider ends. The icon options are bright, volume, and text.
+ The default value is text.
+*/
+/**
+ @property {Boolean} data-popup
+ Enables or disables a pop-up showing the current value while the handle is dragged.
+ The default value is true.
+*/
+/**
+ @property {String} data-text-left
+ Defines the text displayed on the left side of the slider.
+ The data-icon option must be set to text.
+*/
+/**
+ @property {String} data-text-right
+ Defines the text displayed on the right side of the slider.
+ The data-icon option must be set to text.
+*/
+
(function ($, window, undefined) {
$.widget("tizen.tizenslider", $.mobile.widget, {
options: {
+++ /dev/null
-.ui-swipelist-item {
- -webkit-user-select: none;
- -user-select: none;
-}
-
-.ui-swipelist-item * {
- -webkit-user-select: none;
- -user-select: none;
-}
-
-.ui-swipelist-item-cover {
- z-index: 99;
- position: absolute;
- border: none;
- top: 0%;
- left: 0%;
- width: 100%;
- height: 100%;
- z-index: 100;
-}
-
-.ui-swipelist-item-cover-inner * {
- -moz-user-select: none;
- -webkit-user-select: none;
- -user-select: none;
-}
//
// animationComplete: Triggered by a cover when it finishes sliding
// (to either the right or left).
+
+/**
+ @class SwipeList
+ The swipe list widget shows a list view on the screen where the list items can be swiped vertically to show a menu.
+ To add a swipe list widget to the application, use the following code:
+
+ <ul data-role="swipelist">
+ <li>
+ <div data-role="button" data-inline="true">OK</div>
+ <div data-role="button" data-inline="true">Cancel</div>
+ <div data-role="swipelist-item-cover">
+ <p>This is a swipelist item cover.<br>
+ This will be swiped out when swipe event comes.</p>
+ </div>
+ </li>
+ </ul>
+
+ You can use methods with the swipe list as described in the jQueryMobile documentation for list view methods.
+*/
+/**
+ @property {String} data-role
+ Creates a swipe list using the HTML unordered list (>ul<) element.
+ The default value is swipelist.
+
+ Creates a swipe list item cover using an HTML $gt;div$lt; element. This cover can be swiped to show the content beneath it.
+ The default value is swipelist-item-cover.
+*/
+/**
+ @event animationend
+ The swipe list can define a callback for the animationend event, which is fired after a list item is swiped and the swipe animation is complete:
+
+ <ul data-role="swipelist">
+ <li>
+ <div data-role="button" data-inline="true">OK</div>
+ <div data-role="button" data-inline="true">Cancel</div>
+ <div data-role="swipelist-item-cover" id="foo">
+ <p>This is a swipelist item cover.<br>
+ This will be swiped out when swipe event comes.</p>
+ </div>
+ </li>
+ </ul>
+ $("#foo").bind("animationend", function (ev)
+ {
+ Console.log("Swipelist cover's animation is complete.");
+ });
+*/
(function ($) {
$.widget("tizen.swipelist", $.mobile.widget, {
+++ /dev/null
-@swipelistitem-width:480px;
-@swipelistitem-height:80px;
-@onelinelist-height:70px;
-@border-radius:8px;
-@margin:10px;
-
-.ui-swipelist {
- list-style-type: none;
-}
-
-.ui-swipelistitem {
- width:@swipelistitem-width;
- height:@swipelistitem-height;
- background:url(images/00_sweep_list_bg.png);
-}
-
-.ui-swipelistitemcontainer {
- overflow:hidden;
- position:relative;
- width:@swipelistitem-width;
- height:@swipelistitem-height;
-
- .ui-swipelistitemcover {
- position: absolute;
- top:0;
- left:0;
- background:url(images/00_sweep_list_bg.png);
- width:100%;
- height:100%;
- text-align: center;
- }
-
- .ui-swipelistitemcontent{
- text-align: center;
- position: absolute;
- width: 460px;
- height: 38px;
- margin-bottom: 7px;
- margin-left:@margin;
- margin-right:@margin;
- margin-top:35px;
- border:0;
- .ui-buttonlayout{
- margin-right:@margin;
- border:0px;
- height:38px;
- width:215px;
- text-align: center;
- border-radius:@border-radius;
- -webkit-border-radius:@border-radius;
- }
-
- .ui-swipebuttonlast{
- width:225px;
- margin-right:0px;
- }
-
- .ui-threebuttonlayout{
- width:137px;
- .ui-swipebuttonlast{
- width:147px;
- }
- }
-
- .ui-centrebutton{
- width:136px;
- }
-
- .ui-fourbuttonlayout{
- width:101px;
- margin-right:8px;
- .ui-swipebuttonlast{
- width:109px;
- }
- }
- }
-}
-
-.ui-onelinelist {
- height:@onelinelist-height;
- .ui-swipelistitemcontainer{
- height:@onelinelist-height;
- }
- .ui-swipelistitemcontent{
- margin-top:28px;
- margin-bottom:4px;
- }
-}
-
-
// checked: Boolean; the state of the switch.(default: true)
// texton: String; "On";
// textoff: String; "Off";
+// style: String; the style of toggleswitch (default: image)
//
// Events:
// change: Emitted when the switch is changed.
+/**
+ @class ToggleSwitch
+ The toggle switch widget shows a 2-state switch on the screen.
+
+ To add a toggle switch widget to the application, use the following code:
+
+ // Off state
+ <div id="switch-1" data-role="toggleswitch" data-checked="false" data-textoff="Disabled"></div>
+ // On state
+ <div id="switch-2" data-role="toggleswitch" data-texton="Enabled"></div>
+ <script>
+ $("#switch-1").bind("changed", function(e, state)
+ {
+ alert(state);
+ });
+ </script>
+*/
+/**
+ @property {Boolean} data-checked
+ Sets the toggle switch state.
+ The default value is true.
+*/
+/**
+ @property {String} data-texton
+ Sets the label text value for the toggle switch 'on' state.
+ The default value is On.
+*/
+/**
+ @property {String} data-textoff
+ Sets the label text value for the toggle switch 'off' state.
+ The default value is Off.
+*/
+/**
+ @event change
+ The toggle switch can define a callback for the change event, which is fired when the toggle switch state is changed.
+
+ <div id="switch-1" data-role="toggleswitch"></div>
+ <script>
+ $("#switch-1").bind("change", function(e, state)
+ {
+ alert(state);
+ });
+ </script>
+*/
+
(function ( $, undefined ) {
$.widget( "tizen.toggleswitch", $.tizen.widgetex, {
texton : "On",
textoff : "Off",
checked : true,
+ style : "image",
initSelector : ":jqmData(role='toggleswitch')"
},
}
},
+ _setStyle: function ( style ) {
+ if ( style ) {
+ this.options.style = style;
+ }
+ },
+
_setDisabled: function ( value ) {
$.tizen.widgetex.prototype._setDisabled.call( this, value );
this._ui.container[value ? "addClass" : "removeClass"]( "ui-disabled" );
_create: function () {
var self = this;
this.element.hide().after( this._ui.container );
- if ( this.element.jqmData("icon") ) {
+ self._setStyle( this.element.jqmData("style") );
+ if ( this.options.style != "text" ) {
this._ui.container.addClass("ui-toggleswitch-image-style");
this._ui.container.find(".ui-toggleswitch-text").hide();
this._ui.container.find(".ui-toggleswitch-reed").hide();
*/
// most of following codes are derived from jquery.mobile.scrollview.js
+
+/**
+ @class VirtualGrid
+ In the Web environment, it is challenging to display large amount of data in a list, such as displaying a contact list of over 1000 list items. It takes time to display the entire list in HTML and the DOM manipulation is complex.
+
+ The virtual grid widget is used to display a list of unlimited data elements on the screen for better performance. This widget displays the data in the grid format by reusing the existing grid control space. Virtual grids are based on the jQuery.template plugin as described in the jQuery documentation for jQuery.template plugin.
+
+ To add a virtual grid widget to the application, use the following code:
+
+ <script id="tizen-demo-namecard" type="text/x-jquery-tmpl">
+ <div class="ui-demo-namecard">
+ <div class="ui-demo-namecard-pic">
+ <img class="ui-demo-namecard-pic-img" src="${TEAM_LOGO}" />
+ </div>
+ <div class="ui-demo-namecard-contents">
+ <span class="name ui-li-text-main">${NAME}</span>
+ </div>
+ </div>
+ </script>
+ <div id="virtualgrid-demo" data-role="virtualgrid" data-itemcount="1" data-template="tizen-demo-namecard">
+ </div>
+*/
+/**
+ @property {String} data-template
+ Specifies the jQuery.template element ID.
+ The jQuery.template must be defined. The template style can use rem units to support scalability.
+*/
+/**
+ @property {String} data-direction
+ Defines the scroll direction. The direction options are x (horizontal) and y (vertical).
+ The default value is y.
+*/
+/**
+ @property {Boolean} data-rotation
+ Defines whether the data elements are displayed from the beginning of the list again once the end of file is reached.
+ The default value is false.
+*/
+/**
+ @property {String} data-itemcount
+ Sets the number of column elements displayed in one row. The value can be a number (when the column number is fixed and displayed as the input value) or auto (when the column number varies and the columns are arranged according to the screen size).
+The default value is 1.
+*/
+/**
+ @event scrollstart
+ The scrollstart event is fired when the user starts scrolling through the grid:
+
+ <div data-role="virtualgrid" data-scroll="y" data-template="tizen-demo-namecard"></div>
+ // Option 01
+ $(".selector").virtualgrid
+ ({
+ scrollstart: function(event, ui)
+ {
+ // Handle the scrollstart event
+ }
+ });
+ // Option 02
+ $(".selector").bind("scrollstart", function(event, ui)
+ {
+ // Handle the scrollstart event
+ });
+*/
+/**
+ @event scrollupdate
+ The scrollupdate event is fired when the user moves the scroll bar in the grid:
+
+ <div data-role="virtualgrid" data-scroll="y" data-template="tizen-demo-namecard"></div>
+ // Option 01
+ $(".selector").virtualgrid
+ ({
+ scrollupdate: function(event, ui)
+ {
+ // Handle the scrollupdate event
+ }
+ });
+ // Option 02
+ $(".selector").bind("scrollupdate", function(event, ui)
+ {
+ // Handle the scrollupdate event
+ });
+*/
+/**
+ @event scrollstop
+ The scrollstop event is fired when the user stops scrolling:
+
+ <div data-role="virtualgrid" data-scroll="y" data-template="tizen-demo-namecard"></div>
+ // Option 01
+ $(".selector").virtualgrid
+ ({
+ scrollstop: function(event, ui)
+ {
+ // Handle the scrollstop event
+ }
+ });
+ // Option 02
+ $(".selector").bind("scrollstop", function(event, ui)
+ {
+ // Handle the scrollstop event
+ });
+*/
+/**
+ @event select
+ The select event is fired when a virtual grid cell is selected:
+
+ <div data-role="virtualgrid" data-scroll="y" data-template="tizen-demo-namecard"></div>
+ // Option 01
+ $(".selector").virtualgrid
+ ({
+ select: function(event, ui)
+ {
+ // Handle the select event
+ }
+ });
+ // Option 02
+ $(".selector").bind("select", function(event, ui)
+ {
+ // Handle the select event
+ });
+*/
+/**
+ @method create
+ @param {function} itemData(index)
+ @param {Number} numItemData
+ @param {function} cacheItemData(minIndex, maxIndex)
+ The create method is used to call the jQuery _create method. In the method parameters:
+
+ function itemData(index) returns the JSON object matched with the given index. The index value is between 0 and numItemData-1.<br/>
+ number numItemData or function numItemData() defines or returns a static number of items.<br/>
+ function cacheItemData(minIndex, maxIndex) prepares the JSON data. This method is called before calling the itemData() method with index values between minIndex and maxIndex.<br/>
+
+ <div data-role="virtualgrid" data-scroll="y" data-template="tizen-demo-namecard"></div>
+ function itemData(idx)
+ {
+ return DATA[idx];
+ }
+ function cacheItemData(minIdx, maxIdx)
+ {
+ // Prepare JSON data between minIdx and maxIdx
+ }
+ var numItemData = DATA.length;
+ $(".selector").virtualgrid("create",
+ {
+ itemData, numItemData, cacheItemData
+ });
+*/
+/**
+ @method centerTo
+ The centerTo method is used to search for the DOM element with a specified class name. The retrieved element is placed at the center of the virtual grid. If multiple elements are retrieved, the first element from the result list is placed at the center of the virtual grid.
+
+ <div data-role="virtualgrid" data-scroll="y" data-template="tizen-demo-namecard"></div>
+ $(".selector").virtualgrid("centerTo", "selector");
+*/
+/**
+ @method resize
+ The resize method is used to rearrange the DOM elements to fit a new screen size when the screen is resized:
+
+ <div data-role="virtualgrid" data-scroll="y" data-template="tizen-demo-namecard"></div>
+ ".selector").virtualgrid("resize");
+
+ @since Tizen2.0
+*/
+
( function ($, window, document, undefined) {
function circularNum (num, total) {
}
},
+ _getViewHeight : function () {
+ var self = this;
+ return self._$view.height();
+ },
+
refresh : function () {
var self = this,
opts = self.options,
self._makePositioned = self._scrollView._makePositioned;
self._set_scrollbar_size = self._scrollView._set_scrollbar_size;
self._setStyleTransform = self._scrollView._setElementTransform;
+ self._hideOverflowIndicator = self._scrollView._hideOverflowIndicator;
+ self._showOverflowIndicator = self._scrollView._showOverflowIndicator;
+ self._setGestureScroll = self._scrollView._setGestureScroll;
},
_createTracker : function () {
*
*/
+/**
+ @class VirtualList
+ In the Web environment, it is challenging to display a large amount of data in a list, such as displaying a contact list of over 1000 list items. It takes time to display the entire list in HTML and the DOM manipulation is complex.
+
+ The virtual list widget is used to display a list of unlimited data elements on the screen for better performance. This widget provides easy access to databases to retrieve and display data. Virtual lists are based on the jQuery.template plugin as described in the jQuery documentation for jQuery.template plugin.
+
+ To add a virtual list widget to the application, use the following code:
+
+ <script id="tmp-3-2-7" type="text/x-jquery-tmpl">
+ <li class="ui-li-3-2-7">
+ <span class="ui-li-text-main">${NAME}</span>
+ <img src="00_winset_icon_favorite_on.png" class="ui-li-icon-sub"/>
+ <span class="ui-li-text-sub">${ACTIVE}</span>
+ <span class="ui-li-text-sub2">${FROM}</span>
+ </li>
+ </script>
+ <ul id="vlist" data-role="virtuallistview" data-template="tmp-3-2-7" data-dbtable="JSON_DATA" data-row="100"></ul>
+*/
+/**
+ @property {String} data-role
+ Creates the virtual list view. The value must be set to virtuallistview.
+ Only the >ul< element, which a id attribute defined, supports this option. Also, the vlLoadSuccess class attribute must be defined in the >ul< element to ensure that loading data from the database is complete.
+*/
+/**
+ @property {String} data-template
+ Defines the jQuery.template element ID.
+ The jQuery.template must be defined. The template style can use rem units to support scalability.
+*/
+/**
+ @property {Number} data-row
+ Defines the number of virtual list child elements.
+ The minimum value is 20 and the default value is 100. As the value gets higher, the loading time increases while the system performance improves. So you need to pick a value that provides the best performance without excessive loading time.
+*/
+/**
+ @method create
+ @param {function} itemData(index)
+ : function itemData(index) returns the JSON object matched with the given index. The index value is between 0 and numItemData-1.
+ @param {Number} numItemData
+ : number numItemData or function numItemData() defines or returns a static number of items.
+ @param {function} cacheItemData(minIndex, maxIndex)
+ : function cacheItemData(minIndex, maxIndex) prepares the JSON data. This method is called before calling the itemData() method with index values between minIndex and maxIndex.
+*/
(function ( $, undefined ) {
dbtable_name = $el.jqmData('dbtable');
dbtable = window[ dbtable_name ];
- if ( !dbtable ) {
- dbtable = { };
- }
-
$( o.id ).empty();
- if ( $el.data( "template" ) ) {
- o.template = $el.data( "template" );
-
- /* to support swipe list, <li> or <ul> can be main node of virtual list. */
- if ( $el.data( "swipelist" ) == true ) {
- o.childSelector = " ul";
- } else {
- o.childSelector = " li";
- }
- }
-
- /* Set data's unique key */
- if ( $el.data( "dbkey" ) ) {
- o.dbkey = $el.data( "dbkey" );
+ if ( !dbtable ) {
+ dbtable = { };
}
- t._first_index = 0; //first id of <li> element.
- t._last_index = o.row - 1; //last id of <li> element.
-
t._itemData = function ( idx ) {
return dbtable[ idx ];
};
t._numItemData = dbtable.length;
+ } else {
+ return; // Do nothing
+ }
+ }
+
+ if ( $el.data( "template" ) ) {
+ o.template = $el.data( "template" );
- t._initList();
+ /* to support swipe list, <li> or <ul> can be main node of virtual list. */
+ if ( $el.data( "swipelist" ) == true ) {
+ o.childSelector = " ul";
+ } else {
+ o.childSelector = " li";
}
}
+ /* Set data's unique key */
+ if ( $el.data( "dbkey" ) ) {
+ o.dbkey = $el.data( "dbkey" );
+ }
+
+ t._first_index = 0; //first id of <li> element.
+ t._last_index = o.row - 1; //last id of <li> element.
+ t._initList();
},
destroy : function () {
+++ /dev/null
-/*\r
- * Unit Test: Color Picker\r
- *\r
- * Hyunjung Kim <hjnim.kim@samsung.com>\r
- *\r
- */\r
-$( "#colorpage" ).live( "pageinit", function(event){\r
-\r
- module("Color Picker");\r
-\r
- var cutHex = function( h ){ return ( h.charAt(0)=="#" ) ? h.substring(1,7):h}\r
- var hexToRgb = function( h ) {\r
- var r = parseInt((cutHex(h)).substring( 0, 2 ),16), g = parseInt((cutHex(h)).substring( 2, 4),16), b = parseInt((cutHex(h)).substring( 4, 6), 16);\r
- return "rgb("+r+", "+g+", "+b+")";\r
- }\r
- var makeRandomColor = function(){\r
- var letters = '0123456789ABCDEF'.split('');\r
- var color = '#';\r
- for (var i = 0; i < 6; i++ ) {\r
- color += letters[Math.round(Math.random() * 15)];\r
- }\r
- return color.toLowerCase();\r
- }\r
- var colorchange = function( widget, colorcode ){\r
- if( widget.attr("data-color") == colorcode) return true;\r
- else return false;\r
- }\r
- var testHsvpicker = function( widget ) {\r
- var wgSiblings,\r
- hsvpicker,\r
- chan,\r
- hsvIdx,\r
- max,\r
- step,\r
- colorcode;\r
-\r
- widget = $("#hsvpicker");\r
- widget.hsvpicker();\r
- wgSiblings = widget.siblings();\r
- hsvpicker = wgSiblings.last();\r
-\r
- ok( widget.is(":hidden") &&\r
- hsvpicker.hasClass("ui-hsvpicker") &&\r
- hsvpicker.children().length == 3\r
- , "Create - Hue-Saturation-Value");\r
-\r
- ok( function ( ) {\r
- var i,\r
- varArray,\r
- leftbutton,\r
- rightbutton,\r
- view,\r
- width,\r
- nowvar,\r
- indicator,\r
- result = true,\r
- hue,\r
- sat,\r
- val,\r
- dragging_hsv = [0,0,0];\r
-\r
- for( i = 0 ; i < hsvpicker.children().length; i++ ){\r
- varArray = hsvpicker.children();\r
- nowvar = varArray.eq(i);\r
- leftbutton = nowvar.children().eq(0);\r
- view = nowvar.children().eq(1);\r
- rightbutton = nowvar.children().eq(2);\r
- indicator = nowvar.children().eq(1).children().eq(3);\r
-\r
- while(true) {\r
- chan = leftbutton.find("a").attr( "data-" + ( $.mobile.ns || "" ) + "target" );\r
- leftbutton.find("a").trigger( "vclick" );\r
- if( parseInt( indicator.css("left") ) <= 0 ){\r
- break;\r
- }\r
- }\r
-\r
- hsvIdx = ( "hue" === chan ) ? 0 :\r
- ( "sat" === chan) ? 1 : 2;\r
- dragging_hsv = [ 0, 0, 0];\r
-\r
- while(true) {\r
- rightbutton.children().first().trigger( "vclick" );\r
- width = view.first().width();\r
- max = ( 0 == hsvIdx ? 360 : 1 );\r
- step = 0.05 * max;\r
- dragging_hsv[hsvIdx] = dragging_hsv[hsvIdx] + step;\r
- dragging_hsv[hsvIdx] = Math.min( max, Math.max( 0.0, dragging_hsv[hsvIdx] ) );\r
- hue = varArray.eq(0).children().eq(1).children();\r
- val = varArray.eq(1).children().eq(1).children();\r
- sat = varArray.eq(2).children().eq(1).children();\r
- switch(hsvIdx){\r
- case 0:\r
- if( indicator.css("background-color") != val.last().css("background-color") ||\r
- indicator.css("background-color") != sat.last().css("background-color"))\r
- result = false;\r
- break;\r
- case 1:\r
- if( parseFloat( dragging_hsv[1] ).toFixed(2) != parseFloat(hue.eq(1).css("opacity")).toFixed(2) ||\r
- indicator.css("background-color") != sat.last().css("background-color"))\r
- result = false;\r
- break;\r
- case 2:\r
- if(parseFloat( 1 - dragging_hsv[2] ).toFixed(2) , parseFloat(hue.eq(2).css("opacity")).toFixed(2) ||\r
- parseFloat( 1 - dragging_hsv[2] ).toFixed(2) , parseFloat(val.eq(2).css("opacity")).toFixed(2))\r
- result = false;\r
- break;\r
- }\r
- if( parseInt( indicator.css("left") ) >= parseInt( width ) || !result){\r
- break;\r
- }\r
- }\r
- }\r
- return result;\r
- }," Click - Color match, Hue-Saturation-Value " );\r
-\r
- colorcode = makeRandomColor();\r
- widget.hsvpicker( { color : colorcode });\r
-\r
- ok( colorchange(widget, colorcode),\r
- "Option : Color change")\r
- }\r
-\r
- test( "Color Title" , function ( ) {\r
- var wgSiblings,\r
- colorHex,\r
- widget,\r
- colorcode;\r
-\r
- widget = $("#colortitle");\r
-\r
- wgSiblings = widget.siblings();\r
- ok( widget.is(":hidden") &&\r
- wgSiblings.length == 2 &&\r
- wgSiblings.last().is(".ui-colortitle, .jquery-mobile-ui-widget"),\r
- "Create - Color Title" );\r
-\r
- colorHex = widget.jqmData("color");\r
- equal( wgSiblings.last().css("color"), hexToRgb(colorHex), "Compare - Color" );\r
- equal( wgSiblings.last().text().trim(), colorHex, "Compare - Text" );\r
-\r
- colorcode = makeRandomColor();\r
- widget.colortitle({ color : colorcode });\r
-\r
- ok( colorchange( widget, colorcode ),\r
- "Option : Color change");\r
- });\r
-\r
- test( "Color palette" , function () {\r
- var widget,\r
- palette,\r
- palettePreview,\r
- wgSiblings,\r
- colorChoice,\r
- i,\r
- colorcode,\r
- palettePrefix = ".colorpalette";\r
-\r
- widget = $("#colorpalette");\r
-\r
- wgSiblings = widget.siblings();\r
- palette = wgSiblings.last();\r
- ok( widget.is(":hidden") &&\r
- wgSiblings.length == 2 &&\r
- palette.is(".ui-colorpalette, .jquery-mobile-ui-widget"),\r
- "Create - Color palette" );\r
-\r
- if( palette.find( palettePrefix + "-preview-container").length ){\r
- palettePreview = palette.find( palettePrefix +"-preview-container");\r
- }\r
- colorChoice = palette.find( palettePrefix + "-table").children().find( "div[class^='colorpalette-choice-container-']" );\r
- equal( colorChoice.length ,\r
- palette.jqmData("n-choices") , "Count - Color choice container" );\r
-\r
- ok( function(){\r
- var i = 0,\r
- result = true;\r
- for(i = 0 ; i < colorChoice.length; i++ ){\r
- $(colorChoice[i]).children().trigger("vclick");\r
- if( palettePreview.children().css("background-color") == $(colorChoice[i]).children().css("background-color") ){\r
- result = false;\r
- break;\r
- }\r
- }\r
- return result;\r
- }, "Click - Palette Active check" );\r
-\r
- colorcode = makeRandomColor();\r
- widget.colorpalette({ color: colorcode });\r
-\r
- ok( colorchange( widget, colorcode ),\r
- "Option : Color change");\r
- });\r
-\r
- test( "Color picker button-noform" , function () {\r
- var widget,\r
- wgSiblings,\r
- colorpickerbutton,\r
- colorcode,\r
- popwindow,\r
- hsvpicker;\r
-\r
- widget = $("#colorpickerbutton-noform");\r
- widget.colorpickerbutton();\r
- wgSiblings = widget.siblings();\r
- colorpickerbutton = wgSiblings.last();\r
-\r
- ok( widget.is(":hidden") &&\r
- wgSiblings.last().jqmData("role") == "button" &&\r
- wgSiblings.last().attr("aria-haspopup") == "true",\r
- "Create - Color picker" );\r
-\r
- widget.colorpickerbutton("open");\r
- popwindow = $("#colorpage").children().last();\r
-\r
- ok( parseInt( popwindow.css("top") ) > 0, "Open - Popupwindow");\r
- hsvpicker = popwindow.children().children().first();\r
- testHsvpicker(hsvpicker);\r
-\r
- widget.colorpickerbutton("close");\r
- equal( hexToRgb( hsvpicker.jqmData("color") ),\r
- colorpickerbutton.children().children().children().css("color") );\r
-\r
- colorcode = makeRandomColor();\r
- widget.colorpicker({ color: colorcode });\r
-\r
- ok( colorchange( widget, colorcode ),\r
- "Option : Color change");\r
- });\r
-\r
- test( "Hue-Saturation-Value" , function () {\r
- testHsvpicker( "#hsvpicker" );\r
- });\r
-\r
- test( "Hue-Saturation-Lightnewss" , function() {\r
- var widget,\r
- wgSiblings,\r
- colorpicker,\r
- colorcode;\r
-\r
- widget = $("#colorpicker");\r
- widget.colorpicker();\r
- wgSiblings = widget.siblings();\r
- colorpicker = wgSiblings.last();\r
-\r
- ok( widget.is(":hidden") &&\r
- colorpicker.hasClass("ui-colorpicker") &&\r
- colorpicker.children().length == 3\r
- , "Create - Hue-Saturation-Lightness");\r
-\r
- colorcode = makeRandomColor();\r
- widget.colorpicker({ color: colorcode });\r
-\r
- ok( colorchange( widget, colorcode ),\r
- "Option : Color change");\r
- });\r
-});
\ No newline at end of file
+++ /dev/null
-<!DOCTYPE html>\r
-<html>\r
-<head>\r
- <script src="../../../build/tizen-web-ui-fw/latest/js/jquery.js"></script>\r
- <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>\r
- <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"\r
- data-framework-theme="tizen-white"\r
- data-framework-viewport-scale=false>\r
- </script>\r
-\r
- <link rel="stylesheet" href="../../../libs/js/jquery-mobile-1.1.0/external/qunit.css" />\r
-\r
- <script src="../../../libs/js/jquery-mobile-1.1.0/tests/jquery.testHelper.js"></script>\r
- <script src="../../../libs/js/jquery-mobile-1.1.0/external/qunit.js"></script>\r
- <script src="color-tests.js"></script>\r
-\r
- <title>Color Picker</title>\r
-</head>\r
-\r
-<body>\r
-\r
-<h1 id="qunit-header">Color</h1>\r
-<h2 id="qunit-banner"></h2>\r
-<div id="qunit-testrunner-toolbar"></div>\r
-<h2 id="qunit-userAgent"></h2>\r
-<ol id="qunit-tests"></ol>\r
-<div id="qunit-fixture">\r
- <div data-role="page" id="colorpage">\r
- <div>\r
- <div>Color title widget</div>\r
- <div data-role="colortitle" id="colortitle"></div>\r
- </div>\r
- <div>\r
- <div>Color palette widget</div>\r
- <div data-role="colorpalette" id="colorpalette" data-show-preview="true"></div>\r
- </div>\r
- <div>\r
- <div>Color picker button</div>\r
- <div data-role="colorpickerbutton" data-inline="true" id="colorpickerbutton-noform"></div>\r
- </div>\r
- <div>\r
- <div data-role="label">Hue-Saturation-Value picker widget</div>\r
- <div data-role="hsvpicker" id="hsvpicker"></div>\r
- </div>\r
- <div>\r
- <div data-role="label">Hue-Saturation-Lightness picker widget</div>\r
- <div data-role="colorpicker" id="colorpicker" data-color="#ffffff"></div>\r
- </div>\r
- </div>\r
-</div>\r
-\r
-</body>\r
-</html>\r
-\r
var str = "May 2 18:00:00 2012";
$(datetime).bind("date-changed", function(e, date) {
- equal( date, "2012-05-02T18:00:00", "Should invoke event when date changed" );
+ equal( objDatetime.value(), "2012-05-02T18:00:00", "Should invoke event when date changed" );
start();
});
"autodividers",
"button",
"check",
- "color",
"controlbar",
"datetimepicker",
"dayselector",
var ts = $("#ts-self").toggleswitch(),
before = ts.toggleswitch( "option", "checked" );
- ts.bind("changed", function() {
- ok( true, "should trigger changed event");
+ ts.bind("change", function() {
+ ok( true, "should trigger change event");
notEqual( before, ts.toggleswitch( "option", "checked" ), "should change value" );
});
projects / platform / framework / web / web-ui-fw.git / commitdiff
