返回
首页
业界
电商
创业
访谈
手机
移动
报告
运营
建站
互联网+
系统
教程
搜索

基于jquery的网页SELECT下拉框美化代码

2020-05-22 21:58:47易采站长站整理

1.解决了有些select 美化代码,无法触发原有select 控件的onchange 事件问题。
2.允许多次调用 $(“…”).selectCss()，以解决Select的options更新后无法同步的问题。
使用方法如下：

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>无标题文档</title>
<link href=”selectCss.css” rel=”stylesheet” type=”text/css” />
<script src=”jquery-1.3.2.min.js” type=”text/javascript”></script>
<script src=”selectCss.js” type=”text/javascript”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“select”).selectCss();
});
</script>
</head>
<body>
<select name=””　onchange=”alert(this.value)” id=”select1″>
<option value=”1″ title=”选项选项选项选项” >选项1</option>
<option value=”2″>选项2</option>
<option value=”3″>选项3</option>
</select>
<select name=”” id=”select2″>
<option value=”1″>选项31</option>
<option value=”2″>选项32</option>
<option value=”3″>选33</option>
</select>
</body>
</html>

主要文件包括 selectCss.css 和 selectCss.js
selectCss.js 文件代码:

(function($){
function hideOptions(speed){
if(speed.data){speed=speed.data}
if($(document).data(“nowselectoptions”))
{
$($(document).data(“nowselectoptions”)).slideUp(speed);
$($(document).data(“nowselectoptions”)).prev(“div”).removeClass(“tag_select_open”);
$(document).data(“nowselectoptions”,null);
$(document).unbind(“click”,hideOptions);
$(document).unbind(“keyup”,hideOptionsOnEscKey);
}
}
function hideOptionsOnEscKey(e){
var myEvent = e || window.event;
var keyCode = myEvent.keyCode;
if(keyCode==27)hideOptions(e.data);
}
function showOptions(speed){
$(document).bind(“click”,speed,hideOptions);
$(document).bind(“keyup”,speed,hideOptionsOnEscKey);
$($(document).data(“nowselectoptions”)).slideDown(speed);
$($(document).data(“nowselectoptions”)).prev(“div”).addClass(“tag_select_open”);
}
$.fn.selectCss=function(_speed){

相关文章 大家在看