asp.net html 单击按钮弹出下拉框效果
1、说明
需要引用jquery.js文件,我的页面是在asp.net MVC4 添加的web窗体,其他不多说 直接看代码
2、代码
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestXLCD.aspx.cs" Inherits="MvcAppTest.TestXLCD" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="Easyui/jquery-1.7.2.min.js" type="text/javascript"></script>
<style type="text/css">
li {
list-style-type:none;
height:32px;
line-height:32px;
vertical-align:middle;
}
</style>
<script type="text/javascript">
$(function () { var oRegionAddXM = document.getElementById("divDK");
var oDivListAddXM = document.getElementById("divAddXM");
var colOptionsAddXM = document.getElementsByClassName("li2");
var bNoAdjustedXM = true;
oRegionAddXM.onclick = function () {
oDivListAddXM.style.display = "block";
//设置下列选择项的一些事件
for (var i = 0; i < colOptionsAddXM.length; i++) {
colOptionsAddXM[i].style.cursor = "hand";
colOptionsAddXM[i].onmouseover = function () //为列表项添加鼠标移动事件
{
this.style.backgroundColor = "#ffff00";
this.style.cursor = "pointer";
};
colOptionsAddXM[i].onmouseout = function ()
//为列表项添加鼠标移走事件
{ this.style.backgroundColor = ""; };
} if (bNoAdjustedXM) {
bNoAdjustedXM = false;
//设置下拉列表的宽度和位置
var X = $('#divDK').offset().top;
var Y = $('#divDK').offset().left;
var wide = this.offsetWidth + 60;
// oDivListAddXM.style.width = wide;
$('#divAddXM').width(wide);
$('#divAddXM').css({ 'left': Y, 'top': X + 32 }); }
}
oDivListAddXM.onmouseleave = function () {
oDivListAddXM.style.display = "none";
};
});
function AddWG() {
alert('菜单1');
}
function AddWJ() {
alert('菜单2');
}
function AddPL() {
alert('菜单3');
}
function AddGS() {
alert('菜单4');
}
function AddGX() {
alert('菜单5');
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="divDK" style="width:100px;height:31px;margin-top:15px;padding-top:7px;">
<span style="cursor:pointer;">打开</span>
</div>
<div id="divAddXM" style="display:none;z-index:100;border:1px solid #0000aa;height:180px;overflow:hidden;position:absolute; background-color: #ccffff;">
<table style="width:100%;border:none;border-collapse:collapse;">
<tr>
<td>
<ul>
<li class="li2" onclick="AddWG()">菜单1</li>
<li class="li2" onclick="AddWJ()">菜单2</li>
<li class="li2" onclick="AddPL()">菜单3</li>
<li class="li2" onclick="AddGS()">菜单4</li>
<li class="li2" onclick="AddGX()">菜单5</li>
</ul>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
asp.net html 单击按钮弹出下拉框效果的更多相关文章
- easyui combobox点击输入框弹出下拉框
由于easyui combobox需要点击下拉箭头才能下拉,不能像select标签那样点击输入框就下拉,所以觉得不太方便,查看了一下,combobox弹出框是一个div,原本想在他的输入框的点击事件中 ...
- JQuery autocomplete获得焦点触发弹出下拉框
需求:autocomplete控件,当点击获得焦点的时候也要弹出下拉列表(autocomplete默认是输入之后才会跟随出下拉列表),下面直接贴代码. js代码: $("#customerN ...
- ActionBar点击弹出下拉框操作
首先: getActionBar().setDisplayShowTitleEnabled(false); ActionBar.LayoutParams lp = new ActionBar.Layo ...
- CSS实现鼠标移入弹出下拉框
前言 最近比较沉迷CSS,所以我现在来做个鼠标的交互效果 HTML <ul> <li>测试</li> <li>测试</li> <li ...
- ExtJS003单击按钮弹出window
html部分 <input type="button" id="btn" name="name" value="点击&quo ...
- IOS第二天-新浪微博 - 添加搜索框,弹出下拉菜单 ,代理的使用 ,HWTabBar.h(自定义TabBar)
********HWDiscoverViewController.m(发现) - (void)viewDidLoad { [super viewDidLoad]; // 创建搜索框对象 HWSearc ...
- Asp.Net下载页面,并弹出下载提示框
Asp.Net下载页面,并弹出下载提示框.在删除按钮里调用以下方法.
- asp.net导出excel并弹出保存提示框
asp.net导出excel并弹出保存提示框 2013-07-12 | 阅:1 转:78 | 分享 腾讯空间 人人网 开心网 新浪微博 腾讯微博 搜狐空间 推荐给朋友 举报 ...
- JQuery和ASP.NET分别实现级联下拉框效果
在学习JQuery之前知道下拉框的级联效果可以通过asp.net控件实现,现在学习了JQuery,知道了JQuery和select也能实现.我分别举两个小例子说明这两种方法如何实现. 1.用JQuer ...
随机推荐
- 写一简单kernel心得
当人按下笔记本开机键时.cpu的cs寄存器(基址)跟ip(偏移量)寄存器加电.被强制初始化为(jmp xxx:xxx) 跳转到bios所在的地址. 接着bios开机自检(这个不需要了解,只需了解最后跳 ...
- hdu 5459(递推好题)
Jesus Is Here Time Limit: 1500/1000 MS (Java/Others) Memory Limit: 65535/102400 K (Java/Others)To ...
- HDU 6188最小费用流
题目链接:http://hdu.hustoj.com/showproblem.php?pid=6118 掉坑里了,图很好建,Wa了一发,看了Disscuss里面有人提供了一组样例,画图发现:最小流模板 ...
- 2012 ACM/ICPC 亚洲区 金华站
题目链接 2012金华区域赛 Problem A 按a/b从小到大的顺序排队进行体检即可 #include<iostream> #include<cstdio> #inclu ...
- HDU 5266 pog loves szh III(区间LCA)
题目链接 pog loves szh III 题意就是 求一个区间所有点的$LCA$. 我们把$1$到$n$的$DFS$序全部求出来……然后设$i$的$DFS$序为$c[i]$,$pc[i]$为$c ...
- Codeforces 536C Tavas and Pashmaks(凸壳)
题目链接 Tavas and Pashmaks 题目大意:n个人比赛,游泳和赛跑,游泳距离S,赛跑R.每个人对应两个速度(陆地和水上的),如果存在S,R,使得第i个人胜利,那么输出i 题目要求输出所有 ...
- pycharm上传代码到码云错误现象用户密码
>>出现此时错误说明在pycharm>git登录用户名或密码是错误的(必须填成是自己注册的码云邮箱和密码 不允许出现中文)并且无法在当前修改用户名或密码 >>接下来打开电 ...
- PyTorch学习笔记之DataLoaders
A DataLoader wraps a Dataset and provides minibatching, shuffling, multithreading, for you. import t ...
- 深入理解Activity启动流程(三)–Activity启动的详细流程2
本文原创作者:Cloud Chou. 欢迎转载,请注明出处和本文链接 本系列博客将详细阐述Activity的启动流程,这些博客基于Cm 10.1源码研究. 深入理解Activity启动流程(一)--A ...
- jmeter源码编译
转载:http://blog.csdn.net/wanglha/article/details/42004943 一.下载源码 git clone git://github.com/apache/jm ...