两种方式实现点击列表弹出列...-jquery实现ajax联动框二-通过上下左右键和回车键切换光标

当前位置: 编程技术>WEB前端

本页文章导读:

▪两种方式实现点击列表弹出列表索引方式一，使用利用事件冒泡委托给列表的父节点去处理的方式：var ulObj = document.getElementById("myUl"); ulObj.onclick = function (event) { var tg = event.target; var liArray = ulObj.getE.........

▪jquery实现ajax联动框二另一种形式的联动框，右边的联动框用jquery生成这是仿照上篇的js方法修改的先看下页面代码：<tr id="sfqySelect"> <td width="100" >事发区域：</td> <td width="131"> &l.........

▪通过上下左右键和回车键切换光标做项目时，客户提出这样一个要求，在列表中的文本框里输入数据时，要能够通过上下左右键来切换光标，按回车键就把光标移到下一个文本框。这样就省得一直去用鼠标了，.........

[1]两种方式实现点击列表弹出列表索引

来源: 发布时间: 2013-11-06

方式一，使用利用事件冒泡委托给列表的父节点去处理的方式：

方式二，使用闭包：

HTML代码：

<ul id='myUl'>
<li>haha</li>
<li>heihei</li>
<li>hehe</li>
<li>gaga</li>
</ul>

本文链接

[2]jquery实现ajax联动框二

来源: 发布时间: 2013-11-06

另一种形式的联动框，右边的联动框用jquery生成

这是仿照上篇的js方法修改的

先看下页面代码：

页面调用的js：

对应的 jquery.building.js 文件如下：

/*
Ajax 三级联动
日期：2013-2-26

settings 参数说明
-----
buildingUrl:大楼下拉数据获取URL,josn返回
buildingValue:默认大楼下拉value
floorUrl:楼层数据获取URL,josn返回
floorValue:默认楼层value
nodata:无数据状态
required:必选项
clickCallback:点击时的回调函数
------------------------------ */
(function($){
$.fn.building=function(settings){
if($(this).size()<1){return;};
// 默认值
settings=$.extend({
buildingUrl:"js/city.min.js",
floorUrl:"js/city.min.js",
buildingValue:null,
floorValue:null,
nodata:null,
required:true,
clickCallback:function(){}
},settings);

var box_obj=this;
var building_obj=box_obj.find(".building");
var floor_obj=box_obj.find(".choose_floor");
var floorHidden_obj=box_obj.find(".choose_floor_hidden");
var floorPanel_obj=box_obj.find("#floorNum");
var select_prehtml=(settings.required) ? "" : "<option value=''>请选择</option>";

var prepareSelectHtml=function(jsonArray){
var temp_html=select_prehtml;
$.each(jsonArray,function(index,row){
temp_html+="<option value='"+row.value+"'>"+row.text+"</option>";
});
return temp_html;
};
var prepareFloorPanelHtml=function(jsonArray){
var temp_html='<table id="floor_table" cellpadding="0" cellspacing="0">';
var count=0;
$.each(jsonArray,function(index,row){
if(count==0){
temp_html+='<tr>';
}
var otherAttr="";
if(row.other){
otherAttr="other="+row.other+"";
}
temp_html+='<td '+otherAttr+' floorId='+row.value+'>'+row.text+'</td>';
if(count>0&&count%3==0){
temp_html+='</tr>'

[3]通过上下左右键和回车键切换光标

来源: 发布时间: 2013-11-06

做项目时，客户提出这样一个要求，在列表中的文本框里输入数据时，要能够通过上下左右键来切换光标，按回车键就把光标移到下一个文本框。这样就省得一直去用鼠标了，操作起来更方便。

不废话，上代码。

<asp:GridView id="gdv" runat="server" AllowPaging="True" PageSize="50" AutoGenerateColumns="False"
EnableModelValidation="True" Width="100%" PagerStyle-HorizontalAlign="Center">
<PagerSettings Visible="False" />
<PagerStyle HorizontalAlign="Center" />
<RowStyle HorizontalAlign="Center" />
<Columns>
<asp:TemplateField HeaderText="序号">
<ItemTemplate>
<asp:Label ID="lbl" runat="server" Text="<%# Container.DataItemIndex+1%>"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="名称">
<ItemTemplate>
<asp:TextBox ID="BarCode" runat="server" Width="200px" MaxLength="10"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="数量">
<ItemTemplate>
<asp:TextBox ID="SusFillCount" runat="server" Width="200px" onkeypress="if (event.keyCode < 48 || event.keyCode >57) event.returnValue = false;" MaxLength="5"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>