用jquery写的select模拟插件

作者:norion时间:2014年6月12日评论次数:0 条

最近项目遇到一个select在安卓手机端变形的bug,今天就一不做二不休直接写了select模拟插件来兼容,现在共享给大家。

这个插件原理很简单,就是利用json方式来生成select的option,然后用input的隐藏域来传值,在pc浏览器上,select的兼容性也不是很好,也可以用这种方式来实现。
html:

<input id="test" name="test" type="hidden" />

js插件:

var form = (function () {

	var select = function (options) {
		var o = options,
		target = $(o.target).wrap('<div class="ui-select"></div>'),
		wrap = target.parent(),
		initWrap = wrap.append('<div class="ui-select-init"></div><div class="arrow down"></div>').find('.ui-select-init'),
		itemWrap = wrap.append('<div class="ui-select-itemWrap fn-hide"></div>').find('.ui-select-itemWrap'),
		itemDta = o.item,
		initVal = o.initVal;

		initWrap.click(function () {
			if (itemWrap.hasClass('fn-hide')) {
				itemWrap.removeClass('fn-hide');
			} else {
				itemWrap.addClass('fn-hide');
			}
		});

		$.each(itemDta, function (i, item) {

			if (initVal == item.value) {
				initWrap.attr('data-value', item.value)
				        .html(item.name)
			}

			itemWrap.append('<div class="ui-select-item" data-value="' + item.value + '">' + item.name + '</div>');
			itemWrap.find('.ui-select-item')
			.eq(i)
			.click(function () {
				var val = $(this).attr('data-value'),
				name = $(this).html();

				target.val(val);
				initWrap.attr('data-value', val)
				        .html(name);

				itemWrap.addClass('fn-hide');
			})
			.hover(function () {
				$(this).addClass('selected');
			},
				function () {
				$(this).removeClass('selected');
			});
		});

		//selected.init();
	}

	return {
		select : select
	}

})();

调用:

form.select({
	target: '#test',
	initVal: '1',
	item: [
		{
			name: '我我我我',
			value: '1'
		},
		{
			name: 'asdfasdf',
			value: '2'
		}
	]
})

css:

.ui-select{float:left;position:relative}
	.ui-select-init{width:100%;height:30px;line-height:30px;padding:0 5px;box-sizing:border-box;border:1px solid #a9a9a9;background:#fff}
	.ui-select-itemWrap{width:100%;box-sizing:border-box;border:1px solid #a9a9a9;background:#fff;position:absolute;top:29px;left:0;z-index:2}
		.ui-select-item{height:30px;line-height:30px;padding:0 5px;}
		.ui-select-itemWrap .selected{background:#f8f8f8}

标签:

上一篇: phonegap项目创建及插件添加

下一篇:用phpnow让hosts定义的域名指定到目录

相关文章

评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注