彩世界开奖app官网-彩世界平台官方网址(彩票平台)
做最好的网站
来自 彩世界平台官方网址 2019-11-28 06:14 的文章
当前位置: 彩世界开奖app官网 > 彩世界平台官方网址 > 正文

ASP.NET jQuery 实例2 (表单中应用回车在TextBox之间向

脚本代码: 复制代码 代码如下:

常见的EasyUI的ComboBox是可以输入,也可以从列表选择的内容的输入控件。

复制代码 代码如下:var planscore=document.getElementById;

通过下面的代码可以实现这种切换的效果。 首先我们来看界面: 界面代码: 复制代码 代码如下:

复制代码 代码如下:$("input[name='SplitType']:checked").val()

复制代码 代码如下:var scorediv=document.getElementById;

Recipe2

而利用标准的Select控件虽然可以实现从列表选择,不过不够ComboBox控件那么灵活方便,Select控件的界面代码如下:

首先给大家展示效果图:

复制代码 代码如下:$.val;

复制代码 代码如下:var enddiv=document.getElementById;

赋值给界面控件代码如下:

//获得游戏结束后分数统计界面

autoRowHeight: true

复制代码 代码如下:var mainDiv=document.getElementById;

设置控件的选择的内容代码如下:

以上代码简单吧,使用纯javascript模仿微信打飞机小游戏,当时方法还有很多种,欢迎大家一起来分享。

9、表格控件DataGrid

复制代码 代码如下:var scorelabel=document.getElementById;

通过构造一些查询参数并传递相应的值,后台根据这些参数,从对应控制器的分页方法 FindWithPager 获取相应的分页数据,并绑定到grid控件中。

复制代码 代码如下:var startdiv=document.getElementById;

复制代码 代码如下:var systemType= $.combobox;

纯JavaScript模仿微信打飞机游戏,做网页小游戏的借鉴下,界面设计是竖长形仿手机屏幕风格,游戏效果流畅。具有分数统计,里面的JS封装类中包括有创建飞机类、飞机移动行为控制,创建子弹类,产生min到max之间的随机数,判断本方飞机是否移出边界,如果移出边界,则取消mousemove事件,反之加上mousemove事件,为暂停界面的继续按钮添加暂停事件,创建敌方飞机类、碰撞判断、完成界面的初始化,敌方小飞机一个,我方飞机一个。

虽然easyui也有Tree控件,不过我较喜欢使用zTree这个树形控件,这个是一个免费的Jquery树控件。

//获得游戏中分数显示界面

 onLoadSuccess: function () { $.linkbutton({ text: '可见', plain: true, iconCls: 'icon-ok' }); $.linkbutton({ text: '不可见', plain: true, iconCls: 'icon-stop' }); }, 
//function chongxinkaishi(){// location.reload;// startdiv.style.display="none";// maindiv.style.display="block";//}var bodyobj=document.getElementsByTagName[];if(document.addEventListener){ //为本方飞机添加移动和暂停 mainDiv.addEventListener("mousemove",yidong,true); //为本方飞机添加暂停事件 selfplan.imagenode.addEventListener; //为body添加判断本方飞机移出边界事件 bodyobj.addEventListener("mousemove",bianjie,true); //为暂停界面的继续按钮添加暂停事件 suspenddiv.getElementsByTagName[].addEventListener;// suspenddiv.getElementsByTagName[].addEventListener("click",chongxinkaishi,true); //为暂停界面的返回主页按钮添加事件 suspenddiv.getElementsByTagName[].addEventListener;}else if{ //为本方飞机添加移动 mainDiv.attachEvent; //为本方飞机添加暂停事件 selfplan.imagenode.attachEvent; //为body添加判断本方飞机移出边界事件 bodyobj.attachEvent("onmousemove",bianjie); //为暂停界面的继续按钮添加暂停事件 suspenddiv.getElementsByTagName[].attachEvent;// suspenddiv.getElementsByTagName[].attachEvent("click",chongxinkaishi,true); //为暂停界面的返回主页按钮添加事件 suspenddiv.getElementsByTagName[].attachEvent;}//初始化隐藏本方飞机selfplan.imagenode.style.display="none";/*敌机对象数组 */var enemys=[];/*子弹对象数组 */var bullets=[];var mark=;var mark=;var backgroundPositionY=;/*开始函数 */function start(){ mainDiv.style.backgroundPositionY=backgroundPositionY "px"; backgroundPositionY =.; if(backgroundPositionY==){ backgroundPositionY=; } mark  ; /* 创建敌方飞机 */ if{ mark  ; //中飞机 if{ enemys.push(new enemy,"image/中飞机爆炸.gif","image/enemy_fly_.png")); } //大飞机 if{ enemys.push(new enemy(,,,,,,,,"image/大飞机爆炸.gif","image/enemy_fly_.png")); mark=; } //小飞机 else{ enemys.push(new enemy,"image/小飞机爆炸.gif","image/enemy_fly_.png")); } mark=; }/*移动敌方飞机 */ var enemyslen=enemys.length; for(var i=;i){ mainDiv.removeChild; enemys.splice; enemyslen--; } //当敌机死亡标记为true时,经过一段时间后清除敌机 if(enemys[i].planisdie==true){ enemys[i].plandietimes =; if(enemys[i].plandietimes==enemys[i].plandietime){ mainDiv.removeChild; enemys.splice; enemyslen--; } } }/*创建子弹*/ if{ bullets.push(new oddbullet(parseInt(selfplan.imagenode.style.left) ,parseInt(selfplan.imagenode.style.top)-)); }/*移动子弹*/ var bulletslen=bullets.length; for(var i=;i=selfplan.imagenode.offsetLeft&&enemys[j].imagenode.offsetLeft<=selfplan.imagenode.offsetLeft selfplan.plansizeX){ if(enemys[j].imagenode.offsetTop enemys[j].plansizeY>=selfplan.imagenode.offsetTop &&enemys[j].imagenode.offsetTop<=selfplan.imagenode.offsetTop- selfplan.plansizeY){ //碰撞本方飞机,游戏结束,统计分数 selfplan.imagenode.src="image/本方飞机爆炸.gif"; enddiv.style.display="block"; planscore.innerHTML=scores; if(document.removeEventListener){ mainDiv.removeEventListener("mousemove",yidong,true); bodyobj.removeEventListener("mousemove",bianjie,true); } else if{

复制代码 代码如下:

var scores=;/* 创建飞机类 */function plan(hp,X,Y,sizeX,sizeY,score,dietime,sudu,boomimage,imagesrc){ this.planX=X; this.planY=Y; this.imagenode=null; this.planhp=hp; this.planscore=score; this.plansizeX=sizeX; this.plansizeY=sizeY; this.planboomimage=boomimage; this.planisdie=false; this.plandietimes=; this.plandietime=dietime; this.plansudu=sudu;//行为/*移动行为 */ this.planmove=function{ this.imagenode.style.top=this.imagenode.offsetTop this.plansudu "px"; } else if{ this.imagenode.style.top=this.imagenode.offsetTop this.plansudu  "px"; } else if{ this.imagenode.style.top=this.imagenode.offsetTop this.plansudu  "px"; } else if{ this.imagenode.style.top=this.imagenode.offsetTop this.plansudu  "px"; } else if{ this.imagenode.style.top=this.imagenode.offsetTop this.plansudu  "px"; } else{ this.imagenode.style.top=this.imagenode.offsetTop this.plansudu  "px"; } } this.init=function(){ this.imagenode=document.Element; this.imagenode.style.left=this.planX "px"; this.imagenode.style.top=this.planY "px"; this.imagenode.src=imagesrc; mainDiv.appendChild; } this.init();}/*创建子弹类 */function bullet(X,Y,sizeX,sizeY,imagesrc){ this.bulletX=X; this.bulletY=Y; this.bulletimage=null; this.bulletattach=; this.bulletsizeX=sizeX; this.bulletsizeY=sizeY;//行为/* 移动行为 */ this.bulletmove=function(){ this.bulletimage.style.top=this.bulletimage.offsetTop- "px"; } this.init=function(){ this.bulletimage=document.Element; this.bulletimage.style.left= this.bulletX "px"; this.bulletimage.style.top= this.bulletY "px"; this.bulletimage.src=imagesrc; mainDiv.appendChild; } this.init();}/* 创建单行子弹类 */function oddbullet{ bullet.call(this,X,Y,,,"image/bullet.png");}/*创建敌机类 */function enemy(hp,a,b,sizeX,sizeY,score,dietime,sudu,boomimage,imagesrc){ plan.call,-,sizeX,sizeY,score,dietime,sudu,boomimage,imagesrc);}//产生min到max之间的随机数function random{ return Math.floor*;}/*创建本方飞机类 */function ourplan{ var imagesrc="image/我的飞机.gif"; plan.call(this,,X,Y,,,,,,"image/本方飞机爆炸.gif",imagesrc); this.imagenode.setAttribute;}/* 创建本方飞机 */var selfplan=new ourplan;//移动事件var ourPlan=document.getElementById;var yidong=function(){ var oevent=window.event||arguments[]; var chufa=oevent.srcElement||oevent.target; var selfplanX=oevent.clientX-; var selfplanY=oevent.clientY; ourPlan.style.left=selfplanX-selfplan.plansizeX/ "px"; ourPlan.style.top=selfplanY-selfplan.plansizeY/ "px";// document.getElementsByTagName[].style.left=selfplanX-selfplan.plansizeX/ "px";// document.getElementsByTagName[]..style.top=selfplanY-selfplan.plansizeY/ "px";}/*暂停事件 */var number=;var zanting=function{ suspenddiv.style.display="block"; if(document.removeEventListener){ mainDiv.removeEventListener("mousemove",yidong,true); bodyobj.removeEventListener("mousemove",bianjie,true); } else if{ mainDiv.detachEvent; bodyobj.detachEvent("onmousemove",bianjie); } clearInterval; number=; } else{ suspenddiv.style.display="none"; if(document.addEventListener){ mainDiv.addEventListener("mousemove",yidong,true); bodyobj.addEventListener("mousemove",bianjie,true); } else if{ mainDiv.attachEvent; bodyobj.attachEvent("onmousemove",bianjie); } set=setInterval; number=; }}//判断本方飞机是否移出边界,如果移出边界,则取消mousemove事件,反之加上mousemove事件var bianjie=function(){ var oevent=window.event||arguments[]; var bodyobjX=oevent.clientX; var bodyobjY=oevent.clientY; if(bodyobjX||bodyobjY){ if(document.removeEventListener){ mainDiv.removeEventListener("mousemove",yidong,true); } else if{ mainDiv.detachEvent; } } else{ if(document.addEventListener){ mainDiv.addEventListener("mousemove",yidong,true); } else if{ mainDiv.attachEvent; } }}

它的界面代码如下所示:

七夕情人节也不要忘了打游戏喔喔~,下面小编为大家准备的情人节礼物之纯javascript模仿微信打飞机小游戏分享给天下的情人们。

复制代码 代码如下:var v = $.numberbox;

复制代码 代码如下:var suspenddiv=document.getElementById;

我们知道,一般Web界面包括的界面控件有:单行文本框、多行文本框、密码文本框、下拉列表Combobox、日期输入控件、数值输入控件、单项选择、复选框、表格控件DataGrid、树形控件、布局控件、弹出式对话框、提示信息、列表控件等,这些界面控件的操作都有哪些不同,下面我们来逐一进行介绍。

//暂停界面重新开始事件

获取界面控件的值代码如下:

//获得游戏结束界面

 $.messager.confirm("删除确认", "您确认删除选定的记录吗?", function  { if  { $.get("/DictData/DeletebyIds", postData, function  { if  { $.messager.alert; $.datagrid; //当删除完成之后,第二次删除的时候还记得上次的信息,这样是不可以的,所以我们需要清除第一次的信息 rows.length = "";//第一种方法 $.datagrid;//第二种方法 } else { $.messager.alert; } }); 

复制代码 代码如下:var lastupate = $.datebox;

 columns: [[ { field: 'ck', checkbox: true }, //选择 { title: '显示名称', field: 'Name', width: 200}, { title: '图标', field: 'Icon', width: 150 }, { title: '排序', field: 'Seq', width: 80 }, { title: '功能ID', field: 'FunctionId', width: 80 }, { title: '菜单可见', field: 'Visible', width: 80, formatter: function  { if  { return ''   val   ''; } else { return ''   val   ''; } } }, { title: 'Winform窗体类型', field: 'WinformType', width: 400 }, { title: 'Web界面Url地址', field: 'Url', width: 200 }, { title: 'Web界面的菜单图标', field: 'WebIcon', width: 120 }, { title: '系统编号', field: 'SystemType_ID', width: 80 } ]], 

密码文本框和常规的文本框一样,只是输入字符的时候,系统做了屏蔽显示而已,把它作为一个来独立说明,也是因为它也是常见输入的一种。

另外,如果需要在grid里面增加一些图片或者链接什么的,应该如何操作呢?

easyui的列表控件,可以通过指定table的class属性为easyui-datagrid即可实现表格的定义,界面代码如下所示:

弹出窗体界面效果如下。

5、日期输入控件

赋值给界面控件代码如下:

获取界面控件的值代码如下:

初始化在Tree树控件的界面代码如下所示:

复制代码 代码如下:$.numberspinner;

复制代码 代码如下:

复制代码 代码如下:var postData = $.serializeArray();

而表格控件的数据加载,我们使用javascript进行初始化,初始化后的表格界面显示效果如下所示。

 $.combobox({ url: '/DictType/GetDictJson', valueField: 'Value', textField: 'Text' }); 

复制代码 代码如下:

获取界面控件的值代码如下:

赋值给界面控件代码如下:

如果显示的图片不完整,设置行的自动调整高度属性为true即可。

4、下拉列表Combobox

 //绑定查询按钮的的点击事件 function BindSearchEvent() { //按条件进行查询数据,首先我们得到数据的值 $.click { //得到用户输入的参数,取值有几种方式:$.combobox.datebox.val() //字段增加WHC_前缀字符,避免传递如URL这样的Request关键字冲突 var queryData = { WHC_ID: $, WHC_Name: $, WHC_Icon: $, WHC_Seq: $, WHC_FunctionId: $.val(), WHC_Visible: $, WHC_WinformType: $.val(), WHC_Url: $, WHC_WebIcon: $, WHC_SystemType_ID: $.val() } //将值传递给 InitGrid; return false; }); } 

获取界面控件的值代码如下:

复制代码 代码如下:

对于查询按钮触发的数据后台查询及数据绑定操作,javascript代码如下所示:

复制代码 代码如下:$.datebox('setValue', info.LastUpdated);

easyui使用样式easyui-numberbox标识为数值类型,其表现为文本框,但只能输入数值。

复制代码 代码如下:$.text;

7、单项选择Radio控件

复制代码 代码如下:$.prop('checked', info.Visible);

   Select a language Java
 C#
 Ruby
 Basic
 Fortran   $.combo({ required:true, editable:false }); $.appendTo.combo; $.click{ var v = $; var s = $.text.combo.combo.combo;  

3、密码文本框

或者使用Comobo控件作为单项选择的控件也是可以的,界面效果如下所示。

easyui使用class=‘easyui-datebox'来标识日期控件,从弹出的层中选择正确的日期,是一种非常常见的界面输入控件,可以替代My97DatePicker日期输入控件。

复制代码 代码如下:

复制代码 代码如下:

使用Select控件的代码如下所示。

复制代码 代码如下:帐号过期

1、单行文本框

  &lt;!-- var setting = { data: { simpleData: { enable: true } }, callback: { onClick: onClick, onDblClick: onDblClick } } //&#37325;&#26032;&#21152;&#36733;&#26641;&#24418;&#32467;&#26500; function reloadTree.show(); $.getJSON("/DictType/GetTreeJson&amp;#63;r="   Math.random { $.fn.zTree.init, setting, json); $.fn.zTree.getZTreeObj.expandAll; var treeObj = $.fn.zTree.getZTreeObj; var treeNodes = treeObj.getNodes(); if  { loadTypeData; } }); $.fadeOut; } //&#26641;&#21333;&#20987;&#33410;&#28857;&#25805;&#20316; function onClick(event, treeId, treeNode, clickFlag) { var id = treeNode.id; loadTypeData; } //&#26641;&#21452;&#20987;&#33410;&#28857;&#25805;&#20316; function onDblClick(event, treeId, treeNode) { var id = treeNode.id; loadTypeData; ShowDictType; } &lt;/pre&gt;&lt;p&gt;&lt;strong&gt;11&#12289;&#24067;&#23616;&#25511;&#20214;&lt;/strong&gt;&lt;/p&gt;&lt;p&gt;EasyUI&#36890;&#36807;DIV&#23618;&#26469;&#25511;&#21046;&#24067;&#23616;&#30340;&#26174;&#31034;&#65292;DIV&#37324;&#38754;&#22686;&#21152;&#19968;&#20010;Region&#30340;&#23646;&#24615;&#29992;&#26469;&#21306;&#20998;&#23646;&#20110;&#21738;&#20010;&#21306;&#22495;&#65292;&#22914;&#19979;&#22270;&#26159;&#25105;Web&#24320;&#21457;&#26694;&#26550;&#30340;&#30028;&#38754;&#24067;&#23616;&#25928;&#26524;&#22270;&#12290;&lt;/p&gt;&lt;p&gt;&#25105;&#20204;&#35814;&#32454;&#26597;&#30475;&#20027;&#24037;&#20316;&#21306;&#30340;&#20195;&#30721;&#65292;&#22914;&#19979;&#25152;&#31034;&#12290;&lt;/p&gt;&lt;pre &gt; &lt;!--&#20027;&#24037;&#20316;&#21306;--&gt; &lt;div region="center" title="" style="overflow:hidden;"&gt; &lt;div fit="true" border="false" &gt; &lt;/div&gt; &lt;/div&gt; &lt;/pre&gt;&lt;p&gt;&#20854;&#20013;&#23383;&#20856;&#31649;&#29702;&#37324;&#38754;&#36824;&#26377;&#23376;&#24067;&#23616;&#30340;&#23637;&#31034;&#65292;&#25105;&#20204;&#26597;&#30475;&#23383;&#20856;&#31649;&#29702;&#37324;&#38754;&#30028;&#38754;&#20195;&#30721;&#65292;&#22914;&#19979;&#25152;&#31034;&#12290;&lt;/p&gt;&lt;pre &gt;&lt;div style="width:700px;height:700px;" fit="true"&gt; &lt;div data-options="region:'west',split:true,title:'&#23383;&#20856;&#31867;&#21035;',iconCls:'icon-book'" style="width: 300px; padding: 1px;"&gt; &lt;div style="padding: 1px; border: 1px solid #ddd;"&gt; .......................&lt;/div&gt; &lt;div&gt; &lt;ul &gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;div data-options="region:'center',title:'&#23383;&#20856;&#25968;&#25454;',iconCls:'icon-book'" style="padding:5px;height:auto"&gt; &lt;!-------------------------------&#35814;&#32454;&#20449;&#24687;&#23637;&#31034;&#34920;&#26684;-----------------------------------&gt; &lt;table style="width: 940px" title="&#29992;&#25143;&#25805;&#20316;" iconcls="icon-view"&gt;&lt;/table&gt; &lt;/div&gt; &lt;/div&gt; &lt;/pre&gt;&lt;p&gt;&lt;strong&gt;12&#12289;&#24377;&#20986;&#24335;&#23545;&#35805;&#26694;&lt;/strong&gt;&lt;/p&gt;&lt;p&gt;EasyUI&#24377;&#20986;&#24335;&#23545;&#35805;&#26694;&#29992;&#30340;&#24456;&#22810;&#65292;&#23545;&#35805;&#26694;&#30340;&#30028;&#38754;&#20195;&#30721;&#25918;&#22312;DIV&#23618;&#37324;&#38754;&#65292;&#19968;&#33324;&#22312;&#30028;&#38754;&#25972;&#20010;&#30028;&#38754;&#21152;&#36733;&#21518;&#20013;&#24050;&#32463;&#21021;&#22987;&#21270;&#20102;&#65292;&#21482;&#26159;&#25105;&#20204;&#26681;&#25454;&#26465;&#20214;&#30456;&#20284;&#36866;&#24403;&#30340;&#23618;&#21363;&#21487;&#65292;&#36825;&#26679;&#23601;&#24418;&#25104;&#20102;&#24377;&#20986;&#24335;&#23545;&#35805;&#26694;&#65292;&#24377;&#20986;&#24335;&#23545;&#35805;&#26694;&#26377;&#19968;&#20010;&#36974;&#32617;&#30340;&#25928;&#26524;&#12290;&lt;/p&gt;&lt;p&gt;&lt;strong&gt;13&#12289;&#25552;&#31034;&#20449;&#24687;&lt;/strong&gt;&lt;/p&gt;&lt;p&gt;&#22312;&#24120;&#35268;&#30340;Web&#30028;&#38754;&#25552;&#31034;&#37324;&#38754;&#65292;&#25105;&#20204;&#19968;&#33324;&#29992;&#32431;&#31929;&#30340;javascript&#30340;alert&#20989;&#25968;&#26469;&#36827;&#34892;&#20449;&#24687;&#30340;&#25552;&#31034;&#65292;&#22914;&#26524;&#22312;&#22522;&#20110;EasyUI&#30340;&#30028;&#38754;&#24067;&#23616;&#21644;&#28436;&#31034;&#37324;&#38754;&#65292;&#20351;&#29992;&#36825;&#20010;&#25552;&#31034;&#26174;&#28982;&#20250;&#21644;&#30028;&#38754;&#28436;&#31034;&#19981;&#22815;&#21305;&#37197;&#65292;&#22240;&#27492;&#25105;&#20204;&#20351;&#29992;messager&#31867;&#26469;&#36827;&#34892;&#30456;&#24212;&#30340;&#25552;&#31034;&#20449;&#24687;&#22788;&#29702;&#65292;&#31616;&#21333;&#30340;&#33050;&#26412;&#25552;&#31034;&#20195;&#30721;&#22914;&#19979;&#12290;&lt;/p&gt;&lt;p&gt;&lt;U&gt;&#22797;&#21046;&#20195;&#30721;&lt;/U&gt; &#20195;&#30721;&#22914;&#19979;:$.messager.alert; &lt;/p&gt;&lt;p&gt;&#25552;&#31034;&#20449;&#24687;&#20063;&#21487;&#20197;&#26356;&#21152;&#20016;&#23500;&#65292;&#28155;&#21152;&#22270;&#26631;&#31561;&#20449;&#24687;&#65292;&#30028;&#38754;&#20195;&#30721;&#22914;&#19979;&#25152;&#31034;&#12290;&lt;/p&gt;&lt;pre &gt;&lt;script&gt; function alert1(){ $.messager.alert('My Title','Here is a message!'); } function alert2(){ $.messager.alert('My Title','Here is a error message!','error'); } function alert3(){ $.messager.alert('My Title','Here is a info message!','info'); } function alert4(){ $.messager.alert('My Title','Here is a question message!','question'); } function alert5(){ $.messager.alert('My Title','Here is a warning message!','warning'); }  

赋值给界面控件代码如下:

在前面介绍了两篇关于我的基于MVC4 EasyUI技术的Web开发框架的随笔,本篇继续介绍其中界面部分的一些使用知识,包括控件的赋值、取值、清空,以及相关的使用。

复制代码 代码如下:var visible = $;

在formatter回调函数里面添加逻辑代码,判断是否可见,其实就是增加两个图片按钮,但是图片按钮的样式设置,必须在加载数据完毕后才能操作,因此需要在函数里面处理。

获取界面控件的值代码如下:

对于easyui-validatebox样式的控件,一般来说,有几个常见属性可以设置他们的。

 //实现对DataGird控件的绑定操作 function InitGrid { $.datagrid({ //定位到Table标签,Table标签的ID是grid url: '/Menu/FindWithPager', //指向后台的Action来获取当前菜单的信息的Json格式的数据 title: '功能菜单', iconCls: 'icon-view', height: 650, width: function () { return document.body.clientWidth * 0.9 }, nowrap: true, autoRowHeight: false, striped: true, collapsible: true, pagination: true, pageSize: 100, pageList: [50,100,200], rownumbers: true, //sortName: 'ID', //根据某个字段给easyUI排序 sortOrder: 'asc', remoteSort: false, idField: 'ID', queryParams: queryData, //异步查询的参数 columns: [[ { field: 'ck', checkbox: true }, //选择 { title: '显示名称', field: 'Name', width: 200}, { title: '图标', field: 'Icon', width: 150 }, { title: '排序', field: 'Seq', width: 80 }, { title: '功能ID', field: 'FunctionId', width: 80 }, { title: '菜单可见', field: 'Visible', width: 80 }, { title: 'Winform窗体类型', field: 'WinformType', width: 400 }, { title: 'Web界面Url地址', field: 'Url', width: 200 }, { title: 'Web界面的菜单图标', field: 'WebIcon', width: 120 }, { title: '系统编号', field: 'SystemType_ID', width: 80 } ]], toolbar: [{ id: 'btnAdd', text: '添加', iconCls: 'icon-add', handler: function ;//实现添加记录的页面 } }, '-', { id: 'btnEdit', text: '修改', iconCls: 'icon-edit', handler: function () { ShowEditOrViewDialog();//实现修改记录的方法 } }, '-', { id: 'btnDelete', text: '删除', iconCls: 'icon-remove', handler: function ;//实现直接删除数据的方法 } }, '-', { id: 'btnView', text: '查看', iconCls: 'icon-table', handler: function () { ShowEditOrViewDialog;//实现查看记录详细信息的方法 } }, '-', { id: 'btnReload', text: '刷新', iconCls: 'icon-reload', handler: function () { //实现刷新栏目中的数据 $.datagrid; } }], onDblClickRow: function  { $.datagrid; $.datagrid; ShowEditOrViewDialog }; 

复制代码 代码如下:$.val;

   数据分开方式: 

复选框是在一项或多项内容中,选择零项或者多项的一个输入界面控件。

复制代码 代码如下:$.combobox;

10、树形控件

8、复选框

绑定下拉列表的数据源代码如下:

赋值给界面控件代码如下:

 $.click { var postData = { UserName: $, Password: $, Code: $ }; 

基于这个原因,我们可以使用Select控件进行替代,实现复选项的功能,而不影响

复制代码 代码如下:

复制代码 代码如下:var text = $;

复制代码 代码如下:var password = '123';$.val

复制代码 代码如下:var name = $;

分隔符方式,多个数据中英文逗号,分号,斜杠或顿号[, , ; ; / 、]分开,或一行一个
一行一个记录模式,忽略所有分隔符号

以上就是我Web开发框架里面常用到的一些界面控件展示以及相关的代码介绍,有一些不太常用的控件可能还没有在本文中介绍,欢迎大家进行补充和讨论,以后有时间继续完善这个文章,作为基于MVC EasyUI的框架界面的一个很好的参考。希望大家喜欢,多多提意见。

 Select a languageJava
C#
Ruby
Basic
Fortran$.combo({required:true,editable:false});$.appendTo.combo;$.click{var v = $;var s = $.text.combo.combo.combo; 

不过为了避免使用脚本定义datagrid导致多次初始化的问题,我们一般只需要指定一个table代码即可,界面如下所示

复制代码 代码如下:

获取界面控件的值代码如下:

使用easyui的控件,单行文本可以使用easyui-validatebox样式即可,类型为text的控件。

如果是标签Lable控件,这需要把val 使用text替代即可,如下代码所示:

或者使用‘easyui-numberspinner'样式来标识,可以上下调节数值。

获取界面控件的值代码如下:

对于一般的删除操作,一般有一个提示确认的消息框,这个messager类也进行了封装处理,效果也不错。

2、多行文本框

 正常 不可见  
Item ID Product List Price Unit Cost Attribute Status

赋值给界面控件代码如下:

复制代码 代码如下:

由于复选框的一些特殊性质,在表单提交的时候,如果没有勾选的选型,使用serializeArray()方法构造的数据,复选框的值则不会被提交。

6、数值输入控件

赋值给界面控件代码如下:

//必输项: //格式的验证:  //长度范围的验证:  

复制代码 代码如下:

复制代码 代码如下:var v = $.numberspinner;

获取界面控件的值代码如下:

Javascript代码如下所示,其中的width: function () { return document.body.clientWidth * 0.9 }是用来实现宽度自适应的一个操作。

单项选择Radio控件,是在多项内容里面选择一个选项进行保存或者显示。

easyui的界面样式,可以使用easyui-validatebox,或者默认的textarea即可。

复制代码 代码如下:$('input:radio[name="SplitType"][value="Split"]').prop;

首先需要在初始化代码里面增加列的formatter回调函数,如下所示。

复制代码 代码如下:$.numberbox;

本文由彩世界开奖app官网发布于彩世界平台官方网址,转载请注明出处:ASP.NET jQuery 实例2 (表单中应用回车在TextBox之间向

关键词: 脚本 实例 之家 表单