管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

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

　　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){

　　$(this).each(function(){

　　var speed=_speed||"fast";

　　if($(this).data("cssobj")){

　　$($(this).data("cssobj")).remove();

　　}

　　$(this).hide();

　　var divselect = $("<div></div>").insertAfter(this).addClass("tag_select");

　　$(this).data("cssobj",divselect);

　　var divoptions = $("<ul></ul>").insertAfter(divselect).addClass("tag_options").hide();

　　divselect.click(function(e){

　　if($($(document).data("nowselectoptions")).get(0) != $(this).next("ul").get(0)){

　　hideOptions(speed);

　　}

　　if(!$(this).next("ul").is(":visible"))

　　{

　　e.stopPropagation();

　　$(document).data("nowselectoptions",$(this).next("ul"));

　　showOptions(speed);

　　}

　　});

　　divselect.hover(function(){

　　$(this).addClass("tag_select_hover");

　　}

　　,

　　function(){

　　$(this).removeClass("tag_select_hover");

　　});

　　$(this).change(function(){

　　$(this).nextAll("ul").children("li:eq("+ $(this)[0].selectedIndex +")").addClass("open_selected").siblings().removeClass("open_selected");

　　$(this).next("div").html($(this).children("option:eq("+ $(this)[0].selectedIndex +")").text());

　　});

　　$(this).children("option").each(function(i){

　　var lioption= $("<li></li>").html($(this).text()).attr("title",$(this).attr("title")).appendTo(divoptions);

　　if($(this).attr("selected")){

　　lioption.addClass("open_selected");

　　divselect.html($(this).text());

　　}

　　lioption.data("option",this);

　　lioption.click(function(){

　　lioption.data("option").selected=true;

　　$(lioption.data("option")).trigger("change",true)

　　});

　　lioption.hover(

　　function(){$(this).addClass("open_hover");},

　　function(){ $(this).removeClass("open_hover"); }

　　);

　　});

　　});

　　}

　　})(jQuery);

　　selectCss.Css 文件代码:

　　

复制代码 代码如下:

　　.tag_select{display:block;color:#000;width:179px;height:23px;background:transparent url("images/index_22.jpg") no-repeat 0 0;padding:0 10px;line-height:23px; color:#7D7D7D; font-size:12px; cursor:pointer}

　　.tag_select_hover{ color:#ff0000; background:transparent url("selectbg.jpg") no-repeat 0 0; }

　　.tag_select_open{ color:#0000ff; background:transparent url("selectbg.jpg") no-repeat 0 0;}

　　ul.tag_options{position:absolute;margin:0;list-style:none;background:#fff;padding:0 0 1px;margin:0;width:162px ; height:100px; overflow:hidden; overflow-y:auto; font-size:12px; margin-left:10px; cursor:pointer; z-index:1000 }

　　ul.tag_options li{background:#fff; display:block;width:140px;padding:0 10px;height:20px;text-decoration:none;line-height:20px;color:#000; font-weight:normal; font-size:12px}

　　ul.tag_options li.open_hover{background:#0000ff;color:#000; font-weight:normal; font-size:12px}

　　ul.tag_options li.open_selected{background:#ccc; font-size:12px;font-weight:bold; }

　　selectbg.jpg 图片:

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

　　

教程首页 更多教程