使用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 相关文章推荐
Jquery AJAX 框架的使用方法
Nov 03 Javascript
jquery 最简单易用的表单验证插件
Feb 27 Javascript
Extjs 继承Ext.data.Store不起作用原因分析及解决
Apr 15 Javascript
原生js实现半透明遮罩层效果具体代码
Jun 06 Javascript
在Firefox下js select标签点击无法弹出
Mar 06 Javascript
jquery插件冲突(jquery.noconflict)解决方法分享
Mar 20 Javascript
jquery ui bootstrap 实现自定义风格
Nov 14 Javascript
VS2008中使用JavaScript调用WebServices
Dec 18 Javascript
Ajax跨域实现代码(后台jsp)
Jan 21 Javascript
Bootstrap Table 在指定列中添加下拉框控件并获取所选值
Jul 31 Javascript
js getBoundingClientRect使用方法详解
Jul 17 Javascript
NUXT SSR初级入门笔记(小结)
Dec 16 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中的登陆login
2007/01/18 PHP
PHP字符串word末字符实现大小写互换的方法
2014/11/10 PHP
PHP使用mysql_fetch_object从查询结果中获取对象集的方法
2015/03/18 PHP
PHP Static延迟静态绑定用法分析
2016/03/16 PHP
整理8个很棒的 jQuery 倒计时插件和教程
2011/12/12 Javascript
Extjs中通过Tree加载右侧TabPanel具体实现
2013/05/05 Javascript
node.js入门教程
2014/06/01 Javascript
Window.Open如何在同一个标签页打开
2014/06/20 Javascript
window.location的重写及判断location是否被重写
2014/09/04 Javascript
node.js中的events.emitter.removeAllListeners方法使用说明
2014/12/10 Javascript
AngularJS删除路由中的#符号的方法
2016/09/20 Javascript
Vue非父子组件通信详解
2017/06/12 Javascript
JavaScript中in和hasOwnProperty区别详解
2017/08/04 Javascript
jquery 给动态生成的标签绑定事件的几种方法总结
2018/02/24 jQuery
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
2018/07/13 Javascript
JavaScript实现点击出现图片并统计点击次数功能示例
2018/07/23 Javascript
vue-cli项目代理proxyTable配置exclude的方法
2018/09/20 Javascript
微信小程序自定义导航栏(模板化)
2019/11/15 Javascript
原生js实现随机点餐效果
2019/12/10 Javascript
Python sys.path详细介绍
2013/10/17 Python
Python中的列表知识点汇总
2015/04/14 Python
python 网络爬虫初级实现代码
2016/02/27 Python
Python 专题六 局部变量、全局变量global、导入模块变量
2017/03/20 Python
使用python遍历指定城市的一周气温
2017/03/31 Python
python多进程使用及线程池的使用方法代码详解
2018/10/24 Python
python 使用pdfminer3k 读取PDF文档的例子
2019/08/27 Python
pytorch实现保证每次运行使用的随机数都相同
2020/02/20 Python
Python实现自动访问网页的例子
2020/02/21 Python
使用tensorflow框架在Colab上跑通猫狗识别代码
2020/04/26 Python
Expedia意大利旅游网站:酒店、机票和租车预订
2017/10/30 全球购物
纽约市的奢华内衣目的地:Anya Lust
2019/08/02 全球购物
趣味运动会活动方案
2014/02/12 职场文书
2014党员学习《反腐倡廉警示教育读本》思想汇报
2014/09/13 职场文书
学生无故旷课检讨书
2014/09/20 职场文书
保密法制宣传月活动总结
2015/05/07 职场文书
PySwarms(Python粒子群优化工具包)的使用:GlobalBestPSO例子解析
2021/04/05 Python