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 相关文章推荐
javascript 面向对象思想 附源码
Jul 07 Javascript
jQuery插件原来如此简单 jQuery插件的机制及实战
Feb 07 Javascript
js修改table中Td的值(定义td的单击事件)
Jan 10 Javascript
node.js cookie-parser之parser.js
Jun 06 Javascript
最全面的JS倒计时代码
Sep 17 Javascript
Angular2 (RC4) 路由与导航详解
Sep 21 Javascript
JavaScript队列函数和异步执行详解
Jun 19 Javascript
vue动态路由配置及路由传参的方式
May 23 Javascript
详解AngularJS 过滤器的使用
Jun 02 Javascript
javascript中call()、apply()的区别
Mar 21 Javascript
JS实现动态添加外部js、css到head标签的方法
Jun 05 Javascript
vue中watch的用法汇总
Dec 28 Vue.js
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
农民C键的运用技巧
2020/03/04 星际争霸
我的论坛源代码(十)
2006/10/09 PHP
发布一个用PHP fsockopen写的HTTP下载的类
2007/02/22 PHP
thinkphp框架实现路由重定义简化url访问地址的方法分析
2020/04/04 PHP
基于javascript 闭包基础分享
2013/07/10 Javascript
js实现从数组里随机获取元素
2015/01/12 Javascript
在javascript中随机数 math random如何生成指定范围数值的随机数
2015/10/21 Javascript
JavaScript中数据类型转换总结
2016/12/25 Javascript
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
2017/06/09 jQuery
JS实现简单短信验证码界面
2017/08/07 Javascript
Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
2018/01/26 Javascript
vue better scroll 无法滚动的解决方法
2018/06/07 Javascript
在小程序中推送模板消息的实现方法
2019/07/22 Javascript
vue项目打包之开发环境和部署环境的实现
2020/04/23 Javascript
如何使用three.js 制作一个三维的推箱子游戏
2020/07/29 Javascript
python 判断自定义对象类型
2009/03/21 Python
python检测lvs real server状态
2014/01/22 Python
Python函数式编程指南(三):迭代器详解
2015/06/24 Python
利用django如何解析用户上传的excel文件
2017/07/24 Python
python中reduce()函数的使用方法示例
2017/09/29 Python
python实现数独游戏 java简单实现数独游戏
2018/03/30 Python
Jupyter中直接显示Matplotlib的图形方法
2018/05/24 Python
python+flask实现API的方法
2018/11/21 Python
pandas求两个表格不相交的集合方法
2018/12/08 Python
Python将字符串常量转化为变量方法总结
2019/03/17 Python
详解pytorch 0.4.0迁移指南
2019/06/16 Python
python自动化测试之DDT数据驱动的实现代码
2019/07/23 Python
在Python中画图(基于Jupyter notebook的魔法函数)
2019/10/28 Python
Pycharm 2020最新永久激活码(附最新激活码和插件)
2020/09/17 Python
Python astype(np.float)函数使用方法解析
2020/06/08 Python
Python预测2020高考分数和录取情况
2020/07/08 Python
CSS3字体效果的设置方法小结
2016/06/13 HTML / CSS
简单介绍HTML5中的文件导入
2015/05/08 HTML / CSS
Nisbets法国:英国最大的厨房和餐饮设备供应商
2019/03/18 全球购物
小学英语教学反思案例
2014/02/04 职场文书
Django框架模板用法详解
2022/06/10 Python