当前位置:首页 > 开发 > 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

    震惊

    震惊

编辑推荐
   作者:聂靖宇(niejingyu) 网址:http://xiaopihai.iteye.com/blog/469422 >>> 转载
天空中飘着小雨,实在是适合写代码的时节。 1 1 package ch02.chat; 2 3 import java.io.Serializab
当使用fusionchart时,可能会写一些很多的xml文件,有时候很麻烦。但是完全可以自己封装起来。根据自
对NIO进行封装,使其方便使用。 UML类图: DatagramChannel 打开一个指定端口或随机端口,并可以接
1.jsoup简介 jsoup 是一款Java 的HTML解析器。 2.特点 它提供了一套非常省力的API,可通过类似于jQu
看了echarts的官网介绍:http://echarts.baidu.com/doc/example.html 看了网上人使用js对echarts的
对Raphael画图标的一个jquery简单封装 公司要做一个项目的demo,要求地图上可以插红旗,所以就用到
之前做了一个小项目用到了类似测距的功能 效果图: 这里分享出来希望可以帮助大家首先引入svg.js jQu
struts2支持的下载 , 以及下载方法的实现方式 先说struts的实现 配置struts.xml <action name="g
struts2支持的下载 , 以及下载方法的实现方式 先说struts的实现 配置struts.xml <action name="g
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号