`

自定义的复选按钮组和单选按钮组

F#CC++C#Mootools 
阅读更多
FancyForm的例子
不过经过修改使其支持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();
});
  • 大小: 15.9 KB
分享到：
| intellij idea v8 Build: 9013注册机
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    ios 自定义复选按钮和单选按钮

    标题提到的“ios 自定义复选按钮和单选按钮”是关于如何使用Objective-C（OC）编程语言来手写代码，创建一个可重用的控件，既能作为单选按钮也能作为复选按钮。这一话题涵盖了UI设计、自定义视图、状态管理等多个...

    C# 自定义控件 自定义单选按钮和复选按钮

    总之，自定义C#中的单选按钮和复选按钮是一个涉及外观、行为和交互的综合过程。通过这个过程，开发者可以创造出符合项目风格和功能需求的专属控件，提高应用的个性化程度和用户体验。在实际开发中，要确保自定义控件...

    C#自定义控件（usercontrol）--美化单选按钮和复选按钮(测试可用)

    本教程将深入探讨如何利用C#来实现自定义控件，特别是如何美化单选按钮和复选按钮。 首先，我们需要了解UserControl的基本概念。UserControl是Windows Forms提供的一种基类，可以让我们组合多个标准控件，并添加...

    自定义复选框和单选按钮 icheck.zip

    iCheck 是一个强大的 jQuery 插件，用于自定义 HTML 的复选框（checkbox）和单选按钮（radio），提供了一套美观且响应式的界面样式，适用于各种设备和浏览器。这个插件极大地提升了用户界面的视觉吸引力和交互体验，...

    ios开发 单选按钮 复选按钮 的实现

    1. 自定义外观：通过自定义，你可以设计符合应用风格的单选按钮和复选按钮，提升用户体验。 2. 扩展功能：可以添加额外的交互效果，如动画过渡、触摸反馈等。 3. 一致性：确保在整个应用中，单选按钮和复选按钮的...

    iCheck自定义复选框和单选按钮组件（jQuery)

    iCheck自定义复选框和单选按钮组件（jQuery)，它避免在日常开发中重复造轮子，在数量庞大的浏览器，设备和它们的不同版本中，它提供了风格一致的外观。回调和方法可以用来方便地处理修改和自定义输入。兼容主流...

    C#自定义控件（usercontrol）--美化单选按钮和复选按钮.rar

    本资源“C#自定义控件（usercontrol）--美化单选按钮和复选按钮.rar”聚焦于如何利用C#来创建自定义用户控件(UserControl)，特别是针对系统默认的单选按钮(RadioButton)和复选按钮(CheckBox)进行外观和功能的定制，...

    js特效脚本含源码和说明iCheck自定义复选框和单选按钮组件(jQuery)

    js特效脚本含源码和说明iCheck自定义复选框和单选按钮组件（jQuery)本资源系百度网盘分享地址

    jQuery自定义单选按钮复选框代码.zip

    /* 单选按钮和复选框的自定义样式 */ .radio-label, .checkbox-label { position: relative; display: inline-block; cursor: pointer; } .radio-label::before, .checkbox-label::before { content: ""; ...

    CSS3单选按钮和复选按钮特效.zip

    "CSS3单选按钮和复选按钮特效.zip"这个资源包含了利用CSS3实现的精美按钮样式代码，可以极大地提升网页的视觉效果和用户体验。 CSS3是层叠样式表的第三版，它引入了许多新的特性和功能，比如选择器、过渡、动画、...

    iCheck_跨浏览器漂亮的自定义复选框和单选按钮插件

    接下来，你需要对需要自定义样式的复选框或单选按钮添加特定的类名，例如`icheck`。这可以通过在HTML标记中直接设置`class`属性实现： ```html ``` 然后，在文档加载完成后，通过调用iCheck的初始化方法来应用...

    C#自定义控件（usercontrol）--美化单选按钮和复选按钮

    总结，通过C#自定义控件(UserControl)，我们可以根据项目需求对单选按钮和复选框进行深度定制，不仅改变其外观，还能扩展其功能。这需要我们理解控件的生命周期、事件处理以及图形绘制等核心概念。通过巧妙的设计和...

    C#自定义控件（usercontrol）--美化单选按钮和复选按钮_《0528》.rar

    总的来说，"C#自定义控件（usercontrol）--美化单选按钮和复选按钮"这个主题涵盖了Windows Forms开发中的UI设计、事件处理、控件扩展等多个方面。通过深入学习和实践，开发者不仅可以创建出独具特色的界面元素，还能...

    纯css3单选按钮和复选按钮样式代码

    纯CSS3的单选按钮和复选按钮样式代码允许开发者自定义这些元素的外观，以提升网页的整体设计感和用户体验。在本文中，我们将深入探讨如何使用CSS3实现这一目标。 首先，让我们了解一下HTML中的基本单选按钮和复选框...

    Qt自定义/自绘复选框/单选框类

    QT 4.7.4Qt自定义/自绘复选框/单选框类，按钮状态有：正常状态，鼠标移动状态，鼠标按下状态，鼠标释放状态暂定为与正常状态相同。可以设置按钮上文本或不显示文本，按钮自适应图片大小或图片自适应按钮大小，使能/...

    jQuery自定义单选按钮复选框样式特效

    在该函数内，开发者会使用`$('selector').on('event', function() {...})`这样的语法来监听用户与单选按钮和复选框的交互，并在事件触发时执行相应的样式变换。 `image`文件夹可能包含了一些图标或者背景图片，用于...

    jQuery单选按钮和复选按钮美化效果

    "jQuery单选按钮和复选按钮美化效果"提供了一种方法，可以让你的网页中的单选按钮（radio）和复选按钮（checkbox）看起来更加精致，提升用户体验。本文将深入探讨这个主题，讲解如何利用jQuery和CSS实现这一效果。 ...

    VS2019MFC 控件自绘大全(按钮/复选框/单选框/菜单栏/静态文本/等控件自绘继承类)

    本教程重点讲解的是如何在MFC中实现控件的自绘，特别是针对按钮、复选框、单选框、菜单栏、静态文本等常见控件的自定义绘制。 1. **控件自绘基础** 自绘是指程序员通过重写控件的OnDraw()方法，亲自控制控件的绘制...

Magicbox
Global site tag (gtag.js) - Google Analytics