亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

JQuery SELECT單選模擬jQuery.select.js

 更新時(shí)間：2009年11月12日 22:38:30   作者：  
本文件是跟據(jù) zhangjingwei 的Jquery Select(單選) 模擬插件 V1.3.4 修改而來的，需要的朋友可以參考下。
基于jQuery JavaScript Library v1.3.2 的單選模擬
(本文件是跟據(jù) zhangjingwei 的Jquery Select(單選) 模擬插件 V1.3.4 修改而來的)
a. 修改的主要原因是，原來的zhangjingwei的模擬在顯示方式上的問題。在跟文字交替出現(xiàn)時(shí)會(huì)出現(xiàn)錯(cuò)位?，F(xiàn)將模擬DIV的display修改為inline方式。更自然的嵌入到文本行中。
b.在加載文件后自動(dòng)轉(zhuǎn)化樣式名為'commonselect' 的select。簡(jiǎn)化調(diào)用
c.對(duì)select的onchange()事件的響應(yīng)。以及寬度獲取的小調(diào)整
jquery.select.js
復(fù)制代碼 代碼如下:

/*
* jQuery.select.js
*/
jQuery.fn.sSelect = function(){
    var selectId = $(this).attr('id');
    var selectZindex = $(this).css('z-index');
    var selectIndex = $('#'+selectId+' > select > option').index($('#'+selectId+' > select > option:selected')[0]);
    $('#'+selectId).append('<div class="dropselectbox"><h4></h4><span class="FixSelectBrowserSpan"></span><ul style="display:none" style="display:none"><li></li></ul></div>');
    $('#'+selectId+' > div > h4').empty().append($('#'+selectId+' > select > option:selected').text());
    $('.dropselectbox').css("display", 'block');

    //取select的寬度 優(yōu)先級(jí) select樣式中的寬度 - select自動(dòng)的寬度 - 默認(rèn)為60
    var selectcssWidth = $('#'+selectId+'> select').css('width');
    selectcssWidth = typeof(selectcssWidth) =='undefined' ? 0 : parseInt(selectcssWidth.replace('px','')) +5 ;
    var selectWidth = selectcssWidth ? selectcssWidth : ( $('#'+selectId+'> select').width() > 0 ? $('#'+selectId+'> select').width() + 5 : 60);
    $('#'+selectId).css("margin-right",selectWidth);    //修改偏移量
    $('#'+selectId+' > div > h4').css("width", selectWidth); //將原select的寬度賦值給生成的select（并不是h4的總寬度）
    $('#'+selectId+' > div > ul').css("width",selectWidth); //將h4的總寬度賦值給Ul
    $('#'+selectId+' > select').hide();
    $('#'+selectId+' > div').hover(function(){
        $('#'+selectId+' > div > h4').addClass("over");
        $('#'+selectId+' > div > span').addClass("over");
    },function(){
        $('#'+selectId+' > div > h4').removeClass("over");
        $('#'+selectId+' > div > span').removeClass("over");
    });
    $('#'+selectId)
    .bind("focus",function(){
        __clearSelectMenu();
        $('#'+selectId+' > div > h4').addClass("over");
        $('#'+selectId+' > div > span').addClass("over");
    })
    .bind("click",function(e){
        //$('#value2').append('點(diǎn)擊：'+selectIndex+'&nbsp;&nbsp;<br>');
        if($('#'+selectId+' > div > ul').css("display") == 'block'){
            __clearSelectMenu(selectId);
            return false;
        }else{
            if ($.browser.opera){__clearSelectMenu();}
            $('#'+selectId+' > div > h4').addClass("current");
            $('#'+selectId+' > div > span').addClass("over").addClass("current");
            $('#'+selectId+' > div > ul').show();
            var selectZindex = $(this).css('z-index');
            if ($.browser.msie || $.browser.opera){        
                $('.dropdown').removeClass('overclass');        
            }
            $('#'+selectId).addClass('overclass');
            __setSelectValue(selectId);
            var windowspace = ($(window).scrollTop() + document.documentElement.clientHeight) - $(this).offset().top;
            var ulspace = $('#'+selectId+' > div > ul').outerHeight(true);
            var windowspace2 = $(this).offset().top - $(window).scrollTop() - ulspace;
            if (windowspace < ulspace && windowspace2 > 0) {
                $('#'+selectId+' > div > ul').css({top:-ulspace});
            }else{
                $('#'+selectId+' > div > ul').css({top:$('#'+selectId+' > div > h4').outerHeight(true)});
            }
            selectIndex = $('#'+selectId+' > div > ul > li').index($('.selectedli')[0]);
            $(window).scroll(function(){
                var windowspace = ($(window).scrollTop() + document.documentElement.clientHeight) - $('#'+selectId).offset().top;
                var ulspace = $('#'+selectId+' > div > ul').outerHeight(true);
                if (windowspace < ulspace) {
                    $('#'+selectId+' > div > ul').css({top:-ulspace});
                }else{
                    $('#'+selectId+' > div > ul').css({top:$('#'+selectId+' > div > h4').outerHeight(true)});
                }
            });
            //響應(yīng)鼠標(biāo)點(diǎn)擊選擇
            $('#'+selectId+' > div > ul > li').click(function(e){                                        
                    selectIndex = $('#'+selectId+' > div > ul > li').index(this);
                    //$('#value2').append('鼠標(biāo)點(diǎn)擊：'+selectIndex+'&nbsp;&nbsp;<br>');
                    $('#'+selectId+'> select')[0].selectedIndex = selectIndex;
                    $('#'+selectId+' > div > h4').empty().append($('#'+selectId+' > select > option:selected').text());
                    __clearSelectMenu(selectId,selectZindex);
                    e.stopPropagation();
                    e.cancelbubble = true;
                    //SELECT onchange 事件
                    $('#'+selectId+'> select').change();
            })
            .hover(
                 function(){
                        $('#'+selectId+' > div > ul > li').removeClass("over");
                        $(this).addClass("over").addClass("selectedli");
                        selectIndex = $('#'+selectId+' > div > ul > li').index(this);
                    },
                    function(){
                        $(this).removeClass("over");
                    }
            );
            //End
        };
        e.stopPropagation();
    })
    .bind("mousewheel",function(){
        //以后也許支持滾輪    
        /*$('#'+selectId+' > div > ul > li').hover(
            function(){
             return false;
            },
            function(){
                return false;
            }
        );*/
    })
    .bind("dblclick", function(){
        __clearSelectMenu();
        return false;
    })
    .bind("keydown",function(e){
        //var hotkeys = e.keyCode;
        $(this).bind('keydown',function(e){
            if (e.keyCode == 40 || e.keyCode == 38 || e.keyCode == 35 || e.keyCode == 36){
                return false;
            }
        });
        switch(e.keyCode){ //設(shè)置為true可給定case范圍
            case 9:
                return true;
                break;
            case 13:
                //enter
                //$('#value2').append('按回車收到的值：'+selectIndex+'&nbsp;&nbsp;<br>');
                __clearSelectMenu();
                break;
            case 27:
                //esc
                __clearSelectMenu();
                break;
            case 33:
                $('#'+selectId+' > div > ul > li').removeClass("over");
                selectIndex = 0;
                __keyDown(selectId,selectIndex);
                break;
            case 34:
                $('#'+selectId+' > div > ul > li').removeClass("over");
                selectIndex = ($('#'+selectId+' > select > option').length - 1);
                __keyDown(selectId,selectIndex);
                break;
            case 35:
                $('#'+selectId+' > div > ul > li').removeClass("over");
                selectIndex = ($('#'+selectId+' > select > option').length - 1);
                __keyDown(selectId,selectIndex);
                break;
            case 36:
                $('#'+selectId+' > div > ul > li').removeClass("over");
                selectIndex = 0;
                __keyDown(selectId,selectIndex);
                break;
            case 38:
                //up
                //$('#value2').append('原始值：'+selectIndex+'&nbsp;&nbsp;<br>');
                $('#'+selectId+' > div > ul > li').removeClass("over");
                if (selectIndex == 0){
                    selectIndex = 0;
                }else{
                    selectIndex--;
                };
                //$('#value2').append('<span style="color:red;" style="color:red;">向上改變的aa值：</span>'+selectIndex+'&nbsp;&nbsp;');
                __keyDown(selectId,selectIndex);
                break;
            case 40:
                //down
                //$('#value2').append('傳遞過來的：'+selectIndex+'&nbsp;&nbsp;');
                $('#'+selectId+' > div > ul > li').removeClass("over");
                if (selectIndex == ($('#'+selectId+' > select > option').length - 1)){
                    selectIndex = $('#'+selectId+' > select > option').length - 1;
                }else{
                    selectIndex ++;
                };
                //$('#value2').append('<span style="color:blue;" style="color:blue;">向下改變的aa值：</span>'+selectIndex+'&nbsp;&nbsp;');
                __keyDown(selectId,selectIndex);
                break;
            /*case ((hotkeys > 47 && hotkeys < 59) || (hotkeys > 64 && hotkeys < 91) || (hotkeys > 96 && hotkeys < 123)):
                //首字幕查詢預(yù)留接口
                //character = String.fromCharCode(hotkeys).toLowerCase();
                return false;
                break;*/
            default:
                return false;
                break;
        };
    })
    .bind("blur",function(){
        __clearSelectMenu(selectId,selectZindex);
        return false;
    });
    //禁止選擇
    $('.dropselectbox').bind("selectstart",function(){
            return false;
    });
};
function __clearSelectMenu(selectId,selectZindex){
    //$('#value2').append('移除焦點(diǎn)：'+selectIndex+'&nbsp;&nbsp;<br>');
    $('.dropselectbox > ul').empty().hide();
    $('.dropselectbox > h4').removeClass("over").removeClass("current");
    $('.dropselectbox > span').removeClass("over");
    $('#'+selectId).removeClass('overclass');
}
function __setSelectValue(sID){
    $('#'+sID+' > div > ul').empty();
    $.each($('#'+sID+' > select > option'), function(i){
        $('#'+sID+' > div > ul').append("<li class='FixSelectBrowser'>"+$(this).text()+"</li>");
    });
    $('#'+sID+' > div > h4').empty().append($('#'+sID+' > select option:selected').text());
    $('#'+sID+' > div > ul > li').eq($('#'+sID+'> select')[0].selectedIndex).addClass("over").addClass("selectedli");
}
function __keyDown(sID,selectIndex){
    $('#'+sID+'> select')[0].selectedIndex = selectIndex;
    $('#'+sID+' > div > ul > li:eq('+selectIndex+')').toggleClass("over");
    $('#'+sID+' > div > h4').empty().append($('#'+sID+' > select option:selected').text());
    //SELECT onchange 事件
    $('#'+sID+'> select').change();
}
/* 自動(dòng)調(diào)用 */
$(document).ready(function(){
    var s = new Array();
    var t = document.getElementsByTagName('select');
    var j = 0;
    for(var i=0;i<t.length;i++){
        if(t[i].className=='commonselect'){
            s[j] = t[i];
            j++;
        }
    }
    if(j==0)return;
    var k = m = null;
    for(var i=0;i<s.length;i++){
        k = s[i].parentNode;
        m = createDiv(k, i);
        //s[i].replaceNode(m);
        k.replaceChild(m,s[i])
        m.appendChild(s[i]);
        $('#selectbox'+ i).sSelect();
    }    
    function createDiv(p, i){
        var div = document.createElement('div');
        div.className = 'dropdown';
        div.id = 'selectbox' + i;
        div.innerHTML = '&nbsp;';
        p.appendChild(div);
        return div;    
    }
})

HTML應(yīng)用
復(fù)制代碼 代碼如下:

<!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>JQuery SELECT單選模擬</title>
<style type="text/css" bogus="1">
body,div,ul,h4,li {margin:0; padding:0; border:none; list-style:none; font-size:1;}
/*下拉列表select的commonselect樣式 配合jquery.select插件 */
/* select style */
.dropdown {outline:none;z-index:1;display:inline-block;*display:inline; position:relative;}
.dropdown * {-moz-user-select:none;}
.dropselectbox{float:left; position:absolute}
.overclass{ z-index:999} /* 對(duì)于IE下層定位問題的修正樣式 */
.dropdown h4{position:relative;cursor:default; text-indent:5px;text-align:left;display:block;overflow:visible; margin:0; height:20px;font:12px/21px Arial, Helvetica, sans-serif; border:solid 1px #AAA; background:#3B3936 ;color:#CEBC7E;padding-left:0px;}
.dropdown h4.over{border-color:#369;}
.dropdown h4.current{border-color:#003;}
.dropdown div {display:none;position:absolute; left:0px; top:0px;}
.dropdown span {position:absolute;top:4px; right:3px; background:url(ico.gif) no-repeat center; width:16px; height:14px;}
.dropdown ul{position:absolute;display:none;border:1px solid #AAA; background:#333;color:#8E867B;}
.dropdown ul li{text-indent:5px;background:#333;height:19px;display:block;cursor:default;font:400 12px/19px Arial, Helvetica, sans-serif;text-align:left;}
.dropdown ul li.over{background:#369; color:#FFF;}
/* select style */
/* input style */
input.txt{border:solid 1px #AAA; background:#3B3936 ;color:#CEBC7E; height:18px;line-height:18px;}
</style>
<script type="text/javascript" src="jquery132.js" src="jquery132.js"></script>
<script type="text/javascript" src="jquery.select.js" src="jquery.select.js"></script>
</head>
<body style="background:none" style="background:none">
    <h1>Jquery Select(單選) 模擬插件 V1.3.4</h1>
    <form action="#" method="post" style="margin:10px;" style="margin:10px;">
    類型：
    <select name="type" class="commonselect" id="test">
                <option value=""></option>
                <option value="男">類型男</option>
                <option value="女">類型女</option>
        </select>
    性別:
     <select name="sex" style="width:100px" onchange="alert(this.value);">
                <option value="">性別：</option>
                <option value="男">男</option>
                <option value="女">女</option>
        </select>
    <input type="text" size="8" class="txt" name='input'>
    <input type="submit" id="postform" value="提交表單" style="border:1px solid #000; height:23px; margin-left:20px;" />
    </form>
</body>
</html>

可以參考這篇文檔http://chabaoo.cn/jiaoben/21397.html

相關(guān)文章

  • jquery each()源代碼

    jquery each()源代碼

    jquery文檔說 each(callback)作用是以每一個(gè)匹配的元素作為上下文來執(zhí)行一個(gè)函數(shù)。就是用each來遍歷數(shù)組，來執(zhí)行同一個(gè)方法
    2011-02-02
  • jQuery插件HighCharts實(shí)現(xiàn)氣泡圖效果示例【附demo源碼】

    jQuery插件HighCharts實(shí)現(xiàn)氣泡圖效果示例【附demo源碼】

    這篇文章主要介紹了jQuery插件HighCharts實(shí)現(xiàn)氣泡圖效果,結(jié)合完整實(shí)例形式分析了jQuery插件HighCharts繪制氣泡圖的實(shí)現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下
    2017-03-03
  • 使用jquery庫(kù)實(shí)現(xiàn)電梯導(dǎo)航效果

    使用jquery庫(kù)實(shí)現(xiàn)電梯導(dǎo)航效果

    這篇文章主要為大家詳細(xì)介紹了使用jquery庫(kù)實(shí)現(xiàn)電梯導(dǎo)航效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2022-02-02
  • jQuery扁平化風(fēng)格下拉框美化插件FancySelect使用指南

    jQuery扁平化風(fēng)格下拉框美化插件FancySelect使用指南

    這篇文章主要介紹了jQuery扁平化風(fēng)格下拉框美化插件FancySelect使用指南,需要的朋友可以參考下
    2015-02-02
  • jQuery實(shí)現(xiàn)單擊彈出Div層窗口效果(可關(guān)閉可拖動(dòng))

    jQuery實(shí)現(xiàn)單擊彈出Div層窗口效果(可關(guān)閉可拖動(dòng))

    這篇文章主要介紹了jQuery實(shí)現(xiàn)單擊彈出Div層窗口效果,具有可關(guān)閉可拖動(dòng)的功能,涉及jQuery響應(yīng)鼠標(biāo)事件動(dòng)態(tài)變換頁(yè)面元素樣式的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
    2015-09-09
  • EasyUI中datagrid在ie下reload失敗解決方案

    EasyUI中datagrid在ie下reload失敗解決方案

    這篇文章主要介紹了EasyUI中datagrid在ie下reload失敗解決方案，結(jié)合網(wǎng)上搜集來的幾種方案，最終解決了這個(gè)問題，分享給大家，希望對(duì)大家能夠有所幫助。
    2015-03-03
  • js/jquery判斷瀏覽器類型的方法小結(jié)

    js/jquery判斷瀏覽器類型的方法小結(jié)

    有些時(shí)候需要根據(jù)瀏覽器來寫樣式，所以要判斷一下瀏覽器類型，百度了一下，才知道JQuery有個(gè)方法直接判斷，并附上原生的js的判斷方法，分享給大家，有需要的小伙伴可以參考下。
    2015-05-05
  • jQuery的deferred對(duì)象使用詳解

    jQuery的deferred對(duì)象使用詳解

    deferred對(duì)象就是jQuery的回調(diào)函數(shù)解決方案。在英語(yǔ)中，defer的意思是"延遲"，所以deferred對(duì)象的含義就是"延遲"到未來某個(gè)點(diǎn)再執(zhí)行。
    2016-09-09
  • jQuery獲取this當(dāng)前對(duì)象子元素對(duì)象的方法

    jQuery獲取this當(dāng)前對(duì)象子元素對(duì)象的方法

    下面小編就為大家?guī)硪黄猨Query獲取this當(dāng)前對(duì)象子元素對(duì)象的方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2016-11-11
  • jQuery判斷元素是否存在的可靠方法

    jQuery判斷元素是否存在的可靠方法

    這篇文章主要介紹了jQuery判斷元素是否存在的可靠方法,需要的朋友可以參考下
    2014-05-05

最新評(píng)論