select2 如何自定义提示信息-布布扣-bubuko.com

  最近项目中使用到了select2来美化和丰富下拉框的功能,这款插件功能丰富,使用简单,可以对已经生成的select标签进行改造,也可以对json数据直接生成下拉列表,包括一些检索功能,异步加载功能等,能够很大程度的满足视觉和交互的要求。是开发过程中不可多得的一款利器。

官方文档是英文文档且是以问答形式展示他的可配置项的,可能作者会觉得这样做比较有趣,但是对于渣渣英语的我来说,肯定是一种煎熬, 现在和大家分享一下在开发过程中的一些问题:

一、使用篇

1.根据官方文档的提示配置了placeholder却不起作用;

  1.1  你需要在select标签中放置一个空的option标签,用来做placeholder文字的存储容器;

  1.2  你要在select标签上添加一个属性“data-placeholder=‘ 你要提示的placeholder  ‘”

  1.3  最后才是在select2 的配置项中加入配置项"placeholder: ‘请选择‘,"

  而文档中却没有提到这些东西,小小的一个功能藏这么多猫腻,真是心塞;

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="bower_components/select2/dist/css/select2.css">
    </head>
    <body>
       <select data-tags="true" data-placeholder="请选择" >
           <option></option>
           <option value="1">1111</option>
           <option value="2">2222</option>
           <option value="3">3333</option>
           <option value="4">4444</option>
       </select>

    </body>
    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="bower_components/select2/dist/js/select2.min.js"></script>
    <script>
        $("select").select2({
          placeholder: "请选择",
          allowClear: 0,
          minimumResultsForSearch: Infinity,
          width:200
        });
    </script>
</html>

2. 取消下拉框的检索功能;

  配置项为 { minimumResultsForSearch: Infinity, }

二、改造篇

一.下拉框选择过程中弹框确认

  该类事件可以理解为在select2对象在操作的各个阶段的钩子函数,当然官方为我们配置相应的接口,允许我们在打开,关闭,选前,选中,选后等时间阶段来处理我们配置的回调函数;

  这类事件(点击查看)可以通过在on绑定在select2实例上,一般性的功能可以在回调函数中处理;

            $("select").select2({
                placeholder: ‘请选择‘
            }).on("select2:selecting",function(e){
                 alert(" 我选中了 ")
            });

  现在有一个棘手的问题,我需要在选中的一瞬间进行弹框提示,然后不允许select2的其他事件继续向执行,然后经过弹框确认后再继续向下执行,此时弹框不能做出任何改变;

  首先在点击模态框的过程中,不能让select下拉框关闭:

  我们需要进行2步骤操作:

  1.1 在弹框出来后,除了点击“确认”和“取消”按钮,点击其他地方不能关闭下拉框;

  select2会在其构造函数BaseSelection的原型上定义关闭方法,关闭方法中使用自定义的事件关联到对应id的盒子上,我们可以在这个方法中来阻断关闭操作;

  BaseSelection.prototype._attachCloseHandler = function (container) {
    var self = this;
    $(document.body).on(‘mousedown.select2.‘ + container.id, function (e) {
      var $target = $(e.target);

      var $select = $target.closest(‘.select2‘);

      var $all = $(‘.select2.select2-container--open‘);

      $all.each(function () {
        var $this = $(this);
        if (this == $select[0]) {
          return;
        }
        var $element = $this.data(‘element‘);
        //在模态框存在的条件下,禁止使用select2的关闭功能(这里可以根据你使用的类来灵活操作)
        var mask = $(".layui-layer-shade");
        if(mask.length == 0){
          $element.select2(‘close‘);
        }
      });
    });
  };

  

  1.2 在选择select2框下的内容时,不能立即执行回调函数,回调函数必须放在“确认”按钮点击后处理;

通常在最初程序设计的时候,正确的做法应该是把后续函数设计在layer的确认回调函数中,我本来不打算使用select2插件,但是产品的世界你懂得,变化是随时随地发生的。

    最初的函数是通过监控select标签的change状态来链式触发的,这一点很重要,如果想把目标回调函数放到select2的钩子函数中,会直接执行,不符合我们弹框进行确认取消的目的;

    如何实现本地的这种异步操作?其实我们需要使用一个中间函数,让这个函数去触发select标签的change事件。

 var selectWebNamer = $(".selectWebName").select2({
                myMsg:‘无可配置网站‘,    //此处不是select的配置项后面解说
                placeholder: ‘请选择‘
            }).on("select2:selecting",function(e){
                if(data.siteList.length==0){
                    return  false;
                }
                if(!that.status.canChange){
                    that._confirmChange(e, that._queryParam,this);
                }
            });

      第一件事情:阻止默认事件  event.preventDefault();  我们的异步函数我们自己来控制,select2取消你自作主张的行为;

       此时绑定在select2:selecting 事件上的函数会去调起弹框窗口;

    that._queryParam 是中间函数,这个函数会在确认按钮后执行;下一步会触发真正的select标签change事件;

    而event事件是select2包装后的事件,这个包装好的事件可以让我们跟踪到真正需要点击的select 标签;所以在 that._queryParam 中需要带入这个event对象;

    在确认或取消点击的一瞬间select2的下拉框要关闭,所以此时通过指正传入这个select2对象也是有必要的;

  _confirmChange:function(event,callback,$this){
            var that = this;
            event.preventDefault();
            $(".layui-layer-shade").remove();
            layer.closeAll();
            layer.open({
                   type: 1,
                   title: ‘返回‘,
                   area: [‘500px‘, ‘270px‘],
                   btn: [ ‘确认‘,‘取消‘],
                   closeBtn: 2,
                   content: $(‘#changeMsg‘),
                   btn1: function (index) {
                       layer.closeAll();
                       if(callback){
                           callback(event);
                           $($this).select2(‘close‘);
                           that.status.canChange = true;
                       }
                   },
                   btn2: function (index) {
                       layer.close(index);
                       $($this).select2(‘close‘);
                   }
               });
           //}
        },

    event对象中包含了我们现在操作的dom对象,和当前选中的option上的值;

     jquery 如何选中 select中某个option?,用的不多,可能大家都忘记了吧。

    此时,我们的change事件被触发了,就和我们手动点击了option 一样,后续的代码可以顺利执行了。

  _queryParam:function(event){
            if(!event){
                return false;
            }
            var target = event.currentTarget;
            var name  = event.params.args.data.text;
            $(target).val(name).trigger("change");
        },

二、如何修改select2的提示信息

    采用select2实例化后如果后台没有给我们返回数据的话,select2会友好的在下拉框处提示“No Result Is Fonud”(貌似是这样)

    然后,可爱的交互妹妹说,不行,我不要看英文,我不认识。。。。。 好吧,你赢。

    检查了一下,好像没有这个提示信息配置api,于是我就邪恶的找到引入文件中的select2.min.js    ctrl+R(“No Result Is Fonud” --------" 别瞎拉了,后台没返回")

    ok  懒得改,就这样。

    过了一会儿交互妹妹不干了,怎么都是“别瞎拉了,后台没返回”,我要的是“呵呵,我不想给你返回 ”,“ 返回过程中被恐龙吃掉了 ”,“你太丑了,不给你看”。。。。。。。

    好吧好吧,我给你配置成你想说啥说啥还不行吗。

    看了一下文档,作者一看就是高手提供了10来种语言的提示信息,原来人家本来就有中文版的“别瞎拉了,你后台没返回”,还有英文版的“don`t  blind pull la , then didn‘t give us ”,还有日文版的“ 雅蠛蝶雅蠛蝶” ,可恨的是zh-CH.js和zh-TW.js  是分别简体和繁体的,丫的,搞事情。

    如果没有要求提示不一样的内容,直接在配置项中设置language就可以使用对应的语言;

    如果想要提示不应的内容,需要手动改造一下,让它去替换。

    我们找到与结果相关的Result模块,并找到其原型上的append方法;

    我们在option上使用的字段是myMsg ,来配置本下拉框的无内容提示,

    原来的提示条件最好给他保留 如果我没有配置myMsg字段那你就按照你原来的处理,如果我有配置myMsg字段,你就要按照我的来。

      if( data.results == null || data.results.length === 0)&& !myMsg)  {   你原来怎么处理就怎么处理  }

         else if((data.results == null || data.results.length === 0)&& !!myMsg){   在result:message 时间的参数中加入我们的信息  }

  Results.prototype.append = function (data) {
    this.hideLoading();
    var myMsg = this.options.options.myMsg;   //获取提示文字
    var $options = [];
    if ((data.results == null || data.results.length === 0)&& !myMsg) {   //按你的来
      if (this.$results.children().length === 0) {
        this.trigger(‘results:message‘, {
          message: ‘noResults‘
        });
      }
      return;
    }else if((data.results == null || data.results.length === 0)&& !!myMsg){   //按我的来
      if (this.$results.children().length === 0) {
        this.trigger(‘results:message‘, {
          message: ‘noResults‘,
          myMessage:myMsg
        });
      }
      return;
    }

    data.results = this.sort(data.results);

    for (var d = 0; d < data.results.length; d++) {
      var item = data.results[d];

      var $option = this.option(item);

      $options.push($option);
    }

    this.$results.append($options);
  };

  然后顺藤摸瓜,从results:message事件上摸到展示displayMessage方法上,然后我们判断一下 “myMessage” 带过来了没有,如果带过来了,那就用我们的提示

  Results.prototype.displayMessage = function (params) {
    var escapeMarkup = this.options.get(‘escapeMarkup‘);
    this.clear();
    this.hideLoading();
    var $message = $(
      ‘<li role="treeitem" aria-live="assertive"‘ +
      ‘ class="select2-results__option"></li>‘
    );

    var message = this.options.get(‘translations‘).get(params.message);
    $message.append(
      escapeMarkup(
        params.myMessage? params.myMessage:message(params.args)    //决定用我们的提示还是它自己的提示。
      )
    );

    $message[0].className += ‘ select2-results__message‘;

    this.$results.append($message);
  };

  ok 至此,交互妹子的需求都实现了,select2的本次改造也结束了。

原文:http://www.cnblogs.com/wuhaozhou/p/7449661.html

 var selectWebNamer = $(".selectWebName").select2({
                myMsg:‘无可配置网站‘,    //此处不是select的配置项后面解说
                placeholder: ‘请选择‘
            }).on("select2:selecting",function(e){
                if(data.siteList.length==0){
                    return  false;
                }
                if(!that.status.canChange){
                    that._confirmChange(e, that._queryParam,this);
                }
            });
  Results.prototype.append = function (data) {
    this.hideLoading();
    var myMsg = this.options.options.myMsg;   //获取提示文字
    var $options = [];
    if ((data.results == null || data.results.length === 0)&& !myMsg) {   //按你的来
      if (this.$results.children().length === 0) {
        this.trigger(‘results:message‘, {
          message: ‘noResults‘
        });
      }
      return;
    }else if((data.results == null || data.results.length === 0)&& !!myMsg){   //按我的来
      if (this.$results.children().length === 0) {
        this.trigger(‘results:message‘, {
          message: ‘noResults‘,
          myMessage:myMsg
        });
      }
      return;
    }

    data.results = this.sort(data.results);

    for (var d = 0; d < data.results.length; d++) {
      var item = data.results[d];

      var $option = this.option(item);

      $options.push($option);
    }

    this.$results.append($options);
  };

  然后顺藤摸瓜,从results:message事件上摸到展示displayMessage方法上,然后我们判断一下 “myMessage” 带过来了没有,如果带过来了,那就用我们的提示

  Results.prototype.displayMessage = function (params) {
    var escapeMarkup = this.options.get(‘escapeMarkup‘);
    this.clear();
    this.hideLoading();
    var $message = $(
      ‘<li role="treeitem" aria-live="assertive"‘ +
      ‘ class="select2-results__option"></li>‘
    );

    var message = this.options.get(‘translations‘).get(params.message);
    $message.append(
      escapeMarkup(
        params.myMessage? params.myMessage:message(params.args)    //决定用我们的提示还是它自己的提示。
      )
    );

    $message[0].className += ‘ select2-results__message‘;

    this.$results.append($message);
  };

         else if((data.results == null || data.results.length === 0)&& !!myMsg){   在result:message 时间的参数中加入我们的信息  }

      if( data.results == null || data.results.length === 0)&& !myMsg)  {   你原来怎么处理就怎么处理  }

    原来的提示条件最好给他保留 如果我没有配置myMsg字段那你就按照你原来的处理,如果我有配置myMsg字段,你就要按照我的来。

    我们在option上使用的字段是myMsg ,来配置本下拉框的无内容提示,

    我们找到与结果相关的Result模块,并找到其原型上的append方法;

    如果想要提示不应的内容,需要手动改造一下,让它去替换。

    如果没有要求提示不一样的内容,直接在配置项中设置language就可以使用对应的语言;

    看了一下文档,作者一看就是高手提供了10来种语言的提示信息,原来人家本来就有中文版的“别瞎拉了,你后台没返回”,还有英文版的“don`t  blind pull la , then didn‘t give us ”,还有日文版的“ 雅蠛蝶雅蠛蝶” ,可恨的是zh-CH.js和zh-TW.js  是分别简体和繁体的,丫的,搞事情。

二、如何修改select2的提示信息

    采用select2实例化后如果后台没有给我们返回数据的话,select2会友好的在下拉框处提示“No Result Is Fonud”(貌似是这样)

  _queryParam:function(event){
            if(!event){
                return false;
            }
            var target = event.currentTarget;
            var name  = event.params.args.data.text;
            $(target).val(name).trigger("change");
        },

    此时,我们的change事件被触发了,就和我们手动点击了option 一样,后续的代码可以顺利执行了。

     jquery 如何选中 select中某个option?,用的不多,可能大家都忘记了吧。

    event对象中包含了我们现在操作的dom对象,和当前选中的option上的值;

  _confirmChange:function(event,callback,$this){
            var that = this;
            event.preventDefault();
            $(".layui-layer-shade").remove();
            layer.closeAll();
            layer.open({
                   type: 1,
                   title: ‘返回‘,
                   area: [‘500px‘, ‘270px‘],
                   btn: [ ‘确认‘,‘取消‘],
                   closeBtn: 2,
                   content: $(‘#changeMsg‘),
                   btn1: function (index) {
                       layer.closeAll();
                       if(callback){
                           callback(event);
                           $($this).select2(‘close‘);
                           that.status.canChange = true;
                       }
                   },
                   btn2: function (index) {
                       layer.close(index);
                       $($this).select2(‘close‘);
                   }
               });
           //}
        },

    在确认或取消点击的一瞬间select2的下拉框要关闭,所以此时通过指正传入这个select2对象也是有必要的;

    而event事件是select2包装后的事件,这个包装好的事件可以让我们跟踪到真正需要点击的select 标签;所以在 that._queryParam 中需要带入这个event对象;

    that._queryParam 是中间函数,这个函数会在确认按钮后执行;下一步会触发真正的select标签change事件;

       此时绑定在select2:selecting 事件上的函数会去调起弹框窗口;

      第一件事情:阻止默认事件  event.preventDefault();  我们的异步函数我们自己来控制,select2取消你自作主张的行为;

    如何实现本地的这种异步操作?其实我们需要使用一个中间函数,让这个函数去触发select标签的change事件。

    最初的函数是通过监控select标签的change状态来链式触发的,这一点很重要,如果想把目标回调函数放到select2的钩子函数中,会直接执行,不符合我们弹框进行确认取消的目的;

通常在最初程序设计的时候,正确的做法应该是把后续函数设计在layer的确认回调函数中,我本来不打算使用select2插件,但是产品的世界你懂得,变化是随时随地发生的。

  1.2 在选择select2框下的内容时,不能立即执行回调函数,回调函数必须放在“确认”按钮点击后处理;

  BaseSelection.prototype._attachCloseHandler = function (container) {
    var self = this;
    $(document.body).on(‘mousedown.select2.‘ + container.id, function (e) {
      var $target = $(e.target);

      var $select = $target.closest(‘.select2‘);

      var $all = $(‘.select2.select2-container--open‘);

      $all.each(function () {
        var $this = $(this);
        if (this == $select[0]) {
          return;
        }
        var $element = $this.data(‘element‘);
        //在模态框存在的条件下,禁止使用select2的关闭功能(这里可以根据你使用的类来灵活操作)
        var mask = $(".layui-layer-shade");
        if(mask.length == 0){
          $element.select2(‘close‘);
        }
      });
    });
  };

  select2会在其构造函数BaseSelection的原型上定义关闭方法,关闭方法中使用自定义的事件关联到对应id的盒子上,我们可以在这个方法中来阻断关闭操作;

  1.1 在弹框出来后,除了点击“确认”和“取消”按钮,点击其他地方不能关闭下拉框;

  我们需要进行2步骤操作:

  首先在点击模态框的过程中,不能让select下拉框关闭:

  现在有一个棘手的问题,我需要在选中的一瞬间进行弹框提示,然后不允许select2的其他事件继续向执行,然后经过弹框确认后再继续向下执行,此时弹框不能做出任何改变;

            $("select").select2({
                placeholder: ‘请选择‘
            }).on("select2:selecting",function(e){
                 alert(" 我选中了 ")
            });

  这类事件(点击查看)可以通过在on绑定在select2实例上,一般性的功能可以在回调函数中处理;

  该类事件可以理解为在select2对象在操作的各个阶段的钩子函数,当然官方为我们配置相应的接口,允许我们在打开,关闭,选前,选中,选后等时间阶段来处理我们配置的回调函数;

一.下拉框选择过程中弹框确认

原文地址:https://www.cnblogs.com/wzjwffg/p/9883816.html

时间: 2024-10-12 06:13:45

select2 如何自定义提示信息-布布扣-bubuko.com的相关文章

select2 如何自定义提示信息

select2使用 ; select2 placeholder ; select2 搜索框 ; select2 改造 最近项目中使用到了select2来美化和丰富下拉框的功能,这款插件功能丰富,使用简单,可以对已经生成的select标签进行改造,也可以对json数据直接生成下拉列表,包括一些检索功能,异步加载功能等,能够很大程度的满足视觉和交互的要求.是开发过程中不可多得的一款利器. 官方文档是英文文档且是以问答形式展示他的可配置项的,可能作者会觉得这样做比较有趣,但是对于渣渣英语的我来说,肯定

Uploadify自定义提示信息

Uploadify是一款基于Jquery的上传插件,用起来很方便.但上传过程中的提示语言为英文,这里整理下如何修改英文为中文提示.方法1:直接修改uploadify.js中的提示信息,将英文提示改成对应的中文.不过从软件设计的角度来说,直接修改原类库不是最好的解决方案,会影响到软件的升级. 方法2:重写Uploadify事件'overrideEvents' : [ 'onDialogClose', 'onUploadError', 'onSelectError' ]当重写onDialogClos

select2 插件自定义 tag 选择问题

问题描述 select2 设置 tags = true 的时候可以输入并选择自定义的内容.但是最近出现了 <select> 重新插入初始化的时候,选择了自定义 tag 但是界面没有更新的情况. 插件版本: select2 4.0.1 查找 跟着源码跑了几遍才发现 select2 会对选择进行过滤,通过 getHighlightedResults 方法找到 select option:selected 的对应选项,如果当期 tag 是已选中的就直接 self.trigger('close', {

【转载】tp自定义提示信息页面

原文链接 [TP笔记]ThinkPHP自定义错误页面.成功页面及异常页面 2014/06/20 | ThinkPHP | 13 条评论 | (5评) | 看了前面分享的一篇<什么是真正的程序员?>,觉得自己离这个目标还差的很远,所以要抓紧朝着这个方向前进.作为一名PHP小码农,掌握一种框架是必须的.所以今天开始我们就从国产PHP框架 ThinkPHP 开始学起~ 为什么会选择 ThinkPHP 呢?首先,作为一款国产PHP框架,文档肯定比国外那些框架要丰富的多,而且容易看懂:其次,ThinkP

织梦搜索结果为空时输出自定义提示信息

打开 search.htm 搜索结果模板文件,把你的分页条标签,例如 {dede:pagelist listsize=4} 改成 {dede:pagelist listsize=4 runphp=yes} @me = (strpos(@me,'0条') ? "<p style='color:#f00;'>没有相关记录</p>" : @me); {/dede:pagelist} 原文地址:https://www.cnblogs.com/dedevip/p/9902

easyui 自定义验证,动态设置提示信息

//自定义验证规则 名称为name //$.fn.validatebox.defaults.rules.name.message 动态自定义提示内容 $.extend($.fn.validatebox.defaults.rules, { name: { validator: function (value, param) { var error=false;; if(!/^\S{4,25}$/.test(value)){ //4-25验证 $.fn.validatebox.defaults.ru

[IOS]swift自定义uicollectionviewcell

刚刚接触swift以及ios,不是很理解有的逻辑,导致某些问题.这里分享一下swift自定义uicollectionviewcell 首先我的viewcontroller不是直接继承uicollectionviewcontroller,而是添加的uicollectionview到我的storyboard, 然后再新建一个swift的文件,让这个swift继承uicollectionviewcell import Foundation class SVGCell :UICollectionView

linux中自定义回收站

myrm(){ D=/tmp/$(date +%Y%m%d%H%M%S); mkdir -p $D; mv "[email protected]" $D && echo "moved to $D ok"; } [[email protected] test]# myrm(){ D=/tmp/$(date +%Y%m%d%H%M%S); mkdir -p $D;  mv "[email protected]" $D &&am

Zabbix 之自定义Key

1.监控进程/usr/local/zabbix/bin/zabbix_get -s 127.0.0.1 -k "net.tcp.service[http]" 2.监控端口/usr/local/zabbix/bin/zabbix_get -s 127.0.0.1 -k "net.tcp.port[,80]" 结果:1存在,0不存在: 3.进程数量/usr/local/zabbix/bin/zabbix_get -s 127.0.0.1 -k "proc.nu