JQuery SELECT 라디오 시뮬레이션 jQuery.select.js_jquery

jQuery JavaScript Library v1.3.2 기반 단일 선택 시뮬레이션
(이 파일은 zhangjingwei의 Jquery Select(라디오 선택) 시뮬레이션 플러그인 V1.3.4를 기반으로 수정되었습니다.)
a. 원래 Zhangjingwei의 시뮬레이션은 표시 방법에 문제가 있습니다. 텍스트와 번갈아 표시되면 정렬 오류가 발생합니다. 이제 시뮬레이션된 DIV의 표시를 인라인 모드로 변경합니다. 텍스트 줄에 더욱 자연스럽게 삽입됩니다.
b. 파일을 로드한 후 'commonselect'라는 선택 스타일을 자동으로 변환합니다. 호출을 단순화합니다
c. select의 onchange() 이벤트에 대한 응답입니다. 그리고 너비 획득에 대한 작은 조정
jquery.select.js

코드 복사 코드는 다음과 같습니다.

/*
* 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('

');
$('#' selectId ' > div > h4').empty().append($('#' selectId ' > 선택 > 옵션:선택됨').text() );
$('.dropselectbox').css("display", 'block');

//선택 스타일의 너비 우선순위 가져오기 - 자동 너비 선택 - 기본값 60입니다
var selectcssWidth = $('#' selectId '> select').css('width')
selectcssWidth = typeof(selectcssWidth) =='undefine' 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); //생성된 선택 항목에 너비 할당(h4의 전체 너비 아님)
$('#' selectId ' > div > ul').css("width",selectWidth); //Ul에 h4의 전체 너비를 할당합니다.
$('#' selectId ' > select').hide(); ('#' selectId ' > div').hover(function(){
$('#' selectId ' > div > h4').addClass("over");
$( ' #' selectId ' > ("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('클릭: ' selectIndex '
')
if($('#' selectId ' > div > ul').css("display" ) == '차단'){
         __clearSelectMenu(selectId);
                 return false;                          $('#' selectId ' > div > h4').addClass ("현재"); 🎜>          $(' #' selectId ' > ul').show(); $.browser.opera){                                     > windowspace 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                   $('#' select ID ' > div > ul').css({top:-ulspace}); #' selectId ' > h4').outerHeight(true)})
             }
          });
           //响应鼠标点击选择
           $('#' selectId ' > div > ul > li').click(function(e){                                     
                   selectIndex = $('#' selectId ' & gt; ('#' selectId '> select')[0].selectedIndex = selectIndex
                 $('#' selectId ' > div > h4').empty().append($('#' selectId ' > 선택 > 옵션:선택됨').text())
                 __clearSelectMenu(selectId,selectZindex)
               e.stopPropagation();    e.cancelbubble = true
                  // SELECT onchange 사건
                   $('#' selectId '> select').change()
           })
            .hover(
                function(){
                    $('#' selectId ' > div > ul > li').removeClass("over")
                       $(이것) .addClass("over").addClass("selectedli");
                     selectIndex = $('#' selectId ' > div > ul > li').index(this) 🎜>                   function(){
                     $(this).removeClass("over");
                }
           );
            //종료
        };
        e.stopPropagation();
    })
    .bind("mousewheel",function(){
        //以后也许支持滚轮    
       /*$('#' selectId ' > div > ul > li' >            }
        );*/
    } )
    .bind("dblclick", function(){
        __clearSelectMenu();
        return false;
    })
    .bind("keydown",function(e){
        //var hotkeys =
        $(this).bind('keydown',function(e){
           if (e.keyCode == 40 || e.keyCode == 38 || e.keyCode == 35 || e.keyCode == 36){
               false 반환
           }
        });
switch(e.keyCode){ //사례 범위를 제공하려면 true로 설정하세요.
사례 13:
                                       입력
                  //$('# value2').append('값 Enter 키를 눌러 수신됨: ' selectIndex '                                                                                           > 사례 27:
                                                                                       > 🎜>     selectIndex = 0 🎜> $('#' selectId ' > div > ul > li').removeClass("over");
     selectIndex = ($('#' selectId ' > select > option').length - 1)
                                                                                          selectIndex = ($($ '# ' selectId ' > 선택 > 옵션').length - 1)
__keyDown(selectId,selectIndex)
사례 36:
       $ ('#' selectId ' > div > ul > li').removeClass("over");
     selectIndex = 0; >         케이스 38:
               // 위로
                    //$(' #value2').append('원래 값: ' selectIndex'                                                                                       >else{
                    selectIndex--;
                };
               //$('#value2').append('向上改变的aa值：' selectIndex '  ');
                __keyDown(selectId,selectIndex);
                휴식;
            사례 40:
                //down
              //$('#value2').append('传递过来的：' selectIndex '  ');
               $('#' selectId ' > div > ul > li').removeClass("over");
               if (selectIndex == ($('#' selectId ' > 선택 > 옵션').length - 1)){
                  selectIndex = $('#' selectId ' > 선택 > 옵션' ).길이 - 1;
               }else{
                   selectIndex ;
                };
               //$('#value2').append('向下改变的aa值：' selectIndex '  ');
                __keyDown(selectId,selectIndex);
                휴식;
            /*case ((hotkeys > 47 && hotkeys 64 && hotkeys 96 && hotkeys                 / /首字幕查询预留接口
                //character = String.fromCharCode(hotkeys).toLowerCase();
                false를 반환합니다.
               break;*/
           기본값:
               false를 반환합니다.
                휴식;
        };
    })
    .bind("blur",function(){
        __clearSelectMenu(selectId,selectZindex);
        return false;
    });
    //禁止选择
    $('.dropselectbox').bind("selectstart",function(){
            return false;
    });
};
function __clearSelectMenu(selectId,selectZindex){
    //$('#value2').append('移除焦点：' selectIndex '  
');
    $('.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 ' > 선택 > 옵션'), function(i){
        $('#' sID ' > div > ul').append("

" $(this).text() "

");
    });
    $('#' sID ' > div > h4').empty().append($('#' sID ' > 선택 옵션:선택됨').text());
    $('#' sID ' > div > ul > li').eq($('#' sID '> select')[0].selectedIndex).addClass("over"). addClass("selectedli");
}
함수 __keyDown(sID,selectIndex){
    $('#' sID '> select')[0].selectedIndex = selectIndex;
    $('#' sID ' > div > ul > li:eq(' selectIndex ')').toggleClass("over");
    $('#' sID ' > div > h4').empty().append($('#' sID ' > 선택 옵션:선택됨').text());
    //SELECT onchange 사건
    $('#' sID '> select').change();
}
/* 자체 사용 */
$(document).ready(function(){
    var s = new Array();
    var t = document.getElementsByTagName('select ');
    var j = 0;
    for(var i=0;i        if(t[i].className=='commonselect'){
           s[j] =
           j ;
        }
    if(j==0)return;
    var k =
    (var i=0;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 = ' ';
        p.appendChild(div)
        return div;    
    }
})

复代码 代码如下: