使用Jquery来实现可以输入值的下拉选单 雏型
上网 找了一下，有一堆现成的控件，可是 现成的 我要去了解，来结合我现在 系统来应用，要花不少时间，这个时间 跟我自己 搞一个成本 应该差不多
那我还不如 自己 搞一个，比较能了解 怎麽运作，後面就更容易加以运用了。
我的目标是，要把 这个 作成一个控件来使用，并要降低外部程式使用的耦合性，也就是 外部程式 使用上所需的必要条件要尽量减少，免得一忘记加什麽设定，程式 就挂了。
如有可能 甚至希望，只会需要引用一个 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 寬度來設定 下拉選單的寬度
$("#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 也能动态产生..
相关推荐
-
使用Jquery来实现可以输入值的下拉选单 雏型
上网 找了一下,有一堆现成的控件,可是 现成的 我要去了解,来结合我现在 系统来应用,要花不少时间,这个时间 跟我自己 搞一个成本 应该差不多 那我还不如 自己 搞一个,比较能了解 怎麽运作,後面就更容易加以运用了. 我的目标是,要把 这个 作成一个控件来使用,并要降低外部程式使用的耦合性,也就是 外部程式 使用上所需的必要条件要尽量减少,免得一忘记加什麽设定,程式 就挂了. 如有可能 甚至希望,只会需要引用一个 Jquery 其他 JavaSciprt 都由程式 来产生. 最後是希望能结合 之
-
jquery实现简单的二级导航下拉菜单效果
本文实例讲述了jquery实现简单的二级导航下拉菜单效果.分享给大家供大家参考.具体如下: jQuery代码实现的二级导航菜单效果,非常简洁,喜欢简洁风格的朋友您可以下载哦.菜单最多支持两级,CSS的配合也是挺重要的,不多说了,要代码的就直接复制吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-2jxl-menu-codes/ 具体代码如下: <title>jquery二级导航菜单</title> <styl
-
php+jQuery实现的三级导航栏下拉菜单显示效果
本文实例讲述了php+jQuery实现的三级导航栏下拉菜单显示效果.分享给大家供大家参考,具体如下: 首先看看效果图: 1.数据配置文件 db.php <?php return array( array( 'one' => '关于我们', 'two' => array( array( 'three_tit' => '公司介绍', 'three_cont' => array( '企业概况', '组织架构', '发展历程', '企业文化', '服务理念' ) ), array(
-
jQuery结合CSS制作动态的下拉菜单
当要在一个有限的导航菜单空间放一个大的子菜单时,我们一般采用下拉菜单的形式来弥补空间的不足.本文将带大家用最少的时间,使用jQuery和CSS结合制作一个动态的下拉菜单. XHTML 首先是要在页面的head部分引入jquery库,这是必须的. <script type="text/javascript" src="js/jquery.js"></script> 接着我使用一个无序列表来构建菜单. <ul class="men
-
jQuery中select与datalist制作下拉菜单时的区别浅析
一般我们通常使用select制作下拉菜单,但是H5之后,datalist也可以充当select的角色,而且两者还有一点小的不同. 对于select来说,select的下拉菜单是供用户选择的,用户只能选择其中的选项不能自己添加. 但是datalist就不同了,datalist不仅可以供用户选择,用户还可以自己输入,而且datalist还可以达到模糊匹配的效果,使用很方便. 据代码示例如下: <input type="text" list="addr"/>
-
jQuery实现的checkbox级联选择下拉菜单效果示例
本文实例讲述了jQuery实现的checkbox级联选择下拉菜单效果.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title></title> <script language="JavaScript" src="jq
-
jQuery实现的精美平滑二级下拉菜单效果代码
本文实例讲述了jQuery实现的精美平滑二级下拉菜单效果.分享给大家供大家参考,具体如下: 这是一款jQurey实现的向下二级导航菜单效果.效果非常不错,由上到下平滑延伸,给人的感觉协调唯美!js与html代码结构简单明了,便于使用与修改! 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xh
-
jQuery实现灰蓝风格标准二级下拉菜单效果代码
本文实例讲述了jQuery实现灰蓝风格标准二级下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的标准型二级菜单,是漂亮的灰-蓝风格下拉级联菜单,代码经过了完美修正,目前兼容性已经很不错了,甚至不用修改,拷贝代码你就可以用了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-blue-color-style-nav-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC &quo
-
jQuery+easyui中的combobox实现下拉框特效
1.第一种写法:Input框中显示: 复制代码 代码如下: <input id="cc" class="easyui-combobox" name="name" data-options="valueField:'value',textField:'text',data:[{'value':'1','text':'java'},{'value':'2','text':'C#'}]"/> 2. 第二种用法,在list
-
利用Jquery实现可多选的下拉框
首先下载jquery.multiselect.js 的插件然后复制下列代码,只需改下路径就可以实现可多选下拉框.如果好用还请多多支持! 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://w