使用Jquery来实现可以输入值的下拉选单 雏型


Posted in Javascript onDecember 06, 2011

上网 找了一下,有一堆现成的控件,可是 现成的 我要去了解,来结合我现在 系统来应用,要花不少时间,这个时间 跟我自己 搞一个成本 应该差不多
那我还不如 自己 搞一个,比较能了解 怎麽运作,後面就更容易加以运用了。
我的目标是,要把 这个 作成一个控件来使用,并要降低外部程式使用的耦合性,也就是 外部程式 使用上所需的必要条件要尽量减少,免得一忘记加什麽设定,程式 就挂了。
如有可能 甚至希望,只会需要引用一个 Jquery 其他 JavaSciprt 都由程式 来产生。
最後是希望能结合 之前讲得动态控件 来使用,今天 我就先研究一下,用出了下面这个 html 做的雏型,来先行测试一下可行性,确认无误在开始动工改成 ASP.NET 的控件 。
这程式 有几个 重要问题,需要注意的:
下拉选单的触发方式、下拉选单的内容如何绘出,选单事件触发的抓取、抓取到选择事件後值要存在哪里
上述问题解决後,後面 都要用 ASP.NET 的方式来重新撰写,所以在设计雏型时,需注意其能否应用在 ASP.NET 上
构思如下:
这我的打算就是设计一个 button 藉由其 OnClick 事件来触发,到时会由 JQuery 抓取 ASP.NET 动态产生的选单阵列,来动态产生选单,
产生的选单,要能设定三各事件 mouseover mouseout click,前两各 是为了美观,这样 user 才知道 有在动作,click 事件触发後,
将选取到的值储存到 asp.net 的 server 控件 TextBox 中,如此 在 PostBack 就能把值 传回 server 端 来处理。

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js" ></script> 
<title>使用 Jquery 来实现可以输入值的下拉选单(一)</title> 
<script type="text/javascript"> 
$(document).ready(function () { 
//动画速度 
var speed = 500; 
//选单的相关处理事件 
$("#divPop div").live("mouseover mouseout click", function (event) { 
if (event.type == "mouseover") { 
//$(this).addClass(‘highlight'); 
$(this)[0].style.backgroundColor = '#E6F5FA'; 
} 
if (event.type == "mouseout") { 
//$(this).removeClass("highlight"); 
$(this)[0].style.backgroundColor = '#DDFFDD'; 
} 
if (event.type == "click") { 
var inID = $("#btnDDL").get(0).getAttribute("inputid"); 
//alert($(this).html()); 
$("#" + inID).val($(this).html()); 
} 
}); 
//动态产生下拉选单的选项,後面 要从 array 中读取产生选单 
$("#divPop").append("<div>test1</div>"); 
$("#divPop").append("<div>test2</div>"); 
//绑定事件处理 
$("#btnDDL").click(function (event) { 
//取消事件冒泡 
event.stopPropagation(); 
//设置弹出层位置 
var offset = $(event.target).offset(); 
//alert($(event.target).width()); 
var inID = $(this).get(0).getAttribute("inputid"); 
//依? input 跟 button ??度?碓O定 下拉??蔚??度 
$("#divPop")[0].style.width = ($("#" + inID).width() + $(this).width() + 10) + "px"; 
//单击空白区域隐藏弹出层 
$(document).click(function (event) { $("#divPop").hide(speed) }); 
//设定下拉选单显示的位置 
$("#divPop").css({ top: offset.top + $(event.target).height() + 10 + "px", left: offset.right }); 
//切换弹出层的显示状态 
$("#divPop").toggle(speed); 
}); 
}); 
</script> 
</head> 
<body> 
<div> 
<br /><br /><br /> 
<input name="txtKey" type="text" maxlength="30" size="30" id="txtKey" style="Padding:2px;" /><button id="btnDDL" inputid="txtKey" >?</button> 
</div> 
<!-- 弹出层 --> 
<div id="divPop" style="background-color: #DDFFDD; border: solid 1px #000000; position: absolute; display:none; 
width: 300px; height: 100px;"> 
</div> 
</body> 
</html>

这里面 还有各 想解决的问题,就是要让 divPop 也能动态产生..
Javascript 相关文章推荐
优化javascript的执行速度
Jan 23 Javascript
浅谈Javascript嵌套函数及闭包
Nov 09 Javascript
动感效果的TAB选项卡jquery 插件
Jul 09 Javascript
js封装可使用的构造函数继承用法分析
Jan 28 Javascript
JS实现文字放大效果的方法
Mar 03 Javascript
javascript断点调试心得分享
Apr 23 Javascript
非常实用的js验证框架实现源码 附原理方法
Jun 08 Javascript
vue 组件使用中的一些细节点
Apr 25 Javascript
ES6基础之字符串和函数的拓展详解
Aug 22 Javascript
基于JavaScript获取base64图片大小
Oct 18 Javascript
weui中的picker使用js进行动态绑定数据问题
Nov 06 Javascript
JavaScript/TypeScript 实现并发请求控制的示例代码
Jan 18 Javascript
js Function类型
Dec 04 #Javascript
Javascript base64编码实现代码
Dec 02 #Javascript
JS获取页面窗口大小的代码解读
Dec 01 #Javascript
基于JQuery的抓取博客园首页RSS的代码
Dec 01 #Javascript
jQuery 中使用JSON的实现代码
Dec 01 #Javascript
jquery中dom操作和事件的实例学习 下拉框应用
Dec 01 #Javascript
JS代码放在head和body中的区别分析
Dec 01 #Javascript
You might like
分享PHP-pcntl 实现多进程代码
2016/09/30 PHP
php简单实现文件或图片强制下载的方法
2016/12/06 PHP
JQuery的Validation插件中Remote验证的中文问题
2010/07/26 Javascript
JavaScript之appendChild、insertBefore和insertAfter使用说明
2010/12/30 Javascript
关于JavaScript中原型继承中的一点思考
2012/07/25 Javascript
JS判断对象是否存在的10种方法总结
2013/12/23 Javascript
浅谈JavaScript 框架分类
2014/11/10 Javascript
IE8中动态创建script标签onload无效的解决方法
2014/12/22 Javascript
初识Node.js
2015/03/20 Javascript
JS实现弹性漂浮效果的广告代码
2015/09/02 Javascript
JavaScript如何实现在文本框(密码框)输入提示语
2015/12/25 Javascript
gulp-htmlmin压缩html的gulp插件实例代码
2016/06/06 Javascript
jQuery子元素过滤选择器用法示例
2016/09/09 Javascript
js实现一个可以兼容PC端和移动端的div拖动效果实例
2016/12/09 Javascript
canvas学习之API整理笔记(一)
2016/12/29 Javascript
vue+swiper实现侧滑菜单效果
2017/12/28 Javascript
常用的 JS 排序算法 整理版
2018/04/05 Javascript
Vue引入jquery实现平滑滚动到指定位置
2018/05/09 jQuery
微信小程序时间控件picker view使用详解
2018/12/28 Javascript
ES6 Promise对象概念及用法实例详解
2019/10/15 Javascript
vue渲染方式render和template的区别
2020/06/05 Javascript
ReactRouter的实现方法
2021/01/25 Javascript
[36:43]NB vs Optic 2018国际邀请赛小组赛BO1 B组加赛 8.19
2018/08/21 DOTA
Python装饰器使用示例及实际应用例子
2015/03/06 Python
使用Python抓取豆瓣影评数据的方法
2018/10/17 Python
PyCharm代码提示忽略大小写设置方法
2018/10/28 Python
python实现H2O中的随机森林算法介绍及其项目实战
2019/08/29 Python
python可迭代对象去重实例
2020/05/15 Python
python 常见的排序算法实现汇总
2020/08/21 Python
用python对excel进行操作(读,写,修改)
2020/12/25 Python
CSS3 @keyframes简单动画实现
2018/02/24 HTML / CSS
html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点
2013/01/09 HTML / CSS
HTML5基于flash实现播放RTMP协议视频的示例代码
2020/12/04 HTML / CSS
关于旅游的活动方案
2014/08/15 职场文书
新学期家长寄语2016
2015/12/03 职场文书
CSS Transition通过改变Height实现展开收起元素
2021/08/07 HTML / CSS