2016-12-04 16:52:18 sentox_easyui 阅读数 3501
  • js+ajax+jquery+easyui从入门到精通(项目实战)

    1.javascript从入门到精通,为学习ajax打基础; 2.ajax技术从零开始学,深入研究ajax的原理及使用,通过一些使用案例讲解; 3.easyui从入门到精通课程,详细介绍各种常用控件的使用方法,结合项目模块实战; 4.jquery应用:主要讲解对复杂及常用ui界面的设计,利用jquery技术基础,熟练掌握实现各种功能的技巧。

    20012 人正在学习 去看看 赖国荣
2019-06-17 16:13:39 weixin_43802688 阅读数 188
  • js+ajax+jquery+easyui从入门到精通(项目实战)

    1.javascript从入门到精通,为学习ajax打基础; 2.ajax技术从零开始学,深入研究ajax的原理及使用,通过一些使用案例讲解; 3.easyui从入门到精通课程,详细介绍各种常用控件的使用方法,结合项目模块实战; 4.jquery应用:主要讲解对复杂及常用ui界面的设计,利用jquery技术基础,熟练掌握实现各种功能的技巧。

    20012 人正在学习 去看看 赖国荣

两种方式清空表单

基于bootstrap的页面
<form class="form-horizontal">
											 <div class="form-group">
											    <div class="col-sm-12">
											      <input type="text" class="form-control" id="hykh" placeholder="请输入会员卡号">
											    </div>
											  </div>
											  <div class="form-group">
											    <div class="col-sm-12">
											      <input type="text" class="form-control" id="yhm" placeholder="请输入会员名">
											    </div>
											  </div>
											  <div class="form-group">
											    <div class="col-sm-12">
											      <input type="text" class="form-control" id="sfzhm" placeholder="请输入身份证号码">
											    </div>
											  </div>
											  <div class="form-group">
											    <div class="col-sm-12">
											      <input type="text" class="form-control" id="lxdh" placeholder="请输入联系电话">
											    </div>
											  </div>
											  <div class="form-group">
											    <div class="col-sm-12">
											      <input type="text" class="form-control" id="qq" placeholder="请输入QQ">
											    </div>
											  </div>
											  <div class="form-group">
											    <div class="col-sm-12">
											      <input type="text" class="form-control" id="wx" placeholder="请输入微信">
											    </div>
											  </div>
											  <div class="form-group">
											    <div class="col-sm-12">
											      <input type="text" class="form-control" id="czry" placeholder="操作人员">
											    </div>
											  </div>
											  <div class="form-group">
												<div class="col-sm-12">
													<select class="form-control input-fixed" id="xb">
													<option value="0">请选择性别....</option>
														<option value="1">男</option>
														<option value="2">女</option>
													</select>
												</div>
											</div>
											<div class="form-group">
												<div class="col-sm-12">
													<select class="form-control input-fixed" id="wz">
														<option value="0">请选择舞种....</option>
														<option value="1">Breaking</option>
														<option value="2">Poppin</option>
														<option value="3">Locking</option>
														<option value="4">HipHop</option>
														<option value="5">Jazz</option>
														<option value="6">Shuffle</option>
														<option value="7">Urban</option>
														<option value="8">Wacking</option>
													</select>
												</div>
											</div>
											  <div class="modal-footer">
												<button class="btn btn-primary" type="button" onclick="registerMember()">注册</button>
												<button class="btn btn-info" type="button" onclick="resetCondition()">重置</button>
											  </div>
</form>
function resetCondition(){
1.	可以使用下面这种清空bootstrap表单
	$("#hykh").val("");
	$("#yhm").val("");
	$("#sfzhm").val("");
	$("#lxdh").val("");
	$("#qq").val("");
	$("#wx").val("");
	$("#czry").val("");
	$("#xb").val("0");//是下拉选,把它设置value=0上,会显示对应的key,如果不设置则清空后什么都不显示
	$("#wz").val("0");
	
2.可以使用这种清空easyui表单
	 /*
	  $("#hykh").textbox('setValue','');
	 $("#yhm").textbox('setValue','');
	 $("#sfzhm").textbox('setValue','');
	 $("#lxdh").textbox('setValue','');
	 $("#qq").textbox('setValue','');
	 $("#wx").textbox('setValue','');
	 $("#czry").textbox('setValue','');
	 $("#xb").combobox('setValue','0');
	 $("#wz").combobox('setValue','0');
	 */
}
2018-07-27 11:05:25 tony820418 阅读数 2085
  • js+ajax+jquery+easyui从入门到精通(项目实战)

    1.javascript从入门到精通,为学习ajax打基础; 2.ajax技术从零开始学,深入研究ajax的原理及使用,通过一些使用案例讲解; 3.easyui从入门到精通课程,详细介绍各种常用控件的使用方法,结合项目模块实战; 4.jquery应用:主要讲解对复杂及常用ui界面的设计,利用jquery技术基础,熟练掌握实现各种功能的技巧。

    20012 人正在学习 去看看 赖国荣

项目需要做一个卫星控制系统与用户任务管理系统,前端easyUI与bootstrap选型,整理网上说明,结论还是选择easyUI 。

下文整理网上二者的比较:

 Bootstrap , 是一个css框架,更轻量,只提供外观,无响应。

 easyUI    除了提供外观,还提供js函数,可以操作界面上的元素, 功能极其强大。             

 Bootstrap比较美观,easyUI差点。

 Bootstrap兼容手机和PC  ,  easyUI做不到。

 Bootstrap只做界面样式 ,交互用其他框架,如angulaJS,学习成本高,小而快的项目用easyUI更合适。

2016-08-10 12:12:42 stSahana 阅读数 645
  • js+ajax+jquery+easyui从入门到精通(项目实战)

    1.javascript从入门到精通,为学习ajax打基础; 2.ajax技术从零开始学,深入研究ajax的原理及使用,通过一些使用案例讲解; 3.easyui从入门到精通课程,详细介绍各种常用控件的使用方法,结合项目模块实战; 4.jquery应用:主要讲解对复杂及常用ui界面的设计,利用jquery技术基础,熟练掌握实现各种功能的技巧。

    20012 人正在学习 去看看 赖国荣

easyUI与bootstrap制作表单dialog

easyUI 的官网demo居然出错,这让我不得不吐槽一下。Basic dialog 的展示效果与源代码根本不符合,导致我照搬代码后怎么修改都不合适。

在CRUD项目中form dialog的制作非常重要,我简要介绍一下我的实现过程

1.编写dialog界面

html
    include common.jade
    body
       div.container(style="width:450px")
           form(role='form').form-horizontal
               div.form-group
                   label.col-xs-2 账号:
                   input.easyui-textbox.col-xs-8(name="user.userId"  data-options="required:true")
               div.form-group
                   label.col-xs-2 姓名:
                   input.easyui-textbox.col-xs-8(name="user.name" data-options="required:true")
               div.form-group
                    label.col-xs-2 状态
                    select.easyui-combobox.col-xs-8
                        option(value="0") 冻结
                        option(value="1") 未冻结
               div.form-group
                    label.col-xs-2 角色
                    select.easyui-combobox.col-xs-8
               div.form-group
                    label.col-xs-2 描述
                    input.easyui-textbox.col-xs-8(style="height:60px")

2.设置监听并在源文件中新建div

input(type="button" onclick="addUser()" value="添加")
div#add(style="padding:40px 60px 30px 50px")

3.在js文件中实现监听

var addUser = function(){
    $("#add").dialog({
        title: 'My Dialog',
        height:600,
        width:560,
        modal: true,
        href:"form.html",
    });
}

这样就是实现了点击按钮跳出form dialog的效果

2015-03-20 08:49:16 sam1012 阅读数 4391
  • js+ajax+jquery+easyui从入门到精通(项目实战)

    1.javascript从入门到精通,为学习ajax打基础; 2.ajax技术从零开始学,深入研究ajax的原理及使用,通过一些使用案例讲解; 3.easyui从入门到精通课程,详细介绍各种常用控件的使用方法,结合项目模块实战; 4.jquery应用:主要讲解对复杂及常用ui界面的设计,利用jquery技术基础,熟练掌握实现各种功能的技巧。

    20012 人正在学习 去看看 赖国荣
bootstrap是twitter的框架,用来让网站适应不同的屏幕分辨率和设备的

easyui是让界面看起来更好看些

easyui
适合做系统类项目

bootstrap
适合做网站类项目

在使用bootstrap和easyui的时候,会有很多有冲突的地方,包括datagrid控件和combo等,以下进行的问题修正,保证easyui正常显示

/*bootstrap兼容问题和easyui的bug*/.panel-header, .panel-body {border-width: 0px;}.datagrid,.combo-p{border:solid 1px #D4D4D4;}.datagrid *{-webkit-box-sizing: content-box;-moz-box-sizing: content-box;box-sizing: content-box;}

 

基本原理就是还原easyui中的默认设置,让bootstrap的作用域不在easyui控件定义的css范围内。


easyui与bootstrap

阅读数 733

easyUI与bootstrap对比

阅读数 4120

struts2 返回ajax数据

博文 来自: wu_0916
没有更多推荐了,返回首页