Context Navigation

Back to Ticket #6117

Ticket #6117: checkbox-slider-align-12964.patch

File checkbox-slider-align-12964.patch, 9.8 kB (added by peller, 10 months ago)
patch from Evan Huang (IBM, CCLA)

E:/DOJO_Project/Aptana_dojo_space_0.9_new/dijit/themes/themeTester.html


330	330	<h2>Various Form Elements:</h2>
331	331
332	332	<form name="dijitFormTest">
333
	333	<!-- Wrap dojo radio and checkbox widgets in div or table to avoid a weird BiDi alignment problem in FF-->
334	334	<p><input type="checkBox" dojoType="dijit.form.CheckBox" checked="checked"> Standard Dijit CheckBox
335		<~~br><input type="checkBox" dojoType="dijit.form.CheckBox" disabled="disabled"> Disabled Dijit~~
336		<~~br><input type="checkBox" dojoType="dijit.form.CheckBox" disabled="disabled" checked="checked"> Checked and Disabled Dijit~~
	335	<div><input type="checkBox" dojoType="dijit.form.CheckBox" disabled="disabled"> Disabled Dijit</div>
	336	<div><input type="checkBox" dojoType="dijit.form.CheckBox" disabled="disabled" checked="checked"> Checked and Disabled Dijit</div>
337	337	</p>
338	338
339	339	<p>
340		<span>Radio group #1:</span>
341		<input type="radio" name="g1" id="g1rb1" value="news" dojoType="dijit.form.RadioButton">
342		<label for="g1rb1">news</label>
343		<input type="radio" name="g1" id="g1rb2" value="talk" dojoType="dijit.form.RadioButton" checked="checked"/>
344		<label for="g1rb2">talk</label>
345		<input type="radio" name="g1" id="g1rb3" value="weather" dojoType="dijit.form.RadioButton" disabled="disabled"/>
346		<label for="g1rb3">weather (disabled)</label>
	340	<table><tr>
	341	<td><span>Radio group #1:</span></td>
	342	<td>
	343	<input type="radio" name="g1" id="g1rb1" value="news" dojoType="dijit.form.RadioButton">
	344	<label for="g1rb1">news</label>
	345	</td>
	346	<td>
	347	<input type="radio" name="g1" id="g1rb2" value="talk" dojoType="dijit.form.RadioButton" checked="checked"/>
	348	<label for="g1rb2">talk</label>
	349	</td>
	350	<td>
	351	<input type="radio" name="g1" id="g1rb3" value="weather" dojoType="dijit.form.RadioButton" disabled="disabled"/>
	352	<label for="g1rb3">weather (disabled)</label>
	353	</td>
	354	</tr></table>
347	355	</p>
348	356
349	357	<p>
350	358	<span>Radio group #2: (no default value, and has breaks)</span><br>
351		<input type="radio" name="g2" id="g2rb1" value="top40" dojoType="dijit.form.RadioButton">
352		<label for="g2rb1">top 40</label><br>
353		<input type="radio" name="g2" id="g2rb2" value="oldies" dojoType="dijit.form.RadioButton">
354		<label for="g2rb2">oldies</label><br>
	359	<div>
	360	<input type="radio" name="g2" id="g2rb1" value="top40" dojoType="dijit.form.RadioButton">
	361	<label for="g2rb1">top 40</label>
	362	</div>
	363	<div>
	364	<input type="radio" name="g2" id="g2rb2" value="oldies" dojoType="dijit.form.RadioButton">
	365	<label for="g2rb2">oldies</label>
	366	</div>
	367	<div>
	368	<input type="radio" name="g2" id="g2rb3" value="country" dojoType="dijit.form.RadioButton">
	369	<label for="g2rb3">country</label>
	370	</div>
355	371
356		~~<input type="radio" name="g2" id="g2rb3" value="country" dojoType="dijit.form.RadioButton">~~
357		~~<label for="g2rb3">country</label><br>~~
358
359	372	<br>
360	373	(Note if using keyboard: tab to navigate, and use arrow or space to select)
361	374	</p>
…	…
401	414	style="padding:10px; display:none;">
402	415
403	416	<!-- Sliders: -->
404		<div style="float:right;">
405		<div dojoType="dijit.form.VerticalSlider" name="vertical1"
406		onChange="dojo.byId('slider2input').value=arguments[0];"
407		value="10"
408		maximum="100"
409		minimum="0"
410		discreteValues="11"
411		style="height:175px; clear:both"
412		id="slider2">
413		<ol dojoType="dijit.form.VerticalRuleLabels" container="leftDecoration"style="width:2em;color:gray;" labelStyle="right:0px;">
414		<li>0
415		<li>100
416		</ol>
417
418		<div dojoType="dijit.form.VerticalRule" container="leftDecoration" count=11 style="width:5px;" ruleStyle="border-color:gray;"></div>
419		<div dojoType="dijit.form.VerticalRule" container="rightDecoration" count=11 style="width:5px;" ruleStyle="border-color:gray;"></div>
420		<ol dojoType="dijit.form.VerticalRuleLabels" container="rightDecoration"style="width:2em;color:gray;" maximum="100" count="6" numericMargin="1" constraints="{pattern:'#'}"></ol>
421		</div>
422		<br> Slider2 Value:<input readonly id="slider2input" size="3" value="10">
423		</div>
424		<h2>Sliders</h2>
425		<div dojoType="dijit.form.HorizontalSlider" name="horizontal1"
426		onChange="dojo.byId('slider1input').value=dojo.number.format(arguments[0]/100,{places:1,pattern:'#%'});"
427		value="10"
428		maximum="100"
429		minimum="0"
430		showButtons="false"
431		intermediateChanges="true"
432		style="width:50%; height: 20px;"
433		id="horizontal1">
434		<ol dojoType="dijit.form.HorizontalRuleLabels" container="topDecoration" style="height:1.2em;font-size:75%;color:gray;" numericMargin="1" count="6"></ol>
435		<div dojoType="dijit.form.HorizontalRule" container="topDecoration" count=11 style="height:5px;"></div>
436		<div dojoType="dijit.form.HorizontalRule" container="bottomDecoration" count=5 style="height:5px;"></div>
437		<ol dojoType="dijit.form.HorizontalRuleLabels" container="bottomDecoration" style="height:1em;font-size:75%;color:gray;">
438		<li>lowest
439		<li>normal
440		<li>highest
441		</ol>
442
443		</div>
444		<br>Value: <input readonly id="slider1input" size="5" value="10.0%">
445
446		<div dojoType="dijit.form.HorizontalSlider" name="horizontal2"
447		minimum="1"
448		value="2"
449		maximum="3"
450		discreteValues="3"
451		showButtons="false"
452		intermediateChanges="true"
453		style="width:300px; height: 40px;"
454		id="horizontal2">
455		<div dojoType="dijit.form.HorizontalRule" container="bottomDecoration" count=3 style="height:5px;"></div>
456		<ol dojoType="dijit.form.HorizontalRuleLabels" container="bottomDecoration"style="height:1em;font-size:75%;color:gray;">
457		<li><img width=10 height=10 src="../tests/images/note.gif"><br><span style="font-size: small">small</span>
458		<li><img width=15 height=15 src="../tests/images/note.gif"><br><span style="font-size: medium">medium</span>
459
460		<li><img width=20 height=20 src="../tests/images/note.gif"><br><span style="font-size: large">large</span>
461		</ol>
462		</div>
463
	417	<!-- Wrap sliders in table to avoid a weird BiDi alignment problem in IE(due to float style) -->
	418	<table style="width:100%" cellpadding=0 cellspacing=0>
	419	<tr>
	420	<td width="15%">
	421	<div dojoType="dijit.form.VerticalSlider" name="vertical1"
	422	onChange="dojo.byId('slider2input').value=arguments[0];"
	423	value="10"
	424	maximum="100"
	425	minimum="0"
	426	discreteValues="11"
	427	style="height:175px;clear:both"
	428	id="slider2">
	429	<ol dojoType="dijit.form.VerticalRuleLabels" container="leftDecoration"style="width:2em;color:gray;" labelStyle="right:0px;">
	430	<li>0
	431	<li>100
	432	</ol>
	433
	434	<div dojoType="dijit.form.VerticalRule" container="leftDecoration" count=11 style="width:5px;" ruleStyle="border-color:gray;"></div>
	435	<div dojoType="dijit.form.VerticalRule" container="rightDecoration" count=11 style="width:5px;" ruleStyle="border-color:gray;"></div>
	436	<ol dojoType="dijit.form.VerticalRuleLabels" container="rightDecoration"style="width:2em;color:gray;" maximum="100" count="6" numericMargin="1" constraints="{pattern:'#'}"></ol>
	437	</div>
	438	<br> Slider2 Value:<input readonly id="slider2input" size="3" value="10">
	439	</td>
	440	<td width="85%">
	441	<h2>Sliders</h2>
	442	<div dojoType="dijit.form.HorizontalSlider" name="horizontal1"
	443	onChange="dojo.byId('slider1input').value=dojo.number.format(arguments[0]/100,{places:1,pattern:'#%'});"
	444	value="10"
	445	maximum="100"
	446	minimum="0"
	447	showButtons="false"
	448	intermediateChanges="true"
	449	style="width:50%; height: 20px;"
	450	id="horizontal1">
	451	<ol dojoType="dijit.form.HorizontalRuleLabels" container="topDecoration" style="height:1.2em;font-size:75%;color:gray;" numericMargin="1" count="6"></ol>
	452	<div dojoType="dijit.form.HorizontalRule" container="topDecoration" count=11 style="height:5px;"></div>
	453	<div dojoType="dijit.form.HorizontalRule" container="bottomDecoration" count=5 style="height:5px;"></div>
	454	<ol dojoType="dijit.form.HorizontalRuleLabels" container="bottomDecoration" style="height:1em;font-size:75%;color:gray;">
	455	<li>lowest
	456	<li>normal
	457	<li>highest
	458	</ol>
	459
	460	</div>
	461	<br>Value: <input readonly id="slider1input" size="5" value="10.0%">
	462
	463	<div dojoType="dijit.form.HorizontalSlider" name="horizontal2"
	464	minimum="1"
	465	value="2"
	466	maximum="3"
	467	discreteValues="3"
	468	showButtons="false"
	469	intermediateChanges="true"
	470	style="width:300px; height: 40px;"
	471	id="horizontal2">
	472	<div dojoType="dijit.form.HorizontalRule" container="bottomDecoration" count=3 style="height:5px;"></div>
	473	<ol dojoType="dijit.form.HorizontalRuleLabels" container="bottomDecoration"style="height:1em;font-size:75%;color:gray;">
	474	<li><img width=10 height=10 src="../tests/images/note.gif"><br><span style="font-size: small">small</span>
	475	<li><img width=15 height=15 src="../tests/images/note.gif"><br><span style="font-size: medium">medium</span>
	476
	477	<li><img width=20 height=20 src="../tests/images/note.gif"><br><span style="font-size: large">large</span>
	478	</ol>
	479	</div>
	480	</td>
	481	</tr>
	482	</table>
	483
464	484	<br style="clear:both;">
465	485	<hr class="spacer">
466	486

Download in other formats:

Original Format