发布于 由admin

修改input 多选框 css样式/自定义的复选按钮组和单选按钮组

FancyForm的例子
不过经过修改使其支持ie，采用的是mootools的js库

Html代码
  1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
  2. <html xmlns=”http://www.w3.org/1999/xhtml”>
  3. <head>
  4.     <meta http-equiv=”content-type” content=”text/html; charset=utf-8″>
  5.     <link rel=”stylesheet” href=”css/screensmall.css” type=”text/css” media=”screen”>
  6. </head>
  7. <body bgcolor=#000000>
  9. <div class=’section demo’>
  10. <form action=” onsubmit=’void(0)’>
  11.     <h3 style=”color:#ffffff”>Checkboxes</h3>
  12.         <div>
  13.         <label><input type=”checkbox” checked=”checked”> I’m a fancy cross-browser styled checkbox</label>
  14.         <div class=’leftcol’>
  15.         <label><input type=”checkbox”> This is a checkbox</label>
  16.         <label><input type=”checkbox” checked=”checked”> This is a checkbox</label>
  17.         <label><input type=”checkbox”> This is a checkbox</label>
  18.         </div>
  19.         <div class=’rightcol’>
  20.         <label><input type=”checkbox” checked=”checked”> This is a checkbox</label>
  21.         <label><input type=”checkbox”> This is a checkbox</label>
  22.         <label><input type=”checkbox” checked=”checked”> This is a checkbox</label>
  23.         </div>
  24.         <label><input type=”checkbox” checked=”checked”> Apply any CSS styles for different states</label>
  25.         </div>
  26.     <h3 style=”color:#ffffff”>Radio buttons</h3>
  27.         <div class=’leftcol’>
  28.         <label><input type=”radio” name=’leftcol’> This is a radio button</label>
  29.         <label><input type=”radio” checked=”checked” name=’leftcol’> This is a radio button</label>
  30.         <label><input type=”radio” name=’leftcol’> This is a radio button</label>
  31.         </div>
  32.         <div class=’rightcol’>
  33.         <label><input type=”radio” name=’rightcol’> This is a radio button</label>
  34.         <label><input type=”radio” checked=”checked” name=’rightcol’> This is a radio button</label>
  35.         <label><input type=”radio” name=’rightcol’> This is a radio button</label>
  36.         </div>
  37.     <input type=”reset” value=”Reset Form” style=’margin:1em;height:2.5em;background:#222;float:right;color:#fff’>
  38. </form>
  39. </div>
  41. <script type=”text/javascript” src=”js/mootools.js”></script>
  42. <script type=”text/javascript” src=”js/moocheck.js”></script>
  43. </body>
  44. </html>
Js代码
  1. var FancyForm = {
  2.     start: function(elements, options){
  3.         FancyForm.initing = 1;
  4.         if($type(elements)!=’array’) elements = $$(‘input’);
  5.         if(!options) options = [];
  6.         FancyForm.onclasses = ($type(options[‘onClasses’]) == ‘object’) ? options[‘onClasses’] : {
  7.             checkbox: ‘checked’,
  8.             radio: ‘selected’
  9.         }
  10.         FancyForm.offclasses = ($type(options[‘offClasses’]) == ‘object’) ? options[‘offClasses’] : {
  11.             checkbox: ‘unchecked’,
  12.             radio: ‘unselected’
  13.         }
  14.         if($type(options[‘extraClasses’]) == ‘object’){
  15.             FancyForm.extra = options[‘extraClasses’];
  16.         } else if(options[‘extraClasses’]){
  17.             FancyForm.extra = {
  18.                 checkbox: ‘f_checkbox’,
  19.                 radio: ‘f_radio’,
  20.                 on: ‘f_on’,
  21.                 off: ‘f_off’,
  22.                 all: ‘fancy’
  23.             }
  24.         } else {
  25.             FancyForm.extra = {};
  26.         }
  27.         FancyForm.onSelect = $pick(options[‘onSelect’], function(el){});
  28.         FancyForm.onDeselect = $pick(options[‘onDeselect’], function(el){});
  29.         var keeps = [];
  30.         FancyForm.chks = elements.filter(function(chk){
  31.             if( $type(chk) != ‘element’ ) return false;
  32.             if( chk.get(‘tag’) == ‘input’ && (FancyForm.onclasses[chk.getProperty(‘type’)]) ){
  33.                 var el = chk.getParent();
  34.                 if(el.getElement(‘input’)==chk){
  35.                     el.type = chk.getProperty(‘type’);
  36.                     el.inputElement = chk;
  37.                     this.push(el);
  38.                 } else {
  39.                     chk.addEvent(‘click’,function(f){
  40.                         if(f.event.stopPropagation) f.event.stopPropagation();
  41.                     });
  42.                 }
  43.             } else if( (chk.inputElement = chk.getElement(‘input’)) && (FancyForm.onclasses[(chk.type = chk.inputElement.getProperty(‘type’))]) ){
  44.                 return true;
  45.             }
  46.             return false;
  47.         }.bind(keeps));
  48.         FancyForm.chks = FancyForm.chks.combine(keeps);
  49.         keeps = null;
  50.         FancyForm.chks.each(function(chk){
  51.             var c = chk.inputElement;
  52.             c.setStyle(‘position’, ‘absolute’);
  53.             c.setStyle(‘left’, ‘-9999px’);
  54.             chk.addEvent(‘selectStart’, function(f){f.stop()});
  55.             chk.name = c.getProperty(‘name’);
  56.             FancyForm.update(chk);
  57.         });
  58.         FancyForm.chks.each(function(chk){
  59.             var c = chk.inputElement;
  60.             chk.addEvent(‘click’, function(f){
  61.                 f.stop(); f.type = ‘prop’;
  62.                 c.fireEvent(‘click’, f, 1);
  63.             });
  64.             chk.addEvent(‘mousedown’, function(f){
  65.                 if($type(c.onmousedown) == ‘function’)
  66.                     c.onmousedown();
  67.                 f.preventDefault();
  68.             });
  69.             chk.addEvent(‘mouseup’, function(f){
  70.                 if($type(c.onmouseup) == ‘function’)
  71.                     c.onmouseup();
  72.             });
  73.             c.addEvent(‘focus’, function(f){
  74.                 if(FancyForm.focus)
  75.                     chk.setStyle(‘outline’, ‘1px dotted’);
  76.             });
  77.             c.addEvent(‘blur’, function(f){
  78.                 chk.setStyle(‘outline’, 0);
  79.             });
  80.             c.addEvent(‘click’, function(f){
  81.                 if(f.event.stopPropagation) f.event.stopPropagation();
  82.                 if(c.getProperty(‘disabled’)) // c.getStyle(‘position’) != ‘absolute’
  83.                     return;
  84.                 if (!chk.hasClass(FancyForm.onclasses[chk.type]))
  85.                     c.setProperty(‘checked’, ‘checked’);
  86.                 else if(chk.type != ‘radio’)
  87.                     c.setProperty(‘checked’, false);
  88.                 if(f.type == ‘prop’)
  89.                     FancyForm.focus = 0;
  90.                 FancyForm.update(chk);
  91.                 FancyForm.focus = 1;
  92.                 if(f.type == ‘prop’ && !FancyForm.initing && $type(c.onclick) == ‘function’)
  93.                      c.onclick();
  94.             });
  95.             c.addEvent(‘mouseup’, function(f){
  96.                 if(f.event.stopPropagation) f.event.stopPropagation();
  97.             });
  98.             c.addEvent(‘mousedown’, function(f){
  99.                 if(f.event.stopPropagation) f.event.stopPropagation();
  100.             });
  101.             if(extraclass = FancyForm.extra[chk.type])
  102.                 chk.addClass(extraclass);
  103.             if(extraclass = FancyForm.extra[‘all’])
  104.                 chk.addClass(extraclass);
  105.         });
  106.         FancyForm.initing = 0;
  107.         $each($$(‘form’), function(x) {
  108.             x.addEvent(‘reset’, function(a) {
  109.                 window.setTimeout(function(){FancyForm.chks.each(function(x){FancyForm.update(x);x.inputElement.blur()})}, 200);
  110.             });
  111.         });
  112.     },
  113.     update: function(chk){
  114.         if(chk.inputElement.getProperty(‘checked’)) {
  115.             chk.removeClass(FancyForm.offclasses[chk.type]);
  116.             chk.addClass(FancyForm.onclasses[chk.type]);
  117.             if (chk.type == ‘radio’){
  118.                 FancyForm.chks.each(function(other){
  119.                     if (other.name == chk.name && other != chk) {
  120.                         other.inputElement.setProperty(‘checked’, false);
  121.                         FancyForm.update(other);
  122.                     }
  123.                 });
  124.             }
  125.             if(extraclass = FancyForm.extra[‘on’])
  126.                 chk.addClass(extraclass);
  127.             if(extraclass = FancyForm.extra[‘off’])
  128.                 chk.removeClass(extraclass);
  129.             if(!FancyForm.initing)
  130.                 FancyForm.onSelect(chk);
  131.         } else {
  132.             chk.removeClass(FancyForm.onclasses[chk.type]);
  133.             chk.addClass(FancyForm.offclasses[chk.type]);
  134.             if(extraclass = FancyForm.extra[‘off’])
  135.                 chk.addClass(extraclass);
  136.             if(extraclass = FancyForm.extra[‘on’])
  137.                 chk.removeClass(extraclass);
  138.             if(!FancyForm.initing)
  139.                 FancyForm.onDeselect(chk);
  140.         }
  141.         if(!FancyForm.initing)
  142.             chk.inputElement.focus();
  143.     },
  144.     all: function(){
  145.         FancyForm.chks.each(function(chk){
  146.             chk.inputElement.setProperty(‘checked’, ‘checked’);
  147.             FancyForm.update(chk);
  148.         });
  149.     },
  150.     none: function(){
  151.         FancyForm.chks.each(function(chk){
  152.             chk.inputElement.setProperty(‘checked’, false);
  153.             FancyForm.update(chk);
  154.         });
  155.     }
  156. };
  157. window.addEvent(‘domready’, function(){
  158.     FancyForm.start();
  159. });

我会把代码打包上来大家下载

原文地址：http://llying.iteye.com/blog/289160