- 浏览: 1631464 次
- 性别:
- 来自: 长春
文章分类
- 全部博客 (309)
- ext (19)
- web (13)
- PHP (19)
- 互联网新闻 (3)
- oracle (3)
- Mootools (1)
- FLEX (3)
- 人在职场 (2)
- hibernate (24)
- spring2 (1)
- J2SE (24)
- WEB_UI (14)
- 其它 (11)
- Log4J (1)
- iText (10)
- SQL (11)
- 设计模式 (3)
- lucene (6)
- 开源项目 (2)
- javascript (20)
- 软件&破解补丁 (48)
- Quartz (2)
- 解决方案 (1)
- 工作存档 (2)
- JAVA对文件操作 (2)
- C&C#&VC (1)
- struts2 (3)
- 版本控制 (2)
- 软考基础 (23)
- JBPM (2)
- velocity (4)
- javamail (3)
- HttpClient (9)
- 虚拟化技术 (2)
- 报表 (3)
- ibatis (5)
- Spring (4)
- 信用卡 (0)
- 芒果钱包 (0)
- 养卡 (0)
最新评论
-
a601962168:
...
通过JAVA与串口(RS232)通信实例 -
olive009:
...
Adobe Acrobat 9 Pro & Pro Extended 中文版/英文版 下载及破解补丁 -
overshit:
api更新了,一加filter就Callback filter ...
深入浅出CGlib-打造无入侵的类代理 -
u010778233:
写得很不错,已经用起来了,谢谢
将jdbc结果集转换成对象列表 -
924060929:
我想找就是要这个功能!!!!!!!!
velocity基础教程--2自定义ResourceLoader实现字符模板
FancyForm的例子
不过经过修改使其支持ie,采用的是mootools的js库
不过经过修改使其支持ie,采用的是mootools的js库
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <link rel="stylesheet" href="css/screensmall.css" type="text/css" media="screen"> </head> <body bgcolor=#000000> <div class='section demo'> <form action='' onsubmit='void(0)'> <h3 style="color:#ffffff">Checkboxes</h3> <div> <label><input type="checkbox" checked="checked"> I'm a fancy cross-browser styled checkbox</label> <div class='leftcol'> <label><input type="checkbox"> This is a checkbox</label> <label><input type="checkbox" checked="checked"> This is a checkbox</label> <label><input type="checkbox"> This is a checkbox</label> </div> <div class='rightcol'> <label><input type="checkbox" checked="checked"> This is a checkbox</label> <label><input type="checkbox"> This is a checkbox</label> <label><input type="checkbox" checked="checked"> This is a checkbox</label> </div> <label><input type="checkbox" checked="checked"> Apply any CSS styles for different states</label> </div> <h3 style="color:#ffffff">Radio buttons</h3> <div class='leftcol'> <label><input type="radio" name='leftcol'> This is a radio button</label> <label><input type="radio" checked="checked" name='leftcol'> This is a radio button</label> <label><input type="radio" name='leftcol'> This is a radio button</label> </div> <div class='rightcol'> <label><input type="radio" name='rightcol'> This is a radio button</label> <label><input type="radio" checked="checked" name='rightcol'> This is a radio button</label> <label><input type="radio" name='rightcol'> This is a radio button</label> </div> <input type="reset" value="Reset Form" style='margin:1em;height:2.5em;background:#222;float:right;color:#fff'> </form> </div> <script type="text/javascript" src="js/mootools.js"></script> <script type="text/javascript" src="js/moocheck.js"></script> </body> </html>
var FancyForm = { start: function(elements, options){ FancyForm.initing = 1; if($type(elements)!='array') elements = $$('input'); if(!options) options = []; FancyForm.onclasses = ($type(options['onClasses']) == 'object') ? options['onClasses'] : { checkbox: 'checked', radio: 'selected' } FancyForm.offclasses = ($type(options['offClasses']) == 'object') ? options['offClasses'] : { checkbox: 'unchecked', radio: 'unselected' } if($type(options['extraClasses']) == 'object'){ FancyForm.extra = options['extraClasses']; } else if(options['extraClasses']){ FancyForm.extra = { checkbox: 'f_checkbox', radio: 'f_radio', on: 'f_on', off: 'f_off', all: 'fancy' } } else { FancyForm.extra = {}; } FancyForm.onSelect = $pick(options['onSelect'], function(el){}); FancyForm.onDeselect = $pick(options['onDeselect'], function(el){}); var keeps = []; FancyForm.chks = elements.filter(function(chk){ if( $type(chk) != 'element' ) return false; if( chk.get('tag') == 'input' && (FancyForm.onclasses[chk.getProperty('type')]) ){ var el = chk.getParent(); if(el.getElement('input')==chk){ el.type = chk.getProperty('type'); el.inputElement = chk; this.push(el); } else { chk.addEvent('click',function(f){ if(f.event.stopPropagation) f.event.stopPropagation(); }); } } else if( (chk.inputElement = chk.getElement('input')) && (FancyForm.onclasses[(chk.type = chk.inputElement.getProperty('type'))]) ){ return true; } return false; }.bind(keeps)); FancyForm.chks = FancyForm.chks.combine(keeps); keeps = null; FancyForm.chks.each(function(chk){ var c = chk.inputElement; c.setStyle('position', 'absolute'); c.setStyle('left', '-9999px'); chk.addEvent('selectStart', function(f){f.stop()}); chk.name = c.getProperty('name'); FancyForm.update(chk); }); FancyForm.chks.each(function(chk){ var c = chk.inputElement; chk.addEvent('click', function(f){ f.stop(); f.type = 'prop'; c.fireEvent('click', f, 1); }); chk.addEvent('mousedown', function(f){ if($type(c.onmousedown) == 'function') c.onmousedown(); f.preventDefault(); }); chk.addEvent('mouseup', function(f){ if($type(c.onmouseup) == 'function') c.onmouseup(); }); c.addEvent('focus', function(f){ if(FancyForm.focus) chk.setStyle('outline', '1px dotted'); }); c.addEvent('blur', function(f){ chk.setStyle('outline', 0); }); c.addEvent('click', function(f){ if(f.event.stopPropagation) f.event.stopPropagation(); if(c.getProperty('disabled')) // c.getStyle('position') != 'absolute' return; if (!chk.hasClass(FancyForm.onclasses[chk.type])) c.setProperty('checked', 'checked'); else if(chk.type != 'radio') c.setProperty('checked', false); if(f.type == 'prop') FancyForm.focus = 0; FancyForm.update(chk); FancyForm.focus = 1; if(f.type == 'prop' && !FancyForm.initing && $type(c.onclick) == 'function') c.onclick(); }); c.addEvent('mouseup', function(f){ if(f.event.stopPropagation) f.event.stopPropagation(); }); c.addEvent('mousedown', function(f){ if(f.event.stopPropagation) f.event.stopPropagation(); }); if(extraclass = FancyForm.extra[chk.type]) chk.addClass(extraclass); if(extraclass = FancyForm.extra['all']) chk.addClass(extraclass); }); FancyForm.initing = 0; $each($$('form'), function(x) { x.addEvent('reset', function(a) { window.setTimeout(function(){FancyForm.chks.each(function(x){FancyForm.update(x);x.inputElement.blur()})}, 200); }); }); }, update: function(chk){ if(chk.inputElement.getProperty('checked')) { chk.removeClass(FancyForm.offclasses[chk.type]); chk.addClass(FancyForm.onclasses[chk.type]); if (chk.type == 'radio'){ FancyForm.chks.each(function(other){ if (other.name == chk.name && other != chk) { other.inputElement.setProperty('checked', false); FancyForm.update(other); } }); } if(extraclass = FancyForm.extra['on']) chk.addClass(extraclass); if(extraclass = FancyForm.extra['off']) chk.removeClass(extraclass); if(!FancyForm.initing) FancyForm.onSelect(chk); } else { chk.removeClass(FancyForm.onclasses[chk.type]); chk.addClass(FancyForm.offclasses[chk.type]); if(extraclass = FancyForm.extra['off']) chk.addClass(extraclass); if(extraclass = FancyForm.extra['on']) chk.removeClass(extraclass); if(!FancyForm.initing) FancyForm.onDeselect(chk); } if(!FancyForm.initing) chk.inputElement.focus(); }, all: function(){ FancyForm.chks.each(function(chk){ chk.inputElement.setProperty('checked', 'checked'); FancyForm.update(chk); }); }, none: function(){ FancyForm.chks.each(function(chk){ chk.inputElement.setProperty('checked', false); FancyForm.update(chk); }); } }; window.addEvent('domready', function(){ FancyForm.start(); });
发表评论
-
dhtmlxGrid的数据集添加查找定位功能
2009-06-25 13:52 2904dhtmlxGrid添加查找定位功能 dhtmlxGrid是一 ... -
js幻灯片效果
2009-06-19 13:33 2641很大气的~! -
通过js修改注册表
2009-04-16 08:49 2050var WSS = new ActiveXObjec ... -
开源JsDoc的使用介绍
2009-02-09 14:08 7369如果大家对JEE的深入研究有兴趣 可以加入Q群:4617650 ... -
JTree
2009-01-04 13:08 1812JTree 更新日期:2005/12/9 更新功能:使之在o ... -
层收缩效果带滑动
2008-12-31 12:56 1464<!DOCTYPE HTML PUBLIC &quo ... -
拥抱JsUnit
2008-10-27 16:02 7593拥抱JsUnit 以往在测试js的时候,都是以alert方式来 ... -
jquery的suggest
2008-10-14 06:59 5189import javax.servlet.http.Htt ... -
jquery模拟股票信息实时显示
2008-10-14 06:55 4896import javax.servlet.http.Htt ... -
jquery可编辑table
2008-10-14 06:51 10332<!DOCTYPE HTML PUBLIC &quo ... -
jquery的弹出菜单menu
2008-10-14 06:49 7215<!DOCTYPE HTML PUBLIC &quo ... -
jsoo编程实例之模拟弹出窗口
2008-10-09 16:10 1376<!DOCTYPE HTML PUBLIC &quo ... -
jquery模拟的弹出窗口
2008-10-08 20:40 7200<!DOCTYPE HTML PUBLIC &quo ... -
ajax的请求处理
2008-10-08 07:00 2428//用户名效验的方法 ... -
jquery解决浏览器缓存和中文处理(通用ajax)
2008-10-07 20:35 3183function verify(){ //解决中 ... -
jsoo编程实例之确认按钮的选择下拉框
2008-10-07 11:20 1466<!DOCTYPE HTML PUBLIC &quo ... -
jsoo编程实例之单行文本框
2008-10-07 09:03 1512<!DOCTYPE HTML PUBLIC &quo ... -
JavaScript的OO编程--1.js的特性
2008-09-23 15:56 1830JavaScript的OO编程--1.js的特性 至于java ... -
JavaScript高级程序设计
2008-09-18 16:28 2806JavaScript高级程序设计 非常好的一本书 尤其是js的 ...
相关推荐
标题提到的“ios 自定义复选按钮和单选按钮”是关于如何使用Objective-C(OC)编程语言来手写代码,创建一个可重用的控件,既能作为单选按钮也能作为复选按钮。这一话题涵盖了UI设计、自定义视图、状态管理等多个...
总之,自定义C#中的单选按钮和复选按钮是一个涉及外观、行为和交互的综合过程。通过这个过程,开发者可以创造出符合项目风格和功能需求的专属控件,提高应用的个性化程度和用户体验。在实际开发中,要确保自定义控件...
本教程将深入探讨如何利用C#来实现自定义控件,特别是如何美化单选按钮和复选按钮。 首先,我们需要了解UserControl的基本概念。UserControl是Windows Forms提供的一种基类,可以让我们组合多个标准控件,并添加...
iCheck 是一个强大的 jQuery 插件,用于自定义 HTML 的复选框(checkbox)和单选按钮(radio),提供了一套美观且响应式的界面样式,适用于各种设备和浏览器。这个插件极大地提升了用户界面的视觉吸引力和交互体验,...
1. 自定义外观:通过自定义,你可以设计符合应用风格的单选按钮和复选按钮,提升用户体验。 2. 扩展功能:可以添加额外的交互效果,如动画过渡、触摸反馈等。 3. 一致性:确保在整个应用中,单选按钮和复选按钮的...
iCheck自定义复选框和单选按钮组件(jQuery),它避免在日常开发中重复造轮子,在数量庞大的浏览器,设备和它们的不同版本中,它提供了风格一致的外观。回调和方法可以用来方便地处理修改和自定义输入。兼容主流...
本资源“C#自定义控件(usercontrol)--美化单选按钮和复选按钮.rar”聚焦于如何利用C#来创建自定义用户控件(UserControl),特别是针对系统默认的单选按钮(RadioButton)和复选按钮(CheckBox)进行外观和功能的定制,...
js特效脚本含源码和说明iCheck自定义复选框和单选按钮组件(jQuery)本资源系百度网盘分享地址
/* 单选按钮和复选框的自定义样式 */ .radio-label, .checkbox-label { position: relative; display: inline-block; cursor: pointer; } .radio-label::before, .checkbox-label::before { content: ""; ...
"CSS3单选按钮和复选按钮特效.zip"这个资源包含了利用CSS3实现的精美按钮样式代码,可以极大地提升网页的视觉效果和用户体验。 CSS3是层叠样式表的第三版,它引入了许多新的特性和功能,比如选择器、过渡、动画、...
接下来,你需要对需要自定义样式的复选框或单选按钮添加特定的类名,例如`icheck`。这可以通过在HTML标记中直接设置`class`属性实现: ```html ``` 然后,在文档加载完成后,通过调用iCheck的初始化方法来应用...
总结,通过C#自定义控件(UserControl),我们可以根据项目需求对单选按钮和复选框进行深度定制,不仅改变其外观,还能扩展其功能。这需要我们理解控件的生命周期、事件处理以及图形绘制等核心概念。通过巧妙的设计和...
总的来说,"C#自定义控件(usercontrol)--美化单选按钮和复选按钮"这个主题涵盖了Windows Forms开发中的UI设计、事件处理、控件扩展等多个方面。通过深入学习和实践,开发者不仅可以创建出独具特色的界面元素,还能...
纯CSS3的单选按钮和复选按钮样式代码允许开发者自定义这些元素的外观,以提升网页的整体设计感和用户体验。在本文中,我们将深入探讨如何使用CSS3实现这一目标。 首先,让我们了解一下HTML中的基本单选按钮和复选框...
QT 4.7.4Qt自定义/自绘复选框/单选框类,按钮状态有:正常状态,鼠标移动状态,鼠标按下状态,鼠标释放状态暂定为与正常状态相同。可以设置按钮上文本或不显示文本,按钮自适应图片大小或图片自适应按钮大小,使能/...
在该函数内,开发者会使用`$('selector').on('event', function() {...})`这样的语法来监听用户与单选按钮和复选框的交互,并在事件触发时执行相应的样式变换。 `image`文件夹可能包含了一些图标或者背景图片,用于...
"jQuery单选按钮和复选按钮美化效果"提供了一种方法,可以让你的网页中的单选按钮(radio)和复选按钮(checkbox)看起来更加精致,提升用户体验。本文将深入探讨这个主题,讲解如何利用jQuery和CSS实现这一效果。 ...
Checkbox(单选按钮)和Radio(复选按钮)作为用户交互的基础组件,它们的样式往往直接影响到网站或应用的整体视觉效果。"Checkbox单选复选按钮美化代码.zip" 提供了一种使用CSS3技术来提升这些元素视觉吸引力的方法...