JS UI组件
0.综述
0.1.原则
懒惰是改变世界的动力
分享是提升自己的动力
有现成的就用现成的, 不用重复的制造轮子
0.2.基本套路
1) 预定功能
2) 网络 查询备选
3) 引入控件包 , 测试 例子
4) 问题 解决
0.3.常见 控件库
界面UI框架 Bootstrap https://www.bootcss.com/, layUI (已下线)https://www.layui.site/index.htm
基于 vue.js 的 ElementUI https://element.eleme.cn/#/zh-CN
小控件库 JQueryUI https://jqueryui.com/ , JQueryEasyUI http://www.jeasyui.com/等
0.4.常见 案例库
除对应官网,
菜鸟教程 https://www.runoob.com/
w3school 在线教程 https://www.w3school.com.cn/
1.时间控件
1.1. bootstrap-datetimepicker
基于 bootstrap 是的 时间控件
1.1.1.先导入控件包
<link rel="stylesheet"th:href="@{/static/bower_components/bootstrap/dist/css/bootstrap.css}"><link rel="stylesheet"th:href="@{/static/bower_components/bootstrap/dist/css/bootstrap-datetimepicker.min.css}"><script th:src="@{/static/bower_components/jquery/dist/jquery.min.js}"></script><script th:src="@{/static/bower_components/bootstrap/dist/js/bootstrap.js}"></script><script th:src="@{/static/bower_components/bootstrap/dist/js/bootstrap-datetimepicker.min.js}"></script><script th:src="@{/static/bower_components/bootstrap/dist/locales/bootstrap-datetimepicker.zh-CN.js}"></script>
1.1.2.添加测试元素
<inputtype="text"id="testTime"name="testTime"class="form-control"placeholder="请输入时间">
1.1.3.再导入脚本
$("#testTime").datetimepicker({language:'zh-CN',//用自己设置的时间文字weekStart:1,//一周从那天开始，默认为0，从周日开始，可以设为1从周一开始// startDate:"2018-5-20", //开始时间，可以写字符串，也可以直接写日期格式new Date(),在这之前的日期不能选择//endDate:"2018-6-20",//daysOfWeekDisabled: [0,4,6], //一周的周几不能选todayBtn:1,//是否显示今天按钮，0为不显示autoclose:1,//选完时间后是否自动关闭todayHighlight:1,//高亮显示当天日期startView:2,//0从小时视图开始，选分;1 从天视图开始，选小时;2从月视图开始，选天;3从年视图开始，选月;4从十年视图开始，选年minView:0,//最精确时间，默认0；0从小时视图开始，选分；1从天视图开始，选小时；2从月视图开始，选天；3从年视图开始，选月；4从十年视图开始，选年//maxView:4, //默认值：4, ‘decade’//keyboardNavigation:true, //是否可以用键盘方向键选日期，默认trueforceParse:0,//强制解析,你输入的可能不正规，但是它胡强制尽量解析成你规定的格式（format）format:'yyyy-mm-dd hh:ii:ss',// 格式,注意ii才是分，mm或MM都是月minuteStep:5,//选择分钟时的跨度，默认为5分钟//pickerPosition:"top-right", // ‘bottom-left’，’top-right’，’top-left’’bottom-right’showMeridian:0,//在日期和小时选择界面，出现上下午的选项,默认false// showSecond: false,// showMillisec: true,//timeFormat: 'hh:mm:ss:l',//bootcssVer: 3,});
1.2.layDate
https://www.layui.site/doc/modules/laydate.html
1.2.1. 导入 layui 包
<linkrel="stylesheet"type="text/css"th:href="@{/static/layui/css/layui.css}"><scripttype="text/javascript"th:src="@{/static/layui/layui.all.js}"></script>
1.2.2. 添加测试元素
<divclass="layui-inline"><labelclass="layui-form-label">日期时间选择器</label><divclass="layui-input-inline"><inputtype="text"class="layui-input"id="test5"placeholder="yyyy-MM-dd HH:mm:ss"></div></div>
1.2.3. 脚本
layui.use('laydate',function(){var laydate = layui.laydate;//日期时间选择器
laydate.render({elem:'#test5',type:'datetime'});})
format属性控制 显示的格式 yyyy-MM-dd HH:mm:ss
type 属性控制 显示的 内容 year, month , date , time , datetime
1.2.4.设置可选时间范围
页面元素
<divclass="layui-form-item"><labelclass="layui-form-label">开始时间</label><divclass="layui-input-inline"><inputtype="date"id="beginTime"name="ctBeginDate"lay-verify="title"placeholder="请输入开始时间"class="layui-input"onblur="closeStartDate(this)"></div></div><divclass="layui-form-item"><labelclass="layui-form-label">时间范围</label><divclass="layui-input-inline"><inputtype="text"class="layui-input"id="test6"placeholder="yyyy-MM-dd HH:mm:ss"style="width: 600px;"></div></div>
JS 脚本
layui.use('laydate',function(){var laydate = layui.laydate;//日期时间选择器
startDate = laydate.render({elem:'#test6',type:'datetime',min:$("#beginTime").val()});})functioncloseStartDate(dateInput){
console.log(dateInput.value);var date = dateInput.value.toString().split("-")
startDate.config.min ={year: date[0],month:parseInt(date[1])-1,//关键 月份+1date: date[2]};}
2.提交校验
2.1.html5自带校验
2.2.jquery-validate
基于 JQuery及BootStrap或者layUI的校验框架
2.2.1.先导入控件包
<script th:src="@{/static/bower_components/jquery/dist/jquery.min.js}"></script><script th:src="@{/static/plugins/jquery-validation-1.19.1/dist/jquery.validate.js}"></script>
2.2.2.添加测试元素
表单加Id, 元素 name,
<formid="infoForm"class="form form-horizontal"method="post"th:action="@{/test/addSave}"><divclass="col-md-8 col-md-offset-2"><divclass="box box-primary"><divclass="box-header with-border"><h3class="box-title">基本信息</h3><divclass="box-search"><buttontype="button"class="btn btn-default pull-right"onclick="history.back()">返回</button></div></div><divclass="box-body"><divclass="form-group"><labelclass="col-sm-2 control-label">员工姓名</label><divclass="col-sm-6"><inputtype="text"class="form-control"name="empName"placeholder="请输入员工姓名"required="required"></div></div><divclass="form-group"><labelclass="col-sm-2 control-label">员工性别</label><divclass="col-sm-6 radio text-left"><label><inputtype="radio"th:value="1"name="empSex">男
</label><label><inputtype="radio"th:value="0"name="empSex">女
</label></div></div><divclass="form-group"><labelclass="col-sm-2 control-label">入职时间</label><divclass="col-sm-6 "><inputtype="date"class="form-control"name="empBeginDate"placeholder="请输入入职时间"></div></div><divclass="form-group"><labelclass="col-sm-2 control-label">工龄</label><divclass="col-sm-6 "><inputtype="number"class="form-control"min="0"step="1"name="empLen"placeholder="请输入工龄"></div></div><divclass="form-group"><labelclass="col-sm-2 control-label">薪水</label><divclass="col-sm-6 "><inputtype="number"min="0.01"step="0.01"class="form-control"name="empSalary"placeholder="请输入预招生人数"></div></div><divclass="form-group"><labelclass="col-sm-2 control-label">所属部门</label><divclass="col-sm-6 "><selectclass="form-control"name="deptId"><optionvalue="">请选择</option><optionvalue="1">部门一</option><optionvalue="2">部门二</option></select></div></div><divclass="form-group"><labelclass="col-sm-2 control-label">地址</label><divclass="col-sm-8 "><textareaclass="form-control"name="empAddr"placeholder="请输入地址"></textarea></div></div><divclass="box-footer"><buttontype="button"class="btn btn-danger"onclick="cleanUp(this)">清空</button><buttontype="submit"class="btn btn-info pull-right">提交</button></div></div></div></div></form>
2.2.3.再导入脚本
页面加载后对表单进行验证 $(“#表单id名”).validate({}）
在validate中的rules中编写验证规则
字段的name属性: “校验器” （tisps:一个输入框只有一个校验器的时候使用）
字段的name属性:{ 校验器:值, 校验器:值 } (tips:输入框需要有多个校验器的时候使用)
在validate中的messages中编写提示信息 (tips格式与rules相对应)
在validate中的 errorClass, errorElement, errorPlacement, highlight, highlight 来提示用户
在validate中的submitHandler中编写验证通过执行的内容
1 ) 脚本结构
$("#表单id名").validate({});
2 ) 规则与提示
rules:{empName:"required",empSex:"required",empBeginDate:"required",empLen:{required:true,min:0,number:true},empSalary:{required:true,range:[1000.0,15000.0]},deptId:"required",empAddr:{required:true,maxlength:450}},messages:{empName:"请输入员工姓名",empSex:"请选择员工性别",empBeginDate:"请输入入职时间",empLen:{required:"请输入员工工龄",min:"工龄要大于等于0年",number:"工龄为整数数值"},empSalary:{required:"请输入薪水",range:"薪水要在1000.00元到15000.00元之间"},deptId:"请选择所属部门",empAddr:{required:"请输入员工说明",maxlength:"员工说明最多450个字符"}},
常用的默认的规则
序号校验类型取值描述1requiredtrue&false必须填写的字段2email“@”&“email”必须输入正确格式的电子邮件3remoteurl路径使用ajax进行验证4date数字正确格式日期 tips:ie6有bug5dateISO字符串正确格式的日期 例如：2018-11-28，2018/11/28 tips:只验证格式，不验证有效性6numbertrue&false合法的数字7digitstrue&false整数8creditcardtrue&false合法的信用卡号9equalToJQuery表达式（eg:“#regist_password”）输入值必须和 #regist_password相同。11maxlength数字最大长度12minlength数字最小长度13rangelength[min,max]输入长度必须在 min和 max之间的字符串（tips:汉字算一个字符）14range[min,max]输入值必须在 min和 max之间的数字15max:n最大值不能大于n16min:n最小值不能小于n
3 ) 设置提示的形式
errorClassString指定错误提示的 css 类名，可以自定义错误提示的样式。“error”errorElementString用什么标签标记错误，默认是 label，可以改成 em。“label”errorPlacementfunction跟一个函数，可以自定义错误放到哪里。input元素之后success要验证的元素通过验证后的动作，
如果跟一个字符串，会当作一个 css 类，也可跟一个函数。无highlightfunction可以给未通过验证的元素加效果、闪烁等。无
***因为要用到 BootStrap的元素 所以也要 导入 bootstrap 相关库
errorElement:'span',errorClass:'help-block',//自定义错误消息放到哪里errorPlacement:function(error, element){
element.next().remove();//删除显示图标
element.after('<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>');
element.closest('div').append(error);//显示错误消息提示},//给未通过验证的元素进行处理highlight:function(element){$(element).closest('div').addClass('has-error has-feedback');},//验证通过的处理success:function(label){var el=label.closest('div').find("input,select,textarea");
el.next().remove();//与errorPlacement相似
el.after('<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>');
label.closest('div').removeClass('has-error').addClass("has-feedback has-success");
label.remove();},
***因为要用到 layui 的元素 所以也要 导入 layui 相关库
//重写showErrorsshowErrors:function(errorMap, errorList){var msg ="";
$.each(errorList,function(i, v){//msg += (v.message + "\r\n");//在此处用了layer的方法,显示效果更美观//在此处用了layer的方法,显示效果更美观if($(v.element)[0].tagName.indexOf("SELECT")>-1){// 针对于select2 控件做了调整
layer.tips(v.message,$(v.element).next(),{icon:2,time:2000});}else{
layer.tips(v.message, v.element,{icon:2,time:2000});}returnfalse;});},
4 ) 成功处理
submitHandler:function(){
console.log("ok")// ... 提交表单}
5 ) 自定义规则
验证 员工姓名必须是中文 , 要使用 正则表达式
// 验证 中文
jQuery.validator.addMethod("isCn",function(value, element){returnthis.optional(element)||(/^[\u4e00-\u9fa5]{1,}$/.test(value));},"请填写中文。");
规则与提示也变化
rules:{empName:{required:true,isCn:true},},messages:{empName:{required:"请输入员工姓名",isCn:"员工姓名应该使用中文"},}
又如 电话号码
// 手机号码验证
jQuery.validator.addMethod("isPhone",function(value, element){var length = value.length;returnthis.optional(element)||(length ==11&&/^1[3-9]\d{9}$/.test(value));},"请正确填写您的手机号码。");
6 ) ***远程判断
rules:{empName:{required:true,isCn:true,/* 用ajax判断数据库中用户名是否存在 */remote:{type:"post",url:"/ycTest/ajaxCheckEmpName",// 返回 boolean 结果 true 验证通过, false 验证不通过async:false,// 要使用 同步 通信cache:false,data:{empName:function(){return$("#empName").val();}},// 当 controller 返回的内容不是 boolean 时 可以通过这个方式 进行处理dataFilter:function(resp){if("no"==resp){returnfalse;}else{returntrue;}}}},},messages:{empName:{required:"请输入员工姓名",isCn:"员工姓名应该使用中文",remote:"通过远程判断输入信息有误"},}
3.图表
将数据图形化展示
3.1.baidu-echarts
官网: https://echarts.apache.org/zh/index.html
3.1.1.先导入控件包
<script th:src="@{/static/plugins/echarts/4.2.1/echarts.min.js}"></script><script th:src="@{/static/plugins/echarts/theme/主题.js}"></script>
3.1.2.添加测试元素
<divid="main"style="width: 1200px;height:400px;"></div>
3.1.3.再导入脚本
// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'),'主题');// 指定图表的配置项和数据var option ={title:{text:'ECharts 入门示例'},tooltip:{},legend:{data:['销量']},xAxis:{data:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},yAxis:{},series:[{name:'销量',type:'bar',data:[5,20,36,10,10,20]}]};// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
3.1.4. option 说明
title : 标题
tooltip : 提示
legend : 图例
toolbox : 工具箱
xAxis : x 坐标轴
yAxis : y 坐标轴
series : 数据
3.1.5. 工具箱代码
toolbox:{show:true,orient:'horizontal',// 布局方式，默认为水平布局，可选为：// 'horizontal' ¦ 'vertical'x:'right',// 水平安放位置，默认为全图右对齐，可选为：// 'center' ¦ 'left' ¦ 'right'// ¦ {number}（x坐标，单位px）y:'top',// 垂直安放位置，默认为全图顶端，可选为：// 'top' ¦ 'bottom' ¦ 'center'// ¦ {number}（y坐标，单位px）color:['#1e90ff','#22bb22','#4b0082','#d2691e'],backgroundColor:'rgba(0,0,0,0)',// 工具箱背景颜色borderColor:'#ccc',// 工具箱边框颜色borderWidth:0,// 工具箱边框线宽，单位px，默认为0（无边框）padding:5,// 工具箱内边距，单位px，默认各方向内边距为5，showTitle:true,feature:{dataZoom:{show:true,title:{dataZoom:'区域缩放',dataZoomReset:'区域缩放-后退'}},dataView:{show:true,title:'数据视图',readOnly:true,lang:['数据视图','关闭','刷新']},magicType:{show:true,title:{line:'动态类型切换-折线图',bar:'动态类型切换-柱形图',},type:['line','bar']},restore:{show:true,title:'还原',color:'black'},saveAsImage:{show:true,title:'保存为图片',type:'jpeg',lang:['点击本地保存']}}},
3.1.6. 图表对应数据
line , bar 拆线图 , 柱状图 : 对应一组数字 List
pie 饼图 : List<Map<String, Object>> name 对应 分类 value 对应 值
radar 雷达图 : List<Map<String, Object>> name 对应 分类 max 对应 最大值
List 对应 每一个分类的 值
3.1.7.取动态数据
$.ajax({type:"post",url:"/subject/queryStu",success:function(resp){
subjNames = resp.subjNames;
stuCounts = resp.stuCounts;
myChart.setOption({xAxis:{data: subjNames
},series:[{data: stuCounts
}]});},dataType:"json"});
饼图
option ={title:{text:'Referer of a Website',subtext:'Fake Data',left:'center'},tooltip:{trigger:'item'},legend:{orient:'vertical',left:'left'},series:[{name:'Access From',type:'pie',radius:'50%',data:[{value:1048,name:'Search Engine'},{value:735,name:'Direct'},{value:580,name:'Email'},{value:484,name:'Union Ads'},{value:300,name:'Video Ads'}],emphasis:{itemStyle:{shadowBlur:10,shadowOffsetX:0,shadowColor:'rgba(0, 0, 0, 0.5)'}}}]};
雷达图
option ={title:{text:'Basic Radar Chart'},legend:{data:['Allocated Budget','Actual Spending']},radar:{// shape: 'circle',indicator:[{name:'Sales',max:6500},{name:'Administration',max:16000},{name:'Information Technology',max:30000},{name:'Customer Support',max:38000},{name:'Development',max:52000},{name:'Marketing',max:25000}]},series:[{name:'Budget vs spending',type:'radar',data:[{value:[4200,3000,20000,35000,50000,18000],name:'Allocated Budget'},{value:[5000,14000,28000,26000,42000,21000],name:'Actual Spending'}]}]};
4.树 tree
4.1.JQuery EasyUI Tree
官网: https://www.jeasyui.net/plugins/185.html
4.1.1.先导入控件包
<linkrel="stylesheet"type="text/css"th:href="@{/static/js/jquery-easyui-1.3.6/themes/default/easyui.css}"><linkrel="stylesheet"type="text/css"th:href="@{/static/js/jquery-easyui-1.3.6/themes/icon.css}"><scriptth:src="@{static/bower_components/jquery/dist/jquery.min.js}"></script><scriptth:src="@{/static/js/jquery-easyui-1.3.6/jquery.easyui.min.js}"></script>
4.1.2.添加测试元素
<ulid="tt"class="easyui-tree"></ul>
4.1.3.再导入脚本
$('#tt').tree({url:'/sysMenu/roleMenuData?roleId=[[${sysRole.roleId}]]',checkbox:true,onLoadSuccess:function(){// 返回结点对象 返回根结点var rootNode =$('#tt').tree('getRoot');// 选中 返回结点$('#tt').tree('select', rootNode.target);},onClick:function(node){}})
4.1.4.属性
id：节点的 id，它对于加载远程数据很重要。
text：要显示的节点文本。
state：节点状态，‘open’ 或 ‘closed’，默认是 ‘open’。当设置为 ‘closed’ 时，该节点有子节点，并且将从远程站点加载它们。
children：定义了一些子节点的节点数组。
checked：指示节点是否被选中。 true 结点被 选中 false 不会被选中
attributes：给一个节点添加的自定义属性集合。
target 属性 指目标 就是指向某个结点
var mm =[{"id":0,"text":"系统菜单","state":"open","attributes":{"ntype":"root"},"children":[{"id":4,"text":"基本代码","state":"open","attributes":{"ntype":"0"},"children":[{"id":6,"text":"友情连接","state":"open","attributes":{"ntype":"1"}},{"id":22,"text":"物流信息","state":"open","attributes":{"ntype":"1"}}]},{"id":5,"text":"商品信息","state":"open","attributes":{"ntype":"0"},"children":[{"id":13,"text":"商品维护","state":"open","attributes":{"ntype":"1"}},{"id":14,"text":"商品细分","state":"open","attributes":{"ntype":"1"}}]}]}]
4.1.4.事件
onLoadSuccess 加载成功事件
onClick 点击
4.1.5.方法
getChecked 方法 返回 被 复选框 被 选中的结点
getRoot 方法 得到 根结点
select 选中方法
getChildren 得到子结点
getSelected 得到当前被 选中的那个结点
4.2.ztree
官网: http://www.treejs.cn/v3/main.php#_zTreeInfo
4.2.1.先导入控件包
<linkrel="stylesheet"th:href="@{/static/ztree/css/zTreeStyle/zTreeStyle.css}"><scriptth:src="@{/static/ztree/js/jquery.ztree.all.js}"></script>
4.2.2.添加测试元素
<ulid="treeDemo"class="ztree"></ul>
4.2.3.再导入脚本
var zTreeObj;// zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）var setting ={};// zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）var zNodes =[{name:"test1",open:true,children:[{name:"test1_1"},{name:"test1_2"}]},{name:"test2",open:true,children:[{name:"test2_1"},{name:"test2_2"}]}];$(document).ready(function(){
zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);});
4.2.4.节点属性
id：节点的 id，它对于加载远程数据很重要。
name：要显示的节点文本。
open：节点状态，‘true’(打开) 或 ‘false’(关闭)，默认是 ‘true’。
children：定义了一些子节点的节点数组。
checked：指示节点是否被选中。 true 结点被 选中 false 不会被选中
DIY：给一个节点添加的自定义属性集合。
4.2.5.setting设置
var setting ={view:{fontCss:{'color':'black','font-weight':'bold'},//字体样式函数selectedMulti:true//设置是否允许同时选中多个节点},// 作用复选框 时使用check:{enable:true,chkStyle:"checkbox",chkboxType:{"Y":"ps","N":"ps"}// p 代表 父级 s 代表 子级}};
4.2.6.异步加载数据
var zTreeObj;// zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）var setting ={view:{fontCss:{'color':'black','font-weight':'bold'},//字体样式函数selectedMulti:true//设置是否允许同时选中多个节点},async:{enable:true,url:"/sysMenu/menuTreeData",otherParam:{"id":"1","name":"test"},//向服务器传递的参数dataFilter: ajaxDataFilter
}};
zTreeObj = $.fn.zTree.init($("#treeDemo"), setting);// 用于对 Ajax 返回数据进行预处理的函数functionajaxDataFilter(treeId, parentNode, responseData){if(responseData){for(var i =0; i < responseData.length; i++){
responseData[i].name +="_filter";}}return responseData;};
4.2.7.结点点击事件
设置属性
var setting ={view:{selectedMulti:false},callback:{onClick: clickMe ,// 设置点击事件对应的函数onAsyncSuccess: zTreeOnAsyncSuccess // 异步加载成功后执行}};
// 处理 函数// 参数 对应( js的事件对象, 树的id , 被点击的结点 )functionclickMe(event, treeId, treeNode){$("#addBtn").removeClass("layui-btn-disabled").prop("disabled",false);$("#editBtn").removeClass("layui-btn-disabled").prop("disabled",false);$("#delBtn").removeClass("layui-btn-disabled").prop("disabled",false);
console.log(treeNode.islink)// 可以根据 结点属性进行操作}
functionzTreeOnAsyncSuccess(event, treeId, treeNode, msg){alert(msg);var nodes = zTreeObj.getNodes();
console.log(nodes)var node = zTreeObj.getNodeByParam("id",0,null);
console.log(node)
zTreeObj.selectNode(node)// 让 指定 结点 被选中};
4.2.8.方法
var rootNode = zTreeObj.getNodeByParam("id",0,null);// 根据属性得到 指定结点
zTreeObj.selectNode(rootNode)// 让 指定 结点 被选中var nodes = treeObj.getSelectedNodes();// 得到 被选中的结点var nodes = zTreeObj.getCheckedNodes(true);// 得到 被复选中的结点集合
5.模态窗
jscript->showModalDialog()
5.1.layer
基于 layui 的对话窗
5.1.1.先导入控件包
<linkrel="stylesheet"th:href="@{/static/layui/css/layui.css}"><scriptth:src="@{/static/js/jquery-3.2.1.min.js}"></script><!-- 导入 layui 的全部功能 --><scriptth:src="@{/static/layui/layui.all.js}"></script><!-- 也可以 只导入 layer 功能对应的 js 包 --><scriptth:src="@{/static/layui/layer.js}"></script>
5.1.2.添加测试元素
<buttononclick="fn()">open</button>
5.1.3.再导入脚本
functionfn(){
layer.open({type:2,// 可传入的值有：0（信息框，默认）** 1（页面层） ** 2（iframe层）3（加载层）4（tips层）title:"标题",skin:'layui-layer-rim',//样式类名 蓝: layui-layer-lan 绿: layui-layer-molvcloseBtn:1,// 0 不显示关闭按钮anim:2,// 进入的样式shadeClose:true,//开启遮罩关闭shade:0.5,area:['420px','240px'],//宽高content:['/ifr_child','no'],maxmin:true,fixed:false,//btn:['按钮一','按钮二','按钮三'],btn3:function(index, layro){alert(index)
console.log(layro)},btn2:function(index, layro){// 得到 子窗口// var iframeWin = window[layro.find('iframe')[0]['name']]var iframeWin = window["layui-layer-iframe"+ index];var xx = iframeWin.cfn("parent");
console.log(xx)},yes:function(index, layro){alert("第一个按钮")
layer.closeAll();//疯狂模式，关闭所有层},cancel:function(){alert("close按钮")}})}
*** 在子窗口中 使用parent 代表 父窗口
5.2.bootbox
基于 bootstrap 的模态窗
5.2.1.先导入控件包
要先导入 bootstrap 的包, 再导入 bootbox的包
<script th:src="@{/static/bower_components/bootbox/js/bootbox.js}"></script>
5.2.2.再导入脚本
bootbox.dialog({// dialog的内容message:"<iframe src='/index' name='ifr' style='width: 860px;height: 350px; border:0px solid;' ></iframe>",// dialog的标题title:"提示",// 退出dialog时的回调函数，包括用户使用ESC键及点击关闭onEscape:function(){},// 是否显示此dialog，默认trueshow:true,// 是否显示body的遮罩，默认truebackdrop:true,// 是否显示关闭按钮，默认truecloseButton:true,// 是否动画弹出dialog，IE10以下版本不支持animate:true,// dialog的类名className:"my_modal_position",// 大 large , 小 smallsize:"large",// dialog底端按钮配置buttons:{// 其中一个按钮配置success:{label:"确定",className:"btn-success",// 点击按钮时的回调函数callback:function(){// ifr 代表子窗口 与 iframe 的 name 对应}},// 另一个按钮配置Danger:{label:"取消",className:"btn-danger",callback:function(){}}}})
6.富文本
6.1.simditor
官网: https://simditor.tower.im/
6.1.1.先导入控件包
<linkrel="stylesheet"th:href="@{/static/simditor/css/simditor.css}"><scriptth:src="@{/static/simditor/module.js}"></script><scriptth:src="@{/static/simditor/hotkeys.js}"></script><scriptth:src="@{/static/simditor/uploader.js}"></script><scriptth:src="@{/static/simditor/simditor.js}"></script>
6.1.2.添加测试元素
<textareaid="editor"placeholder="请输入内容"autofocus></textarea>
6.1.3.再导入脚本
var toolbar =['title','bold','italic','underline','strikethrough','fontScale','color','ol','ul','blockquote','code','table','link','image','hr','indent','outdent','alignment'];var editor =newSimditor({textarea:$('#editor'),//optional optionstoolbar:toolbar,upload:{url:'/example/fileUpload',params:null,fileKey:'file',connectionCount:1,leaveConfirm:'文件正在上传中,你确定要离开本页面吗?'}});
6.1.4.上传图片回传
要以 file_path 参数 回传图片存储路径
{"success":true/false,"msg":"error message", # optional
"file_path":"[real file path]"}
6.2.TinyMCE
中文手册 : http://tinymce.ax-z.cn/
6.2.1.先导入控件包
<scriptth:src="@{/static/tinymce/tinymce.min.js}"></script>
6.2.2.添加测试元素
<textareaid="mytextarea"name="stuInfo"placeholder="请输入内容"autofocus></textarea>
6.2.3.再导入脚本
var plugins2 ='link lists image code table colorpicker textcolor wordcount contextmenu'var toolbar2 ='bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat'
tinymce.init({selector:'#mytextarea',language:'zh_CN',content_style:"img {max-width:100%;}",plugins: plugins2,toolbar: toolbar2,menubar:false,autosave_ask_before_unload:false,toolbar_drawer:false,setup:function(exmInfo){
exmInfo.on('change',function(){ exmInfo.save();});},//文件异步上传请求路径, 返回格式为{ location : "/demo/image/1.jpg" }images_upload_url:'/tabStudent/fileUpload'});
6.2.4.controller后台处理
@RequestMapping(value ="/tabStudent/fileUpload", method ={RequestMethod.GET,RequestMethod.POST})@ResponseBodypublicMap<String,Object>tinyFileUpload(MultipartFile file){System.out.println("file.getOriginalFilename() = "+ file.getOriginalFilename());Map<String,Object> map =newHashMap<>();if(!file.isEmpty()){String fileName = fileUtils.uploadToDisk(file,fileUtils.getTempFilePath());
map.put("msg","成功");
map.put("location","/temp/"+ fileName);}else{
map.put("msg","失败");}return map;}
6.2.5.上传图片回传
要以 location 参数 回传图片存储路径
{location:"/temp/4e2c24b4-0475-4c8d-b149-ff1e4dbb02aa.png"msg:"成功"}
6.2.6.layui 不保存信息
在 init 函数里 增加 stuInfo 与 name属性值对应
setup:function(stuInfo){
stuInfo.on('change',function(){ stuInfo.save();});},
7.图片预览
7.1.
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title></head><body><imgsrc=""alt=""id="mm"><inputtype="file"accept="image/*"id="ff"/></body><script>var ff = document.getElementById("ff")
ff.onchange=function(){// 文件读取器var r =newFileReader();// 读取文件
r.readAsDataURL( ff.files[0])// 加载文件
r.onload=function(){var mm = document.getElementById("mm")// result 加载结果
mm.src = r.result
}}</script></html>
7.2.
<divstyle="width: 87px;height: 102px;border:1px solid gray;"><imgid="cover"th:src="@{/static/images/head.jpg}"alt=""style="width: 85px;height: 100px;"></div><inputtype="file"name="pic"placeholder="图片"onchange="yulan(this)"class="layui-upload-button">
functionyulan(input){var src = window.URL.createObjectURL(input.files[0]);$("#cover").prop("src", src);}
本文转载自: https://blog.csdn.net/yuanchun05/article/details/126431489
版权归原作者 春哥的魔法书 所有， 如有侵权，请联系我们删除。
版权归原作者 春哥的魔法书 所有， 如有侵权，请联系我们删除。