From: Przemyslaw Ciezkowski Date: Mon, 11 Mar 2013 09:04:34 +0000 (+0100) Subject: Move subpages javascript files from index.html X-Git-Tag: accepted/tizen_2.1/20130425.023924~7^2~22 X-Git-Url: http://review.tizen.org/git/?a=commitdiff_plain;h=dd2d4dd1c2cc79a52e133f8f225913f6d39cc6b7;p=platform%2Fframework%2Fweb%2Fweb-ui-fw.git Move subpages javascript files from index.html Moved checkbox, radio, progressbar. Change-Id: I79916fdc6a19900333e9be85d3440d06db856c90 --- diff --git a/demos/tizen-winsets/index.html b/demos/tizen-winsets/index.html index 33d0f0a..13ef4c9 100644 --- a/demos/tizen-winsets/index.html +++ b/demos/tizen-winsets/index.html @@ -106,9 +106,6 @@ - - - diff --git a/demos/tizen-winsets/widgets/checkbox/checkbox.html b/demos/tizen-winsets/widgets/checkbox/checkbox.html index e82d64a..a6a6da3 100644 --- a/demos/tizen-winsets/widgets/checkbox/checkbox.html +++ b/demos/tizen-winsets/widgets/checkbox/checkbox.html @@ -1,55 +1,66 @@ - - - + + + + + + + + -
+ Tizen UI - Checkbox -
-

Check

-
- -
-
-
Check/UnCheck
-
Get Check Value
-

First checkbox check value : - - (click the button! ) - -

-
- -

Trigged When user clicks a checkbox : - - (This is updated when user clicks a checkbox ) - -

- -
- -
- - - - - - - - - - - - - - - - -
-
-
-
-
- + + + + + + +
+
+

Check

+
+
+
+
Check/UnCheck
+
Get Check Value
+

First checkbox check value : + + (click the button! ) + +

+
+

Trigged When user clicks a checkbox : + + (This is updated when user clicks a checkbox ) + +

+
+
+ + + + + + + + + + + + + + +
+
+
+
+
+ +
+ diff --git a/demos/tizen-winsets/widgets/checkbox/checkbox.js b/demos/tizen-winsets/widgets/checkbox/checkbox.js index 21277c2..b99ab4c 100644 --- a/demos/tizen-winsets/widgets/checkbox/checkbox.js +++ b/demos/tizen-winsets/widgets/checkbox/checkbox.js @@ -1,7 +1,6 @@ -$( 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" ); @@ -9,11 +8,11 @@ $( document ).on( "pagecreate", "#checkbox-demo", function () { $( ".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 ); }); diff --git a/demos/tizen-winsets/widgets/progressbar.html b/demos/tizen-winsets/widgets/progressbar.html index 8b8777f..1ffd9e8 100644 --- a/demos/tizen-winsets/widgets/progressbar.html +++ b/demos/tizen-winsets/widgets/progressbar.html @@ -1,23 +1,48 @@ -
-
-

Progress bar

-
-
-
    -
  • Progress Bar
    • -
  • When you click progress bar, it starts updating values...
    • -
    • + + + + + + + + + + -
  • Progress Pending
    • -
    • + Tizen UI - Checkbox -
  • Progress ~ing
    • -
  • -
    - Loading.. -
    • -
-
-
-
-
+ + + + + + +
+
+

Progress bar

+
+
+
    +
  • Progress Bar
    • +
  • When you click progress bar, it starts updating values...
    • +
    • + +
  • Progress Pending
    • +
    • + +
  • Progress ~ing
    • +
  • +
    + Loading.. +
    • +
+
+
+
+ +
+ + diff --git a/demos/tizen-winsets/widgets/progressbar.js b/demos/tizen-winsets/widgets/progressbar.js index 89606a0..2e3f6a0 100644 --- a/demos/tizen-winsets/widgets/progressbar.js +++ b/demos/tizen-winsets/widgets/progressbar.js @@ -1,73 +1,75 @@ -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 ); + }); }); diff --git a/demos/tizen-winsets/widgets/radio/radio.html b/demos/tizen-winsets/widgets/radio/radio.html index 88976ae..9a5743e 100644 --- a/demos/tizen-winsets/widgets/radio/radio.html +++ b/demos/tizen-winsets/widgets/radio/radio.html @@ -1,40 +1,63 @@ -
- -
-

Radio

- -
- -
-
-
- Choose a pet: - - - - - - - - - - - -
-

Trigged When user clicks a radio button : - - (This is updated when user clicks a radio button ) - -

- - - - - - - -
-
-
-
-
+ + + + + + + + + + + Tizen UI - Radio + + + + + + +
+ +
+

Radio

+ +
+ +
+
+
+ Choose a pet: + + + + + + + + + + + +
+

Trigged When user clicks a radio button : + + (This is updated when user clicks a radio button ) + +

+ + + + + + + +
+
+
+
+ +
+ + \ No newline at end of file diff --git a/demos/tizen-winsets/widgets/radio/radio.js b/demos/tizen-winsets/widgets/radio/radio.js index e0dc361..3498bae 100644 --- a/demos/tizen-winsets/widgets/radio/radio.js +++ b/demos/tizen-winsets/widgets/radio/radio.js @@ -1,7 +1,8 @@ -$( 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..." ); + } }); });