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

所属分类: 网络编程 / JavaScript 阅读数: 205
收藏 0 赞 0 分享
上网 找了一下,有一堆现成的控件,可是 现成的 我要去了解,来结合我现在 系统来应用,要花不少时间,这个时间 跟我自己 搞一个成本 应该差不多
那我还不如 自己 搞一个,比较能了解 怎麽运作,後面就更容易加以运用了。
我的目标是,要把 这个 作成一个控件来使用,并要降低外部程式使用的耦合性,也就是 外部程式 使用上所需的必要条件要尽量减少,免得一忘记加什麽设定,程式 就挂了。
如有可能 甚至希望,只会需要引用一个 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="https://cdn.zhanzhang360.cn/imgupload/007645/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 寬度來設定 下拉選單的寬度
$("#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 也能动态产生..
更多精彩内容其他人还在看

Vue组件选项props实例详解

父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息。本文将详细介绍Vue组件选项props,需要的朋友可以参考下
收藏 0 赞 0 分享

javascript将url解析为json格式的两种方法

本篇文章主要介绍了javascript将url解析为json格式的两种方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

详解JS数组Reduce()方法详解及高级技巧

reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素。接下来通过本文给大家分享JS数组Reduce()方法详解及高级技巧,一起看看吧
收藏 0 赞 0 分享

JS模拟超市简易收银台小程序代码解析

本文通过实例代码给大家介绍了JS模拟超市简易收银台小程序代码,非常不错,具有参考借鉴价值,需要的的朋友参考下吧
收藏 0 赞 0 分享

JavaScript 完成注册页面表单校验的实例

下面小编就为大家带来一篇JavaScript 完成注册页面表单校验的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

简单的网页广告特效实例

下面小编就为大家带来一篇简单的网页广告特效实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

Vue内容分发slot(全面解析)

下面小编就为大家带来一篇Vue内容分发slot(全面解析)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

Vue自定义事件(详解)

下面小编就为大家带来一篇Vue自定义事件(详解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

Mui使用jquery并且使用点击跳转新窗口的实例

下面小编就为大家带来一篇Mui使用jquery并且使用点击跳转新窗口的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

深入理解ES6的迭代器与生成器

本篇文章主要介绍了深入理解ES6的迭代器与生成器,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享
查看更多