|
|
| Line 10: |
Line 10: |
| | ############################################################################## --> | | ############################################################################## --> |
| | | | |
| - | <script> | + | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> |
| - | var d = document;
| + | <script language="javascript" type="text/javascript"> |
| - | var safari = (navigator.userAgent.toLowerCase().indexOf('safari') != -1) ? true : false;
| + | $(document).ready(function(){ |
| - | var gebtn = function(parEl,child) { return parEl.getElementsByTagName(child); };
| + | |
| - | onload = function() {
| + | $("#check1, #check2, #check3, #check4").click(function(){ |
| - |
| + | $(this.value).toggle("slow"); |
| - | var body = gebtn(d,'body')[0];
| + | }); |
| - | body.className = body.className && body.className != '' ? body.className + ' has-js' : 'has-js';
| + | |
| - |
| + | }); |
| - | if (!d.getElementById || !d.createTextNode) return;
| + | |
| - | var ls = gebtn(d,'label');
| + | |
| - | for (var i = 0; i < ls.length; i++) {
| + | |
| - | var l = ls[i];
| + | |
| - | if (l.className.indexOf('label_') == -1) continue;
| + | |
| - | var inp = gebtn(l,'input')[0];
| + | |
| - | if (l.className == 'label_check') {
| + | |
| - | l.className = (safari && inp.checked == true || inp.checked) ? 'label_check c_on' : 'label_check c_off';
| + | |
| - | l.onclick = check_it;
| + | |
| - | };
| + | |
| - | if (l.className == 'label_radio') {
| + | |
| - | l.className = (safari && inp.checked == true || inp.checked) ? 'label_radio r_on' : 'label_radio r_off';
| + | |
| - | l.onclick = turn_radio;
| + | |
| - | };
| + | |
| - | };
| + | |
| - | };
| + | |
| - | var check_it = function() {
| + | |
| - | var inp = gebtn(this,'input')[0];
| + | |
| - | if (this.className == 'label_check c_off' || (!safari && inp.checked)) {
| + | |
| - | this.className = 'label_check c_on';
| + | |
| - | if (safari) inp.click();
| + | |
| - | } else {
| + | |
| - | this.className = 'label_check c_off';
| + | |
| - | if (safari) inp.click();
| + | |
| - | };
| + | |
| - | };
| + | |
| - | var turn_radio = function() {
| + | |
| - | var inp = gebtn(this,'input')[0];
| + | |
| - | if (this.className == 'label_radio r_off' || inp.checked) {
| + | |
| - | var ls = gebtn(this.parentNode,'label');
| + | |
| - | for (var i = 0; i < ls.length; i++) {
| + | |
| - | var l = ls[i];
| + | |
| - | if (l.className.indexOf('label_radio') == -1) continue;
| + | |
| - | l.className = 'label_radio r_off';
| + | |
| - | };
| + | |
| - | this.className = 'label_radio r_on';
| + | |
| - | if (safari) inp.click();
| + | |
| - | } else {
| + | |
| - | this.className = 'label_radio r_off';
| + | |
| - | if (safari) inp.click();
| + | |
| - | };
| + | |
| - | };
| + | |
| | </script> | | </script> |
| - |
| |
| - |
| |
| - |
| |
| - |
| |
| - |
| |
| - | <script type="text/javascript" src="http://www.google-analytics.com/ga.js"></script>
| |
| - | <script type="text/javascript">var pageTracker = _gat._getTracker("UA-301801-11"); pageTracker._trackPageview();</script>
| |
| - |
| |
| | | | |
| | | | |
| Line 126: |
Line 76: |
| | | | |
| | <div id="main_contant" style="height:500px;"> | | <div id="main_contant" style="height:500px;"> |
| - | <div id="sizer"> | + | |
| - | <form action="#" method="get" accept-charset="utf-8">
| + | <input type="checkbox" name="check1" value="#div1" id="check1" /> |
| - | <fieldset class="checkboxes">
| + | <br /> |
| - | <label class="label_check" for="checkbox-01"><input name="sample-checkbox-01" id="checkbox-01" value="1" type="checkbox" checked /> I agree to the terms & conditions.</label>
| + | <div id="div1" style="display: none;">DIV Container 1</div> |
| - | <label class="label_check" for="checkbox-02"><input name="sample-checkbox-02" id="checkbox-02" value="1" type="checkbox" /> Please send me regular updates.</label>
| + | <input type="checkbox" name="check2" value="#div2" id="check2" /> |
| - | </fieldset>
| + | <br /> |
| - | <fieldset class="radios">
| + | <div id="div2" style="display: none;">DIV Container 2</div> |
| - | <label class="label_radio" for="radio-01"><input name="sample-radio" id="radio-01" value="1" type="radio" checked /> This is option A...</label>
| + | <input type="checkbox" name="check3" value="#div3" id="check3" /> |
| - | <label class="label_radio" for="radio-02"><input name="sample-radio" id="radio-02" value="1" type="radio" /> and this is option B...</label>
| + | <br /> |
| - | <label class="label_radio" for="radio-03"><input name="sample-radio" id="radio-03" value="1" type="radio" /> or simply choose option C</label>
| + | <div id="div3" style="display: none;">DIV Container 3</div> |
| - | </fieldset>
| + | <input type="checkbox" name="check4" value="#div4" id="check4" /> |
| - | </form>
| + | <div id="div4" style="display: none;">DIV Container 4</div> |
| - | | + | |
| - | <a href="http://www.maratz.com/blog/archives/2006/06/11/fancy-checkboxes-and-radio-buttons/">← Full how-to article</a>
| + | |
| - | <a href="jquery.html">jQuery version →</a>
| + | |
| - | </div>
| + | |
| - | </div>
| + | |
| | | | |
| | | | |
"
