Chosen:Select 选择框的华丽变身
HTML Form 表单里的各种组件,例如文本输入框,textarea,按钮等,都可以通过CSS或其它技术进行美化,让它们看起来很漂亮了,唯独下拉列表选项框(select box),不管你怎么做,它摆在那里总显得格格不入。
不过这种情况可能是一去不复返了,如果你猜测是使用HTML5技术, 那就错了,在中国,使用IE6浏览器的人仍占绝大大多数,这种古老的浏览器是不认识HTML5的。
我现在推荐的是一款JavaScript插件,它有Jquery和Prototype两种版本,支持所有类型的浏览器。使用它后,你的页面上的select选择框会变的漂亮的让你大吃一惊,下面是使用前和使用后的对比效果图。
单选模式:
多选模式:
更多的效果请访问这个插件的官方主页的中文翻译Chosen演示页面。
具体的用法非常简单,你只需要在select是加入class=”chzn-select”属性就行了,然后调用 jquery: $(“.chzn-select”).chosen(),一切都搞定。
- jQuery Chosen Plugin 的详细介绍:点击查看
- jQuery Chosen Plugin 的下载地址: 点击下载 or 点击下载 百度网盘下载:http://pan.baidu.com/s/1c2LzQyW (博客文件:chosen)
更多参考:http://www.oschina.net/news/20528/jquery-chosen-plugin
设置选中问题:
在使用jquery的chosen()方法前进行操作,然后再进行chosen的方法。这样就能解决自定义选中问题
更多参考:http://chevy.iteye.com/blog/2085989
Chosen:Select 选择框的华丽变身的更多相关文章
- Notes: select选择框
HTML选择框通过select标签创建,该元素是HTMLSelectElement的实例,拥有以下属性和方法: selectedIndex:选中项的索引 options:选择框的所有选项 add:向选 ...
- 类似 select 选择框效果及美化
网上有各种各样的关于 select 选择框的美化,找了很多,并没有好的样式效果.所以就找了一个利用 ul li 做的类似 select 选择框的效果,不废话了,先上图,效果如下: 对于上图的箭头效果, ...
- Android较低版本(<5.2) 页面默认Select选择框效果的BUG解决
Bug描述: 使用低版本安卓(<5.2),在微信上打开网页,点击下拉框,会出现如下图所示的用来展示select选项的弹出框: 在选项较少的时候,可以向下滑动,将选项滑到底部 滑动前: 滑动后: ...
- select选择框在谷歌火狐和IE样式的不同
select选择在不同浏览器不同的显示样式, 在IE中 虽然默认和谷歌一样,但是当点击时向下 按钮消失, 解决方法如下: select { /*Chrome和Firefox里面的边框是不一样的,所以复 ...
- AngularJS初始化Select选择框
一.引入 之前一个离职的同事负责的项目大量的引入了AngularJS的JS框架,后来我接手相关他项目里的功能.由于对AngularJS不是太熟,在他的功能上进行二次开发就比较费劲了,印象比较深的一个就 ...
- select选择框实现跳转
select选择框实现跳转 零.启示 1.启示把bom里面的几个对象稍微有点印象,那么主干有了,学其它的就感觉添置加瓦,很简单 就是关注树木的主干 2.万能的百度,不过当然要你基础好学得多才能看得懂, ...
- iiview Select 选择框打勾选中的内容label和展示的不一致
Select选择框里加入了OptionGroup.option ; 以及input输入框支持模糊搜索: 不一致的原因:缺少 :label-in-value="true";官方文档 ...
- AngularJS Select(选择框)
AngularJS 可以使用数组或对象创建一个下拉列表选项. 使用 ng-option 创建选择框 在 AngularJS 中我们可以使用 ng-option 指令来创建一个下拉列表,列表项通过对象和 ...
- 修改页面中显示出需要修改的数据(包括select选择框复显示)
页面中需要用到某个对象时,在底层代码中赋值,然后页面用java代码进行获取调用 如下截图: select复显示:根据后台方法赋值选择框 ,并设置初始值 按钮及选择框的禁用(五种方法): 方法一: $( ...
随机推荐
- windows form 相关
设置FormBorderStyle属性为none 让它成为一个无边框窗体
- 前端swiper使用指南
swiper 在网页中常用的方法 1.使用时在页面引入 <link rel="stylesheet" href="front/css/swiper.min.css& ...
- BZOJ 1355: [Baltic2009]Radio Transmission AC自动机/KMP
被一个KMP傻题搞蒙圈了,此题AC自动机空间超限,只能用KMP写(我只会AC自动机QAQ)...... AC自动机 Code: // luogu-judger-enable-o2 #include & ...
- 洛谷P1231 教辅的组成 最大流
裸题… Code: #include<cstdio> #include<cstring> #include<algorithm> #include<vecto ...
- python与图灵机器人交互(ITCHAT版本)
#!/usr/bin/env python#-*- coding:utf-8 -*- @Author : wujf @Time:2018/9/5 17:42import requestsimport ...
- 【BZOJ1125】【POI2008】poc - splay+哈希
题意: Description n列火车,每条有l节车厢.每节车厢有一种颜色(用小写字母表示).有m次车厢交换操作.求:对于每列火车,在交换车厢的某个时刻,与其颜色完全相同的火车最多有多少. Inpu ...
- JavaScript进阶【五】利用JavaScript实现动画的基本思路
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JQuery课堂学习笔记
第1课 JQuery技术简介 <%@ page language="java" import="java.util.*" pageEncoding=&qu ...
- C++ STL-stack使用详解
stack 类是容器适配器,它给予程序员栈的功能--特别是 FILO (先进后出)数据结构. 该类模板表现为底层容器的包装器--只提供特定函数集合.栈从被称作栈顶的容器尾部推弹元素. 一:头文件 #i ...
- ThinkPHP3.1.3分表状态时候的自动验证的代码BUG
问题描述 ThinkPHP3.1.3 当使用TP的分库分表后 有些地方需要使用Model自动验证create,当验证唯一性unique会出现BUG, 具体描述 因为自动验证检测唯一性会使用隐式的使用f ...