jQuery 表单美化插件 jQuery Estorm Format Form 0.0.1 发布日期:2014年06月21日 13:51:51

jQuery 仿win8 tab切换插件

浏览器支持:

  • IE6-11
  • Firefox
  • Chrome
  • Safri
  • Opera

jQuery表单美化插件是一款针对表单元素美化的插件,现在只有4种情况可用,Radio和Checkbox基本上已经趋于完美;input text解决多浏览器兼容placeholder的问题,select单纯的下拉框基本已经完善,对于multiple和设置了size的select以及optiongroup,支持不是很好。在下一版本会继续完善。

可以在表单元素上直接绑定change事件,不需要另外绑定函数。

测试IE6-11,均支持可用,可能只是会有些样式上的小差异,我认为是可以忽略的。

安装使用

HTML代码:
<form>
	<ul>
		<li class="item">
			<label class="title">用户名称(text):</label>
			<input type="text" class="estorm-input-text" placeholder="请输入你的名字">
		</li>
		<li class="item">
			<label class="title">性别(radio):</label>
			<label class="radio"><input type="radio" name="sex" class="estorm-input-radio" value="1" checked> 男</label>
			<label class="radio"><input type="radio" name="sex" class="estorm-input-radio" value="0"> 女</label>
		</li>
		<li class="item">
			<label class="title">兴趣爱好(checkbox):</label>
			<label class="checkbox"><input type="checkbox" name="love" class="estorm-input-checkbox" value="1"> 读书</label>
			<label class="checkbox"><input type="checkbox" name="love" class="estorm-input-checkbox" value="2" checked> 跑步</label>
			<label class="checkbox"><input type="checkbox" name="love" class="estorm-input-checkbox" value="3" checked> 音乐</label>
			<label class="checkbox"><input type="checkbox" name="love" class="estorm-input-checkbox" value="4"> 电影</label>
			<label class="checkbox"><input type="checkbox" name="love" class="estorm-input-checkbox" value="5"> 美食</label>
			<label class="checkbox"><input type="checkbox" name="love" class="estorm-input-checkbox" value="6"> 睡觉</label>
		</li>
		<li class="item">
			<label class="title">最高学历(select):</label>
			<select class="estorm-select">
			<option value="1">小学</option>
			<option value="2">初中</option>
			<option value="3">高中</option>
			<option value="4">专科</option>
			<option value="5" selected>本科</option>
			<option value="6">硕士</option>
			<option value="7">博士</option>
			<option value="8">外星人</option>
			</select>
		</li>
		<li class="item">
			<label class="title">最爱的美食(select multiple):</label>
			<select class="estorm-select" multiple>
			<option value="1">玉米</option>
			<option value="2">水果</option>
			<option value="3">面食</option>
			<option value="4">米饭</option>
			<option value="5">肉食</option>
			</select>
		</li>
	</ul>
</form>
CSS代码:
/*input text*/
.input-blur { color:#999999; }
.input-focus { color:#000000; }
.estorm-input-text { width:180px; height:32px; font-size:14px; border:1px #999999 solid; padding:0 5px; line-height:32px; }
.estorm-input-text:focus { border-color:#669900; }

/*radio*/
.estorm-radio-wrap { position:relative; }
.estorm-radio-bg { width:18px; height:18px; position:absolute; z-index:0; left:0; top:0; display:block; overflow:hidden; background:url(images/bg.png) no-repeat -36px 0; }
.estorm-radio-checked { background-position:-54px 0; }

/*checkbox*/
.estorm-checkbox-wrap { position:relative; }
.estorm-checkbox-bg { width:18px; height:18px; position:absolute; z-index:0; left:0; top:0; display:block; overflow:hidden; background:url(images/bg.png) no-repeat 0 0; }
.estorm-checkbox-checked { background-position:-18px 0; }

/*select*/
.estorm-selecter-wrap { position:relative; display:inline-table; }
.estorm-selecter-wrap select { margin:0; padding:0; }
.estorm-selecter-current { display:block; height:24px; padding:0 10px; font-size:12px; }
.estorm-selecter-arrow { width:18px; height:18px; position:absolute; right:5px; top:3px; display:block; overflow:hidden; background:url(images/bg.png) no-repeat -72px 0; }
.estorm-selecter { position:absolute; left:0; top:0; border:1px #999999 solid; background:#ffffff; }
.estorm-selecter:hover, .estorm-selecter-current:hover { background:#f5f5f5; }
.estorm-selecter ul { position:absolute; left:-1px; top:24px; border:1px #999999 solid; background:#ffffff; display:block; padding:3px 0; display:none; }
.estorm-selecter ul li { white-space:nowrap; }
.estorm-selecter ul li a { display:block; line-height:26px; padding:0 10px; font-size:12px; }
.estorm-selecter ul li a:hover { background:#f5f5f5; color:#669900; }
.estorm-selecter ul li.current a { background:#669900; color:#ffffff; }

.estorm-selecter-multiple { position:absolute; left:0; top:0; border:1px #999999 solid; background:#ffffff; overflow:auto; }
.estorm-selecter-multiple ul li { white-space:nowrap; }
.estorm-selecter-multiple ul li a { display:block; line-height:26px; padding:0 10px; font-size:12px; }
.estorm-selecter-multiple ul li a:hover { background:#f5f5f5; color:#669900; }
.estorm-selecter-multiple ul li.current a { background:#669900; color:#ffffff; }
JS代码:
$.estormFormatform({
	inputtext: '.estorm-input-text', //input placeholder 对象 也可以是id(#estorm-input-text)
	inputPlaceholder: {
		blurClass: 'input-blur', //失去焦点时的样式
		focusClass: 'input-focus' //得到焦点时的样式
	},
	radio: {
		className: '.estorm-input-radio', //改写的对象
		normalClass: 'estorm-radio-bg', //默认样式名称
		checkedClass: 'estorm-radio-checked' //选中样式名称	
	},
	checkbox: {
		className: '.estorm-input-checkbox', //改写的对象
		normalClass: 'estorm-checkbox-bg', //默认样式名称
		checkedClass: 'estorm-checkbox-checked'	//选中样式名称
	},
	selecter: {
		className: '.estorm-select', //改写的对象
		maxZindex: 2, //始终保持改写后的select的层级
		changFun: null	//change时执行的事件
	}
}};