<script src="configure.js"></script>
<script src="/usr/share/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>
<script src="/usr/share/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.min.js"
- data-framework-theme="tizen-white"
+ data-framework-theme="tizen-black"
data-framework-viewport-width="device-width">
</script>
$( document ).on( "pageinit", function () {
$.mobile.tizen.enableSelection( $("div:jqmData(role='page')"), 'none' );
});
+
+
+$( document ).on( "pageshow", function () {
+ var $elFooter = $( ".ui-page-active .ui-footer" ),
+ $elBackKey = $elFooter.children( ".ui-btn-back" ),
+ $elMoreKey = $elFooter.children(":jqmData(icon='naviframe-more')"),
+ cntMore = 0;
+
+ if ( !($.tizen && $.tizen.frameworkData.deviceCapa && $.tizen.frameworkData.deviceCapa.inputKeyBack) ) {
+ return true;
+ }
+
+ if ( $elMoreKey.length ) {
+ cntMore = $elMoreKey.length + 1;
+ }
+
+ if ( $elFooter.children().length - $elBackKey.length - cntMore === 0 ) {
+ $elFooter.hide();
+ $( ".ui-page-active" ).page("refresh");
+ }
+});
$( "#checkboxItems" ).append( newhtml).trigger( "create" );<br>
</p>
</div>
-
+
<div id="checkboxItems" ></div>
-
+
<fieldset class="ui-grid-b">
<div data-role="controlgroup" data-type="horizontal">
<a id="bAdd" href="#" data-role="button" data-icon="plus" >Add new item</a>
<div>Example #2 Call the widget Creator function.</div>
<div>
Call the widget's creator function after append element on HTML.<br>
- Usually, creator function is same to widget name. But, "button" widget is a little bit different.
+ Usually, creator function is same to widget name. But, "button" widget is a little bit different.
Call buttonMarkup() or trigger "create" to the parent of button.
</div>
<div>
/* Append new button */<br>
var buttonTemplate = "<div data-role='button' data-inline='true' " + "data-icon='call' data-style='circle' " + "data-theme='s' class='newbutton'></div>"; <br>
$( buttonTemplate ).buttonMarkup().appendTo( "#buttonItems" ); <br><br>
-
+
/* It's same to call ".buttonMarkup()". */<br>
$( "#buttonItems" ).trigger( "create" );
</p>
$("#pinch_demo").on( "pinchend", function ( e, p ) {
last_ratio = get_ratio( p.ratio );
});
+
+ $( window ).bind( "galleryorientationchanged", function ( e ) {
+ last_ratio = 1;
+ });
});
$(document).on( "pageinit", "#main" , function () {
if ( window.tizen && window.tizen.application ) {
- $( "#main .ui-btn-back" ).on( "click", function () {
+ $( "#main .ui-btn-back" ).on( "vclick", function () {
window.tizen.application.getCurrentApplication().exit();
return false;
});
try {
if ( $.tizen.__tizen__.util.isMobileBrowser() ) {
- tizen.systeminfo.addPropertyValueChangeListener( "DEVICE_ORIENTATION", onSuccessCallback, onErrorCallback );
+ /**
+ * Temporary rotation is blocked as TIZEN API is missing a flag,
+ * which can help to check if the orientation is locked or unlocked
+ *
+ * JIRA https://tizendev.org/bugs/browse/N_SE-39394
+ */
+ //tizen.systeminfo.addPropertyValueChangeListener( "DEVICE_ORIENTATION", onSuccessCallback, onErrorCallback );
}
} catch ( exc ) {
alert( exc.message );
position : fixed;
width : 4.4rem;
height : 6.1rem;
+ margin-top: 0.3rem;
margin-right: 0.3rem;
margin-left: 0.3rem;
- margin-bottom: 0.5rem;
+ margin-bottom: 0.3rem;
}
.ui-demo-namecard-pic {
width : 5.1rem;
height : 6.1rem;
display: block;
+ margin-top: 0.1rem;
margin-right: 0.3rem;
margin-left: 0.3rem;
- margin-bottom: 0.6rem;
+ margin-bottom: 0.1rem;
}
.ui-demo-namecard-contents-x {
height : 70px;
display:block;
border-bottom-color: #444;
+ padding-top : 0.3rem;
}
.ui-demo-namecard-list-pic {
-<!DOCTYPE html>
-<html>
- <head></head>
- <body>
- <div data-role="page" id="list" data-add-back-btn="true">
- <div data-role="header" data-position="fixed">
- <h1>VIRTUAL LIST</h1>
- </div>
- <div data-role="content">
- <ul data-role="listview">
- <li data-role="list-divider">Virtual List</li>
- <li><a href="virtuallist-normal.html">Virtual List Normal Style 1line</a></li>
- <li><a href="virtuallist-normal_3_1_4.html">Virtual List Normal Style 1line-btn1</a></li>
- <li><a href="virtuallist-normal_3_1_14.html">Virtual List Normal Style 1line-bigicon5</a></li>
- <li><a href="virtuallist-normal_3_2_7.html">Virtual List Normal Style 2line-star1</a></li>
- </ul>
- </div>
- <div data-role="footer">
- </div>
- </div>
- </div>
- </body>
-</html>
+<!DOCTYPE html>\r
+<html>\r
+ <head></head>\r
+ <body>\r
+ <div data-role="page" id="list" data-add-back-btn="true">\r
+ <div data-role="header" data-position="fixed">\r
+ <h1>VIRTUAL LIST</h1>\r
+ </div>\r
+ <div data-role="content">\r
+ <ul data-role="listview">\r
+ <li data-role="list-divider">Virtual List</li>\r
+ <li><a href="virtuallist-normal.html">Virtual List Normal Style 1line</a></li>\r
+ <li><a href="virtuallist-normal_3_1_4.html">Virtual List Normal Style 1line-btn1</a></li>\r
+ <li><a href="virtuallist-normal_3_1_14.html">Virtual List Normal Style 1line-bigicon5</a></li>\r
+ <li><a href="virtuallist-normal_3_2_7.html">Virtual List Normal Style 2line-star1</a></li>\r
+ </ul>\r
+ </div>\r
+ <div data-role="footer">\r
+ </div>\r
+ </div>\r
+ </div>\r
+ </body>\r
+</html>\r
</div>
<div data-role="content">
<audio data-controls="true" style="width:100%;">
- <source src="http://www.w3schools.com/html5/mov_bbb.mp4" type="audio/mp4" />
- <source src="http://www.w3schools.com/html5/mov_bbb.ogg" type="audio/ogg" />
+ <source src="./Color_short_version.mp4" type="audio/mp4" />
<p>Your browser does not support the audio tag.</p>
</audio>
</div>
</div>
<div data-role="content">
<video data-controls="true" style="width:100%;">
- <source src="http://www.w3schools.com/html5/mov_bbb.mp4" type="video/mp4" />
- <source src="http://www.w3schools.com/html5/mov_bbb.ogg" type="video/ogg" />
- <source src="http://www.w3schools.com/html5/mov_bbb.webm" type="video/webm" />
+ <source src="Color_short_version.mp4" type="video/mp4" />
<p>Your browser does not support the video tag.</p>
</video>
</div>
<div data-role="page" id="NavigationbarMain" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
- <h1>HEADER AND FOOTER</h1>
+ <h1>Header and footer</h1>
</div>
<div data-role="content">
<div class="content-primary">
<div data-role="page" id="NavigationbarMain" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
- <h1>NAVIFRAME</h1>
+ <h1>Naviframe</h1>
</div>
<div data-role="content">
<div class="content-primary">
<div data-role="page" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
- <h1>FOOTER MORE</h1>
+ <h1>Footer more</h1>
</div>
<div data-role="content">
<p>Footer more sample</p>
<div data-role="page" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
- <h1>FOOTER MORE</h1>
+ <h1>Footer more</h1>
</div>
<div data-role="content">
<p>Footer more sample</p>
<div data-role="page" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
- <h1>TITLE TEXT</h1>
+ <h1>Title text</h1>
+ <div data-role="button">Cancel</div>
+ <div data-role="button">Cancel</div>
</div>
<div data-role="content">
<p>title text sample</p>
<body>
<div data-role="page" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
- <h1>TITLE 1 BUTTON</h1>
- <div data-role="button" data-icon="home" class="naviframe-button"></div>
+ <h1>Title 1 button</h1>
+ <div data-role="button" data-icon="naviframe-selectall" class="naviframe-button"></div>
</div>
<div data-role="content">
<p>Title text Button 01 sample</p>
<body>
<div data-role="page" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
- <h1>TITLE 2 BUTTONS </h1>
+ <h1>Title 2 buttons</h1>
<div data-role="button" data-icon="naviframe-cancel" class="naviframe-button"></div>
- <div data-role="button" data-icon="naviframe-edit" class="naviframe-button"></div>
+ <div data-role="button" data-icon="naviframe-done" class="naviframe-button"></div>
</div>
<div data-role="content">
<p>Title text Button 02 sample</p>
<div data-role="page" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
- <h1>TITLE TEXT MULTILINE</h1>
+ <h1>Title text multiline</h1>
<span class="ui-title-text-sub">tizen@samsung.com</span>
</div>
<div data-role="content">
<div data-role="page" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<img src="icon-tizen.png"/>
- <h1>TITLE DEMO</h1>
- <span class="ui-title-text-sub">TITLE IMAGE MULTILINE</span>
+ <h1>Title demo</h1>
+ <span class="ui-title-text-sub">Title image multiline</span>
</div>
<div data-role="content">
<p>Image Title text Multiline sample</p>
<div data-role="page" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<img src="icon-tizen.png"/>
- <h1>TITLE DEMO</h1>
- <span class="ui-title-text-sub">TITLE IMAGE MULTILINE 2 BUTTONS</span>
+ <h1>Title demo</h1>
+ <span class="ui-title-text-sub">Title image multiline 2 buttons</span>
+ <div data-role="button" data-icon="naviframe-delete" class="naviframe-button"></div>
<div data-role="button" data-icon="naviframe-edit" class="naviframe-button"></div>
- <div data-role="button" data-icon="naviframe-more" class="naviframe-button"></div>
</div>
<div data-role="content">
<p>Image Title text Multiline Button 02 sample</p>
<div data-role="page" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<img src="icon-tizen.png"/>
- <h1>TITLE IMAGE</h1>
+ <h1>Title image</h1>
</div>
<div data-role="content">
<p>Image Title text sample</p>
<div data-role="content">
<div class="content-primary">
- <fieldset data-role="controlgroup">
+ <fieldset data-role="controlgroup" class="choosepet">
<legend>Choose a pet:</legend>
<input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1" checked="checked" />
<label for="radio-choice-1">Cat</label>
$( document ).one( "pagecreate", "#radio-demo", function () {
- $("input[type='radio']").on( "change", function (event, ui) {
+ $(".choosepet input[type='radio']").on( "change", function (event, ui) {
if ( this.checked ) {
$( ".triggered-radio" ).text( this.id + " is selected..." );
}
<div data-role="footer">
<div data-role="tabbar">
<ul>
- <li><a href="#" data-icon="tabedit" class="ui-btn-active"></a></li>
- <li><a href="#" data-icon="tabedit" ></a></li>
- <li><a href="#" data-icon="tabedit" ></a></li>
+ <li><a href="#" data-icon="naviframe-delete" class="ui-btn-active"></a></li>
+ <li><a href="#" data-icon="naviframe-edit" ></a></li>
+ <li><a href="#" data-icon="naviframe-search" ></a></li>
</ul>
</div>
</div>
<div data-role="header" data-position="fixed">
<div data-role="tabbar">
<ul>
- <li><a href="#" data-icon="tabedit" class="ui-btn-active"></a></li>
- <li><a href="#" data-icon="tabedit" ></a></li>
- <li><a href="#" data-icon="tabedit" ></a></li>
+ <li><a href="#" data-icon="naviframe-delete" class="ui-btn-active"></a></li>
+ <li><a href="#" data-icon="naviframe-plus" ></a></li>
+ <li><a href="#" data-icon="naviframe-search" ></a></li>
</ul>
</div>
</div>
<div data-role="header" data-position="fixed">
<div data-role="tabbar">
<ul>
- <li><a href="#" data-icon="tabedit" class="ui-btn-active">Menu</a></li>
- <li><a href="#" data-icon="tabedit" >Save</a></li>
- <li><a href="#" data-icon="tabedit" >Share</a></li>
+ <li><a href="#" data-icon="naviframe-delete" class="ui-btn-active">Delete</a></li>
+ <li><a href="#" data-icon="naviframe-edit" >Edit</a></li>
+ <li><a href="#" data-icon="naviframe-search" >Search</a></li>
</ul>
</div>
<h1>TABBAR ICON WITH TITLE</h1>
<div data-role="tabbar">
<ul>
- <li><a href="#" data-icon="tabedit" class="ui-btn-active"></a></li>
- <li><a href="#" data-icon="tabedit" ></a></li>
- <li><a href="#" data-icon="tabedit" ></a></li>
+ <li><a href="#" data-icon="naviframe-delete" class="ui-btn-active"></a></li>
+ <li><a href="#" data-icon="naviframe-edit" ></a></li>
+ <li><a href="#" data-icon="naviframe-search" ></a></li>
</ul>
</div>
</div>