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 相关文章推荐
img的onload的另类用法
Jan 10 Javascript
jquery.validate使用攻略 第二部
Jul 01 Javascript
Javascript中定义方法的另类写法(批量定义js对象的方法)
Feb 25 Javascript
关于javascript event flow 的一个bug详解
Sep 17 Javascript
JavaScript字符串常用类使用方法汇总
Apr 14 Javascript
JavaScript数据库TaffyDB用法实例分析
Jul 27 Javascript
浅谈Jquery中Ajax异步请求中的async参数的作用
Jun 06 Javascript
AngularJS 指令的交互详解及实例代码
Sep 14 Javascript
vue生成token保存在客户端localStorage中的方法
Oct 25 Javascript
用POSTMAN发送JSON格式的POST请求示例
Sep 04 Javascript
浅谈javascript如何获取文件后缀名
Aug 07 Javascript
JavaScript 如何在浏览器中使用摄像头
Dec 02 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
使用sockets:从新闻组中获取文章(二)
2006/10/09 PHP
php操作mongoDB实例分析
2014/12/29 PHP
PHP实现超简单的SSL加密解密、验证及签名的方法示例
2017/08/28 PHP
PHP PDOStatement::execute讲解
2019/01/31 PHP
jquery在IE、FF浏览器的差别详细探讨
2013/04/28 Javascript
js抽奖实现随机抽奖代码效果
2013/12/02 Javascript
下拉列表select 由左边框移动到右边示例
2013/12/04 Javascript
jQuery 实现侧边浮动导航菜单效果
2014/12/26 Javascript
jscript读写二进制文件的方法
2015/04/22 Javascript
jQuery解析XML文件同时动态增加js文件的方法
2015/06/01 Javascript
微信小程序 wxapp导航 navigator详解
2016/10/31 Javascript
如何正确理解javascript的模块化
2017/03/02 Javascript
Web前端框架Angular4.0.0 正式版发布
2017/03/28 Javascript
原生JS实现不断变化的标签
2017/05/22 Javascript
在 webpack 中使用 ECharts的实例详解
2018/02/05 Javascript
深入理解Vue父子组件生命周期执行顺序及钩子函数
2018/08/12 Javascript
vue中的计算属性实例详解
2018/09/19 Javascript
JS实现的图片选择顺序切换和循环切换功能示例【测试可用】
2018/12/28 Javascript
Vue分页器实现原理详解
2019/06/28 Javascript
微信公众号网页分享功能开发的示例代码
2020/05/27 Javascript
Python中MYSQLdb出现乱码的解决方法
2014/10/11 Python
Python中List.index()方法的使用教程
2015/05/20 Python
python爬虫的工作原理
2017/03/05 Python
python下10个简单实例代码
2017/11/15 Python
pyinstaller打包多个py文件和去除cmd黑框的方法
2019/06/21 Python
使用Python实现文字转语音并生成wav文件的例子
2019/08/08 Python
Python字符串和正则表达式中的反斜杠('\')问题详解
2019/09/03 Python
python实现广度优先搜索过程解析
2019/10/19 Python
使用phonegap播放音频的实现方法
2017/03/31 HTML / CSS
Html5基于canvas实现电子签名并生成PDF文档
2020/12/07 HTML / CSS
意大利文具和办公产品在线商店:Y-Office
2020/02/27 全球购物
施华洛世奇新加坡官网:SWAROVSKI新加坡
2020/10/06 全球购物
分别介绍一下Session Bean和Entity Bean
2015/03/13 面试题
素食餐饮项目创业计划书
2014/02/02 职场文书
用Python进行栅格数据的分区统计和批量提取
2021/05/27 Python
Pygame Draw绘图函数的具体使用
2021/11/17 Python