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 相关文章推荐
11款基于Javascript的文件管理器
Oct 25 Javascript
EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
Feb 21 Javascript
JavaScript添加随滚动条滚动窗体的方法
Feb 23 Javascript
jquery 判断selection range 是否在容器中的简单实例
Aug 02 Javascript
深入理解jQuery3.0的domManip函数
Sep 01 Javascript
利用HTML5+Socket.io实现摇一摇控制PC端歌曲切换
Jan 13 Javascript
JS原型与原型链的深入理解
Feb 15 Javascript
webpack配置的最佳实践分享
Apr 21 Javascript
vuejs使用FormData实现ajax上传图片文件
Aug 08 Javascript
js实现弹出框的拖拽效果实例代码详解
Apr 16 Javascript
vue请求本地自己编写的json文件的方法
Apr 25 Javascript
解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)
Jul 21 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
PHP数据缓存技术
2007/02/14 PHP
PHP 截取字符串专题集合
2010/08/19 PHP
浅析PHP绘图技术
2013/07/03 PHP
php使用strip_tags()去除html标签仍有空白的解决方法
2016/07/28 PHP
PHP实现的最大正向匹配算法示例
2017/12/19 PHP
Laravel 手动开关 Eloquent 修改器的操作方法
2019/12/30 PHP
PHP $O00OO0=urldecode &amp; eval 解密,记一次商业源码的去后门
2020/09/13 PHP
javascript 一个自定义长度的文本自动换行的函数
2007/08/19 Javascript
JavaScript中Object和Function的关系小结
2009/09/26 Javascript
滚动图片效果 jquery实现回旋滚动效果
2013/01/08 Javascript
jQuery 选择器详解
2015/01/19 Javascript
JS数组的常见用法实例
2015/02/10 Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
2015/10/10 Javascript
Express之get,pos请求参数的获取
2017/05/02 Javascript
关于Vue Webpack2单元测试示例详解
2017/08/14 Javascript
Angular 5.0 来了! 有这些大变化
2017/11/15 Javascript
微信小程序云开发之使用云数据库
2019/05/17 Javascript
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
2020/08/03 Javascript
nestjs中异常过滤器Exceptionfilter的具体使用
2021/02/07 Javascript
Python合并多个装饰器小技巧
2015/04/28 Python
python实现基于SVM手写数字识别功能
2020/05/27 Python
python多进程提取处理大量文本的关键词方法
2018/06/05 Python
计算机二级python学习教程(3) python语言基本数据类型
2019/05/16 Python
Python读取VOC中的xml目标框实例
2020/03/10 Python
python 实现百度网盘非会员上传超过500个文件的方法
2021/01/07 Python
HTML5 canvas 基本语法
2009/08/26 HTML / CSS
医护人员英文求职信范文
2013/11/26 职场文书
2013年员工自我评价范文
2013/12/27 职场文书
给幼儿园老师的表扬信
2014/01/19 职场文书
《与朱元思书》的教学反思
2014/04/17 职场文书
专题民主生活会对照检查材料思想汇报
2014/09/29 职场文书
回复函范文
2015/07/14 职场文书
2015元旦感言
2015/12/09 职场文书
改进工作作风心得体会
2016/01/23 职场文书
Python中tkinter的用户登录管理的实现
2021/04/22 Python
Vue.js中v-for指令的用法介绍
2022/03/13 Vue.js