</div>
</div>
- <script src="tips/generate-elements-dynamically.js"></script>
- <script src="tips/two-line-text/two-line-text.js"></script>
- <script src="tips/list-sample/list-sample.js"></script>
- <script src="tips/pinch-event/pinch.js"></script>
<script src="widgets/pagelayout/barcontrol.js"></script>
<script src="widgets/pagelayout/backbutton-control.js"></script>
<script src="widgets/list/list-edit.js"></script>
+<!DOCTYPE html>
+<html>
+<head>
+ <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8" >
+ <script src="../../tizen-web-ui-fw/latest/js/jquery.min.js"></script>
+ <script src="../../configure.js"></script>
+ <script src="../../tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>
+ <script src="../../tizen-web-ui-fw/latest/js/tizen-web-ui-fw.min.js"
+ data-framework-theme="tizen-white"
+ data-framework-viewport-width="device-width">
+ </script>
+ <script src="../../main.js"></script>
+ <link rel="stylesheet" href="../../custom.css" />
+ <title>Tizen UI - Custom globalize culture</title>
+ <!-- for compatibility test -->
+ <meta name="apple-mobile-web-app-capable" content="yes" />
+ <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+ <link rel="apple-touch-icon" href="../../icon-tizen.png" />
+</head>
+<body>
<div data-role="page" id="page-tips-custom-globalize-culture" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<h1>Custom globalize culture</h1>
</div>
<script src="custom-globalize-culture.js"></script>
</div>
-
+</body>
+</html>
\ No newline at end of file
-( function ( $ ) {
+$( document ).one( "pagecreate", "#page-tips-custom-globalize-culture", function () {
var customCultureFiles = {
"en" : "en.js",
"en-US" : "en.js",
.text( "This is a text from custom globalize culture file (key:hello): " + Globalize.localize( 'hello' ) ) );
content.append(
$( '<div></div>' )
- .text( "Current lang: " + lang + ", Custom culture file: " + customCultureFiles[lang] ) );
+ .text( "Current lang: " + lang + ", Custom culture file: " + customCultureFiles[lang] )
+ );
content.trigger( "refresh" );
-} ) ( jQuery );
+});
+++ /dev/null
-var myArray = [];
-function addCheckbox(){
- var newhtml,
- i = myArray.length;
-
- myArray[myArray.length] = 'Item - ' + myArray.length;
- newhtml = '<input type="checkbox" name="checkbox-'+i+'a" id="checkbox-'+i+'a" class="custom" />' ;
- newhtml += '<label for="checkbox-'+i+'a">'+myArray[i]+'</label>';
- $( "#checkboxItems" ).append( newhtml );
- $( "#checkboxItems" ).trigger( "create" );
-}
-
-
-$( document ).on( "vclick", "#bAdd", function () {
- addCheckbox();
-} );
-
-$( document ).on( "vclick", "#ButtonAdd", function () {
- /* Append new button */
- var buttonTemplate = "<div data-role='button' data-inline='true' " +
- "data-icon='call' data-style='circle' " +
- "data-theme='s' class='newbutton'></div>";
- $( buttonTemplate ).buttonMarkup().appendTo( "#buttonItems" );
-
- /* Same works */
- /*$("#buttonItems").trigger("create");*/
-} );
-
-$( document ).on( "vclick", "#ListAdd", function () {
- var listTemplate = "<li>Appended New Item</li>";
- $( listTemplate ).appendTo( "#listview" );
- $( "#listview" ).listview( "refresh");
-} );
-<div data-role="page" data-add-back-btn="true">
+<!DOCTYPE html>
+<html>
+<head>
+ <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8" >
+ <script src="../../tizen-web-ui-fw/latest/js/jquery.min.js"></script>
+ <script src="../../configure.js"></script>
+ <script src="../../tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>
+ <script src="../../tizen-web-ui-fw/latest/js/tizen-web-ui-fw.min.js"
+ data-framework-theme="tizen-white"
+ data-framework-viewport-width="device-width">
+ </script>
+ <script src="../../main.js"></script>
+ <link rel="stylesheet" href="../../custom.css" />
+ <title>Tizen UI - Generate elements dynamically</title>
+ <!-- for compatibility test -->
+ <meta name="apple-mobile-web-app-capable" content="yes" />
+ <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+ <link rel="apple-touch-icon" href="../../icon-tizen.png" />
+</head>
+<body>
+<div data-role="page" data-add-back-btn="true" id="dynamical-elements-demo">
<div data-role="header" data-position="fixed">
<h1>Generate elements dynamically</h1>
</div><!-- /header -->
<div>
<p style="padding:1em; background-color:whitesmoke; color:black;
border-width:3px; border-style:inset">
- $( "#checkboxItems" ).append( newhtml) ;<br>
- $( "#checkboxItems" ).trigger( "create" );<br>
+ $( "#checkboxItems" ).append( newhtml).trigger( "create" );<br>
</p>
</div>
<fieldset class="ui-grid-b">
<div data-role="controlgroup" data-type="horizontal">
- <div id="ButtonAdd" href="#" data-role="button" data-icon="plus" >Add new Button item</div>
+ <div id="ButtonAdd" data-role="button" data-icon="plus" >Add new Button item</div>
</div>
</fieldset>
</article>
<p style="padding:1em; background-color:whitesmoke; color:black;
border-width:3px; border-style:inset">
var listTemplate = "<li>Appended New Item</li>";<br>
- $( listTemplate ).appendTo( "#listview" );<br>
- $( "#listview" ).listview( "refresh");<br>
+ $( "#listview" ).append( listTemplate ).listview( "refresh");<br>
</p>
</div>
<fieldset class="ui-grid-b">
<div data-role="controlgroup" data-type="horizontal">
- <div id="ListAdd" href="#" data-role="button" data-icon="plus" >Add new item to Listview</div>
+ <div id="ListAdd" data-role="button" data-icon="plus" >Add new item to Listview</div>
</div>
</fieldset>
</article>
</div>
<div data-role="footer">
</div>
+ <script src="generate-elements-dynamically.js"></script>
</div>
+</body>
+</html>
\ No newline at end of file
--- /dev/null
+$( document ).one( "pagecreate", "#dynamical-elements-demo", function () {
+ var myArray = [];
+ function addCheckbox() {
+ var newhtml,
+ i = myArray.length;
+
+ myArray[myArray.length] = 'Item - ' + myArray.length;
+ newhtml = '<input type="checkbox" name="checkbox-' + i + 'a" id="checkbox-' + i + 'a" class="custom" />';
+ newhtml += '<label for="checkbox-' + i + 'a">' + myArray[i] + '</label>';
+ $( "#checkboxItems" ).append( newhtml ).trigger( "create" );
+ }
+
+
+ $( '#bAdd' ).on( 'vclick', function () {
+ addCheckbox();
+ } );
+
+ $( "#ButtonAdd" ).on( "vclick", function () {
+ /* Append new button */
+ var buttonTemplate = "<div data-role='button' data-inline='true' " +
+ "data-icon='call' data-style='circle' " +
+ "data-theme='s' class='newbutton'></div>";
+ $( buttonTemplate ).buttonMarkup().appendTo( "#buttonItems" );
+
+ /* Same works */
+ /*$("#buttonItems").trigger("create");*/
+ } );
+
+ $( "#ListAdd" ).on( "vclick", function () {
+ var listTemplate = "<li>Appended New Item</li>";
+ $( "#listview" ).append( listTemplate ).listview( "refresh");
+ } );
+});
\ No newline at end of file
-<div data-role="page" data-add-back-btn="true">
+<!DOCTYPE html>
+<html>
+<head>
+ <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8" >
+ <script src="../../tizen-web-ui-fw/latest/js/jquery.min.js"></script>
+ <script src="../../configure.js"></script>
+ <script src="../../tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>
+ <script src="../../tizen-web-ui-fw/latest/js/tizen-web-ui-fw.min.js"
+ data-framework-theme="tizen-white"
+ data-framework-viewport-width="device-width">
+ </script>
+ <script src="../../main.js"></script>
+ <link rel="stylesheet" href="../../custom.css" />
+ <title>Tizen UI - List sample</title>
+ <!-- for compatibility test -->
+ <meta name="apple-mobile-web-app-capable" content="yes" />
+ <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+ <link rel="apple-touch-icon" href="../../icon-tizen.png" />
+</head>
+<body>
+<div data-role="page" data-add-back-btn="true" id="list-sample">
<div data-role="header" data-position="fixed">
<h1>Single-Page Application </h1>
</div><!-- /header -->
</ul>
</div>
</div><!-- /footer -->
+ <script src="list-sample.js"></script>
</div><!-- /page -->
+</body>
+</html>
\ No newline at end of file
-$( document ).bind( "pagecreate", function () {
+$( document ).one( "pagecreate", "#list-sample", function () {
var id = 0,
add_item = function () {
var li = '<li class="ui-li-1line-btn1" id="li' + id + '">' +
'<span class="ui-li-text-main">Item ' + id + '</span>' +
- '<div data-role="button" data-inline="true" id="' + id + '">delete</div>'+
- '</li>';
+ '<div data-role="button" data-inline="true" id="' + id + '">delete</div>' +
+ '</li>';
id++;
$("#mylist").append( li ).trigger("create");
};
- $("#add").bind( "vclick", function ( e ) {
+ $("#add").on( "vclick", function ( e ) {
add_item();
$("#mylist").listview("refresh");
});
- $("#add2").bind( "vclick", function ( e ) {
+ $("#add2").on( "vclick", function ( e ) {
var i;
for ( i = 0; i < 20; i++ ) {
$("#mylist").listview("refresh");
});
- $("#new").bind( "vclick", function ( e ) {
+ $("#new").on( "vclick", function ( e ) {
$("#mylist").html("").trigger("create");
add_item();
$("#mylist").listview("refresh");
});
- $("#new2").bind( "vclick", function ( e ) {
+ $("#new2").on( "vclick", function ( e ) {
var i;
$("#mylist").html("").trigger("create");
$("#mylist").listview("refresh");
});
- $("#mylist").delegate( ".ui-btn", "vclick", function ( e ) {
+ $("#mylist").on( "vclick", ".ui-btn", function ( e ) {
$( "#li" + this.id ).remove();
$("#mylist").listview("refresh");
});
+++ /dev/null
-<!DOCTYPE html>
-<div data-role="page" data-add-back-btn="true">
- <div data-role="header" data-position="fixed">
- <h1>Sample</h1>
- </div>
- <div data-role="content">
- <div data-role="gallery" data-vertical-align="middle">
- <img src="../../widgets/test/05.jpg">
- </div>
- </div> <!-- /content -->
- <div data-role="footer">
- </div>
-</div> <!-- /page -->
<!DOCTYPE html>
-<div data-role="page" data-add-back-btn="true">
+<html>
+<head>
+ <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8" >
+ <script src="../../tizen-web-ui-fw/latest/js/jquery.min.js"></script>
+ <script src="../../configure.js"></script>
+ <script src="../../tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>
+ <script src="../../tizen-web-ui-fw/latest/js/tizen-web-ui-fw.min.js"
+ data-framework-theme="tizen-white"
+ data-framework-viewport-width="device-width">
+ </script>
+ <script src="../../main.js"></script>
+ <link rel="stylesheet" href="../../custom.css" />
+ <title>Tizen UI - Transition page</title>
+ <!-- for compatibility test -->
+ <meta name="apple-mobile-web-app-capable" content="yes" />
+ <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+ <link rel="apple-touch-icon" href="../../icon-tizen.png" />
+</head>
+<body>
+<div data-role="page" data-add-back-btn="true" id="transition-list">
<div data-role="header" data-position="fixed">
<h1>Transitions</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-icon="1line-textonly">
- <li><a href="transition-page.html" data-transition="depth">depth</a></li>
- <li><a href="transition-page.html" data-transition="fade">fade</a></li>
- <li><a href="transition-page.html" data-transition="pop">pop</a></li>
- <li><a href="transition-page.html" data-transition="flip">flip</a></li>
- <li><a href="transition-page.html" data-transition="turn">turn</a></li>
- <li><a href="transition-page.html" data-transition="flow">flow</a></li>
- <li><a href="transition-page.html" data-transition="slidefade">slidefade</a></li>
- <li><a href="transition-page.html" data-transition="slide">slide</a></li>
- <li><a href="transition-page.html" data-transition="slideup">slideup</a></li>
- <li><a href="transition-page.html" data-transition="slidedown">slidedown</a></li>
- <li><a href="transition-page.html" data-transition="none">none</a></li>
+ <li><a href="#transition-page" data-transition="depth">depth</a></li>
+ <li><a href="#transition-page" data-transition="fade">fade</a></li>
+ <li><a href="#transition-page" data-transition="pop">pop</a></li>
+ <li><a href="#transition-page" data-transition="flip">flip</a></li>
+ <li><a href="#transition-page" data-transition="turn">turn</a></li>
+ <li><a href="#transition-page" data-transition="flow">flow</a></li>
+ <li><a href="#transition-page" data-transition="slidefade">slidefade</a></li>
+ <li><a href="#transition-page" data-transition="slide">slide</a></li>
+ <li><a href="#transition-page" data-transition="slideup">slideup</a></li>
+ <li><a href="#transition-page" data-transition="slidedown">slidedown</a></li>
+ <li><a href="#transition-page" data-transition="none">none</a></li>
</ul>
</div><!-- /content -->
<div data-role="footer" data-add-back-btn="true">
</div>
</div> <!-- /page -->
+<div data-role="page" data-add-back-btn="true" id="transition-page">
+ <div data-role="header" data-position="fixed">
+ <h1>Sample</h1>
+ </div>
+ <div data-role="content">
+ <div data-role="gallery" data-vertical-align="middle">
+ <img src="../../widgets/test/05.jpg">
+ </div>
+ </div> <!-- /content -->
+ <div data-role="footer">
+ </div>
+</div> <!-- /page -->
+</body>
+</html>
<!DOCTYPE html>
+<html>
+<head>
+ <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8" >
+ <script src="../../tizen-web-ui-fw/latest/js/jquery.min.js"></script>
+ <script src="../../configure.js"></script>
+ <script src="../../tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>
+ <script src="../../tizen-web-ui-fw/latest/js/tizen-web-ui-fw.min.js"
+ data-framework-theme="tizen-white"
+ data-framework-viewport-width="device-width">
+ </script>
+ <script src="../../main.js"></script>
+ <link rel="stylesheet" href="../../custom.css" />
+ <title>Tizen UI - Pinch event</title>
+ <!-- for compatibility test -->
+ <meta name="apple-mobile-web-app-capable" content="yes" />
+ <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+ <link rel="apple-touch-icon" href="../../icon-tizen.png" />
+</head>
+<body>
<div data-role="page" data-add-back-btn="true" id="pinch_page">
<div data-role="header" data-position="fixed">
<h1>Pinch Event</h1>
</div> <!-- /content -->
<div data-role="footer">
</div>
+ <script src="pinch.js"></script>
</div> <!-- /page -->
+</body>
+</html>
\ No newline at end of file
-$( document ).bind( "pagecreate", function () {
- $("#pinch_page").bind( "pageshow", function () {
- var last_ratio = 1,
- current_ratio;
+$( document ).one( "pageshow", "#pinch_page", function () {
+ var last_ratio = 1,
+ current_ratio;
- function get_ratio ( ratio ) {
- var v = last_ratio + ratio - 1;
+ function get_ratio ( ratio ) {
+ var v = last_ratio + ratio - 1;
- if ( v < $.mobile.pinch.min ) {
- v = $.mobile.pinch.min;
- } else if ( v > $.mobile.pinch.max ) {
- v = $.mobile.pinch.max;
- }
-
- return v;
+ if ( v < $.mobile.pinch.min ) {
+ v = $.mobile.pinch.min;
+ } else if ( v > $.mobile.pinch.max ) {
+ v = $.mobile.pinch.max;
}
- $("#pinch_demo").bind( "pinch", function ( e, p ) {
- var ratio;
+ return v;
+ }
- ratio = get_ratio( p.ratio );
+ $("#pinch_demo").on( "pinch", function ( e, p ) {
+ var ratio;
- if ( current_ratio == ratio ) {
- return;
- }
+ ratio = get_ratio( p.ratio );
- current_ratio = ratio;
+ if ( current_ratio == ratio ) {
+ return;
+ }
- $("#pinch_demo").find("img")
- .css({
- "-webkit-transform": "scale(" + current_ratio + ")",
- "-webkit-transition": "-webkit-transform 0.15s ease"
- });
- });
+ current_ratio = ratio;
- $("#pinch_demo").bind( "pinchstart", function ( e, p ) {
- });
+ $("#pinch_demo").find("img")
+ .css({
+ "-webkit-transform": "scale(" + current_ratio + ")",
+ "-webkit-transition": "-webkit-transform 0.15s ease"
+ });
+ });
- $("#pinch_demo").bind( "pinchend", function ( e, p ) {
- last_ratio = get_ratio( p.ratio );
- });
+ $("#pinch_demo").on( "pinchstart", function ( e, p ) {
});
- $("#pinch_page").bind( "pagebeforehide", function () {
- $("#pinch_demo").unbind("pinch")
- .unbind("pinchstart")
- .unbind("pinchend");
+ $("#pinch_demo").on( "pinchend", function ( e, p ) {
+ last_ratio = get_ratio( p.ratio );
});
});
+<!DOCTYPE html>
+<html>
+<head>
+ <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8" >
+ <script src="../../tizen-web-ui-fw/latest/js/jquery.min.js"></script>
+ <script src="../../configure.js"></script>
+ <script src="../../tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>
+ <script src="../../tizen-web-ui-fw/latest/js/tizen-web-ui-fw.min.js"
+ data-framework-theme="tizen-white"
+ data-framework-viewport-width="device-width">
+ </script>
+ <script src="../../main.js"></script>
+ <link rel="stylesheet" href="../../custom.css" />
+ <title>Tizen UI - Two line text sample</title>
+ <!-- for compatibility test -->
+ <meta name="apple-mobile-web-app-capable" content="yes" />
+ <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+ <link rel="apple-touch-icon" href="../../icon-tizen.png" />
+</head>
+<body>
<div data-role="page" data-add-back-btn="true" id="twolinesample">
<div data-role="header" data-position="fixed">
<h1>Two line text sample</h1>
<label for="segment862">Short button</label>
<input type="radio" name="radio-view-9" data-icon="segment-titlestyle-segonly" id="segment863" value="off" />
<label id="textposition" for="segment863">This button is long<br>please type 2line</label>
- </fieldset> <br>
+ </fieldset><br>
<p> to make text in button, 2 line
<p> Simple making step is ...<br>
<div>
</div>
<div data-role="footer">
</div>
-</div>
\ No newline at end of file
+ <script src="two-line-text.js"></script>
+</div>
+</body>
+</html>
\ No newline at end of file
-$( document ).bind( "pagebeforeshow", function( e ) {
- if( $( "#textposition" ).length ) {
- $( "#textposition .ui-btn-text" ).css( "font-size", "12px" );
- $( "#textposition" ).find( "span" ).css( "line-height", "10px" );
- $( "#textposition" ).find( "span" ).css("padding-top", "2px");
- $( "#textposition" ).find( "span" ).css("padding-bottom", "2px");
- }
+$( document ).one( "pagebeforeshow", "#twolinesample", function ( e ) {
+ $( "#textposition .ui-btn-text" ).css( "font-size", "12px" );
+ $( "#textposition" ).find( "span" ).css( {
+ "line-height": "10px" ,
+ "padding-top": "2px",
+ "padding-bottom": "2px"
+ });
});
projects / framework / web / web-ui-fw.git / commitdiff