Home > Web Front-end > JS Tutorial > Web page SELECT drop-down box beautification code based on jquery_jquery

Web page SELECT drop-down box beautification code based on jquery_jquery

WBOY
Release: 2016-05-16 18:17:50
Original
1079 people have browsed it

1. Solved the problem that some select beautification codes could not trigger the onchange event of the original select control.
2. Allow multiple calls to $("...").selectCss() to solve the problem that Select options cannot be synchronized after they are updated.

The usage method is as follows:

Copy the code The code is as follows:





Untitled Document











Main file Including selectCss.css and selectCss.js
selectCss.js file code:
Copy code The code is as follows:

(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 = $("
").insertAfter(this).addClass("tag_select");
$(this).data("cssobj",divselect);
var divoptions = $("
    ").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= $("
  • ").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 图片:
    Web page SELECT drop-down box beautification code based on jquery_jquery
    Related labels:
    source:php.cn
    Statement of this Website
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Popular Tutorials
    More>
    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template