Moved checkbox, radio, progressbar.
Change-Id: I79916fdc6a19900333e9be85d3440d06db856c90
</div>
</div>
- <script src="widgets/checkbox/checkbox.js"></script>
- <script src="widgets/radio/radio.js"></script>
- <script src="widgets/progressbar.js"></script>
<script src="widgets/ctxpopup.js"></script>
<script src="widgets/popupwindow/popupwindow.js"></script>
<script src="tips/generate-elements-dynamically.js"></script>
<!DOCTYPE html>
<html>
-<head>
-</head>
-<body>
+ <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" />
-<div data-role="page" id="checkbox-demo" data-add-back-btn="true">
+ <title>Tizen UI - Checkbox</title>
- <div data-role="header" data-position="fixed">
- <h1>Check</h1>
- </div>
-
- <div data-role="content">
- <div class="content-primary">
- <div class="my-check-button-style"><a id="check-1" data-role="button" data-inline="true">Check/UnCheck</a></div>
- <div class="my-check-button-style my-check-inline-style"><a id="get-check-value" data-role="button" data-inline="true">Get Check Value</a></div>
- <p>First checkbox check value :
- <span class="checked-value">
- <em>(click the button! )</em>
- </span>
- </p>
- <hr/>
-
- <p> Trigged When user clicks a checkbox :
- <span class="triggered-check">
- <em>(This is updated when user clicks a checkbox )</em>
- </span>
- </p>
-
- <hr/>
-
- <fieldset data-role="controlgroup">
- <input type="checkbox" name="checkbox-1" id="checkbox-1"/>
- <label for="checkbox-1">Normal</label>
- <input type="checkbox" name="checkbox-2" id="checkbox-2" checked="checked" disabled="true"/>
- <label for="checkbox-2">Checked, Disabled</label>
- <input type="checkbox" name="checkbox-3" id="checkbox-3" disabled="true"/>
- <label for="checkbox-3">Disabled</label>
-
- <input type="checkbox" name="checkbox-4" id="checkbox-4" class="favorite"/>
- <label for="checkbox-4">Favorite</label>
- <input type="checkbox" name="checkbox-5" id="checkbox-5" checked="checked" disabled="true" class="favorite"/>
- <label for="checkbox-5">Favorite Checked, Disabled</label>
- <input type="checkbox" name="checkbox-6" id="checkbox-6" disabled="disabled" class="favorite"/>
- <label for="checkbox-6">Favorite, Disabled</label>
- <input type="checkbox" name="checkbox-7" id="checkbox-7"/>
- <input type="checkbox" name="checkbox-8" id="checkbox-8"/>
-
- </fieldset>
- </div><!--/content-primary -->
- </div>
- <div data-role="footer">
- </div>
-</body>
+ <!-- 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="checkbox-demo" data-add-back-btn="true">
+ <div data-role="header" data-position="fixed">
+ <h1>Check</h1>
+ </div>
+ <div data-role="content">
+ <div class="content-primary">
+ <div class="my-check-button-style"><a id="check-1" data-role="button" data-inline="true">Check/UnCheck</a></div>
+ <div class="my-check-button-style my-check-inline-style"><a id="get-check-value" data-role="button" data-inline="true">Get Check Value</a></div>
+ <p>First checkbox check value :
+ <span class="checked-value">
+ <em>(click the button! )</em>
+ </span>
+ </p>
+ <hr/>
+ <p> Trigged When user clicks a checkbox :
+ <span class="triggered-check">
+ <em>(This is updated when user clicks a checkbox )</em>
+ </span>
+ </p>
+ <hr/>
+ <fieldset data-role="controlgroup">
+ <input type="checkbox" name="checkbox-1" id="checkbox-1"/>
+ <label for="checkbox-1">Normal</label>
+ <input type="checkbox" name="checkbox-2" id="checkbox-2" checked="checked" disabled="disabled" />
+ <label for="checkbox-2">Checked, Disabled</label>
+ <input type="checkbox" name="checkbox-3" id="checkbox-3" disabled="disabled" />
+ <label for="checkbox-3">Disabled</label>
+ <input type="checkbox" name="checkbox-4" id="checkbox-4" class="favorite" />
+ <label for="checkbox-4">Favorite</label>
+ <input type="checkbox" name="checkbox-5" id="checkbox-5" checked="checked" disabled="disabled" class="favorite" />
+ <label for="checkbox-5">Favorite Checked, Disabled</label>
+ <input type="checkbox" name="checkbox-6" id="checkbox-6" disabled="disabled" class="favorite" />
+ <label for="checkbox-6">Favorite, Disabled</label>
+ <input type="checkbox" name="checkbox-7" id="checkbox-7" />
+ <input type="checkbox" name="checkbox-8" id="checkbox-8" />
+ </fieldset>
+ </div><!--/content-primary -->
+ </div>
+ <div data-role="footer">
+ </div>
+ <script src="checkbox.js"></script>
+ </div>
+ </body>
</html>
-$( document ).on( "pagecreate", "#checkbox-demo", function () {
- $( "#check-1" ).bind('vclick', function () {
- console.log("clicked...");
- value = $( "#checkbox-1" ).prop( "checked" );
+$( document ).one( "pagecreate", "#checkbox-demo", function () {
+ $( "#check-1" ).on( "vclick", function () {
+ var value = $( "#checkbox-1" ).prop( "checked" );
// change checkbox property and update UI.
$( "#checkbox-1" ).prop( "checked", !value );
$("#checkbox-1").checkboxradio( "refresh" );
$( ".checked-value" ).text( $( "#checkbox-1" ).prop( "checked" ) );
});
- $( "#get-check-value" ).bind('vclick', function () {
+ $( "#get-check-value" ).on( "vclick", function () {
$( ".checked-value" ).text( $( "#checkbox-1" ).prop( "checked" ) );
});
- $("input[type='checkbox']").bind( "change", function(event, ui) {
+ $("input[type='checkbox']").on( "change", function (event, ui) {
$( ".triggered-check" ).text( this.id + " is " + this.checked );
});
-<div data-role="page" id="progressbar-demo" data-add-back-btn="true">
- <div data-role="header" data-position="fixed">
- <h1>Progress bar</h1>
- </div>
- <div data-role="content">
- <ul data-role="listview">
- <li data-role="list-divider">Progress Bar</li>
- <li>When you click progress bar, it starts updating values...</li>
- <li id="progressbarTest" ><div data-role="progressbar" id="progressbar"></div></li>
+<!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" />
- <li data-role="list-divider">Progress Pending</li>
- <li id="pendingTest" ><div data-role="progress" data-style="pending" id="pending"></div></li>
+ <title>Tizen UI - Checkbox</title>
- <li data-role="list-divider">Progress ~ing</li>
- <li id="progressingTest" >
- <div data-role="progress" data-style="circle" id="progressing" style="right:10px"></div>
- Loading..
- </li>
- </ul>
- </div> <!-- /content -->
- <div data-role="footer">
- </div>
-</div> <!-- /page -->
+ <!-- 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="progressbar-demo" data-add-back-btn="true">
+ <div data-role="header" data-position="fixed">
+ <h1>Progress bar</h1>
+ </div>
+ <div data-role="content">
+ <ul data-role="listview">
+ <li data-role="list-divider">Progress Bar</li>
+ <li>When you click progress bar, it starts updating values...</li>
+ <li id="progressbarTest" ><div data-role="progressbar" id="progressbar"></div></li>
+
+ <li data-role="list-divider">Progress Pending</li>
+ <li id="pendingTest" ><div data-role="progress" data-style="pending" id="pending"></div></li>
+
+ <li data-role="list-divider">Progress ~ing</li>
+ <li id="progressingTest" >
+ <div data-role="progress" data-style="circle" id="progressing" style="right:10px"></div>
+ Loading..
+ </li>
+ </ul>
+ </div> <!-- /content -->
+ <div data-role="footer">
+ </div>
+ <script src="progressbar.js"></script>
+ </div> <!-- /page -->
+ </body>
+</html>
-var progressbar_running;
+$(document).one( "pagecreate", "#progressbar-demo", function () {
+ var progressbar_running;
-$( document ).on( "pageshow", "#progressbar-demo", function () {
+ $("#progressbar-demo").on("pageshow", function ( e ) {
- $("#progressbarTest").bind("vclick", function ( e ) {
- progressbar_running = !progressbar_running;
+ $("#progressbarTest").on("vclick", function ( e ) {
+ progressbar_running = !progressbar_running;
- // request animation frame
- window.requestAnimFrame = (function () {
- return window.requestAnimationFrame ||
- window.webkitRequestAnimationFrame ||
- window.mozRequestAnimationFrame ||
- window.oRequestAnimationFrame ||
- window.msRequestAnimationFrame ||
- function (animloop) {
- return window.setTimeout(animloop, 1000 / 60);
- };
- }());
+ // request animation frame
+ window.requestAnimFrame = (function () {
+ return window.requestAnimationFrame ||
+ window.webkitRequestAnimationFrame ||
+ window.mozRequestAnimationFrame ||
+ window.oRequestAnimationFrame ||
+ window.msRequestAnimationFrame ||
+ function (animloop) {
+ return window.setTimeout(animloop, 1000 / 60);
+ };
+ }());
- window.cancelRequestAnimFrame = (function () {
- return window.cancelAnimationFrame ||
- window.webkitCancelRequestAnimationFrame ||
- window.mozCancelRequestAnimationFrame ||
- window.oCancelRequestAnimationFrame ||
- window.msCancelRequestAnimationFrame ||
- clearTimeout;
- }());
+ window.cancelRequestAnimFrame = (function () {
+ return window.cancelAnimationFrame ||
+ window.webkitCancelRequestAnimationFrame ||
+ window.mozCancelRequestAnimationFrame ||
+ window.oCancelRequestAnimationFrame ||
+ window.msCancelRequestAnimationFrame ||
+ clearTimeout;
+ }());
- var request,
- i = 0;
+ var request,
+ i = 0;
- // start and run the animloop
- (function animloop() {
- if ( !progressbar_running ) {
- cancelRequestAnimFrame( request );
- return;
- }
+ // start and run the animloop
+ (function animloop() {
+ if ( !progressbar_running ) {
+ window.cancelRequestAnimFrame( request );
+ return;
+ }
- $("#progressbar").progressbar( "option", "value", i++ );
+ $("#progressbar").progressbar( "option", "value", i++ );
- request = requestAnimFrame( animloop );
+ request = window.requestAnimFrame( animloop );
- if ( i > 100 ) {
- cancelRequestAnimFrame( request );
- }
- }());
- });
+ if ( i > 100 ) {
+ window.cancelRequestAnimFrame( request );
+ }
+ }());
+ });
- $("#pending").progress( "running", true );
- $("#progressing").progress( "running", true );
+ $("#pending").progress( "running", true );
+ $("#progressing").progress( "running", true );
- $("#pendingTest").bind("vclick", function ( e ) {
- var running = $("#pending").progress( "running" );
- // start/stop progressing animation
- $("#pending").progress( "running", !running );
- });
+ $("#pendingTest").on("vclick", function ( e ) {
+ var running = $("#pending").progress( "running" );
+ // start/stop progressing animation
+ $("#pending").progress( "running", !running );
+ });
- $("#progressingTest").bind("vclick", function ( e ) {
- var running = $("#progressing").progress( "running" );
- // start/stop progressing animation
- $("#progressing").progress( "running", !running );
+ $("#progressingTest").on("vclick", function ( e ) {
+ var running = $("#progressing").progress( "running" );
+ // start/stop progressing animation
+ $("#progressing").progress( "running", !running );
- if ( running ) {
- $("#progressing").progress( "hide" );
- }
+ if ( running ) {
+ $("#progressing").progress( "hide" );
+ }
+ });
});
-});
-$( document ).on( "pagehide", "#progressbar-demo", function () {
- progressbar_running = false;
- $("#pending").progress( "running", false );
- $("#progressing").progress( "running", false );
+ $("#progressbar-demo").on("pagehide", function ( e ) {
+ progressbar_running = false;
+ $("#pending").progress( "running", false );
+ $("#progressing").progress( "running", false );
+ });
});
-<div id="radio-demo" data-role="page" data-add-back-btn="true">
-
- <div data-role="header" data-position="fixed">
- <h1>Radio</h1>
-
- </div>
-
- <div data-role="content">
- <div class="content-primary">
- <fieldset data-role="controlgroup">
- <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>
-
- <input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2" />
- <label for="radio-choice-2">Dog</label>
-
- <input type="radio" name="radio-choice" id="radio-choice-3" value="choice-3" />
- <label for="radio-choice-3">Hamster</label>
-
- <input type="radio" name="radio-choice" id="radio-choice-4" value="choice-4" />
- <label for="radio-choice-4">Lizard</label>
- </fieldset>
- <p> Trigged When user clicks a radio button :
- <span class="triggered-radio">
- <em>(This is updated when user clicks a radio button )</em>
- </span>
- </p>
-
- <input type="radio" name="radio-2" id="radio-2" checked="checked" disabled="disabled" />
- <label for="radio-2">Checked, Disabled</label>
- <input type="radio" name="radio-3" id="radio-3" disabled="disabled"/>
- <label for="radio-3">Disabled</label>
- <input type="radio" name="radio-4" id="radio-4"/>
-
- </div><!--/content-primary -->
- </div>
- <div data-role="footer">
- </div>
-</div> <!-- page -->
+<!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 - Radio</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 id="radio-demo" data-role="page" data-add-back-btn="true">
+
+ <div data-role="header" data-position="fixed">
+ <h1>Radio</h1>
+
+ </div>
+
+ <div data-role="content">
+ <div class="content-primary">
+ <fieldset data-role="controlgroup">
+ <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>
+
+ <input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2" />
+ <label for="radio-choice-2">Dog</label>
+
+ <input type="radio" name="radio-choice" id="radio-choice-3" value="choice-3" />
+ <label for="radio-choice-3">Hamster</label>
+
+ <input type="radio" name="radio-choice" id="radio-choice-4" value="choice-4" />
+ <label for="radio-choice-4">Lizard</label>
+ </fieldset>
+ <p> Trigged When user clicks a radio button :
+ <span class="triggered-radio">
+ <em>(This is updated when user clicks a radio button )</em>
+ </span>
+ </p>
+
+ <input type="radio" name="radio-2" id="radio-2" checked="checked" disabled="disabled" />
+ <label for="radio-2">Checked, Disabled</label>
+ <input type="radio" name="radio-3" id="radio-3" disabled="disabled"/>
+ <label for="radio-3">Disabled</label>
+ <input type="radio" name="radio-4" id="radio-4"/>
+
+ </div><!--/content-primary -->
+ </div>
+ <div data-role="footer">
+ </div>
+ <script src="radio.js"></script>
+ </div> <!-- page -->
+ </body>
+</html>
\ No newline at end of file
-$( document ).on( "pagecreate", "#radio-demo", function () {
- $("input[type='radio']").bind( "change", function(event, ui) {
- if( this.checked )
+$( document ).one( "pagecreate", "#radio-demo", function () {
+ $("input[type='radio']").on( "change", function (event, ui) {
+ if ( this.checked ) {
$( ".triggered-radio" ).text( this.id + " is selected..." );
+ }
});
});
projects / platform / framework / web / web-ui-fw.git / commitdiff