`
zzc1684
  • 浏览: 1220968 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

Chosen:select下拉选择框美化插件及问题

阅读更多

 

Chosen 是一个支持jquery的select下拉框美化插件,它能让丑陋的、很长的select选择框变的更好看、更方便。不仅如此,它更扩展了select,增加了自动筛选的功能。它可对列表进行分组,同时也可禁用某些选择项。

先来看下插件的效果:

 

跟这个比起来,原来的select样式是不是弱爆了!

马上来武装我们的select吧:

1、先把js和css文件引用到网页里面去:

<link href="js/jqueryUI/chosen/chosen.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.1.4.4.min.js"></script>
<script type="text/javascript" src="js/jqueryUI/chosen/chosen.jquery.js"></script>

 

2、创建一个select元素,如下:

<select name="dept" style="width: 150px;" id="dept" class="dept_select"> 
    <option value="部门1">部门1</option>
    <option value="部门2">部门2</option>
    <option value="部门3">部门3</option>
    <option value="部门4">部门4</option>
    <option value="部门5">部门5</option>
</select>

 

3、然后在js中调用Chosen定义的方法:

$(function(){
    $('.dept_select').chosen();
});

 

4、搞定收工,屌丝立马变成高富帅有木有~ 

 



 

 

  

 

 

chosen插件的一些设置项:

1、默认文字选项

你可以在select元素上添加data-placeholder属性定义默认文字,也就是在没有选择选项的情况下,显示的文字。

 

<select data-placeholder="选择部门" style="width:150px;" class="dept_select">
    <option value="-1"></option>
    <option value="部门1">部门1</option>
    <option value="部门2">部门2</option>
    <option value="部门3">部门3</option>
    <option value="部门4">部门4</option>
    <option value="部门5">部门5</option>
</select>

 

这里还要注意一点,要想显示出默认文字,select下的第一个选择项必须为空的option。

 

2、对其方式
选项文字默认是左对齐的,可以在class属性中加入“chzn-rtl”来设置右对齐:

<select data-placeholder="选择部门" class="dept_select chzn-rtl" style="width:150px;">

 

3、JS参数设置

在调用chosen()方法时,我们可以设置一些参数: 

选项 描述
no_results_text 无搜索结果显示的文本
allow_single_deselect 是否允许取消选择
max_selected_options 当select为多选时,最多选择个数

 

 

$(".some_select").chosen({
    /*max_selected_options: 2,*/
    no_results_text: "没有找到",
    allow_single_deselect: true
});

 

4、事件

  a) change事件:

$(".dept-select").chosen().change(function(){
    //do something...
});

 b) 当我们需要动态更新select下的选择项时,该怎么办呢?只要在更新选择项后触发Chosen中的liszt:updated事件就可以了:  

//...$(".dept-select").html('...<option>部门6</option>...');
$(".dept-select").trigger("liszt:updated");

 

其他问题:

1、如果不想要搜索框的话,很简单,用css把它隐藏掉就OK了:

.chzn-container-single .chzn-search {
    display: none;
}

 

2、做为天朝的程序猿,不得不考虑ie6和ie7下的情况。好吧,用ie6打开一看,select还是一副屌丝样!  

  翻看chosen.jquery.js发现在chosen方法中有如下一段,ie6和ie7直接返回select对象本身:

if ($.browser.msie && ($.browser.version === "6.0" || ($.browser.version === "7.0" && document.documentMode === 7))) {
    return this;
}

 

  把这段js注释掉,重新打开ie6和7,不再屌丝了有木有!虽然箭头图片和搜索图片不透明不和谐(用js处理下就和谐了)。。。

  终于能高高兴兴地在ie6使用了,尼玛过了会又发现问题了,还是坑爹的ie6和7!如果2个select在一起又不和谐了,请看:

 

  点开选择部门,尼玛这是闹哪样!见图: 

 

  好吧,这应该是z-index的问题,把css修改下,结果各种div各种z-index改到吐血还是这副死样子。

  最后没办法了,想了个笨办法,动态改变所有chzn-container的z-index,在点击select的时候让当前container 的z-index最高,让其他select的chzn-container的z-index变低。在chosen.jquery.js中找到此方法:

 

Chosen.prototype.activate_field = function() {
    this.container.addClass("chzn-container-active");
    this.active_field = true;      
    this.search_field.val(this.search_field.val());
    return this.search_field.focus();
};

 

将此方法改为:

Chosen.prototype.activate_field = function() {
    this.container.addClass("chzn-container-active");
    this.active_field = true;      
    this.search_field.val(this.search_field.val());
    var zindex = 1010;
    this.container.css('z-index','1010')
    $('.chzn-container').not(this.container).css('z-index',--zindex);
    return this.search_field.focus();
};

 

当然,你也可以在生成.chzn-container的时候按顺序赋予不同的z-index,这样就可以不用每次点击select都要重新设一遍了。

  至此,ie6和ie7下使用Chosen基本没什么问题了。。。  

 

 

 

分享到:
评论

相关推荐

    jQuery自定义美化Select下拉框插件

    之前我们分享过很多款非常漂亮而且实用的jQuery美化版Select下拉框插件,比如jQuery Select下拉框美化插件 菜单淡如淡出动画和漂亮实用的Select下拉框美化插件Tether都非常不错。今天我们要给大家介绍另一款基于...

    chosen.jquery.js美化以及实现模糊搜索

    Chosen:select下拉选择框美化插件及实现模糊搜索,Chosen 是一个支持jQuery的select下拉框美化插件,它能让丑陋的、很长的select选择框变的更好看、更方便。不仅如此,它更扩展了select,增加了自动筛选的功能。它...

    jQuery实现的带select下拉选择框美化的省市区三级联动特效源码.zip

    此项目使用jQuery库来实现这一功能,通过美化select下拉选择框,提供更好的用户体验。jQuery是一个轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。 在“jQuery实现的带select下拉选择...

    chosen下拉选择插件.rar

    "Chosen"是一款非常流行的JavaScript库,用于增强和美化HTML中的下拉选择框。这款插件由HarvestHQ开发,它的主要目标是解决原生HTML `&lt;select&gt;`元素在功能和用户体验上的不足。Chosen插件提供了更易于使用的界面,...

    jquery select下拉菜单美化搜索框样式代码

    2. **Chosen插件**:`Chosen`是一个强大的选择器插件,它能够把普通的`select`元素转换为带有搜索框的下拉菜单。通过简单的配置,可以实现可搜索、可多选的下拉菜单。例如,引入Chosen的CSS和JS文件后,只需一行代码...

    select下拉列表显示图片内容

    在网页设计中,`&lt;select&gt;`元素通常用于创建下拉列表,它允许用户从一组预定义的选项中进行选择。然而,传统的`&lt;select&gt;`标签并不支持直接在选项中显示图片,只支持纯文本内容。但随着现代Web技术的发展,我们可以...

    select各种效果:select带搜索框 多个option项目选择

    在网页设计和开发中,`&lt;select&gt;`元素是HTML中用于创建下拉菜单的重要组成部分。...通过结合HTML5特性、CSS以及JavaScript库,我们可以创建出更高效、易用且功能丰富的下拉选择器,以满足用户的各种需求。

    jquery 实现下拉选择框方便好看的选择样式

    总之,Chosen插件是jQuery生态中解决下拉选择框样式问题的强大工具,它提升了网页的交互性和美观性,为用户带来了更好的选择体验。通过深入理解和灵活运用,开发者可以轻松地在自己的项目中实现符合设计要求的下拉...

    下拉框美化插件chosen

    "下拉框美化插件Chosen"是一款广泛应用于网页开发中的JavaScript库,它为传统的HTML `&lt;select&gt;` 下拉框提供了优雅的视觉效果和友好的用户体验。Chosen的主要目标是通过增强下拉框的可读性和可操作性,使得用户在大量...

    JS+CSS美化经典Select选项框插件

    6. **插件选择**:如果你不想从零开始编写代码,可以选择现成的Select美化插件,如Chosen、Select2、Selectize等。这些插件已经包含了大部分所需功能,只需根据项目需求进行配置和定制。 总的来说,通过JS和CSS的...

    jquery select美化插件

    在IT行业中,前端开发往往需要处理用户界面的美观与交互性,其中下拉选择框(select)是常见的元素之一。然而,原生的HTML `&lt;select&gt;` 标签在样式控制和用户体验方面存在局限,不能满足现代网页设计的需求。这就催生...

    jquery select下拉菜单美化搜索框代码

    在"jquery select下拉菜单美化搜索框代码"项目中,我们可能会涉及到以下核心知识点: 1. **jQuery基础**:熟悉jQuery的基本选择器、事件绑定、DOM操作和动画方法是必要的。例如,`$(selector).click(function() {.....

    select下拉菜单美化.rar

    在网页设计中,"select下拉菜单美化"是一个常见的需求,尤其在现代用户界面(UI)设计中,美观和用户体验是至关重要的元素。Select下拉菜单是网页表单中用于选择预设选项的一种交互控件,但原生的HTML select元素在...

    Chosen 基于jquery的Select选择框的华丽变身.zip

    《Chosen:jQuery插件让Select选择框的华丽变身》 在网页开发中,Select选择框作为基础元素,常用于用户交互,但其默认样式往往显得单调,不符合现代网页设计的美观需求。Chosen,一个基于jQuery的插件,正是为了...

    jquery select列表选择框选中美化效果源码

    为了提升用户体验,开发者常常借助于jQuery插件来美化这些选择框。这些插件不仅可以改变下拉列表的外观,还可以添加诸如搜索过滤、多选、分组等高级功能。 在“jquery select”这个标签中,我们可以想到几个知名的...

    下拉多选美化插件

    "下拉多选美化插件"就是这样一个工具,它专为HTML下拉选择框提供了样式美化和多选功能,极大地提升了用户交互体验。 这个插件的核心功能包括: 1. **样式美化**:传统的HTML `&lt;select&gt;` 元素样式单一,而该插件...

    Jquery select 插件 chosen

    Chosen插件是由Harvest公司开发的,它将普通的HTML select元素转换为一个功能丰富的下拉选择器,具有搜索、多选、自定义提示等功能。Chosen的核心设计理念是使用户在面对长列表时能更高效地找到所需选项。 二、安装...

    表单美化之select的下拉按钮美化

    在网页设计中,表单是用户与网站交互的重要部分,其中`select`元素用于创建下拉选择列表。本文将深入探讨如何对`select`的下拉按钮进行美化,以提升用户体验,使其更具吸引力且符合现代网页设计的标准。我们将讨论...

    基于jquery的美化select插件

    基于jQuery的美化select插件就是为了改善这种状况,提供统一、美观的下拉选择框界面,同时保持良好的浏览器兼容性。 一、jQuery与jQuery插件 jQuery是一款广泛使用的JavaScript库,它简化了DOM操作、事件处理、...

Global site tag (gtag.js) - Google Analytics