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 相关文章推荐
jQuery判断密码强度实现思路及代码
Apr 24 Javascript
在Node.js中实现文件复制的方法和实例
Jun 05 Javascript
jquery实现鼠标滑过后动态图片提示效果实例
Aug 10 Javascript
基于jQuery实现的向下滑动二级菜单效果代码
Aug 31 Javascript
整理Javascript数组学习笔记
Nov 29 Javascript
JavaScript ES6的新特性使用新方法定义Class
Jun 28 Javascript
基于JS实现移动端向左滑动出现删除按钮功能
Feb 22 Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
Mar 15 Javascript
Angular2开发——组件规划篇
Mar 28 Javascript
详解如何在Vue2中实现组件props双向绑定
Mar 29 Javascript
详解基于Bootstrap+angular的一个豆瓣电影app
Jun 26 Javascript
JavaScript编写棋盘覆盖代码详解
Aug 28 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
CodeIgniter框架提示Disallowed Key Characters的解决办法
2014/04/21 PHP
ThinkPHP中自定义目录结构的设置方法
2014/08/15 PHP
PHP中Header使用的HTTP协议及常用方法小结
2014/11/04 PHP
PHP判断网络文件是否存在的方法
2015/03/12 PHP
PHP生成plist数据的方法
2015/06/16 PHP
深入讲解PHP的Yii框架中的属性(Property)
2016/03/18 PHP
Laravel中服务提供者和门面模式的入门介绍
2017/11/06 PHP
彻底搞懂JS无缝滚动代码
2007/01/03 Javascript
jquery 3D球状导航的文章分类
2010/07/06 Javascript
JavaScript 模拟类机制及私有变量的方法及思路
2013/07/10 Javascript
为jquery的ajaxfileupload增加附加参数的方法
2014/03/04 Javascript
javascript实现checkbox全选的代码
2015/04/30 Javascript
JavaScript中实现Map的示例代码
2015/09/09 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(下)
2017/04/21 Javascript
详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)
2017/07/13 Javascript
详解Angular如何正确的操作DOM
2018/07/06 Javascript
微信小程序实现循环动画效果
2018/07/16 Javascript
vue 中几种传值方法(3种)
2019/11/12 Javascript
微信小程序接入腾讯云验证码的方法步骤
2020/01/07 Javascript
JavaScript如何实现监听键盘输入和鼠标监点击
2020/07/20 Javascript
基于vue与element实现创建试卷相关功能(实例代码)
2020/12/07 Vue.js
[44:58]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第二场
2018/04/06 DOTA
python两种遍历字典(dict)的方法比较
2014/05/29 Python
python 如何去除字符串头尾的多余符号
2019/11/19 Python
python/Matplotlib绘制复变函数图像教程
2019/11/21 Python
Python rabbitMQ如何实现生产消费者模式
2020/08/24 Python
Scrapy中如何向Spider传入参数的方法实现
2020/09/28 Python
python 窃取摄像头照片的实现示例
2021/01/08 Python
澳大利亚最大的女装零售商:Millers
2017/09/10 全球购物
DC Shoes澳大利亚官方网上商店:购买DC鞋子
2019/10/25 全球购物
自荐信格式的六要素
2013/09/21 职场文书
洗发露广告词
2014/03/14 职场文书
民事起诉书范本
2015/05/19 职场文书
浅谈哪个Python库才最适合做数据可视化
2021/06/28 Python
JavaScript执行机制详细介绍
2021/12/06 Javascript
豆瓣2021评分最高动画剧集-豆瓣评分最高的动画剧集2021
2022/03/18 日漫