主页 个人前端笔记 关于下拉框美化插件chosen向上弹出的使用方法
admin
发表于2013-01-29 12:14:31    只看楼主 楼主
头衔:  精益求精
注册时间: 2012-10-07
用户组: 日常管理组
发帖数:  502
金币数:  186
短消息
普通的使用方法可以参看:http://www.aqee.net/docs/Chosen/Chosen.htm
默认向下弹出,但是如果下拉框位置在底部,再向下弹出就不无法满足页面需求了,这时候应该要向上弹出,但是默认不支持。
如何做到?请看下面
打开/chosen/chosen.jquery.js
搜索并添加
this.search_results = this.container.find('ul.chzn-results').first();
// Start additional code
this.search_results.data('initialMaxHeight', this.search_results.css('max-height'));
// End additional code
this.search_field_scale();


搜索并修改
Chosen.prototype.results_show = function() {
var dd_top;
if (!this.is_multiple) {
this.selected_item.addClass("chzn-single-with-drop");
if (this.result_single_selected) {
this.result_do_highlight(this.result_single_selected);
}
}
dd_top = this.is_multiple ? this.container.height() : this.container.height() - 1;
this.dropdown.css({
"top": dd_top + "px",
"left": 0
});

// Start additional code
this.search_results.css('max-height', 'none');

var windowHeight = $(window).height() + $('html').scrollTop(),
dropdownHeight = this.dropdown.height(),
dropdownTop = Math.ceil(this.dropdown.offset().top),
totalHeight = dropdownHeight + dropdownTop;

if (totalHeight > windowHeight) {
var difference = totalHeight - windowHeight,
height = dropdownHeight - difference;

if (height > 100) {
this.search_results.css('max-height', height);
} else {
this.dropdown.addClass('chzn-above');
this.search_results.css('max-height', this.search_results.data('initialMaxHeight'));
}
} else {
this.search_results.css('max-height', this.search_results.data('initialMaxHeight'));
}
// End additional code

this.results_showing = true;
this.search_field.focus();
this.search_field.val(this.search_field.val());
return this.winnow_results();
};


打开/chosen/chosen.css
/* Add this rule */
.chzn-container .chzn-drop.chzn-above {
top:auto !important;
bottom:29px;
border:solid #aaa;
border-width:1px 1px 0 1px;
}

回复人
回复内容

Powered BY YouYaX
个人自主开发论坛,从2010年10月份开发至今!

操作管理