使用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 相关文章推荐
兼容ie、firefox的图片自动缩放的css跟js代码分享
Aug 12 Javascript
iframe里的页面禁止右键事件的方法
Jun 10 Javascript
jQuery下拉友情链接美化效果代码分享
Aug 26 Javascript
JavaScript对象数组排序实例方法浅析
Jun 15 Javascript
JSON 对象未定义错误的解决方法
Sep 29 Javascript
Javascript同时声明一连串(多个)变量的方法
Jan 23 Javascript
js实现华丽的九九乘法表效果
Mar 29 Javascript
javascript编写简易计算器
May 06 Javascript
Puppeteer 爬取动态生成的网页实战
Nov 14 Javascript
简述vue-cli中chainWebpack的使用方法
Jul 30 Javascript
五分钟搞懂Vuex实用知识(小结)
Aug 12 Javascript
javascript实现贪吃蛇经典游戏
Apr 10 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 session_set_save_handler 函数的用法(mysql)
2013/06/29 PHP
PHP查询网站的PR值
2013/10/30 PHP
高性能WEB开发 flush让页面分块,逐步呈现 flush让页面分块,逐步呈现
2010/06/19 Javascript
js原生态函数中使用jQuery中的 $(this)无效的解决方法
2011/05/25 Javascript
javascript实现页面内关键词高亮显示代码
2014/04/03 Javascript
JS打字效果的动态菜单代码分享
2015/08/21 Javascript
原生js实现弹出层效果
2017/01/20 Javascript
Bootstrap与Angularjs的模态框实例代码
2017/08/03 Javascript
Vue.JS项目中5个经典Vuex插件
2017/11/28 Javascript
详解如何使用 vue-cli 开发多页应用
2017/12/16 Javascript
解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题
2019/10/11 Javascript
js消除图片小游戏代码
2019/12/11 Javascript
jQuery中event.target和this的区别详解
2020/08/13 jQuery
全面理解Python中self的用法
2016/06/04 Python
Python中文件I/O高效操作处理的技巧分享
2017/02/04 Python
Python使用微信SDK实现的微信支付功能示例
2017/06/30 Python
Python基于回溯法子集树模板解决找零问题示例
2017/09/11 Python
Python程序运行原理图文解析
2018/02/10 Python
Python简单实现的代理服务器端口映射功能示例
2018/04/08 Python
TensorFlow损失函数专题详解
2018/04/26 Python
python递归实现快速排序
2018/08/18 Python
python ftp 按目录结构上传下载的实现代码
2018/09/12 Python
python+selenium实现简历自动刷新的示例代码
2019/05/20 Python
解决Django后台ManyToManyField显示成Object的问题
2019/08/09 Python
python 数据库查询返回list或tuple实例
2020/05/15 Python
OpenCV 使用imread()函数读取图片的六种正确姿势
2020/07/09 Python
Python extract及contains方法代码实例
2020/09/11 Python
css背景图片的背景裁切、背景透明度、背景变换等效果运用
2012/12/24 HTML / CSS
Ibatis如何调用存储过程
2015/05/15 面试题
教育实习生的自我评价分享
2013/11/21 职场文书
住宅质量保证书
2014/04/29 职场文书
听课评语大全
2014/04/30 职场文书
2014年党员教师自我剖析材料
2014/09/30 职场文书
推荐信范文大全
2015/03/27 职场文书
手把手教你实现PyTorch的MNIST数据集
2021/06/28 Python
使用compose函数优化代码提高可读性及扩展性
2022/06/16 Javascript