使用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 相关文章推荐
ExtJS 工具栏 分页事件参数
Mar 05 Javascript
jQuery EasyUI API 中文文档 - Form表单
Oct 06 Javascript
js读取配置文件自写
Feb 11 Javascript
js实现图片旋转的三种方法
Apr 10 Javascript
Javascript中replace()小结
Sep 30 Javascript
jQuery解析json数据实例分析
Nov 24 Javascript
JQuery EasyUI的使用
Feb 24 Javascript
JS中多种方式创建对象详解
Mar 22 Javascript
jQuery Mobile中的button按钮组件基础使用教程
May 23 Javascript
详解easyui基于 layui.laydate日期扩展组件
Jul 18 Javascript
在vue中使用Echarts利用watch做动态数据渲染操作
Jul 20 Javascript
nginx部署多个vue项目的方法示例
Sep 06 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
教你如何把一篇文章按要求分段
2006/10/09 PHP
兼容PHP5的PHP目录管理函数库
2008/07/10 PHP
php 文件上传后缀名与文件类型对照表(几乎涵盖所有文件)
2010/05/16 PHP
PHP类中的魔术方法(Magic Method)简明总结
2014/07/08 PHP
PHP的关于变量和日期处理的一些面试题目整理
2015/08/10 PHP
从JavaScript的函数重名看其初始化方式
2007/03/08 Javascript
childNodes.length与children.length的区别
2009/05/14 Javascript
js使用for循环与innerHTML获取选中tr下td值
2014/09/26 Javascript
PageSwitch插件实现100种不同图片切换效果
2015/07/28 Javascript
基于javascript代码实现通过点击图片显示原图片
2015/11/29 Javascript
在JSP中如何实现MD5加密的方法
2016/11/02 Javascript
JS实现根据用户输入分钟进行倒计时功能
2016/11/14 Javascript
自制简易打赏功能的实例
2017/09/02 Javascript
JavaScript实现开关等效果
2017/09/08 Javascript
AngularJS动态生成select下拉框的方法实例
2019/11/17 Javascript
原生js实现日期选择插件
2020/05/21 Javascript
JS实现数据动态渲染的竖向步骤条
2020/06/24 Javascript
JavaScript实现跟随鼠标移动的盒子
2021/01/28 Javascript
python3.3实现乘法表示例
2014/02/07 Python
对python .txt文件读取及数据处理方法总结
2018/04/23 Python
python+Django+pycharm+mysql 搭建首个web项目详解
2019/11/29 Python
解决import tensorflow as tf 出错的原因
2020/04/16 Python
Python实现汇率转换操作
2020/05/03 Python
Python使用itcaht库实现微信自动收发消息功能
2020/07/13 Python
Python实现京东抢秒杀功能
2021/01/25 Python
澳大利亚厨房和家用电器购物网站:Bing Lee
2021/01/11 全球购物
药物学专业学生的自我评价
2013/10/27 职场文书
2014年3.15团委活动总结
2014/03/16 职场文书
投资协议书范本
2014/04/21 职场文书
幼儿园亲子活动总结
2014/04/26 职场文书
经理任命书模板
2014/06/06 职场文书
团组织推优材料
2014/12/29 职场文书
社区国庆节活动总结
2015/03/23 职场文书
2015年学校体育工作总结
2015/04/22 职场文书
SqlServer数据库远程连接案例教程
2021/07/15 SQL Server
利用Java连接Hadoop进行编程
2022/06/28 Java/Android