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 相关文章推荐
提高 DHTML 页面性能
Dec 25 Javascript
JavaScript新窗口与子窗口传值详解
Feb 11 Javascript
js获取url中的参数且参数为中文时通过js解码
Mar 19 Javascript
javascript实用方法总结
Feb 06 Javascript
JavaScript实现显示函数调用堆栈的方法
Apr 21 Javascript
javascript实现的全国省市县无刷新多级关联菜单效果代码
Aug 01 Javascript
jQuery图片切换动画效果
Feb 28 Javascript
Vue.js弹出模态框组件开发的示例代码
Jul 26 Javascript
实时监控input框,实现输入框与下拉框联动的实例
Jan 23 Javascript
一个简单的node.js界面实现方法
Jun 01 Javascript
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
Aug 20 Javascript
Vue自动构建发布脚本的方法示例
Jul 24 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
信用卡效验程序
2006/10/09 PHP
ThinkPHP内置jsonRPC的缺陷分析
2014/12/18 PHP
php下pdo的mysql事务处理用法实例
2014/12/27 PHP
CentOS安装php v8js教程
2015/02/26 PHP
laravel容器延迟加载以及auth扩展详解
2015/03/02 PHP
分享PHP-pcntl 实现多进程代码
2016/09/30 PHP
PDO::rollBack讲解
2019/01/29 PHP
JavaScript asp.net 获取当前超链接中的文本
2009/04/14 Javascript
javascript 定义初始化数组函数
2009/09/07 Javascript
跟我一起学写jQuery插件开发方法(附完整实例及下载)
2010/04/01 Javascript
JavaScript异步调用定时方法并停止该方法实现代码
2012/03/16 Javascript
用按钮控制iframe显示的网页实现方法
2013/02/04 Javascript
分享Javascript中最常用的55个经典小技巧
2013/11/29 Javascript
javascript单例模式的简单实现方法
2015/07/25 Javascript
详解JavaScript数组和字符串中去除重复值的方法
2016/03/07 Javascript
jQuery下拉框的简单应用
2016/06/24 Javascript
IntersectionObserver API 详解篇
2016/12/11 Javascript
ES6新特性七:数组的扩充详解
2017/04/21 Javascript
深入理解Commonjs规范及Node模块实现
2017/05/17 Javascript
js对象实例详解(JavaScript对象深度剖析,深度理解js对象)
2017/09/21 Javascript
JS设计模式之数据访问对象模式的实例讲解
2017/09/30 Javascript
vue-cli + sass 的正确打开方式图文详解
2017/10/27 Javascript
使用form-create动态生成vue自定义组件和嵌套表单组件
2019/01/18 Javascript
使用jquery-easyui的布局layout写后台管理页面的代码详解
2019/06/19 jQuery
简介JavaScript错误处理机制
2020/08/04 Javascript
[56:57]LGD vs VP 2019DOTA2国际邀请赛淘汰赛 胜者组赛BO3 第一场 8.20.mp4
2019/08/22 DOTA
详解利用python+opencv识别图片中的圆形(霍夫变换)
2019/07/01 Python
Python 中Django安装和使用教程详解
2019/07/03 Python
python+pygame实现坦克大战
2019/09/10 Python
Python 中的pygame安装与配置教程详解
2020/02/10 Python
Python Excel vlookup函数实现过程解析
2020/06/22 Python
Python Mock模块原理及使用方法详解
2020/07/07 Python
Python之字典添加元素的几种方法
2020/09/30 Python
美国现代家具和家居商店:Apt2B
2016/08/29 全球购物
法制宣传教育方案
2014/05/09 职场文书
Python insert() / append() 用法 Leetcode实战演示
2021/03/31 Python