js 自定义的联动下拉框


Posted in Javascript onFebruary 07, 2010

觉得这个下拉框已经稍微能满足美观需求了,

js 自定义的联动下拉框 

这个是点出来的效果,写了键盘的方向键,回车,esc等 事件, 并且能根据页面的底部距离判断是否向上展示

今天弄了个联动的,顺便贴部分代码

效果预览:

 js 自定义的联动下拉框

 以下代码解决了ie6的兼容问题

$containerDivText.mousedown(function() { 
setTimeout( 
function() { 
if ($newUl[0].style.display == 'block') { 
$newUl.hide(); 
positionHideFix(); 
return false; 
} 
$containerDiv.focus(); 
//show list 
$newUl.slideDown(100); 
positionFix(); 
//when keys are pressed 
document.onkeydown = function(e) { 
if (e == null) { // ie 
var keycode = event.keyCode; 
} else { // everything else 
var keycode = e.which; 
} 
//enter key or esc key pressed, hide list 
if (keycode == 13 || keycode == 27) { 
$newUl.hide(); 
positionHideFix(); 
return false; 
} 
} 
}, 1); 
//the function settimeout is used for ie6, because if you click the element where you hava focused on the element, 
//ie6 would think you click it twice(2010-2-4) 
});

以下代码解决了下拉框事件定义功能匮乏问题
代码
if (!opts.callbackfn) { 
$newLi.click(function(e) { 
var $clickedLi = jQuery(e.target), 
text = $clickedLi.text(); 
//update counter 
currentIndex = $newLi.index($clickedLi); 
//remove all hilites, then add hilite to selected item 
$newLi.removeClass('hiLite'); 
$clickedLi.addClass('hiLite'); 
setSelectText(text); 
$newUl.hide(); 
$containerDiv.css('position', 'static'); //ie 
}); 
} else { 
$newLi.click(function(e) { 
var $clickedLi = jQuery(e.target), 
text = $clickedLi.text(); 
//update counter 
currentIndex = $newLi.index($clickedLi); 
//remove all hilites, then add hilite to selected item 
$newLi.removeClass('hiLite'); 
$clickedLi.addClass('hiLite'); 
setSelectText(text); 
$newUl.hide(); 
$containerDiv.css('position', 'static'); //ie 
(opts.callbackfn)(this.value); 
}); 
} //param callbackfn means you can define a event function from every li in the ul;(2010-2-4)

然后是页面的应用,

代码

<script type="text/javascript"> 
jQuery(document).ready(function() { 
jQuery("#my-dropdown2").hide(); 
jQuery('#my-dropdown1').sSelect( 
{ defaultText: "", 
callbackfn: function(value) { 
if (value == 1) { 
jQuery("#my-dropdown2_list").parent().remove(); 
jQuery("#linkc_value").val(value); 
return; 
} 
jQuery.getJSON( 
'/Department.mvc/GetSubDepartment?DepartmentID=' + value, 
function(list) { 
jQuery("#my-dropdown2_list").parent().remove(); 
jQuery("#my-dropdown2").html(""); 
var temp = ""; 
temp += "<option value=''>请选择部门</option>"; 
for (var i = 0; i < list.length; i++) { 
temp += "<option value=" + list[i].DepartmentID + ">" + list[i].DepartmentName + "</option>"; 
} 
jQuery("#my-dropdown2").html(temp); 
jQuery("#my-dropdown2").show(); 
jQuery('#my-dropdown2').sSelect({ 
callbackfn: function(value) { 
jQuery("#linkc_value").val(value); 
} 
}); 
} 
); 
} 
} 
); 
// killErrors = function(){ return true; } 
// window.onerror = killErrors; 
}); 
function linkc() { 
location.href = "/User.mvc/Front?DepartmentID=" + jQuery("#linkc_value").val(); 
} 
</script>

这三块只是部分
但是花的时间较多 其它代码不贴了 有问题留言吧。。。
Javascript 相关文章推荐
javascript 打开页面window.location和window.open的区别
Mar 17 Javascript
java与javascript之间json格式数据互转介绍
Oct 29 Javascript
IE6下javasc#ipt:void(0) 无效的解决方法
Dec 23 Javascript
JavaScript中for循环的使用详解
Jun 03 Javascript
jQuery通过改变input的type属性实现密码显示隐藏切换功能
Feb 08 Javascript
js基于myFocus实现轮播图效果
Feb 14 Javascript
Javascript中引用类型传递的知识点小结
Mar 06 Javascript
微信小程序 实例开发总结
Apr 26 Javascript
微信小程序picker组件下拉框选择input输入框的实例
Sep 20 Javascript
vue.js前后端数据交互之提交数据操作详解
Apr 24 Javascript
vue-router的两种模式的区别
May 30 Javascript
类和原型的设计模式之复制与委托差异
Jul 07 Javascript
比较搞笑的js陷阱题
Feb 07 #Javascript
javascript 鼠标拖动图标技术
Feb 07 #Javascript
数组Array进行原型prototype扩展后带来的for in遍历问题
Feb 07 #Javascript
CutePsWheel javascript libary 控制输入文本框为可使用滚轮控制的js库
Feb 07 #Javascript
JavaScript 精粹读书笔记(1,2)
Feb 07 #Javascript
一些mootools的学习资源
Feb 07 #Javascript
Js 中debug方式
Feb 07 #Javascript
You might like
怎样在php中使用PDF文档功能
2006/10/09 PHP
PHP 远程文件管理,可以给表格排序,遍历目录,时间排序
2009/08/07 PHP
javascript动画效果类封装代码
2007/08/28 Javascript
jquery 图片预加载 自动等比例缩放插件
2008/12/25 Javascript
精心挑选的15个jQuery下拉菜单制作教程
2012/06/15 Javascript
Javascript call和apply区别及使用方法
2013/11/14 Javascript
jquery.autocomplete修改实现键盘上下键自动填充示例
2013/11/19 Javascript
jQuery scroll事件实现监控滚动条分页示例
2014/04/04 Javascript
js实现div闪烁原理及实现代码
2014/06/24 Javascript
JavaScript删除指定子元素代码实例
2015/01/13 Javascript
jQuery消息提示框插件Tipso
2015/05/04 Javascript
简介AngularJS中使用factory和service的方法
2015/06/17 Javascript
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
2015/12/03 Javascript
jQuery添加和删除指定标签的方法
2015/12/16 Javascript
分享几种比较简单实用的JavaScript tabel切换
2015/12/31 Javascript
AngularJS ionic手势事件的使用总结
2017/08/09 Javascript
jQuery Datatables表头不对齐的解决办法
2017/11/27 jQuery
Jquery的Ajax技术使用方法
2019/01/21 jQuery
jQuery子选择器与可见性选择器实例分析
2019/06/28 jQuery
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
2019/09/06 Javascript
如何实现一个简易版的vuex持久化工具
2019/09/11 Javascript
理解JavaScript中的Proxy 与 Reflection API
2020/09/21 Javascript
Python实现Const详解
2015/01/27 Python
编写Python的web框架中的Model的教程
2015/04/29 Python
python 将字符串转换成字典dict的各种方式总结
2018/03/23 Python
python自动发送邮件脚本
2018/06/20 Python
Python使用logging模块实现打印log到指定文件的方法
2018/09/05 Python
解决pycharm修改代码后第一次运行不生效的问题
2021/02/06 Python
城市轨道交通工程职业规划书范文
2014/01/18 职场文书
工程采购员岗位职责
2014/03/09 职场文书
竞选大队委员演讲稿
2014/04/28 职场文书
个人诉讼委托书范本
2014/10/17 职场文书
2015年民兵整组工作总结
2015/07/24 职场文书
《检阅》教学反思
2016/02/22 职场文书
详解Apache SkyWalking 告警配置指南
2021/04/22 Servers
Go 中的空白标识符下划线
2022/03/25 Golang