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学习笔记(十)
Jan 17 Javascript
jQuery 第二课 操作包装集元素代码
Mar 14 Javascript
什么是json和jsonp,jQuery json实例详详细说明
Dec 11 Javascript
如何获取网站icon有哪些可行的方法
Jun 05 Javascript
jquery数组过滤筛选方法grep()简介
Jun 06 Javascript
artDialog+plupload实现多文件上传
Jul 19 Javascript
KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定
Oct 11 Javascript
基于JavaScript实现右键菜单和拖拽功能
Nov 28 Javascript
angular4自定义组件详解
Sep 28 Javascript
angularjs实现时间轴效果的示例代码
Nov 29 Javascript
jquery实现的分页显示功能示例
Aug 23 jQuery
详解如何解决使用JSON.stringify时遇到的循环引用问题
Mar 23 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连接SQLServer2005 的问题解决方法
2010/07/19 PHP
windows下开发并编译PHP扩展的方法
2011/03/18 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
理解JavaScript中的对象 推荐
2011/01/09 Javascript
关于js日期转化为毫秒数“节省20%的效率和和节省9个字符“问题
2012/03/01 Javascript
jQuery弹性滑动导航菜单实现思路及代码
2013/05/02 Javascript
jQuery实现表头固定效果的实例代码
2013/05/24 Javascript
JS增加行复制行删除行的实现代码
2013/11/09 Javascript
浅析jquery某一元素重复绑定的问题
2014/01/03 Javascript
jQuery实现的一个自定义Placeholder属性插件
2014/08/11 Javascript
jquery Validation表单验证使用详解
2020/09/12 Javascript
详解JavaScript中循环控制语句的用法
2015/06/03 Javascript
js代码验证手机号码和电话号码是否合法
2015/07/30 Javascript
基于JavaScript实现动态创建表格和增加表格行数
2015/12/20 Javascript
Bootstrap的Refresh Icon也spin起来
2016/07/13 Javascript
jQuery Validate验证框架详解(推荐)
2016/12/17 Javascript
Node.js实现文件上传的示例
2017/06/28 Javascript
ES6中Array.copyWithin()函数的用法实例详解
2017/09/16 Javascript
妙用缓存调用链实现JS方法的重载
2018/04/30 Javascript
Vue+Webpack完美整合富文本编辑器TinyMce的方法
2018/11/30 Javascript
js防抖和节流的深入讲解
2018/12/06 Javascript
详解VUE前端按钮权限控制
2019/04/26 Javascript
Vue实现背景更换颜色操作
2020/07/17 Javascript
Python实现从订阅源下载图片的方法
2015/03/11 Python
浅谈Python程序与C++程序的联合使用
2015/04/07 Python
Python 实现 贪吃蛇大作战 代码分享
2016/09/07 Python
Python数据结构之双向链表的定义与使用方法示例
2018/01/16 Python
CSS3标注引用的出处和来源的方法
2020/02/25 HTML / CSS
Paradox London官方网站:英国新娘鞋婚礼鞋品牌
2019/08/29 全球购物
法国隐形眼镜网站:VisionDirect.fr
2020/03/03 全球购物
采购员岗位职责
2013/11/15 职场文书
鲜果饮品店创业计划书
2014/01/21 职场文书
幼儿园大班毕业感言
2014/02/06 职场文书
服务承诺书范文
2014/05/19 职场文书
感恩母亲节活动总结
2015/02/10 职场文书
预防艾滋病宣传活动总结
2015/05/09 职场文书