当前位置:首页 > 开发 > Web前端 > 前端 > 正文

简单地封装chosen支持option动态生成

发表于: 2014-06-10   作者:bee1314   来源:转载   浏览:
摘要: 为了美化select的显示效果,决定使用chosen来渲染体验。   因为页面中的select的option都是通过handlerbars动态的生成,所以导致options动态的改变时,chosen不能实时的刷新,停留在上一刻,影响用户体验。查询官方的api,只有通过$('#test').chosen('destroy').chosen();销毁一次再重建一次才可以正常的显示,但是如

为了美化select的显示效果,决定使用chosen来渲染体验。

 

因为页面中的select的option都是通过handlerbars动态的生成,所以导致options动态的改变时,chosen不能实时的刷新,停留在上一刻,影响用户体验。查询官方的api,只有通过$('#test').chosen('destroy').chosen();销毁一次再重建一次才可以正常的显示,但是如果这样写,导致页面到处是这样的垃圾代码-丑且脏, 因为有时还要判断出什么时候使用$('#test').chosen({})。于是写一个jquery的插件,来简单地封装下chosen地api,支持我们的场景。

 
 
/**
     * 到处是chosen和chosen('destroy').chosen?
     * 我们要思考root casuse?
     *   根本原因是因为使用handlerbars动态生成的select的内容
     *   导致chosen无法同步刷新,那我们为何不自己扩展呢?
     */
    (function($) {
        /**
         * 创建动态的chosen插件
         * --智能判断chosen有没有加载
         * @param param
         *    param为destroy就为销毁该chosen
         *    param为“”, 表示option不是动态的生成的,页面已经渲染了options
         *    其他的都是为动态生成的options html片段
         */
        $.fn.dynamicChosen = function(param) {
            //简单地设置chosen属性
            var opt = {
                disable_search_threshold: 10,
                no_results_text: ':),暂无匹配'
            };
            return this.each(function() {
                //得到当前的元素id,chosen的id会在元素的id基础上添加_chosen
                var id = $(this).prop('id');
                var $chosenId = $('#' + id + '_chosen');

                if (param == 'destroy') {
                    //如果没有渲染chosen,说明就是普通的select直接隐藏
                    if ($chosenId.length == 0) {
                        $(this).hide();
                    } else {
                        $(this).chosen('destroy').hide();
                    }
                } else {
                    //如果chosen没有在页面渲染
                    if ($chosenId.length == 0) {
                        //trim(param)说明option非动态生成
                        if ($.trim(param)) {
                            $(this).html(param).show().chosen(opt);
                        } else {
                            $(this).show().chosen(opt);
                        }

                    } else {
                        if ($.trim(param)) {
                            $(this).html(param).show().chosen('destroy').chosen(opt);
                        } else {
                            $(this).html(param).show().chosen('destroy').chosen(opt);
                        }
                    }
                }
            });
        }
    })(jQuery);
 

 

使用:
//销毁
$("#test").dynamicChosen('destroy')

//渲染已经存在的select和option
$("#test").dynamicChosen();

//动态的渲染
var tpl = function (templateId, data) {
        var template = Handlebars.compile($(templateId).html());
        return template(data);
    };

$("#test").dynamicChosen(tpl('#test-tpl', {list: {..}}));

 

 

简单地封装chosen支持option动态生成

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号