1 <?xml version="1.0" encoding="utf-8"?> 2 <page> 3 <config delay=""> 4 <stylesheet notifyOnLoad="Toggle1"> 5 ../media/toggles.css 6 </stylesheet> 7 </config> 8 9 10 <!--Object name tags follow initial configuration tags.--> 11 <Toggle1> 12 <htmlText> 13 <![CDATA[ 14 <div id="s3-1" class="button-wrap"> 15 <div class="button-bg"> 16 <div class="button-out">ON</div> 17 <div class="button-in">OFF</div> 18 <div class="button-switch"></div> 19 </div> 20 </div> 21 ]]> 22 </htmlText> 23 <userProperty> 24 <![CDATA[ 25 { prop : 'class', 26 val : 'toggle-sm', 27 get_set : 'set' } 28 ]]> 29 </userProperty> 30 <function name="myclick" event="click" params="e"> 31 <![CDATA[ 32 //NOTE: getElementsByClassName('class') will get elements CONTAINING the class 33 var id = this.getElementsByClassName('button-wrap')[0].id, cn; 34 cn = tbfunction_userProperty(id, 'class', 'button-active', 'toggle'); 35 ]]> 36 </function> 37 <function name="myUser" event="user" params="e"> 38 <![CDATA[ 39 //This object gets the notification on CSS loaded 40 if (/css/i.test(e.data.toString())) { 41 //Get default button positions 42 var objs = tbfunction_getGroupObjects('Toggles', '', false, true); 43 var setOn = '1,3,4,6'; //List of buttons to default ON 44 for (var i = 1; i < objs.length; i++) { 45 if (setOn.indexOf(i) > -1) { 46 //Toggle ON for this object 47 tbfunction_pgTBObjSet(objs[i], 'myclick', ''); 48 } 49 } 50 tbfunction_pgStyleObject('Toggles', 'width, height, background', 51 'auto, auto, transparent'); 52 var h = Math.round(this.offsetHeight / 2); 53 tbfunction_pgStyleObject('Toggles', 'borderRadius', h + 'px'); 54 tbfunction_pgAnimateCSS('Toggles', 'zoomIn', 200, '', '', 550, '', false); 55 } 56 ]]> 57 </function> 58 </Toggle1> 59 60 <Toggle2> 61 <htmlText> 62 <![CDATA[ 63 <div id="s3-2" class="button-wrap"> 64 <div class="button-bg"> 65 <div class="button-out">ON</div> 66 <div class="button-in">OFF</div> 67 <div class="button-switch"></div> 68 </div> 69 </div> 70 ]]> 71 </htmlText> 72 <userProperty> 73 <![CDATA[ 74 { prop : 'class', 75 val : 'toggle-sm', 76 get_set : 'set' } 77 ]]> 78 </userProperty> 79 <function name="myclick" event="click" params="e"> 80 <![CDATA[ 81 //NOTE: getElementsByClassName('class') will get elements CONTAINING the class 82 var id = this.getElementsByClassName('button-wrap')[0].id, cn; 83 cn = tbfunction_userProperty(id, 'class', 'button-active', 'toggle'); 84 ]]> 85 </function> 86 </Toggle2> 87 88 <Toggle3> 89 <htmlText> 90 <![CDATA[ 91 <div id="s3-3" class="button-wrap"> 92 <div class="button-bg"> 93 <div class="button-out">ON</div> 94 <div class="button-in">OFF</div> 95 <div class="button-switch"></div> 96 </div> 97 </div> 98 ]]> 99 </htmlText> 100 <userProperty> 101 <![CDATA[ 102 { prop : 'class', 103 val : 'toggle-sm', 104 get_set : 'set' } 105 ]]> 106 </userProperty> 107 <function name="myclick" event="click" params="e"> 108 <![CDATA[ 109 //NOTE: getElementsByClassName('class') will get elements CONTAINING the class 110 var id = this.getElementsByClassName('button-wrap')[0].id, cn; 111 cn = tbfunction_userProperty(id, 'class', 'button-active', 'toggle'); 112 ]]> 113 </function> 114 </Toggle3> 115 116 <Toggle4> 117 <htmlText> 118 <![CDATA[ 119 <div id="s3-4" class="button-wrap"> 120 <div class="button-bg"> 121 <div class="button-out">ON</div> 122 <div class="button-in">OFF</div> 123 <div class="button-switch"></div> 124 </div> 125 </div> 126 ]]> 127 </htmlText> 128 <userProperty> 129 <![CDATA[ 130 { prop : 'class', 131 val : 'toggle-sm', 132 get_set : 'set' } 133 ]]> 134 </userProperty> 135 <function name="myclick" event="click" params="e"> 136 <![CDATA[ 137 //NOTE: getElementsByClassName('class') will get elements CONTAINING the class 138 var id = this.getElementsByClassName('button-wrap')[0].id, cn; 139 cn = tbfunction_userProperty(id, 'class', 'button-active', 'toggle'); 140 ]]> 141 </function> 142 </Toggle4> 143 144 <Toggle5> 145 <htmlText> 146 <![CDATA[ 147 <div id="s3-5" class="button-wrap"> 148 <div class="button-bg"> 149 <div class="button-out">ON</div> 150 <div class="button-in">OFF</div> 151 <div class="button-switch"></div> 152 </div> 153 </div> 154 ]]> 155 </htmlText> 156 <userProperty> 157 <![CDATA[ 158 { prop : 'class', 159 val : 'toggle-sm', 160 get_set : 'set' } 161 ]]> 162 </userProperty> 163 <function name="myclick" event="click" params="e"> 164 <![CDATA[ 165 //NOTE: getElementsByClassName('class') will get elements CONTAINING the class 166 var id = this.getElementsByClassName('button-wrap')[0].id, cn; 167 cn = tbfunction_userProperty(id, 'class', 'button-active', 'toggle'); 168 ]]> 169 </function> 170 </Toggle5> 171 172 <Toggle6> 173 <htmlText> 174 <![CDATA[ 175 <div id="s3-6" class="button-wrap"> 176 <div class="button-bg"> 177 <div class="button-out">ON</div> 178 <div class="button-in">OFF</div> 179 <div class="button-switch"></div> 180 </div> 181 </div> 182 ]]> 183 </htmlText> 184 <userProperty> 185 <![CDATA[ 186 { prop : 'class', 187 val : 'toggle-sm', 188 get_set : 'set' } 189 ]]> 190 </userProperty> 191 <function name="myclick" event="click" params="e"> 192 <![CDATA[ 193 //NOTE: getElementsByClassName('class') will get elements CONTAINING the class 194 var id = this.getElementsByClassName('button-wrap')[0].id, cn; 195 cn = tbfunction_userProperty(id, 'class', 'button-active', 'toggle'); 196 ]]> 197 </function> 198 </Toggle6> 199 200 <Toggle7> 201 <htmlText> 202 <![CDATA[ 203 <div id="s3-7" class="button-wrap"> 204 <div class="button-bg"> 205 <div class="button-out">ON</div> 206 <div class="button-in">OFF</div> 207 <div class="button-switch"></div> 208 </div> 209 </div> 210 ]]> 211 </htmlText> 212 <userProperty> 213 <![CDATA[ 214 { prop : 'class', 215 val : 'toggle-sm', 216 get_set : 'set' } 217 ]]> 218 </userProperty> 219 <function name="myclick" event="click" params="e"> 220 <![CDATA[ 221 //NOTE: getElementsByClassName('class') will get elements CONTAINING the class 222 var id = this.getElementsByClassName('button-wrap')[0].id, cn; 223 cn = tbfunction_userProperty(id, 'class', 'button-active', 'toggle'); 224 ]]> 225 </function> 226 </Toggle7> 227 228 <!--Additional <config#> ... </config#> sections as required.--> 229 230 </page>