1 $( document ).bind("pagecreate", function () {
2 /* Color widget demo */
3 $("input[type='checkbox'][data-widget-type-list]").bind("change", function() {
4 var ls = $( this ).attr("data-widget-type-list").split(","),
5 page = $( this ).closest(":jqmData(role='page')"),
6 disabled = $( this ).is(":checked");
8 $.each(ls, function( idx, widgetType ) {
9 var ar = widgetType.split("-");
11 if ( ar.length === 2 ) {
12 page.find(":" + widgetType)[ar[1]]( "option", "disabled", disabled );
17 $('#scroller-demo').bind('pageshow', function ( e ) {
18 $page = $( e.target );
20 * many options cannot be set without subclassing since they're
21 * used in the _create method - it seems as if these are for
22 * internal use only and scrollDuration is only changable by
25 var $scroller2List = $('#scroller2').find('ul');
26 $scroller2List.scrollview( 'option','scrollDuration','10000' );
28 // only works by manipulating css
29 // the only other way is to use attribute 'scroll-method="scroll"' in html
30 $('#scroller2 .ui-scrollbar').css( 'visibility','hidden' );
33 * make toggle button switch scroll bars on and off
35 var scrollBarVisible = $('#scroller2').find('.ui-scrollbar').css('visibility') === "visible";
37 var $toggleScrollBars = $('#toggleScrollBars');
38 $toggleScrollBars.attr( "checked", scrollBarVisible ).checkboxradio("refresh");
40 /* the 'label' is the thing that is clicked, not the input element */
41 var $label = $toggleScrollBars.siblings('label').attr( 'for', '#toggleScrollBars' );
42 $label.bind("click", function () {
43 var $scrollBar = $('#scroller2').find('.ui-scrollbar');
44 var scrollBarVisible = $scrollBar.css('visibility') === "visible";
45 var newVisibility = scrollBarVisible ? "hidden" : "visible";
46 $scrollBar.css( 'visibility', scrollBarVisible ? "hidden" : "visible" );
50 $("#demo-date").bind("date-changed", function ( e, newDate ) {
51 $("#selected-date1").text( newDate.toString() );
54 $("#demo-date2").bind("date-changed", function ( e, newDate ) {
55 $("#selected-date2").text( newDate.toString() );
58 $("#demo-date3").bind("date-changed", function ( e, newDate ) {
59 $("#selected-date3").text( newDate.toString() );
62 $("#demo-date4").bind("date-changed", function ( e, newDate ) {
63 $("#selected-date4").text( newDate.toString() );
66 $('#noti-demo').bind('vmouseup', function ( e ) {
67 $('#notification').notification('open');
70 $('#noti-icon1').bind('vclick', function ( e ) {
71 $('#notification').notification('icon', './test/icon02.png');
74 $('#noti-icon2').bind('vclick', function ( e ) {
75 $('#notification').notification('icon', './test/icon01.png');
78 $('#imageslider-add').bind('vmouseup', function ( e ) {
79 $('#imageslider').imageslider('add', './test/10.jpg');
80 $('#imageslider').imageslider('add', './test/11.jpg');
81 $('#imageslider').imageslider('refresh');
84 $('#imageslider-del').bind('vmouseup', function ( e ) {
85 $('#imageslider').imageslider('remove');
88 $('#selectioninfo-demo').bind('vmouseup', function ( e ) {
89 $('#smallpopup_selectioninfo').notification( "text",
90 $("#dayselector1").find(".ui-checkbox-on").length + " items are selected" );
91 $('#smallpopup_selectioninfo').notification('open');
94 $('#groupindex-demo').bind('pageshow', function () {
95 $('#groupindex').scrolllistview();
98 $("#showVolumeButton").bind("vclick", function ( e ) {
99 $("#myVolumeControl").volumecontrol("open");
102 $("#volumecontrol_setBasicTone").bind("change", function ( e ) {
103 var basicTone = !($("#volumecontrol_setBasicTone").next('label')
104 .find(".ui-icon").hasClass("ui-icon-checkbox-on"));
107 $("#myVolumeControl").volumecontrol( "option", "basicTone", true );
108 $("#myVolumeControl").volumecontrol( "option", "title", "Basic Tone" );
110 $("#myVolumeControl").volumecontrol( "option", "basicTone", false );
111 $("#myVolumeControl").volumecontrol( "option", "title", "Volume" );
115 $("#myoptionheader").bind('collapse', function () {
116 console.log('option header was collapsed');
119 $("#myoptionheader").bind('expand', function () {
120 console.log('option header was expanded');
123 //day-selector codes...
124 $("#day-selector-check-all").live('vclick', function () {
125 $("#dayselector1").dayselector('selectAll');
128 $("#day-selector-get-days").live('vclick', function () {
129 var valuesStr = $("#dayselector1").dayselector('value').join(', ');
130 $(".selectedDay").text( valuesStr );
133 /* Gen list : Dummy DB load */
134 $(".virtuallist_demo_page").live("pagecreate", function () {
135 /* ?_=ts code for no cache mechanism */
136 $.getScript( "./virtuallist-db-demo.js", function ( data, textStatus ) {
137 $("ul").filter( function () {
138 return $( this ).data("role") == "virtuallistview";
139 }).addClass("vlLoadSuccess");
141 $(".virtuallist_demo_page").die();
142 $("ul.ui-virtual-list-container").virtuallistview("create");
146 /*Expandable list : Dummy DB load*/
147 $("#genlist_extendable_page").live("pagecreate", function ( el ) {
148 /*?_=ts code for no cache mechanism*/
149 $.getScript( "./virtuallist-db-demo.js", function ( data, textStatus ) {
150 $("ul").filter( function () {
151 return $( this ).data("role") == "extendablelist";
152 }).addClass("elLoadSuccess");
154 $("#genlist-extendable-page").die();
155 $("ul.ui-extendable-list-container").extendablelist("create");
156 // TODO: 'create' is called twice!!
161 $(document).ready( function () {
162 // add current datetime with browser language format
163 // NOTE: Globalize.* functions must be run after docoument ready.
164 $('#current_date').html(Globalize.culture().name + " -- " +
165 Globalize.format( new Date(), "F" ));
166 $('#html_font_size').html('html font size:' + $('html').css('font-size'));