html自定义checkbox、radio、select —— select篇
上一篇《html自定义checkbox、radio、select —— checkbox、radio篇》介绍了我们是怎么将 html 自带的 checkbox、radio 改成我们自定义的UI的,现在来说说怎么将 html 自带的 select 改成我们自定义的UI(由于时间关系,我们只完成了单选部分的转换,而多选部分的转换没做,后续会找个时间补上)。
select 跟 checkbox、radio 方法大致相同。在 Bootstrap 中,有一个"按钮式下拉菜单"的组件,我们是在这个基础上进行修改的。
效果:
结构大致是:
<div>
<button>
<ul>
</div>
<select>
其中,<div>包住的就是展示出来的UI,<button>是正常情况下显示的,<ul>是各个选项,<select>是隐藏的。
首先,<button>使用 Bootstrap 中 "btn dropdown-toggle" 样式,并为其添加<span>、<i>标签用来显示文字和下拉的图标,我们有对部分 ".dropdown-" 相关的样式做了扩展和改写。
var $button = $('<button>', { type: 'button', 'class': 'btn dropdown-toggle', 'data-toggle': 'dropdown' })
.append($('<span>', { 'class': 'text-left pull-left' }))
.append($('<i>', { 'class': 'caret pull-right' }))
.click(function () {
$button.dropdown();
return $button;
});
接着,将<select>中的各个选项加进<ul>中,使用<a>保存 value 和 text,并添加 click 事件。
var $selectALink;
var _addOption = function ($option, inGroup) {
var $aLink = $('<a>', { href: 'javascript:void(0)', 'data-value': $option.val(), html: $option.html() === '' ? ' ' : $option.html() })
.click(function () {
if (!$aLink.data('disabled')) {
_setSelectValue($wrapper, $aLink);
$ul.scrollTop($aLink[0].offsetTop - 1); $select.trigger('change'); if ($.validator)
$select.valid();
} return $aLink;
});
inGroup && $aLink.addClass('groupopt');
$option.attr('disabled') && $aLink.addClass('disabled').data({ disabled: true });
$option.attr('selected') && ($selectALink = $aLink); $ul.append($('<li>').append($aLink));
} var $ul = $('<ul>', { 'class': 'dropdown-menu' });
$select
.children()
.each(function () {
var $obj = $(this);
if ($obj.is('optgroup')) {
$ul.append(
$('<li>').append(
$('<label>', { 'class': 'optgroup', html: $obj.attr('label') })
)
);
$('option', $obj).each(function () {
_addOption($(this), true);
});
} else if ($obj.is('option')) {
_addOption($obj);
}
});
然后将<button>、<ul>装进<div>中,隐藏<select>,设置初始值,再做一些调整,就可以看到这种效果了:
对于我们来说,做麻烦的就是当使用 JQ 控制显示隐藏(hide()、show())的时候,修改的<select>也要跟着变化。说以我们只能重写 JQ 的 hide()、show() 方法。
首先对 <select> 添加对应处理方法:
$select
.addClass('hide')
.data({ transformed: true })
.on({
hide: function () {
$wrapper.hide();
_setSelectStatus($select);
},
show: function () {
$wrapper.show();
_setSelectStatus($select);
},
transformReset: function () {
$('option', $select).not(_$defaultSelected.attr({ selected: true })).attr({ selected: false });
$select.transformResetStatus();
}
});
同 checkbox、radio,transformReset() 方法也是用于表单重置的。
接着,重写 JQ 的 hide()、show() 方法,而我们的目的是新方法仅对 <select> 有效,而其他标签依旧使用旧方法,所以:
var _oldhide = $.fn.hide;
var _oldshow = $.fn.show;
$.fn.hide = function (speed, callback) {
if (this.is('select') && this.data('transformed')) {
this.trigger('hide');
} else {
_oldhide.apply(this, arguments);
}
return this;
};
$.fn.show = function (speed, callback) {
if (this.is('select') && this.data('transformed')) {
this.trigger('show');
} else {
_oldshow.apply(this, arguments);
}
return this;
};
至此,整个改造过程大体完成,测试也能通过。
但是后来又有问题了,就是用 JQ 改变 checkbox、radio、select 的值的时候,显示的东西不会随着变。
尝试了很多方法,想实现自动同步的效果,但是都失败了了。后来,我们只能在代码里,手动同步了,即在修改后,再调用一个方法来同步:
$.fn.transformResetStatus = function () {
return this.each(function () {
var $obj = $(this);
if ($obj.is('input')) {
$obj.data('transformed') && _setInputStatus($obj);
} else if ($obj.is('select')) {
$obj.data('transformed') && _setSelectStatus($obj);
}
});
};
好了,3个标签的改造已经完成了。大家可以试试 Demo,在 IE8、9、chrome、ff 上测试通过,其他没测过。
demo 可能写得不够好,插件也可能存在一些问题我还没发现的,请发现任何问题都跟我说一下,谢谢各位!
另:要请教各位怎么把文件放在网盘上,然后直接 copy 出文件路径,今天试过115、百度、腾讯的,都不能直接 copy,都是只能引到另一个页面下载。
html自定义checkbox、radio、select —— select篇的更多相关文章
- jquery 获取和设置 checkbox radio 和 select option的值?
============== 获取和设置 checkbox radio 和 select的值? === val()函数, 其名字就表达了 它的意思: 他就是= value 的简写! val就是valu ...
- 自定义checkbox/radio
一. label标签 1. 概念: HTML <label>元素表示用户界面中项目的标题.它通常关联一个控件,或者是将控件放置在label元素内,或者是用作其属性.这样的控制称作label ...
- CSS之checkbox&radio&textarea&select
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 自定义checkbox,radio样式
input[type=radio] { margin-right: 5px; cursor: pointer; font-size: 14px; width: 15px; height: 15px; ...
- jquery的checkbox,radio,select等方法总结
jquery的checkbox,radio,和select是jquery操作的一个难点和重点,很多前端新手对其了解不是很透彻.时间久了不用,我在写的时候有时也难免对某些操作支支吾吾,记不清楚,现在,对 ...
- html自定义checkbox、radio、select —— checkbox、radio篇
前些日子,所在公司项目的UI做了大改,前端全部改用 Bootstrap 框架,Bootstrap的优缺点在此就不详述了,网上一大堆相关资料. 前端的设计就交给我和另一个同事[LV,大学同班同学,毕业后 ...
- struts2学习笔记之表单标签的详解:s:checkbox/radio/select/optiontransferselect/doubleselect/combobox
struts2中的表单标签都是以s标签的方式定义的,同时,struts2为所有标签都提供了一个模板,C:\Users\180172\Desktop\struts2-core-2.2.1.1.jar\t ...
- css自定义 range radio select的样式滑轮,按钮,选择框
写在前面: 之前踩坑css的时候,遇到滑轮,按钮,选择框这类型的东西,为了页面效果,总是需要自定义他们的样式,而不使用他们的默认样式.当时写的时候,我也是蛮头疼的,弄了个demo,链接在下面.对此做个 ...
- easyui 》 radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中
获取一组radio被选中项的值var item = $('input[@name=items][@checked]').val();获取select被选中项的文本var item = $(" ...
随机推荐
- important的妙用
!important: 为某些样式设置具有最高权值,高于id选择器 用法: !important要写在分号的前面 例如: <p class="first">!impor ...
- HTML5 File API
1.File API 一直以来,不能直接访问用户计算机中的文件都是web应用开发当中的一大障碍.File API的宗旨是为web开发人员提供一种安全的方式,以便在客户端访问用户计算机中的文件,并更好的 ...
- node 通过mongoose实现 mongodb的增删改
node 通过mongoose实现 mongodb的增删改 新建文件test.js 内容如下: var mongoose = require('mongoose') , Schema = mo ...
- WPF窗体置于桌面最底层
在WPF中设置窗体的Topmost属性可以将窗体永远置于顶部,但是没有提供Bottommost属性将窗体置底.若果要将窗体置于桌面的最底部,就需要使用Windows API来实现了.解决方案如下: 1 ...
- 数据添加到DataTable
DataTable tblDatas = new DataTable("Datas"); DataColumn dc = null; ...
- bounds的深入研究
一.bounds的深入研究 1>frame:是以父控件的左上角为原点,描述的是一块区域的可视范围, bounds:是以自己内容左上角为原点,描述的是可视范围在内容范围显示的区域 2> ...
- sqrt和Hailstone
求平方根 class SqRoot{ void calcRoot(double z){ double x=1;double y=z/x; while(Math.abs(x-y)>1E-10) { ...
- Wordpress 网站搭建及性能监控方法详解!
前言 说到 Wordpress,大家往往想到的是博客,其实,如今的 WordPress 已经成为全球使用量最多的开源 CMS 系统.并且,如果你有一定的技术基础稍加改动,就可以搭建出新闻网站.企业网站 ...
- 一篇文章让你读懂 OpenStack 的起源、架构和应用
OpenStack 是一个面向 IaaS 层的开源项目,用于实现公有云和私有云的部署及管理.拥有众多大公司的行业背书和数以千计的社区成员, OpenStack 被看作是云计算的未来.目前 OS 基金会 ...
- 【POJ2406】 Power Strings (KMP)
Power Strings Description Given two strings a and b we define a*b to be their concatenation. For exa ...