使用bootstrap自定义下拉框

下拉框在不同的浏览器会显示成不同的UI,我们可以对其渐进增强,通常情况下用select和option元素设置数据再将其隐藏,然后用div、span、ul、li这些来替换渲染,这样不同的浏览器也会显示成统一的UI了。这样实现起来也不是那么容易的,如果我们的项目用到bootstrap,可以借助下拉菜单组件(dropdown)来简单自定义下拉框。直接上代码了:

Html代码:


<h2>下拉菜单</h2>


<div class="col-sm-3 col-md-2">

<div class="row dropdown">
    <button type="button" class="btn btn-default dropdown-toggle form-control" id="dropdownTitle" data-toggle="dropdown" title="">
      <span data-bind="label">请选择</span>&nbsp;<span class="caret"></span>
    </button>
    
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownTitle">
      
<li role="presentation">
        <a role="menuitem" tabindex="-1" href="#">JavaScript</a>
      </li>


<li role="presentation" selected>
        <a role="menuitem" tabindex="-1" href="#">Flash</a>
      </li>


<li role="presentation">
        <a role="menuitem" tabindex="-1" href="#">Ajax</a>
      </li>


<li role="presentation">
        <a role="menuitem" tabindex="-1" href="#">Silverlight</a>
      </li>

    </ul>

  </div>

</div>

JavaScript代码:

$(document.body).on('click', '.dropdown-menu li', function(event) {
  var target = $(event.currentTarget);
  target.closest('.dropdown')
    .find('[data-bind="label"]').text(target.text()).attr('title', target.text())
    .children('.dropdown-toggle').dropdown('toggle');
});

$('.dropdown-menu li').each(function() {
  if ($(this).attr('selected')) {
    $(this).trigger('click');
  }
});

对于当前的选项我们为li元素设置了selected属性。如果你需要更复杂的功能,可以参看:https://silviomoreto.github.io/bootstrap-select

github:https://github.com/szriafan/bootstrap-tips/tree/05-vilidate
点击登录->查看按钮查看效果:https://szriafan.github.io/bootstrap-tips/app

发表评论