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 研究心得 取得属性的值
Nov 30 Javascript
Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法
Dec 06 Javascript
Jquery判断IE6等浏览器的代码
Apr 05 Javascript
JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码
Feb 25 Javascript
Jquery遍历checkbox获取选中项value值的方法
Feb 13 Javascript
论Bootstrap3和Foundation5网格系统的异同
May 16 Javascript
JS中使用media实现响应式布局
Aug 04 Javascript
vue router下的html5 history在iis服务器上的设置方法
Oct 18 Javascript
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 jQuery
vue 引用自定义ttf、otf、在线字体的方法
May 09 Javascript
js设计模式之代理模式及订阅发布模式实例详解
Aug 15 Javascript
angular中的post请求处理示例详解
Jun 30 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数组函数序列之array_values() 获取数组元素值的函数与方法
2011/10/30 PHP
PHP下获取上个月、下个月、本月的日期(strtotime,date)
2014/02/02 PHP
PHP连接操作access数据库实例
2015/03/30 PHP
浅谈PHP中output_buffering
2015/07/13 PHP
PHP创建文件,并向文件中写入数据,覆盖,追加的实现代码
2016/03/25 PHP
PHP合并数组函数array_merge用法分析
2017/02/17 PHP
YII2自动登录Cookie总是失效的解决方法
2017/06/28 PHP
JavaScript 存在陷阱 删除某一区域所有节点
2010/05/10 Javascript
jQuery与其它库冲突的解决方法
2010/06/25 Javascript
aspx中利用js实现确认删除代码
2010/07/22 Javascript
利用javascript实现web页面中指定区域打印
2013/10/30 Javascript
jquery查找父元素、子元素(个人经验总结)
2014/04/09 Javascript
nodejs中简单实现Javascript Promise机制的实例
2014/12/06 NodeJs
JavaScript实现为input与textarea自定义hover,focus效果的方法
2015/08/21 Javascript
简单实现兼容各大浏览器的js复制内容到剪切板
2015/09/09 Javascript
JS实现样式清新的横排下拉菜单效果
2015/10/09 Javascript
jquery实现列表上下移动功能
2016/02/25 Javascript
微信小程序 教程之模板
2016/10/18 Javascript
JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】
2016/12/12 Javascript
JavaScript设置名字输入不合法的实现方法
2017/05/23 Javascript
vue-cli中安装方法(图文详细步骤)
2018/12/12 Javascript
Nuxt.js 静态资源和打包的操作
2020/11/06 Javascript
[06:20]2015国际邀请赛第三日top10
2015/08/08 DOTA
[01:15:00]LGD vs Mineski Supermajor 胜者组 BO3 第一场 6.5
2018/06/06 DOTA
[07:01]DOTA2-DPC中国联赛正赛 Aster vs Magma 3月5日 赛后选手采访
2021/03/11 DOTA
python 判断自定义对象类型
2009/03/21 Python
Django中处理出错页面的方法
2015/07/15 Python
python 安装virtualenv和virtualenvwrapper的方法
2017/01/13 Python
Python不同目录间进行模块调用的实现方法
2019/01/29 Python
python 随机生成10位数密码的实现代码
2019/06/27 Python
手把手教你进行Python虚拟环境配置教程
2020/02/03 Python
canvas离屏技术与放大镜实现代码示例
2018/08/31 HTML / CSS
学生退学证明
2015/06/23 职场文书
幼儿园小班教育随笔
2015/08/14 职场文书
高三英语教学反思
2016/03/03 职场文书
Go gorilla securecookie库的安装使用详解
2022/08/14 Golang