HTML中chosen.js的小应用(含高度调试)

前言:最近world cup,一直在看比赛,每天3场比赛,我恨不得都看,可是还要上班,就只能看两场,从8点一直看到后半夜。所以本来想好好整理一下,写一点儿数据结构和算法的浅显分析与总结也一直没有写。前两天废了很多的精力在做一个下拉框,下了一个chosen.js的控件,还挺好用的,记录一下子用法。


这个 chosen.js 是放在 GitHub 上的,有大手子可以上去给它好好改一改,因为有的功能还需完善。

下载地址


下载压缩包下来解压大概是这样

HTML中chosen.js的小应用(含高度调试)_第1张图片


拉一篇使用教程

在页面中需要同时引入,jquery.js chosen.jquery.min.js chosen.css 才可以使用

把js和css都放入相应的目录时,注意,把 chosen-sprite.png [email protected] 放到css旁边,这就是下拉的那个小箭头。



HTML上是这样

其中空的是为了显示上面 data-placeholder 的“请选择单位用的”

js需要初始加载

$(".chosen-select").chosen({
    no_results_text: "没有找到结果!",//搜索无结果时显示的提示
    search_contains:true,   //关键字模糊搜索,设置为false,则只从开头开始匹配
    allow_single_deselect:true, //是否允许取消选择
    width:'250px',
    max_selected_options:6  //当select为多选时,最多选择个数
});

width是下拉的宽度,不然太窄。

看下效果

HTML中chosen.js的小应用(含高度调试)_第2张图片这是应用控件之后的。

HTML中chosen.js的小应用(含高度调试)_第3张图片对比应用之前的。

确实好看很多,而且还能输入自动匹配。


但是里面有个问题没解决。

HTML中chosen.js的小应用(含高度调试)_第4张图片

HTML中chosen.js的小应用(含高度调试)_第5张图片

之前的input或者下拉,都很高,这个控件弄出来后都比较小。


在阅读了chosen属性之后发现并没有设置下拉框高度的方法,使用下拉中的font-size也不能将它撑大,因为它里面有了别的变化。

审查元素看一下

HTML中chosen.js的小应用(含高度调试)_第6张图片

select标签中的div a div都是控件生成的,挨个试验哪个能改这个下拉框的外观上的高度,经过试验发现,修改a标签的样式能修改高度。

element.style  {
  1. height50px;

本来是空的,加上50px的高度后,下拉变化。

HTML中chosen.js的小应用(含高度调试)_第7张图片


所以,根据a标签的属性 chosen-single chosen-single-with-deselect 去chosen.js里找一找,发现这一句

AbstractChosen.prototype.get_single_html = function() {
  return "\"chosen-single chosen-default\">\n  " + this.default_text + "\n  
\n
\n
\"chosen-drop\">\n
\"chosen-search\">\n \"chosen-search-input\" type=\"text\" autocomplete=\"off\" />\n
\n
    \"chosen-results\">
\n
"
; };

给a加个style,变成

AbstractChosen.prototype.get_single_html = function() {
  return "\"chosen-single chosen-default\">\n  " + this.default_text + "\n  
\n
\n
\"chosen-drop\">\n
\"chosen-search\">\n \"chosen-search-input\" type=\"text\" autocomplete=\"off\" />\n
\n
    \"chosen-results\">
\n
"
; };

重跑一下发现,好了。具体其他样式再设置。

你可能感兴趣的:(HTML中chosen.js的小应用(含高度调试))