zoukankan      html  css  js  c++  java
  • 写的一个select插件很粗糙;慢慢修改

    $.createSelect= function(options){
        $(options.selectors).each(function(index, item){
            $(item).each(function(index, selector){
                if($(selector).is('select')){
                    var optionLength = $(this).find('option').length;
                    if(optionLength > 0){
                        var divClass = $(this).attr('class');
                        var jsScroll = '<div class="'+divClass+' selector"><span>'+$(this).find('option').eq(0).text()+'</span><ul>';
                        for(var i = 0 ; i < optionLength; i++){
                            var $op = $(this).find("option").eq(i);
                             jsScroll += "<li val='" + $op.attr("value") + "'>" + $op.html() + "</li>
    ";
                        }
                        jsScroll += '</ul></div>';
                        $(this).after(jsScroll);
                        $(this).hide();
                        var $divW = $('.'+divClass).outerWidth();
                        $('.'+divClass).find('span').css({'width':$divW-5}).on('click',function(){
                                       $(this).next('ul').show();
                        }).end().find('ul').css({'width':$divW}).find('li')
                        .on({
                            'mouseover':function(){$(this).addClass('cur')},
                            'mouseout':function(){$(this).removeClass('cur')},
                            'click':function(){
                            $(this).closest('ul').hide().siblings('span').text($(this).text());
                            }
                        });
                    }
                }
            })
        })
    }
    $.createSelect({
        'selectors':['.selector1']
    })
    .selector{border:1px solid #ccc;position:relative;}
    .selector span{padding-left: 5px;background:url(icon.png) no-repeat 265px -19px ;display: inline-block;width:100%;height:100%; cursor: pointer;}
    .selector ul{position:absolute;top:31px;left:-1px;width:300px;border:1px solid #ccc;display:none;}
    .selector ul li {height:25px;line-height:25px;padding-left:5px; cursor: pointer;}
    .selector ul li.cur{background: #eee;}
  • 相关阅读:
    fastjson 简单使用 及其JSONObject使用
    HttpClient 的使用
    python操作excel xlwt (转)
    matplotlib 设置标题 xy标题等
    matplotlib 饼状图
    Mac下面 matplotlib 中文无法显示解决
    matplotlib 折线图
    matplotlib条形图
    matplotlib直方图
    python matplotlib配置
  • 原文地址:https://www.cnblogs.com/clearfix/p/4163064.html
Copyright © 2011-2022 走看看