Jquery插件之打造自定义的select标签


Posted in Javascript onNovember 30, 2011

首先看下效果

Jquery插件之打造自定义的select标签

<head> 
<title></title> 
<link type="text/css" rel="Stylesheet" href="JQSelect.css" /> 
<script type="text/javascript" src="jquery-1.2.6.js"></script> 
<script type="text/javascript" src="JQSelect.js"></script> 
<script type="text/javascript"> 
$(function() { 
$("#test").jsScroll(); 
}) 
</script> 
</head> 
<body> 
<select id="test"> 
<option value="1">1</option> 
<option value="2">2</option> 
<option value="3">3</option> 
<option value="4">4</option> 
<option value="5">5</option> 
<option value="6">6</option> 
<option value="7">7</option> 
<option value="8">8</option> 
<option value="9">9</option> 
<option value="10">10</option> </select>

比较简陋只是将select转成自定义的样式

现在只有2个参数可以设置

$(function() { 
$("#test").jsScroll({ showLength: 3, option_click: function() { alert("1"); } }); 
})

showLength:下拉框默认显示数量 ---默认显示5个

option_click:点击每一个option执行的事件--默认是将options的值绑定到input中
在线演示:http://demo.3water.com/js/2011/JQSelect/
打包下载:https://3water.com/jiaoben/40362.html

Javascript 相关文章推荐
JS创建优美的页面滑动块效果 - Glider.js
Sep 27 Javascript
分享JavaScript获取网页关闭与取消关闭的事件
Dec 13 Javascript
在jQuery中使用$而避免跟其它库产生冲突的方法
Aug 13 Javascript
easyui window refresh 刷新两次的解决方法(推荐)
May 18 Javascript
Bootstrap实现渐变顶部固定自适应导航栏
Aug 27 Javascript
微信小程序实战之顶部导航栏(选项卡)(1)
Jun 19 Javascript
Node.js 异步异常的处理与domain模块解析
May 10 Javascript
Angular2实现组件交互的方法分析
Dec 19 Javascript
Vue项目组件化工程开发实践方案
Jan 09 Javascript
vue中子组件向父组件传递数据的实例代码(实现加减功能)
Apr 20 Javascript
小程序实现留言板
Nov 02 Javascript
JavaScript在web自动化测试中的作用示例详解
Aug 25 Javascript
jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果
Nov 30 #Javascript
jquery中dom操作和事件的实例学习-表单验证
Nov 30 #Javascript
javascript开发随笔二 动态加载js和文件
Nov 25 #Javascript
javascript开发随笔一 preventDefault的必要
Nov 25 #Javascript
基于jquery的拖动布局插件
Nov 25 #Javascript
jQuery Jcrop插件实现图片选取功能
Nov 23 #Javascript
JQUERY1.6 使用方法四 检测浏览器
Nov 23 #Javascript
You might like
人族 Terran 基本策略
2020/03/14 星际争霸
利用PHP实现与ASP Banner组件相似的类
2006/10/09 PHP
用PHP ob_start()控制浏览器cache、生成html实现代码
2010/02/16 PHP
php smarty函数扩展
2010/03/15 PHP
PHP Swoole异步读取、写入文件操作示例
2019/10/24 PHP
php7 新增功能实例总结
2020/05/25 PHP
javascript innerHTML、outerHTML、innerText、outerText的区别
2008/11/24 Javascript
捕获关闭窗口的脚本
2009/01/10 Javascript
jQuery 使用手册(二)
2009/09/23 Javascript
教你如何使用firebug调试功能了解javascript闭包和this
2015/03/04 Javascript
javascript实现简单的html5视频播放器
2015/05/06 Javascript
js数组去重的5种算法实现
2015/11/04 Javascript
JS实现部分HTML固定页面顶部随屏滚动效果
2015/12/24 Javascript
javascript基本算法汇总
2016/03/09 Javascript
JS添加或修改控件的样式(Class)实现方法
2016/10/15 Javascript
防止重复发送 Ajax 请求
2017/02/15 Javascript
vue 里面使用axios 和封装的示例代码
2017/09/01 Javascript
vue使用自定义icon图标的方法
2018/05/14 Javascript
layui关闭层级、简单监听的实例
2019/09/06 Javascript
JavaScript实现京东放大镜效果
2019/12/03 Javascript
vue随机验证码组件的封装实现
2020/02/19 Javascript
[04:26]2014DOTA2国际邀请赛-Newbee顺利进入胜者组决赛 独家专访战神7
2014/07/19 DOTA
CentOS中使用virtualenv搭建python3环境
2015/06/08 Python
对Python进行数据分析_关于Package的安装问题
2017/05/22 Python
深入了解Python中pop和remove的使用方法
2018/01/09 Python
Python实现购物车购物小程序
2018/04/18 Python
Python实现求一个集合所有子集的示例
2018/05/04 Python
使用Python 正则匹配两个特定字符之间的字符方法
2018/12/24 Python
Python基于opencv实现的简单画板功能示例
2019/03/04 Python
Python csv模块使用方法代码实例
2019/08/29 Python
python实现高斯判别分析算法的例子
2019/12/09 Python
python 实现将Numpy数组保存为图像
2020/01/09 Python
使用html5+css3来实现slider切换效果告别javascript+css
2013/01/08 HTML / CSS
维多利亚的秘密阿联酋官网:Victoria’s Secret阿联酋
2019/12/07 全球购物
编写函数,将一个3*3矩阵转置
2013/10/09 面试题
Python图片验证码降噪和8邻域降噪
2021/08/30 Python