--- /dev/null
+$( document ).bind( "mobileinit", function() {
+ $.support.scrollview = true;
+});
--- /dev/null
+<!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.js"></script>
+ <script src="tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
+ data-framework-theme="tizen-white"
+ data-framework-viewport-width="device-width">
+
+ </script>
+ <script src="main.js"></script>
+ <script src="webappInit.js"></script>
+
+ <title>TIZEN UI</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="main" data-add-back-btn="true">
+ <div data-role="header" data-position="fixed">
+ <h1>TIZEN WEB UI</h1>
+ </div>
+ <div data-role="content">
+ <ul data-role="listview">
+ <li><a href="#case1">Case 1</a></li>
+ <li><a href="#case2">Case 2</a></li>
+ <li><a href="#case3">Case 3</a></li>
+ </ul>
+ </div>
+
+ <div data-role="footer" class="use-hwkey">
+ <a href="#menu" data-role="button" data-icon="naviframe-more" data-rel="popup"></a>
+ <div id="menu" data-role="popup" class="use-hwkey-popup">
+ <ul data-role="listview">
+ <li><a href="#" data-rel="back">Settings</a></li>
+ <li><a href="#" data-rel="back">Add to contact</a></li>
+ <li><a href="#" data-rel="back">Call log</a></li>
+ <li><a href="#" data-rel="back">Music</a></li>
+ </ul>
+ </div>
+ </div>
+ </div>
+
+
+ <div data-role="page" id="case1" data-add-back-btn="true">
+ <div data-role="header" data-position="fixed">
+ <h1>Case 1</h1>
+ </div>
+ <div data-role="content">
+ <p>Case 1 : Footer has BackKey/MoreKey/Button</p>
+ </div>
+
+ <div data-role="footer" class="use-hwkey">
+ <a href="#menu1" data-role="button" data-icon="naviframe-more" data-rel="popup"></a>
+ <div id="menu1" data-role="popup" class="use-hwkey-popup">
+ <ul data-role="listview">
+ <li><a href="#" data-rel="back">Settings</a></li>
+ <li><a href="#" data-rel="back">Add to contact</a></li>
+ <li><a href="#" data-rel="back">Call log</a></li>
+ <li><a href="#" data-rel="back">Music</a></li>
+ </ul>
+ </div>
+ <a href="#" data-role="button">BACK</a>
+ <a href="#" data-role="button">NEXT</a>
+ </div>
+ </div>
+
+
+ <div data-role="page" id="case2" data-add-back-btn="true">
+ <div data-role="header" data-position="fixed">
+ <h1>Case 2</h1>
+ </div>
+ <div data-role="content">
+ <p>Case 2 : Footer has BackKey/MoreKey</p>
+ </div>
+
+ <div data-role="footer" class="use-hwkey">
+ <a href="#menu2" data-role="button" data-icon="naviframe-more" data-rel="popup"></a>
+ <div id="menu2" data-role="popup" >
+ <ul data-role="listview">
+ <li><a href="#" data-rel="back">Settings</a></li>
+ <li><a href="#" data-rel="back">Add to contact</a></li>
+ <li><a href="#" data-rel="back">Call log</a></li>
+ <li><a href="#" data-rel="back">Music</a></li>
+ </ul>
+ </div>
+ </div>
+ </div>
+</body>
+</html>
--- /dev/null
+$( document ).on( "pageinit", function () {
+ $.mobile.tizen.enableSelection( $("div:jqmData(role='page')"), 'none' );
+});
--- /dev/null
+<!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>
+ <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>
+ <div data-role="content" >
+ <h1>Loading custom globalize culture file</h1>
+ <p style="word-wrap:break-word;">A predefined Globalize culture file is loaded by the loader in Tizen Web UI Framework, according to the current language. If you want to load additional culture file, you can create each culture files, and let to choose one of them to load it by using $.tizen.util.loadCustomGlobalizeCulture() API.</p>
+ <hr>
+ </div>
+ <div data-role="footer">
+ </div>
+ <script src="custom-globalize-culture.js"></script>
+</div>
+</body>
+</html>
--- /dev/null
+$( document ).one( "pagecreate", "#page-tips-custom-globalize-culture", function () {
+ var customCultureFiles = {
+ "en" : "en.js",
+ "en-US" : "en.js",
+ "fr" : "fr.js"
+ },
+ lang,
+ content = $( '#page-tips-custom-globalize-culture > :jqmData(role="content")' );
+
+ $.tizen.loadCustomGlobalizeCulture( customCultureFiles );
+
+ lang = Globalize.culture( ).name;
+ content.append( $( '<div></div>' )
+ .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] )
+ );
+ content.trigger( "refresh" );
+});
--- /dev/null
+( function ( ) {
+
+ var cultureInfo = {
+ messages: {
+ "hello" : "hello",
+ "translate" : "translate"
+ }
+ },
+ supportLang = [ "en", "en-US" ],
+ i, lang;
+
+ for ( i in supportLang ) {
+ lang = supportLang[ i ];
+ Globalize.addCultureInfo( lang, cultureInfo );
+ }
+
+} ) ( );
--- /dev/null
+( function ( ) {
+
+ Globalize.addCultureInfo( "fr", {
+ messages: {
+ "hello" : "bonjour",
+ "translate" : "traduire"
+ }
+ } );
+
+} ) ( );
--- /dev/null
+<!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>
+ <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 data-role="content">
+ <article>
+ <div>Example #1 Trigger Create</div>
+ <div>Trigger Create after append element on HTML.</div>
+ <div>
+ <p style="padding:1em; background-color:whitesmoke; color:black;
+ border-width:3px; border-style:inset">
+ $( "#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>
+ </fieldset>
+ </article>
+ <article>
+ <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.
+ Call buttonMarkup() or trigger "create" to the parent of button.
+ </div>
+ <div>
+ <p style="padding:1em; background-color:whitesmoke; color:black;
+ border-width:3px; border-style:inset">
+ /* 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>
+ </div>
+
+ <div id="buttonItems">
+ </div>
+
+ <fieldset class="ui-grid-b">
+ <div data-role="controlgroup" data-type="horizontal">
+ <div id="ButtonAdd" data-role="button" data-icon="plus" >Add new Button item</div>
+ </div>
+ </fieldset>
+ </article>
+ <article>
+ <div>Example #3 Append Listview on JQM.</div>
+ <div>
+ To add new <LI> element on JQM listview, insert items and call "refresh" to the listview.<br>
+ </div>
+ <div>
+ <p style="padding:1em; background-color:whitesmoke; color:black;
+ border-width:3px; border-style:inset">
+ var listTemplate = "<li>Appended New Item</li>";<br>
+ $( "#listview" ).append( listTemplate ).listview( "refresh");<br>
+ </p>
+ </div>
+
+ <ul id="listview" data-role="listview">
+ <li>Test</li>
+ <li>Test</li>
+ <li>Test</li>
+ </ul>
+
+ <fieldset class="ui-grid-b">
+ <div data-role="controlgroup" data-type="horizontal">
+ <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>
--- /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();
+ return false;
+ } );
+
+ $( "#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" );
+ return false;
+ /* Same works */
+ /*$("#buttonItems").trigger("create");*/
+ } );
+
+ $( "#ListAdd" ).on( "vclick", function () {
+ var listTemplate = "<li>Appended New Item</li>";
+ $( "#listview" ).append( listTemplate ).listview( "refresh");
+ return false;
+ } );
+});
--- /dev/null
+<!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>
+ <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">
+ <style>
+ #new .ui-btn-text {
+ font-size : 12px;
+ }
+ #new span {
+ line-height : 8px;
+ padding-top : 2px;
+ padding-bottom : 2px;
+ }
+ </style>
+ <div data-role="header" data-position="fixed">
+ <h1>SINGLE-PAGE APPLICATION </h1>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <ul data-role="listview" id="mylist">
+ </ul>
+ </div><!-- /content -->
+
+ <div data-role="footer" data-position="fixed">
+ <div data-role="tabbar">
+ <ul>
+ <li id="add"><a>+1</a></li>
+ <li id="add2"><a>+20</a></li>
+ <li id="new"><a>reset &<br> create +3</a></li>
+ </ul>
+ </div>
+ </div><!-- /footer -->
+ <script src="list-sample.js"></script>
+</div><!-- /page -->
+</body>
+</html>
--- /dev/null
+$( 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>';
+
+ id++;
+
+ $("#mylist").append( li ).trigger("create");
+ };
+
+ $("#add").on( "vclick", function ( e ) {
+ add_item();
+ $("#mylist").listview("refresh");
+ });
+
+ $("#add2").on( "vclick", function ( e ) {
+ var i;
+
+ for ( i = 0; i < 20; i++ ) {
+ add_item();
+ }
+
+ $("#mylist").listview("refresh");
+ });
+
+ $("#new").on( "vclick", function ( e ) {
+ var i;
+
+ $("#mylist").html("").trigger("create");
+
+ for ( i = 0; i < 3; i++ ) {
+ add_item();
+ }
+ $("#mylist").listview("refresh");
+ });
+
+ $("#mylist").on( "vclick", ".ui-btn", function ( e ) {
+ $( "#li" + this.id ).remove();
+ $("#mylist").listview("refresh");
+ });
+});
--- /dev/null
+<!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>
+ <title>Locale Information</title>
+
+ <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="localepage" data-add-back-btn="true">
+ <div data-role="header" data-position="fixed">
+ <h1>LOCALE INFORMATION</h1>
+ </div>
+
+ <div data-role="content">
+ <p style="color: blue">Current Language:</p>
+ <p id="current_language"></p><br>
+ <p style="color: blue">Current Time:</p>
+ <p id="current_date"></p><br>
+ <p style="color: blue">Page FontSize:</p>
+ <p id="html_font_size"></p>
+ </div>
+
+ <div data-role="footer">
+ </div>
+ <script src="localeinfo.js"></script>
+ </div>
+</body>
+</html>
--- /dev/null
+$("#localepage").ready(function() {
+ // add current datetime with browser language format
+ // NOTE: Globalize.* functions must be run after docoument ready.
+ $('#current_language').html( Globalize.culture().name );
+ $('#current_date').html( Globalize.format( new Date(), "F" ) );
+ $('#html_font_size').html( 'html font size:' + $('html').css('font-size') );
+});
--- /dev/null
+<html>
+ <head></head>
+ <body>
+ <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>
--- /dev/null
+<!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>
+ <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>
+ </ul>
+ </div><!-- /content -->
+ <div data-role="footer" data-add-back-btn="true">
+ </div>
+</div> <!-- /page -->
+</body>
+</html>
--- /dev/null
+<!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>
+ <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>
+ <div data-role="content">
+ <div data-role="gallery" data-vertical-align="middle" id="pinch_demo">
+ <img src="./test.jpg">
+ </div>
+ </div> <!-- /content -->
+ <div data-role="footer">
+ </div>
+ <script src="pinch.js"></script>
+</div> <!-- /page -->
+</body>
+</html>
--- /dev/null
+$( document ).one( "pageshow", "#pinch_page", function () {
+ var last_ratio = 1,
+ current_ratio;
+
+ 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;
+ }
+
+ $("#pinch_demo").on( "pinch", function ( e, p ) {
+ var ratio;
+
+ ratio = get_ratio( p.ratio );
+
+ if ( current_ratio == ratio ) {
+ return;
+ }
+
+ current_ratio = ratio;
+
+ $("#pinch_demo").find("img")
+ .css({
+ "-webkit-transform": "scale(" + current_ratio + ")",
+ "-webkit-transition": "-webkit-transform 0.15s ease"
+ });
+ });
+
+ $("#pinch_demo").on( "pinchstart", function ( e, p ) {
+ });
+
+ $("#pinch_demo").on( "pinchend", function ( e, p ) {
+ last_ratio = get_ratio( p.ratio );
+ });
+});
--- /dev/null
+<!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>
+ <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>
+ </div><!-- /header -->
+
+ <div data-role="content">
+ <p> short button or long text button</p>
+ <p> do not need to control width. because button control text width in case content area<p>
+ <div data-role="button" data-inline="true">Text Button</div><br>
+ <div data-role="button" data-inline="true">Long Text Button Test</div>
+ <br>
+ <p> but some case, for example width fixed area or narrow width<br>
+ browser change text to ellipsis </p>
+ <fieldset data-role="controlgroup" data-type="horizontal">
+ <input type="radio" name="radio-view-9" data-icon="segment-titlestyle-segonly" id="segment861" value="on" checked="checked" />
+ <label for="segment861">List</label>
+ <input type="radio" name="radio-view-9" data-icon="segment-titlestyle-segonly" id="segment862" value="off" />
+ <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>
+ <p> to make text in button, 2 line
+ <p> Simple making step is ...<br>
+ <div>
+ <p style="margin-right:0.5em; padding:1em; font-size:0.7em; background-color:whitesmoke; color:black; border-width:3px; border-style:inset">
+ 1. first insert <br> tag between text.<br><br>
+ 2. then set fontsize to see text in small area.<br>
+ var $elTxt = $( "#textposition" );<br>
+ $elTxt.find( ".ui-btn-text" ).css("font-size", "12px");<br><br>
+ 3. if element attribute or inner attributes has padding-top/bottom,
+ control this value because this value hide some text top/bottom.<br>
+ $elTxt.find("span").css("padding-top", "2px");<br><br>
+ 4. last control height between line text using line-height.<br>
+ $elTxt.find("span").css("line-height", "10px");<br>
+ </p>
+ </div><br>
+ </div>
+ <div data-role="footer">
+ </div>
+ <script src="two-line-text.js"></script>
+</div>
+</body>
+</html>
--- /dev/null
+$( 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"
+ });
+});
--- /dev/null
+../../build/tizen-web-ui-fw
\ No newline at end of file
--- /dev/null
+$(document).on( "pageinit", "#main" , function () {
+ if ( window.tizen && window.tizen.application ) {
+ $( "#main .ui-btn-back" ).on( "vclick", function () {
+ window.tizen.application.getCurrentApplication().exit();
+ return false;
+ });
+ }
+});
+
+$(document).ready( function () {
+ // add current datetime with browser language format
+ // NOTE: Globalize.* functions must be run after docoument ready.
+ $('#current_date').html(Globalize.culture().name + " -- " +
+ Globalize.format( new Date(), "F" ));
+ $('#html_font_size').html('html font size:' + $('html').css('font-size'));
+});
// Store back-button, to show again
self._backBtnQueue = [];
+
+ // HW backkey
+ self._HWkeyPress();
},
/* add minimum fixed css style to bar(header/footer) and content
}
self.setHeaderFooter( thisPage );
self._setContentMinHeight( thisPage );
+ self._setHWKeyLayout( thisPage );
} )
.bind( "webkitAnimationStart animationstart updatelayout", function ( e, data ) {
var thisPage = this;
self._setContentMinHeight( thisPage );
self.updatePagePadding( thisPage );
self._updateHeaderArea( thisPage );
+
if ( o.updatePagePadding ) {
$( window ).bind( "throttledresize." + self.widgetName, function () {
self.updatePagePadding(thisPage);
});
},
+ _HWkeyPress: function () {
+ // if HW key not exist
+ // return true
+ // else
+ $( window ).on( "keydown", function ( e ) {
+ console.log(e.keyCode);
+ console.log(e.charCode);
+
+ // temp keycode enter
+ if ( e.keyCode == 166 ) {
+ // need to change back button
+ $( ".ui-page-active .ui-footer .ui-btn-back" ).trigger( "click" );
+
+ } else if ( e.keyCode == 0 ) { //temp keycode 1
+ // need to change more key trigger
+ $( ".ui-page-active .use-hwkey-popup").popup( "open" );
+ }
+ return false;
+ });
+
+ },
+
_setContentMinHeight : function ( thisPage ) {
var $elPage = $( thisPage ),
$elHeader = $elPage.find( ":jqmData(role='header')" ),
/* add half width for default space between text and button, and img tag area is too narrow, so multiply three for img width*/
},
+ _setHWKeyLayout : function ( thisPage ) {
+ var $elPage = $( thisPage ),
+ $elFooter = $elPage.find( ":jqmData(role='footer')" ),
+ $elBackKey = $elFooter.children( ".ui-btn-back" ),
+ $elMoreKey = $elFooter.children(":jqmData(icon='naviframe-more')");
+
+ // Check HW Key option
+ if ( !$elFooter.hasClass("use-hwkey") ) {
+ return true;
+ }
+
+ // need to add device api to check HW key exist
+ // Case 1 : footer - BackKey/MoreKey/Button - hide BackKey/MoreKey
+ if ( $elFooter.children().length - $elBackKey.length - $elMoreKey.length > 0 ) {
+ $elBackKey.hide();
+ $elMoreKey.hide();
+
+ // Case 2 : footer - BackKey/MoreKey - hide footer
+ } else {
+ $elFooter.hide();
+ }
+
+ // Case 3 : no footer - do nothing
+
+
+
+ },
+
+
_visible: true,
// This will set the content element's top or bottom padding equal to the toolbar's height
projects / framework / web / web-ui-fw.git / commitdiff
