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 $("#checkHideInput").bind("change", function (e) {
18 $("#colorpickerbutton").colorpickerbutton("option", "hideInput", $("#checkHideInput").is(":checked"));
21 $('#scroller-demo').bind('pageshow', function ( e ) {
22 $page = $( e.target );
24 * many options cannot be set without subclassing since they're
25 * used in the _create method - it seems as if these are for
26 * internal use only and scrollDuration is only changable by
29 var $scroller2List = $('#scroller2').find('ul');
30 $scroller2List.scrollview( 'option','scrollDuration','10000' );
32 // only works by manipulating css
33 // the only other way is to use attribute 'scroll-method="scroll"' in html
34 $('#scroller2 .ui-scrollbar').css( 'visibility','hidden' );
37 * make toggle button switch scroll bars on and off
39 var scrollBarVisible = $('#scroller2').find('.ui-scrollbar').css('visibility') === "visible";
41 var $toggleScrollBars = $('#toggleScrollBars');
42 $toggleScrollBars.attr( "checked", scrollBarVisible ).checkboxradio("refresh");
44 /* the 'label' is the thing that is clicked, not the input element */
45 var $label = $toggleScrollBars.siblings('label').attr( 'for', '#toggleScrollBars' );
46 $label.bind("click", function () {
47 var $scrollBar = $('#scroller2').find('.ui-scrollbar');
48 var scrollBarVisible = $scrollBar.css('visibility') === "visible";
49 var newVisibility = scrollBarVisible ? "hidden" : "visible";
50 $scrollBar.css( 'visibility', scrollBarVisible ? "hidden" : "visible" );
54 $("#demo-date").bind("date-changed", function ( e, newDate ) {
55 $("#selected-date1").text( newDate.toString() );
58 $("#demo-date2").bind("date-changed", function ( e, newDate ) {
59 $("#selected-date2").text( newDate.toString() );
62 $("#demo-date3").bind("date-changed", function ( e, newDate ) {
63 $("#selected-date3").text( newDate.toString() );
66 $("#demo-date4").bind("date-changed", function ( e, newDate ) {
67 $("#selected-date4").text( newDate.toString() );
70 $('#notification-demo').bind('vmouseup', function ( e ) {
71 $('#notification').notification('show');
74 $('#notification-demo').bind('tapped', function ( e, m ) {
76 alert('notification is tapped\nparameter:"' + m + '"');
79 $('#imageslider-add').bind('vmouseup', function ( e ) {
80 $('#imageslider').imageslider('add', './test/10.jpg');
81 $('#imageslider').imageslider('add', './test/11.jpg');
82 $('#imageslider').imageslider('refresh');
85 $('#imageslider-del').bind('vmouseup', function ( e ) {
86 $('#imageslider').imageslider('del');
89 $('#selectioninfo-demo').bind('vmouseup', function ( e ) {
90 $('#smallpopup_selectioninfo').attr("data-text1",
91 $("#dayselector1").find(".ui-checkbox-on").length + " items are selected");
92 $('#smallpopup_selectioninfo').notification('show');
95 $('#groupindex-demo').bind('pageshow', function () {
96 $('#groupindex').scrolllistview();
99 $("#showVolumeButton").bind("vclick", function ( e ) {
100 $("#myVolumeControl").volumecontrol("open");
103 $("#volumecontrol_setBasicTone").bind("change", function ( e ) {
104 var basicTone = !($("#volumecontrol_setBasicTone").next('label')
105 .find(".ui-icon").hasClass("ui-icon-checkbox-on"));
108 $("#myVolumeControl").volumecontrol( "option", "basicTone", true );
109 $("#myVolumeControl").volumecontrol( "option", "title", "Basic Tone" );
111 $("#myVolumeControl").volumecontrol( "option", "basicTone", false );
112 $("#myVolumeControl").volumecontrol( "option", "title", "Volume" );
116 $("#myoptionheader").bind('collapse', function () {
117 console.log('option header was collapsed');
120 $("#myoptionheader").bind('expand', function () {
121 console.log('option header was expanded');
124 //day-selector codes...
125 $("#day-selector-check-all").live('vclick', function () {
126 $("#dayselector1").dayselector('selectAll');
129 $("#day-selector-get-days").live('vclick', function () {
130 var valuesStr = $("#dayselector1").dayselector('value').join(', ');
131 $(".selectedDay").text( valuesStr );
134 /* Gen list : Dummy DB load */
135 $(".virtuallist_demo_page").live("pagecreate", function () {
136 /* ?_=ts code for no cache mechanism */
137 $.getScript( "./virtuallist-db-demo.js", function ( data, textStatus ) {
138 $("ul").filter( function () {
139 return $( this ).data("role") == "virtuallistview";
140 }).addClass("vlLoadSuccess");
142 $(".virtuallist_demo_page").die();
143 $("ul.ui-virtual-list-container").virtuallistview("create");
147 /*Expandable list : Dummy DB load*/
148 $("#genlist_extendable_page").live("pagecreate", function () {
149 /*?_=ts code for no cache mechanism*/
150 $.getScript( "./virtuallist-db-demo.js", function ( data, textStatus ) {
151 $("ul").filter( function () {
152 return $( this ).data("role") == "extendablelist";
153 }).addClass("elLoadSuccess");
155 $("#genlist-extendable-page").die();
156 $("ul.ui-extendable-list-container").extendablelist("create");
160 /* Color widget demo */
161 var clrWidgetsAreInit = false;
162 $("#colorwidgets-demo").bind("pageshow", function () {
163 if ( clrWidgetsAreInit ) {
167 $("#colorpicker").bind("colorchanged", function ( e, clr ) {
168 $("#colorpickerbutton").colorpickerbutton( "option", "color", clr );
169 $("#colorpickerbutton-noform").colorpickerbutton( "option", "color", clr );
170 $("#hsvpicker").hsvpicker( "option", "color", clr );
171 $("#colortitle").colortitle( "option", "color", clr );
172 $("#colorpalette").colorpalette( "option", "color", clr );
175 $("#colorpickerbutton").bind("colorchanged", function ( e, clr ) {
176 $("#colorpicker").colorpicker( "option", "color", clr );
177 $("#colorpickerbutton-noform").colorpickerbutton( "option", "color", clr );
178 $("#hsvpicker").hsvpicker( "option", "color", clr );
179 $("#colortitle").colortitle( "option", "color", clr );
180 $("#colorpalette").colorpalette( "option", "color", clr );
183 $("#colorpickerbutton-noform").bind("colorchanged", function ( e, clr ) {
184 $("#colorpicker").colorpicker( "option", "color", clr );
185 $("#colorpickerbutton").colorpickerbutton( "option", "color", clr );
186 $("#hsvpicker").hsvpicker( "option", "color", clr );
187 $("#colortitle").colortitle( "option", "color", clr );
188 $("#colorpalette").colorpalette( "option", "color", clr );
191 $("#hsvpicker").bind("colorchanged", function ( e, clr ) {
192 $("#colorpicker").colorpicker( "option", "color", clr );
193 $("#colorpickerbutton").colorpickerbutton( "option", "color", clr );
194 $("#colorpickerbutton-noform").colorpickerbutton( "option", "color", clr );
195 $("#colortitle").colortitle( "option", "color", clr );
196 $("#colorpalette").colorpalette( "option", "color", clr );
199 $("#colortitle").bind("colorchanged", function ( e, clr ) {
200 $("#colorpicker").colorpicker( "option", "color", clr );
201 $("#colorpickerbutton").colorpickerbutton( "option", "color", clr );
202 $("#colorpickerbutton-noform").colorpickerbutton( "option", "color", clr );
203 $("#hsvpicker").hsvpicker( "option", "color", clr );
204 $("#colorpalette").colorpalette( "option", "color", clr );
207 $("#colorpalette").bind("colorchanged", function ( e, clr ) {
208 $("#colorpicker").colorpicker( "option", "color", clr );
209 $("#colorpickerbutton").colorpickerbutton( "option", "color", clr );
210 $("#colorpickerbutton-noform").colorpickerbutton( "option", "color", clr );
211 $("#hsvpicker").hsvpicker( "option", "color", clr );
212 $("#colortitle").colortitle( "option", "color", clr );
215 $("#colorpalette").colorpalette("option", "color", "#45cc98");
217 clrWidgetsAreInit = true;
221 $(document).ready( function () {
222 // add current datetime with browser language format
223 // NOTE: Globalize.* functions must be run after docoument ready.
224 $('#current_date').html(Globalize.culture().name + " -- " +
225 Globalize.format( new Date(), "F" ));
226 $('#html_font_size').html('html font size:' + $('html').css('font-size'));