JQuery chosen插件修改

编程语言 2019-03-01 08:40:52 阅读次数: 0

PHP

static public function select_($name = '', $options = array(), $selectedItems = "", $attrib = "", $append = false)
    {
        $options = (array)($options);
        if($append and !isset($options[$selectedItems])) $options[$selectedItems] = $selectedItems;
        if(!is_array($options) or empty($options)) return false;

        /* The begin. */
        $id = $name;
        if(strpos($name, '[') !== false) $id = trim(str_replace(']', '', str_replace('[', '', $name)));
        $id = "id='{$id}'";
        if(strpos($attrib, 'id=') !== false) $id = '';

        /* 多选、单选 */
        $multiple = strpos($attrib, 'multiple') !== false ? true : false;

        $optionSelected = '';
        $liSelected = '';
        if (!is_array($selectedItems)) {
            $selectedItems = explode(',', $selectedItems);
        }
        if (implode(',', $selectedItems)) {
            foreach ($selectedItems as $val) {
                foreach ($_SESSION['selectUsers'] as $key => $value) {
                    if ($val == $key) {
                        $optionSelected .= '<option value="'.$key.'" selected>'.$value.'</option>';
                        if ($multiple) {
                            $liSelected .= '<li class="search-choice_"><span title="'.$value.'">'.$value.'</span><a class="search-choice-close_" onclick="itemDelete(this,\''.$key.'\')"></a></li>';
                        } else {
                            $liSelected = "<a class='chosen-single_ chosen-default_'><span title='".$value."'>".$value."<abbr class='search-choice-close_' onclick='itemDelete(this, \"".$key."\")'></abbr></span><div><b></b></div></a>";
                        }
                        break;
                    }
                }
            }
        }
        if ($multiple) {
            $string =   "<select name='$name' {$id} {$attrib} style='display:none;'>".
                            $optionSelected.
                        "</select>".
                        "<div class='chosen-container_ chosen-container-multi_'>".
                            "<ul class='chosen-choices_'>".
                                $liSelected.
                                "<li class='search-field_'>".
                                    "<input type='text' class='default_' autocomplete='off' placeholder=''>".
                                    "</li>".
                            "</ul>".
                            "<div class='chosen-drop_'>".
                                "<ul class='chosen-results_'>".

                                "</ul>".
                            "</div>".
                        "</div>";
        } else {
            $string =   "<select name='$name' {$id} {$attrib} style='display:none;'>".
                            $optionSelected.
                        "</select>".
                        "<div class='chosen-container_ chosen-container-single_'>";
            $string .=  $liSelected ? $liSelected : "<a class='chosen-single_ chosen-default_'><span title=''> </span><div><b></b></div></a>";
            $string .=  "<div class='chosen-drop_'>".
                                "<div class='chosen-search_'>".
                                    "<input type='text' value='' autocomplete='' placeholder=''>".
                                "</div>".
                                "<ul class='chosen-results_'>".

                                "</ul>".
                            "</div>".
                        "</div>";
        }
        
        return $string;
    }

JS

<?php if($extView = $this->getExtViewFile(__FILE__)){include $extView; return helper::cd();}?>
<?php
if($config->debug)
{
    css::import($themeRoot . 'chosen_.css');
}

$selectUsers = $this->loadmodel('user')->getPairs('noletter,noempty,noclosed', '', '', true);
js::set('selectUsers', $selectUsers);
$this->session->set('selectUsers', $selectUsers);
?>
<script>

$(function(){
    initChosen_();
})

function initChosen_(){
    /* 点击外层DIV触发搜索 */
    $(".chosen-container_").click(function(){
        $(this).find('.chosen-search_ input,.search-field_ input').keyup();
    })

    /* 搜索框 */
    $(".chosen-search_ input,.search-field_ input").on({
        'keyup mouseup':function(e){
            var preTime = $(this).attr('time');/* 上次触发时间 */
            var curTime = new Date().getTime();/* 当前时间 */
            var this_ = $(this);
            setTimeout(function(){/* 延迟0.2s触发搜索 */
                var preTime_ = curTime;
                var curTime_ = new Date().getTime();
                if ((curTime_ - preTime_) >= 200) {
                    doSearch($(this_));
                }
            }, 200);
            $(this).attr('time', curTime);
        },
        'blur':function(){
            $(this).parents('.chosen-container_').find('.chosen-drop_').hide();
        }
    })
}

/* 搜索 */
function doSearch(obj){
    var obj = $(obj);
    var val = obj.val();
    var searchVal = obj.attr('searchVal');
    var container = obj.parents('.chosen-container_');
    var drop = container.find('.chosen-drop_');

    /* 当前搜索条件与上次搜索条件不同时，重新加载选项 */
    if (val != searchVal) {
        var selectHide = obj.parents('.chosen-container_').prev();
        var isMultiple = selectHide.attr('multiple') == 'multiple' ? 1 : 0;
        var list = '';
        if (isMultiple) {
            for (var i in selectUsers) {
                if (selectUsers[i].indexOf(val) > -1) {
                    if (selectHide.find('option[value="'+i+'"]').length > 0) {
                        list += '<li class="result-selected_">'+selectUsers[i]+'</li>';
                    } else {
                        list += '<li class="active-result_" onmousedown="itemSelect(this,\''+i+'\',1)">'+selectUsers[i]+'</li>';
                    }
                }
            }
        } else {
            for (var i in selectUsers) {
                if (selectUsers[i].indexOf(val) > -1) {
                    list += '<li class="active-result_" onmousedown="itemSelect(this,\''+i+'\',0)">'+selectUsers[i]+'</li>';
                }
            }
        }
        drop.find('.chosen-results_').html(list);
        setHighlighted();
    }
    drop.show();/* 显示下拉列表 */
    container.addClass('chosen-container-active_');/* 外侧DIV高亮 */
    drop.find('input').focus();/* 聚焦输入框 */
    obj.attr('searchVal', val);
}

/* 设置高亮 */
function setHighlighted(){
    $('.chosen-results_ li').on({
        'mouseover':function(){
            $(this).addClass('highlighted_');
        },
        'mouseout':function(){
            $(this).removeClass('highlighted_');
        }
    })
}

/* 选中选项 */
function itemSelect(obj,value,isMultiple) {
    var li = $(obj);
    var drop = li.parents('.chosen-drop_');
    var container = li.parents('.chosen-container_');
    var selectHide = container.prev();

    var name = li.text();

    if (selectHide.find('option[value="'+value+'"]').length > 0) {
        return false;
    }

    /* 添加选中项到表单控件select */
    var option = '<option value="'+value+'" selected>'+name+'</option>';
    if (isMultiple) {
        selectHide.append(option).change();
    } else {
        selectHide.html(option).change();
    }

    /* 添加选中项 */
    if (isMultiple) {
        var item =  '<li class="search-choice_">'+
                        '<span title="'+name+'">'+name+'</span>'+
                        '<a class="search-choice-close_" onclick="itemDelete(this,\''+value+'\')"></a>'+
                    '</li>';
        container.find('.search-field_').before(item);
    } else {
        container.find('.chosen-single_').find('span').text(name).attr('title', name).append('<abbr class="search-choice-close" onclick="itemDelete(this,\''+value+'\')"></abbr>');
    }

    /* 设置为选中状态 */
    if (isMultiple) {
        li.addClass('result-selected_').removeClass('active-result_').attr('val', value);
    }
    
    /* 隐藏下拉列表、清空搜索框 */
    drop.hide();
    if (isMultiple) {
        container.find('.search-field_ input').val('');
    } else {
        container.find('.chosen-search_ input').val('');
    }
    container.removeClass('chosen-container-active_');

    /* 触发事件，最好改为判断是否有事件才触发对应的事件 */
    selectHide.change();
    selectHide.click();
    selectHide.mousedown();
    selectHide.mouseup();
    selectHide.keydown();
    selectHide.keyup();

}

/* 删除选项 */
function itemDelete(obj, value, e){
    var obj = $(obj);
    var container = obj.parents('.chosen-container_');
    var selectHide = container.prev();
    var isMultiple = selectHide.attr('multiple') == 'multiple' ? 1 : 0;

    if (isMultiple) {
        container.find('.chosen-results_ [val="'+value+'"]').addClass('active-result_').removeClass('result-selected_');
        obj.parents('li.search-choice_').remove();
    } else {
        container.find('.chosen-single_').find('span').text('').attr('title', '').find('abbr').remove();
    }

    selectHide.find('option[value="'+value+'"]').remove();
    selectHide.change();
    
    /* 阻止冒泡 */
    if (e && e.stopPropagation) {
        e.stopPropagation(); 
    } else {
        window.event.cancelBubble = true; 
    }
}

</script>

CSS

.chosen-container_{width:100%;position:relative;display:inline-block;font-size:14px;vertical-align:middle;zoom:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;*display:inline}
/*.chosen-container_ .chosen-drop_{position:absolute;top:100%;left:-9999px;z-index:1010;width:100%;box-sizing:border-box;background:#fff;border:1px solid #cbcbcb;border:1px solid rgba(0,0,0,.15);border-top:0;box-shadow:0 6px 12px rgba(0,0,0,.175)}*/
.chosen-container_ .chosen-drop_{display:none;position:absolute;top:100%;z-index:1010;width:100%;box-sizing:border-box;background:#fff;border:1px solid #cbcbcb;border:1px solid rgba(0,0,0,.15);border-top:0;box-shadow:0 6px 12px rgba(0,0,0,.175)}
.chosen-container_ .chosen-drop_.chosen-drop-size-limited_{border-top:1px solid rgba(0,0,0,.15)}
.chosen-container_.chosen-with-drop_ .chosen-drop_{left:0}
.chosen-container_ a{cursor:pointer}
.chosen-container_.chosen-up_ .chosen-drop_{top:inherit;bottom:100%;margin-top:auto;margin-bottom:-1px;border-radius:2px 2px 0 0;box-shadow:0 -3px 5px rgba(0,0,0,.175)}
.chosen-container-single_{width:100%;}
.chosen-container-single_ .chosen-single_{display:block;width:100%;height:34px;padding:6px 10px;overflow:hidden;line-height:1.42857143;color:#222;text-decoration:none;white-space:nowrap;vertical-align:middle;background-color:#fff;background-clip:padding-box;border:1px solid #ccc;border-radius:0;box-shadow:inset 0 1px 1px rgba(0,0,0,.075);-webkit-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s}
.chosen-container-single_ .chosen-default_{color:grey}
.chosen-container-single_ .chosen-single_>span{display:block;margin-right:26px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chosen-container-single_ .chosen-single-with-deselect_ span{margin-right:38px}
.chosen-container-single_ .chosen-single_ abbr{position:absolute;top:7px;right:24px;display:block;width:20px;height:20px;font-size:21px;font-weight:700;line-height:14px;color:#000;text-align:center;text-shadow:0 1px 0 #fff;filter:alpha(opacity=20);opacity:.2}
.chosen-container-single_ .chosen-single_ abbr:before{content:'×'}
.chosen-container-single_ .chosen-single_ abbr:focus,.chosen-container-single_ .chosen-single_ abbr:hover{color:#000;text-decoration:none;cursor:pointer;filter:alpha(opacity=50);opacity:.5}
.chosen-container-single_ .chosen-single_ div{position:absolute;top:0;right:0;display:block;height:100%;padding:6px 10px}
.chosen-container-single_ .chosen-single_ div b{display:inline-block;width:0;height:0;margin-left:2px;vertical-align:middle;border-top:4px solid #141414;border-right:4px solid transparent;border-bottom:0 dotted;border-left:4px solid transparent}
.chosen-container-single_ .chosen-search_{position:relative;z-index:1010;padding:3px 4px;margin:0;white-space:nowrap}
.chosen-container-single_ .chosen-search_ input[type=text]{width:100%;height:27px;box-sizing:border-box;padding:5px 26px 5px 10px;margin:1px 0;font-size:12px;line-height:1.5;background-color:#fff;border:1px solid #ccc;border-radius:0;outline:0}
.chosen-container-single_ .chosen-search_ input[type=text]:focus{border-color:#4d90fe}
.chosen-container-single_ .chosen-search_:before{position:absolute;top:10px;right:10px;display:block;font-family:ZenIcon;font-size:14px;font-style:normal;font-weight:400;font-variant:normal;line-height:1;color:grey;text-transform:none;content:'\e603';speak:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.chosen-container-single_ .chosen-drop_{margin-top:-1px;background-clip:padding-box;border-radius:0}
/*.chosen-container-single_.chosen-container-single-nosearch_ .chosen-search_{position:absolute;left:-9999px}*/
.chosen-container-single_.chosen-container-single-nosearch_ .chosen-search_{position:absolute;}
.chosen-container_ .chosen-results_{position:relative;max-height:240px;padding:0;margin:0;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}
.chosen-container_ .chosen-results_ li{display:none;padding:5px 10px;margin:0;line-height:15px;list-style:none;-webkit-transition:background-color .3s cubic-bezier(.175,.885,.32,1);transition:background-color .3s cubic-bezier(.175,.885,.32,1);-webkit-touch-callout:none}
.chosen-container_ .chosen-results_ li.active-result_{display:list-item;cursor:pointer}
.chosen-container_ .chosen-results_ li.disabled-result_{display:list-item;color:#ccc;cursor:default}
.chosen-container_ .chosen-results_ li.highlighted_{color:#1a4f85;background-color:#ddd}
.chosen-container_ .chosen-results_ li.no-results_{display:list-item;background:#f4f4f4}
.chosen-container_ .chosen-results_ li.group-result_{display:list-item;font-weight:700;cursor:default}
.chosen-container_ .chosen-results_ li.group-option_{padding-left:15px}
.chosen-container_ .chosen-results_ li em{font-style:normal;text-decoration:underline}
.chosen-container-multi_ .chosen-choices_{position:relative;width:100%;min-height:34px;min-height:32px\9;box-sizing:border-box;padding:0;margin:0;overflow:hidden;cursor:text;background-color:#fff;border:1px solid #ccc;border-radius:0;box-shadow:inset 0 1px 1px rgba(0,0,0,.075);-webkit-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s}
.chosen-container-multi_ .chosen-choices_:after,.chosen-container-multi_ .chosen-choices_:before{display:table;content:" "}
.chosen-container-multi_ .chosen-choices_:after{clear:both}
.chosen-container-multi_ .chosen-choices_ li{display:block;float:left;padding:0 6px;margin:5px 0 0 6px;list-style:none}
.chosen-container-multi_ .chosen-choices_ li.search-field_{padding:0;margin-bottom:4px;white-space:nowrap}
.chosen-container-multi_ .chosen-choices_ li.search-field_ input[type=text]{height:20px;font-size:100%;color:grey;background:0 0!important;border:0!important;border-radius:0;outline:0;box-shadow:none}
.chosen-container-multi_ .chosen-choices_ li.search-field_ .default_{color:#999}
.chosen-container-multi_ .chosen-choices_ li.search-field_:before{position:absolute;right:8px;bottom:8px;display:block;font-family:ZenIcon;font-size:14px;font-style:normal;font-weight:400;font-variant:normal;line-height:1;color:grey;text-transform:none;content:'\e603';opacity:0;-webkit-transition:opacity .3s cubic-bezier(.175,.885,.32,1);transition:opacity .3s cubic-bezier(.175,.885,.32,1);speak:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.chosen-container-multi_ .chosen-choices_ li.search-choice_{position:relative;padding:3px 20px 3px 5px;line-height:12px;cursor:default;background-color:#f1f1f1;background-clip:padding-box;border:1px solid #ddd;border-radius:0;box-shadow:0 0 2px #fff inset,0 1px 0 rgba(0,0,0,.05);-webkit-transition:all .5s cubic-bezier(.175,.885,.32,1);transition:all .5s cubic-bezier(.175,.885,.32,1)}
.chosen-container-multi_ .chosen-choices_ li.search-choice_:hover{background-color:#fff;border-color:#c4c4c4;box-shadow:0 1px 0 rgba(0,0,0,.1)}
.chosen-container-multi_ .chosen-choices_ li.search-choice_ .search-choice-close_{position:absolute;top:0;right:0;display:block;width:20px;height:20px;font-size:16.8px;font-weight:700;line-height:14px;color:#000;text-align:center;text-shadow:0 1px 0 #fff;filter:alpha(opacity=20);opacity:.2}
.chosen-container-multi_ .chosen-choices_ li.search-choice_ .search-choice-close_:before{content:'×'}
.chosen-container-multi_ .chosen-choices_ li.search-choice_ .search-choice-close_:focus,.chosen-container-multi_ .chosen-choices_ li.search-choice_ .search-choice-close_:hover{color:#000;text-decoration:none;cursor:pointer;filter:alpha(opacity=50);opacity:.5}
.chosen-container-multi_ .chosen-choices_ li.search-choice-disabled_{padding-right:5px;color:#666;background-color:#e4e4e4;border:1px solid #ccc}
.chosen-container-multi_ .chosen-choices_ li.search-choice-focus_{background:#d4d4d4}
.chosen-container-multi_ .chosen-choices_ li.search-choice-focus_ .search-choice-close_{background-position:-42px -10px}
.chosen-container-multi_ .chosen-results_{padding:5px 0;margin:0}
.chosen-container-multi_ .chosen-drop_ .result-selected_{display:list-item;color:#ccc;cursor:default}
.chosen-container-active_ .chosen-single_{border-color:#4d90fe;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(77,144,254,.6)}
.chosen-container-active_.chosen-with-drop_ .chosen-single_{border:1px solid #cbcbcb;border:1px solid rgba(0,0,0,.15);border-bottom-right-radius:0;border-bottom-left-radius:0;box-shadow:0 6px 12px rgba(0,0,0,.175)}
.chosen-container-active_.chosen-with-drop_ .chosen-single_ div{background:0 0;border-left:none}
.chosen-container-active_.chosen-with-drop_ .chosen-single_ div b{content:"";border-top:0 dotted;border-bottom:4px solid #141414}
.chosen-container-active_.chosen-with-drop_.chosen-up_ .chosen-single_{border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:0;box-shadow:0 6px 12px rgba(0,0,0,.175)}
.chosen-container-active_ .chosen-choices_{border-color:#4d90fe;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(77,144,254,.6)}
.chosen-container-active_ .chosen-choices_ li.search-field_ input[type=text]{color:#111!important}
.chosen-container-active_ .chosen-choices_ li.search-field_:before{opacity:1}
.chosen-disabled_{cursor:default;opacity:.5!important}
.chosen-disabled_ .chosen-single_{cursor:default}
.chosen-disabled_ .chosen-choices_ .search-choice_ .search-choice-close_{cursor:default}

调用

<?php 
html::select_('account', array('0' => 'user0', '1' => 'user1'), '', "class='form-control chosen_' onchange='testChange(this)' ").
?>

猜你喜欢

转载自blog.csdn.net/qq_17613195/article/details/88048472
今日推荐
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
周排行
rbac——界面、权限
Apache CXF + SpringMVC 整合发布WebService
so插件化
Vue.js实战系列---图标字体制作（svg格式）
PAT乙级 1007 素数对猜想(孪生素数对) (20分) ---（C语言 + 详细注释）
被IRM保护的文档，打开失败
Calendar和Date计算日期差的小问题
win10子系统ubuntu18.4安装docker
利用Wrap Shell Script定位Android Native内存泄漏
MySQL: Transaction (Part I - Basic Concept)
每日归档
更多
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022