vim配置_vim配置文件 - CSDN
精华内容
参与话题
  • bootstrap select修改默认 图标

    千次阅读 2018-08-07 15:44:37
    select { /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/ border: solid 1px #000; /*很关键:将默认的select选择框样式清除*/ appearance:none; -moz-appearance:none; -webkit-appearance:none;...

    添加css

    select {
        /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/
        border: solid 1px #000;
    
        /*很关键:将默认的select选择框样式清除*/
        appearance:none;
        -moz-appearance:none;
        -webkit-appearance:none;
    
        /*在选择框的最右侧中间显示小箭头图片*/
        background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent !important;
    
    
        /*为下拉小箭头留出一点位置,避免被文字覆盖*/
        padding-right: 14px;
    }

    一定要加!important,否则会被覆盖

    展开全文
  • Bootstrap-select插件增加选项插图

    千次阅读 2018-07-09 22:27:19
    正事儿项目需要,要在某页面的select项中加入品牌logo图片,其他页面中的选择框都使用的Bootstrap-select插件,查看源码后发现它只支持在<option/>标签中添加 'data-icon' 属性(下面代码中的icon...

    0. 安装/引入 与使用

    点击这里进入官方页,查看引入方法与基本使用.

    1. 正事儿

    项目需要,要在某页面的select项中加入品牌logo图片,其他页面中的选择框都使用的Bootstrap-select插件,查看源码后发现它只支持在<option/>标签中添加 'data-icon' 属性(下面代码中的icon变量):

    var optionClass = this.className || '',
                inline = htmlEscape(this.style.cssText),
                text = $this.data('content') ? $this.data('content') : $this.html(),
                tokens = $this.data('tokens') ? $this.data('tokens') : null,
                subtext = typeof $this.data('subtext') !== 'undefined' ? '<small class="text-muted">' + $this.data('subtext') + '</small>' : '',
                icon = typeof $this.data('icon') !== 'undefined' ? '<span class="' + that.options.iconBase + ' ' + $this.data('icon') + '"></span> ' : '',
                $parent = $this.parent(),
                isOptgroup = $parent[0].tagName === 'OPTGROUP',
                isOptgroupDisabled = isOptgroup && $parent[0].disabled,
                isDisabled = this.disabled || isOptgroupDisabled,
                prevHiddenIndex;

    然后在后面的代码中拼接html:

            if (icon !== '' && isDisabled) {
              icon = '<span>' + icon + '</span>';
            }
            if (!$this.data('content')) {
              // Prepend any icon and append any subtext to the main text.
              text = icon + img + '<span class="text">' + text + subtext + '</span>';
            }

    要添加图片功能,于是添加一个 img变量用于拼接<img>标签,并拼接进text中:

            var optionClass = this.className || '',
                inline = htmlEscape(this.style.cssText),
                text = $this.data('content') ? $this.data('content') : $this.html(),
                tokens = $this.data('tokens') ? $this.data('tokens') : null,
                subtext = typeof $this.data('subtext') !== 'undefined' ? '<small class="text-muted">' + $this.data('subtext') + '</small>' : '',
                icon = typeof $this.data('icon') !== 'undefined' ? '<span class="' + that.options.iconBase + ' ' + $this.data('icon') + '"></span> ' : '',
                img = typeof $this.data('img') !== 'undefined' ? '<img class="my-logo" src="' + $this.data('img') + '"> ' : '', //添加img
                $parent = $this.parent(),
                isOptgroup = $parent[0].tagName === 'OPTGROUP',
                isOptgroupDisabled = isOptgroup && $parent[0].disabled,
                isDisabled = this.disabled || isOptgroupDisabled,
                prevHiddenIndex;
    
            if (icon !== '' && isDisabled) {
              icon = '<span>' + icon + '</span>';
            }
    
            if (!$this.data('content')) {
              // Prepend any icon and append any subtext to the main text.
              text = icon + img + '<span class="text">' + text + subtext + '</span>';  //拼接
            }

    这样,只要在HTML中的<option/>中加入 'data-img' 标签即可:

    <select class='selectpicker'>
        <option data-img="http://../123.jpg" value="val">Label</option>
    </select>

    展开全文
  • bootstrap select API

    万次阅读 2018-08-14 09:55:05
      一、Core options 选项可以通过数据属性或JavaScript传递。 对于数据属性,将选项名称附加到data-,如data-style =“”或data-selected-text-format =“count”。 Name Type Default ... ...

     

     

    一、Core options

    选项可以通过数据属性或JavaScript传递。 对于数据属性,将选项名称附加到data-,如data-style =“”或data-selected-text-format =“count”。

    Name Type Default Description
    actionsBox boolean false

    设置为true时,在下拉菜单顶部添加两个按钮 (Select All & Deselect All).

    container string | false false

    设置为字符串时,将select附加到特定元素或选择器,e.g., container: 'body' | '.main-body'

    countSelectedText string | function function

    设置selectedTextFormat为count或count>#时显示的文本格式。 {0}是选定的金额。 {1}总数可供选择。

    设置为函数时,第一个参数是所选选项的数量,第二个参数是选项的总数。 该函数必须返回一个字符串。

    deselectAllText string 'Deselect All' 启用actionsBox时取消选择所有选项的按钮上的文本。
    dropdownAlignRight boolean | 'auto' false 将菜单对齐而不是左对齐。 如果设置为“自动”,如果在向左对齐时菜单的全宽度没有空间,菜单将自动对齐。
    dropupAuto boolean true 检查哪个有更多的空间,上面或下面。 如果dropup有足够的空间可以正常完全打开,但是上面有更多空间,则dropup仍会正常打开。 否则,它变成了一个下降。 如果dropupAuto设置为false,则必须手动调用dropup。
    header string false 在页面顶部添加一个标题; 默认包括关闭按钮
    hideDisabled boolean false 从菜单data-hide-disabled中删除已禁用的选项和optgroup:true
    iconBase string 'glyphicon' 将基数设置为使用不同的图标字体而不是Glyphicons。 如果更改iconBase,您可能还想更改tickIcon,以防新图标字体使用不同的命名方案。
    liveSearch boolean false 设置为true时,将搜索框添加到selectpicker下拉列表的顶部。
    liveSearchNormalize boolean false 将liveSearchNormalize设置为true允许对重音不敏感的搜索。
    liveSearchPlaceholder string null 设置为字符串时,将等于字符串的占位符属性添加到liveSearch输入。
    liveSearchStyle string 'contains' 设置为“包含”时,搜索将显示包含搜索文本的选项。 例如,搜索pl,同时返回Apple,Plum和Plantain。 当设置为'startsWith'时,搜索pl将仅返回Plum和Plantain。
    maxOptions integer | false false

    设置为整数并进行多选时,所选选项的数量不能超过给定值。

    此选项也可以作为<optgroup>的数据属性存在,在这种情况下,它仅适用于<optgroup>。

    maxOptionsText string | array | function function

    启用maxOptions时显示的文本以及已选择给定方案的最大选项数。

    如果使用函数,则必须返回一个数组。 array [0]是maxOptions应用于整个select元素时使用的文本。 array [1]是在optgroup上使用maxOptions时使用的文本。 如果使用字符串,则元素和optgroup使用相同的文本。

    mobile boolean false 设置为true时,启用设备的选择菜单的本机菜单。
    multipleSeparator string ', ' 设置分隔所选选项的按钮中显示的字符。
    noneSelectedText string 'Nothing selected' 多重选择没有选定选项时显示的文本。
    selectAllText string 'Select All' 启用actionsBox时选择所有选项的按钮上的文本。
    selectedTextFormat 'values' | 'static' | 'count' | 'count > x'(where x is an integer) 'values'

    指定如何使用多重选择显示选择。

    'values'显示所选选项的列表(由multipleSeparator分隔.'static'只显示select元素的标题.'count'显示所选选项的总数.'count> x'的行为类似于'values',直到数量为 选定的选项大于x;之后,它的行为类似于'count'。

    selectOnTab boolean false 设置为true时,将制表符视为selectpicker下拉列表中的输入或空格字符。
    showContent boolean true 设置为true时,显示与按钮中所选选项关联的自定义HTML。 设置为false时,将显示选项值。
    showIcon boolean true 设置为true时,显示与按钮中所选选项关联的图标。
    showSubtext boolean false 设置为true时,显示与按钮中选定选项关联的子文本。
    showTick boolean false 显示所选选项的选中标记(对于没有多个属性的项目)。
    size 'auto' | integer | false 'auto'

    设置为“自动”时,菜单始终打开以显示窗口允许的多个项目而不会被切断。

    设置为整数时,菜单将显示给定的项目数,即使下拉列表已被切断。

    设置为false时,菜单将始终显示所有项目。

    style string | null null 设置为字符串时,将值添加到按钮的样式。
    tickIcon string 'glyphicon-ok' 设置要用于显示为所选选项旁边的“勾号”的图标。
    title string | null null selectpicker的默认标题。
    width 'auto' | 'fit' | css-width | false (where css-width is a CSS width with units, e.g. 100px) false

    设置为auto时,会自动调整selectpicker的宽度以适应最宽的选项。

    设置为css-width时,selectpicker的宽度将强制内联到给定值。

    设置为false时,将删除所有宽度信息。

    windowPadding integer | array 0 这在窗口具有下拉菜单不应覆盖的区域(例如固定标题)的情况下非常有用。 设置为整数时,将向所有边添加相同的填充。 或者,可以以[top,right,bottom,left]格式使用整数数组。

     

    二、Events

    Bootstrap-select公开了一些事件以挂钩到select功能。

    hide.bs.select,hidden.bs.select,show.bs.select和shown.bs.select都有一个relatedTarget属性,其值是切换的锚元素。

    Event Type Description
    show.bs.select 调用show实例方法时会立即触发此事件。
    shown.bs.select 当下拉列表对用户可见时将触发此事件(将等待CSS转换完成)。
    hide.bs.select 调用hide实例方法时会立即触发此事件。
    hidden.bs.select 下拉菜单已完成对用户隐藏时将触发此事件(将等待CSS转换完成)。
    loaded.bs.select 初始化选择后将触发此事件。
    rendered.bs.select 调用渲染实例后,将触发此事件。
    refreshed.bs.select 调用刷新实例后将触发此事件。
    changed.bs.select 更改选择的值后将触发此事件。 它通过事件,clickedIndex,newValue,oldValue。

     

    $('#mySelect').on('hidden.bs.select', function (e) {
      // do something...
    });

    三、Methods

    与bootstrap-select的接口。

    1、 .selectpicker('val')

    您可以通过调用元素上的val方法来设置所选值。

    $('.selectpicker').selectpicker('val', 'Mustard');
    $('.selectpicker').selectpicker('val', ['Mustard','Relish']);

    这与直接在select元素上调用val()不同。 如果直接在元素上调用val(),则bootstrap-select ui将不会刷新(因为更改事件仅从用户交互触发)。 您必须自己调用ui刷新方法。

    $('.selectpicker').val('Mustard');
    $('.selectpicker').selectpicker('render');
    
    // 这相当于上述内容
    $('.selectpicker').selectpicker('val', 'Mustard');
    

    2、 .selectpicker('selectAll')

    这将选择多选中的所有项目。

    $('.selectpicker').selectpicker('selectAll');
    

    3、 .selectpicker('deselectAll')

    取消选择中的所有项目

    $('.selectpicker').selectpicker('deselectAll');
    

    4、 .selectpicker('render')

    您可以使用render方法强制重新呈现bootstrap-select ui。 如果以编程方式更改影响元素布局的任何基础值,则此选项非常有用。

    $('.selectpicker').selectpicker('render');
    

    5、 .lectpicker('mobile')

    通过调用$('.selectpicker')启用移动滚动.selectpicker('mobile')。 这将启用设备的选择菜单的本机菜单。

    用于检测浏览器的方法由用户决定。

    if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
      $('.selectpicker').selectpicker('mobile');
    }
    

    6、 .selectpicker('setStyle')

    修改与按钮本身或其容器关联的类。

    如果更改容器上的类:

    $('.selectpicker').addClass('col-lg-12').selectpicker('setStyle');

    如果更改按钮上的类(更改数据样式):

    // Replace Class
    $('.selectpicker').selectpicker('setStyle', 'btn-danger');
    
    // Add Class
    $('.selectpicker').selectpicker('setStyle', 'btn-large', 'add');
    
    // Remove Class
    $('.selectpicker').selectpicker('setStyle', 'btn-large', 'remove');
    

    7、  .selectpicker('refresh')

    要以编程方式使用JavaScript更新选择,请先操作select,然后使用refresh方法更新UI以匹配新状态。 在删除或添加选项时,或通过JavaScript禁用/启用选择时,这是必需的。

    $('.selectpicker').selectpicker('refresh');

    8、 .selectpicker('toggle')

    以编程方式切换bootstrap-select菜单打开/关闭。

    $('.selectpicker').selectpicker('toggle');
    

    9、 .selectpicker('hide')

    要以编程方式隐藏bootstrap-select,请使用hide方法(这仅影响bootstrap-select本身的可见性)。

    $('.selectpicker').selectpicker('hide');
    

    10、 .selectpicker('show')

    要以编程方式显示bootstrap-select,请使用show方法(这仅影响bootstrap-select本身的可见性)。

    $('.selectpicker').selectpicker('show');
    

    11、  .selectpicker('destroy')

    要以编程方式销毁bootstrap-select,请使用destroy方法。

    $('.selectpicker').selectpicker('destroy');

    官方案例:http://silviomoreto.github.io/bootstrap-select/examples/

    展开全文
  • bootstrap select组件

    2018-01-30 14:27:54
    bootstrap-select开源地址:https://github.com/silviomoreto/bootstrap-select bootstrap-select使用示例:http://silviomoreto.github.io/bootstrap-select/examples/ bootstrap-select文档说明:http://silvi

    一、组件开源地址以及API说明
    bootstrap-select开源地址:https://github.com/silviomoreto/bootstrap-select

    bootstrap-select使用示例:http://silviomoreto.github.io/bootstrap-select/examples/

    bootstrap-select文档说明:http://silviomoreto.github.io/bootstrap-select/options/

    二、组件效果示例
    1、引入文件
    bootstrap-select给予bootstrap,boostrap又基于jquery,因此需引入如下文件,同时bootstrap-select需用到bootstrap/fonts路径下的图标,因此也需导入该目录。

        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css"/>
        <link rel="stylesheet" href="/static/bootstrap/css/bootstrap-select.min.css">
    
            <!-- Latest compiled and minified JavaScript -->
        <script src="/static/jquery-1.12.4.js"></script>
        <script src="/static/bootstrap/js/bootstrap.min.js"></script>
        <script src="/static/bootstrap/js/bootstrap-select.min.js"></script>

    三.基础示例
    单选:

    <select class="selectpicker">
        <option value="1">广东省</option>
        <option value="2">广西省</option>
        <option value="3">福建省</option>
        <option value="4">湖南省</option>
        <option value="5">山东省</option>                            
    </select>

    多选:
    给一个select标签加上selectpicker样式即可。

    <select class="selectpicker" multiple>
        <option value="1">广东省</option>
        <option value="2">广西省</option>
        <option value="3">福建省</option>
        <option value="4">湖南省</option>
        <option value="5">山东省</option>                            
    </select>

    四、其他效果示例
    选项搜索功能:
    增加属性:data-live-search=”true”

    <select class="selectpicker" multiple data-live-search="true">
        <option value="1">广东省</option>
        <option value="2">广西省</option>
        <option value="3">福建省</option>
        <option value="4">湖南省</option>
        <option value="5">山东省</option>                            
    </select>

    选项分组

    <select class="form-control selectpicker" data-live-search="true" multiple>
            <optgroup label="广东省">
                    <option value="1">广州市</option>
                    <option value="2">深圳市</option>
                    <option value="3">珠海市</option>
             </optgroup>   
              <optgroup label="广西">
                      <option value="1">南宁市</option>
                      <option value="2">柳州</option>
                      <option value="3">桂林市</option>
               </optgroup>  
               <optgroup label="山东">
                       <option value="1">烟台</option>
                       <option value="2">青岛</option>
                       <option value="3">济南</option>
                 </optgroup>                          
    </select>

    设置最多选项:
    data-max-options=”2”

    <select class="selectpicker" multiple data-live-search="true" data-max-options="2">
        <option value="1">广东省</option>
        <option value="2">广西省</option>
        <option value="3">福建省</option>
        <option value="4">湖南省</option>
        <option value="5">山东省</option>                            
    </select>

    选项显示为带颜色的标签

     <select class="form-control selectpicker" title="请选择省份" multiple>
                            <option data-content="<span class='label label-success'>广东省</span>">广东省</option>    
                            <option data-content="<span class='label label-info'>广西省</span>">广西省</option>  
                            <option data-content="<span class='label label-warning'>福建省</span>">福建省</option>  
                            <option data-content="<span class='label label-danger'>山东省</span>">山东省</option>                        
    </select>
    

    缩略框颜色样式:

    <select class="selectpicker" data-style="btn-primary">
      ...
    </select>
    
    <select class="selectpicker" data-style="btn-info">
      ...
    </select>
    
    <select class="selectpicker" data-style="btn-success">
      ...
    </select>
    
    <select class="selectpicker" data-style="btn-warning">
      ...
    </select>
    
    <select class="selectpicker" data-style="btn-danger">
      ...
    </select>

    五、取值赋值:
    取值:
    关于组件取值保持原生的jquery方法,比如 var value = $(‘#sel’).val(); 这样是不是很简单,需要注意的是,如果是多选,这里得到的value变量是一个数组变量,形如 [‘1’,’2’,’3’]。

    赋值

    组件赋值就需要稍微变换一下了,如果你直接 $(‘#sel’).val(‘1’); 这样赋值将会无效,正确的赋值方法为:

    $('.selectpicker').selectpicker('val', '1');
    $('.selectpicker').selectpicker('val', ['1','2','3']) //多个选项赋值

    在一些级联选择的使用场景中,经常需要在赋值的时候顺便触发一下组件的change事件,我们可以这么做。

    $('.selectpicker').selectpicker('val', '1').trigger("change");

    如果是多选的赋值,也是一样:

    $('.selectpicker').selectpicker('val', ['1','2','3']).trigger("change");

    六、组件其他用法

    全选: $('.selectpicker').selectpicker('selectAll'); 
    
    反选: $('.selectpicker').selectpicker('deselectAll'); 
    
    适应手机模式: $('.selectpicker').selectpicker('mobile'); 
    
    组件禁用:
    
    $('.disable-example').prop('disabled', true);
    $('.disable-example').selectpicker('refresh');
    组件启用:
    
    $('.disable-example').prop('disabled', false);
    $('.disable-example').selectpicker('refresh');
    组件销毁:
    
    $('.selectpicker').selectpicker('destroy');

    以编程方式切换bootstrap-select菜单的打开/关闭。

    $('.selectpicker').selectpicker('toggle')

    以编程方式隐藏bootstrap-select使用hide方法(这仅影响bootstrap-select自身的可见性)。

    $('.selectpicker')..selectpicker('hide')

    本文转载至:JS组件系列——再推荐一款好用的bootstrap-select组件,亲测还不错

    手动mark一下,留后用.

    补充:
    组件操作后刷新:

    $('.selectpicker').selectpicker('refresh'); //使用JS更新该selectpicker对象的内容后,需用此方法手动刷新探测

    select点击按钮(即下拉框展开)事件:

    $('#business').on('shown.bs.select',function () {} //可使用ajax动态获取option
    展开全文
  • 前言:在介绍select组件的时候,博主之前分享过一篇JS组件系列——两种bootstrap multiselect组件大比拼,这两个组件的功能确实很强大,只可惜没有图文结合的效果(也就是将图片放入到select里面随着文字一起显示)...
  • 目录selectpicker简介一些api1.multiple2.data-none-selected-text3.data-style4.data-show-tick、data-live-search、data-none-results-text、data-actions-box、data-select-all-text、data-deselect-all-text通过...
  • 最近项目要用一个选择框,可模糊搜索,可全选,及取消全选的选择框,在各个选择框插件中遇到了selectpicker这个插件,觉得这个插件强大,看着也比较舒服,下面介绍一下它的一些使用方法。 <!DOCTYPE html>...
  • select2支持带图标的选择项,用Templating。 那么在bootstrap table中的x-editable怎样用呢? 先看图片: 首先我们制作这些图标: 用excel做饼图——饼图拷入powerpoint——然后用powerpoint制作成透明图 制作...
  • Bootstrap Select(下拉框控件)

    万次阅读 2017-02-17 18:32:12
    Bootstrap Select:是一款美化下拉框控件,最为实用的是提供搜索等功能。 全面解读插件文档,如果你英文不是很好,那么看看本文章是个不错的选择
  • BootStrap-select组件

    2018-07-10 16:16:26
    正文前言:之前分享过两篇bootstrap下拉框的组件:JS组件系列——两种bootstrap multiselect组件大比拼 和 JS组件系列——Bootstrap Select2组件使用小结 ,收到很多园友的关注和提问,最后总结这两篇里面的...
  • BootstrapSelect参数方法

    千次阅读 2017-07-24 13:54:04
    核心选项 可以通过数据属性或JavaScript传递选项。对于数据属性,将选项名称附加到data-,如 data-style=""或data-selected-text-format="count"。 ...设置时true,将两个按钮添加到下拉菜单
  • bootstrap-select 使用详解

    万次阅读 2019-01-09 15:13:05
    下载地址:https://developer.snapappointments.com/bootstrap-select/ 示例地址:https://developer.snapappointments.com/bootstrap-select/examples/ 参数详解地址:...
  • 之前博主在实际开发中遇到了一个问题,就是需要既支持多选又同时支持模糊查询的下拉控件,大家所熟知的比较强大的下拉框插件bootstrap-select2,博主当时也参考过,但是发现它的多选效果做的比较差,类似这种, ...
  • 最近在实现一个需求,需要用到bootstrap-select多选框,但同时也有一个烦恼,就是如何去除自己选的选项,毕竟如果太多选项,一个一个勾除显然不现实,所以必须有一个一键可以去除已经选中的选项,下面就向大家分享...
  • 引入bootstrap-select,既然是bootstrap-select,组件肯定是依赖bootstrap的,而bootstrap又是依赖jquery的,所以使用组件必须引用如下文件。 <script type="text/javascript" src="/js/jquery-1.9.1.min.js">&...
  • 为了方便,这里上次那个JqueryValidate框架整合bootstrap的demo中拿出来修改了 一、Bootstrap整合select2框架 这里使用的是 jquery select2框架的版本号为Version: 3.4.5 1.下载并导入jquery select2的css和js...
  • bootstrap-select插件的坑 多选框有时候不出现 强制引导刷新一下,动态生成的bootstrap-select的bug 调用动态生成多选框方法后再用下面代码强刷,代码内容不需要修改,都是一样的 //使用refresh方法更新UI以匹配新...
  • bootstrap-select 实现下拉框多选

    千次阅读 2019-01-17 01:10:27
    一、组件开源地址以及API说明 bootstrap-select开源地址:https://github.com/silviomoreto/bootstrap-select bootstrap-select使用示例:http://silviomoreto.github.io/bootstrap-...
1 2 3 4 5 ... 20
收藏数 3,709
精华内容 1,483
关键字:

vim配置