JS UI组件

春哥的魔法书

已于 2023-02-02 15:31:03 修改

阅读量3.3k

点赞数 2

分类专栏： javascript 文章标签： javascript ui 前端

于 2022-08-19 20:33:05 首次发布

本文链接：https://blog.csdn.net/yuanchun05/article/details/126431489

版权

javascript 专栏收录该内容

20 篇文章 2 订阅

订阅专栏

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.添加测试元素

<input type="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,  //是否可以用键盘方向键选日期，默认true
        forceParse: 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 包

<link rel="stylesheet" type="text/css" th:href="@{/static/layui/css/layui.css}"  >
<script type="text/javascript"   th:src="@{/static/layui/layui.all.js}"    ></script>

1.2.2. 添加测试元素

    <div class="layui-inline">
        <label class="layui-form-label">日期时间选择器</label>
        <div class="layui-input-inline">
            <input type="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.设置可选时间范围

页面元素

<div class="layui-form-item">
    <label class="layui-form-label">开始时间</label>
    <div class="layui-input-inline">
        <input type="date" id="beginTime" name="ctBeginDate" lay-verify="title"
			 placeholder="请输入开始时间" class="layui-input"  onblur="closeStartDate(this)" >
    </div>
</div>


<div class="layui-form-item">
    <label class="layui-form-label">时间范围</label>
    <div class="layui-input-inline">
         <input type="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()

    });
})

function closeStartDate(dateInput) {
    console.log(dateInput.value);
    var date = dateInput.value.toString().split("-")

    startDate.config.min = {
        year: date[0],
        month: parseInt(date[1]) -1, //关键  月份+1
        date: 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,

<form  id="infoForm" class="form form-horizontal" method="post"    th:action="@{/test/addSave}"    >
	<div class="col-md-8 col-md-offset-2">
		<div class="box box-primary">
			<div class="box-header with-border">
				<h3 class="box-title">基本信息</h3>
                <div class="box-search">
					<button type="button" class="btn btn-default pull-right" onclick="history.back()">返回</button>
                 </div>
             </div>
             <div class="box-body">
                 <div class="form-group">
                     <label  class="col-sm-2 control-label">员工姓名</label>
                     <div class="col-sm-6">
                         <input type="text" class="form-control"  name="empName"  placeholder="请输入员工姓名" required="required">
                     </div>
                 </div>
                 <div class="form-group">
                     <label class="col-sm-2 control-label">员工性别</label>
                     <div class="col-sm-6 radio text-left">
                         <label>
                             <input type="radio"  th:value="1"   name="empSex" >男
                         </label>
                         <label>
                             <input type="radio"  th:value="0"   name="empSex" >女
                         </label>
                     </div>
                 </div>

                 <div class="form-group">
                     <label  class="col-sm-2 control-label">入职时间</label>
                     <div class="col-sm-6 ">
                         <input type="date" class="form-control"  name="empBeginDate"    placeholder="请输入入职时间"  >
                     </div>
                 </div>
                 <div class="form-group">
                     <label class="col-sm-2 control-label">工龄</label>
                     <div class="col-sm-6 ">
                         <input type="number" class="form-control"  min="0" step="1" name="empLen"    placeholder="请输入工龄"  >
                     </div>
                 </div>

                 <div class="form-group">
                     <label  class="col-sm-2 control-label">薪水</label>
                     <div class="col-sm-6 ">
                         <input type="number" min="0.01" step="0.01" class="form-control" name="empSalary"   placeholder="请输入预招生人数"  >
                     </div>
                 </div>
                 <div class="form-group">
                     <label  class="col-sm-2 control-label">所属部门</label>
                     <div class="col-sm-6 ">
                         <select class="form-control" name="deptId"  >
                             <option value="" >请选择</option>
                             <option value="1" >部门一</option>
                             <option value="2" >部门二</option>
                         </select>
                     </div>
                 </div>
                 <div class="form-group">
                     <label  class="col-sm-2 control-label">地址</label>
                     <div class="col-sm-8 ">
                         <textarea  class="form-control" name="empAddr"    placeholder="请输入地址"  ></textarea>
                     </div>
                 </div>
                 <div class="box-footer">
                     <button type="button" class="btn btn-danger" onclick="cleanUp(this)">清空</button>
                     <button type="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个字符"
                }
            },

常用的默认的规则

序号	校验类型	取值	描述
1	required	true&false	必须填写的字段
2	email	“@”&“email”	必须输入正确格式的电子邮件
3	remote	url路径	使用ajax进行验证
4	date	数字	正确格式日期 tips:ie6有bug
5	dateISO	字符串	正确格式的日期例如：2018-11-28，2018/11/28 tips:只验证格式，不验证有效性
6	number	true&false	合法的数字
7	digits	true&false	整数
8	creditcard	true&false	合法的信用卡号
9	equalTo	JQuery表达式（eg:“#regist_password”）	输入值必须和 #regist_password相同。
11	maxlength	数字	最大长度
12	minlength	数字	最小长度
13	rangelength	[min,max]	输入长度必须在 min和 max之间的字符串（tips:汉字算一个字符）
14	range	[min,max]	输入值必须在 min和 max之间的数字
15	max	:n	最大值不能大于n
16	min	:n	最小值不能小于n

3 ) 设置提示的形式

errorClass	String	指定错误提示的 css 类名，可以自定义错误提示的样式。	“error”
errorElement	String	用什么标签标记错误，默认是 label，可以改成 em。	“label”
errorPlacement	function	跟一个函数，可以自定义错误放到哪里。	input元素之后
success		要验证的元素通过验证后的动作，如果跟一个字符串，会当作一个 css 类，也可跟一个函数。	无
highlight	function	可以给未通过验证的元素加效果、闪烁等。	无

***因为要用到 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 相关库

//重写showErrors
showErrors: 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 });
        }

        return false;
    });
},

4 ) 成功处理

submitHandler: function () {
    console.log("ok")
    // ... 提交表单
}

5 ) 自定义规则

验证员工姓名必须是中文 , 要使用正则表达式

// 验证 中文
jQuery.validator.addMethod("isCn", function(value, element) {
    return this.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;
            return this.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){
                                return false;
                            }else{
                                return true;
                            }
                        }
                   }
                },
              },
              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.添加测试元素

<div id="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.先导入控件包

 <link rel="stylesheet" type="text/css" th:href="@{/static/js/jquery-easyui-1.3.6/themes/default/easyui.css}">
 <link rel="stylesheet" type="text/css" th:href="@{/static/js/jquery-easyui-1.3.6/themes/icon.css}">

<script  th:src="@{static/bower_components/jquery/dist/jquery.min.js}"></script>
<script  th:src="@{/static/js/jquery-easyui-1.3.6/jquery.easyui.min.js}"></script>

4.1.2.添加测试元素

 <ul id="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.先导入控件包

<link rel="stylesheet" th:href="@{/static/ztree/css/zTreeStyle/zTreeStyle.css}">
<script th:src="@{/static/ztree/js/jquery.ztree.all.js}"></script>

4.2.2.添加测试元素

    <ul id="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 返回数据进行预处理的函数
function ajaxDataFilter(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 , 被点击的结点 )
    function clickMe(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)
        // 可以根据  结点属性进行操作
    }

function zTreeOnAsyncSuccess(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.先导入控件包

    <link rel="stylesheet" th:href="@{/static/layui/css/layui.css}">
    <script th:src="@{/static/js/jquery-3.2.1.min.js}"></script>
<!-- 导入  layui 的全部功能 -->
    <script th:src="@{/static/layui/layui.all.js}"></script>

<!-- 也可以 只导入 layer 功能对应的 js 包 -->
    <script th:src="@{/static/layui/layer.js}"></script>

5.1.2.添加测试元素

 <button onclick="fn()">open</button>

5.1.3.再导入脚本

function fn(){
        layer.open({
            type: 2,  // 可传入的值有：0（信息框，默认）** 1（页面层）  ** 2（iframe层）3（加载层）4（tips层）
            title:"标题",
            skin: 'layui-layer-rim', //样式类名  蓝:  layui-layer-lan  绿:  layui-layer-molv
            closeBtn: 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，默认true
            show: true,
            // 是否显示body的遮罩，默认true
            backdrop: true,
            // 是否显示关闭按钮，默认true
            closeButton: true,
            // 是否动画弹出dialog，IE10以下版本不支持
            animate: true,
            // dialog的类名
            className: "my_modal_position",
 			// 大 large , 小 small
            size: "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.先导入控件包

<link rel="stylesheet"  th:href="@{/static/simditor/css/simditor.css}">
<script th:src="@{/static/simditor/module.js}"></script>
<script th:src="@{/static/simditor/hotkeys.js}"></script>
<script th:src="@{/static/simditor/uploader.js}"></script>
<script th:src="@{/static/simditor/simditor.js}"></script>

6.1.2.添加测试元素

<textarea id="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 = new Simditor({
			textarea: $('#editor'),
			//optional options
			toolbar: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.先导入控件包

<script th:src="@{/static/tinymce/tinymce.min.js}"></script>

6.2.2.添加测试元素

	<textarea id="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(stuInfo){
            stuInfo.on('change',function(){ stuInfo.save(); });
        },
		//文件异步上传请求路径, 返回格式为{ location : "/demo/image/1.jpg" }
		images_upload_url: '/tabStudent/fileUpload'
	});

6.2.4.controller后台处理

    @RequestMapping(value = "/tabStudent/fileUpload", method = {RequestMethod.GET,RequestMethod.POST})
    @ResponseBody
    public Map<String, Object> tinyFileUpload(MultipartFile file){

        System.out.println("file.getOriginalFilename() = " + file.getOriginalFilename());

        Map<String, Object> map = new HashMap<>();
        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.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<img src="" alt="" id="mm" >
		<input type="file" accept="image/*" id="ff" />
	</body>
	<script>
		
		var ff = document.getElementById("ff")	
		ff.onchange= function(){
			// 文件读取器
			var r = new FileReader();
			// 读取文件
			r.readAsDataURL( ff.files[0] )
			// 加载文件
			r.onload = function(){
				var mm = document.getElementById("mm")
				// result 加载结果
				mm.src = r.result
			}
		}
		
	</script>
</html>

7.2.

<div style="width: 87px;height: 102px;border:1px solid gray;">
										<img id="cover" th:src="@{/static/images/head.jpg}" alt=""
											 style="width: 85px;height: 100px;">
									</div>
									<input type="file" name="pic" placeholder="图片" onchange="yulan(this)"
										   class="layui-upload-button">

	function yulan(input) {
					var src = window.URL.createObjectURL(input.files[0]);
					$("#cover").prop("src", src);
				}

春哥的魔法书

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS UI组件

常用 javascript UI 组件
复制链接

扫一扫

专栏目录

JS UI组件

JS UI组件

0.综述

0.1.原则

0.2.基本套路

1) 预定功能

2) 网络 查询备选

3) 引入控件包 , 测试 例子

4) 问题 解决

0.3.常见 控件库

0.4.常见 案例库

1.时间控件

1.1. bootstrap-datetimepicker

1.1.1.先导入控件包

1.1.2.添加测试元素

1.1.3.再导入脚本

1.2.layDate

1.2.1. 导入 layui 包

1.2.2. 添加测试元素

1.2.3. 脚本

1.2.4.设置可选时间范围

2.提交校验

2.1.html5自带校验

2.2.jquery-validate

2.2.1.先导入控件包

2.2.2.添加测试元素

2.2.3.再导入脚本

1 ) 脚本结构

2 ) 规则与提示

3 ) 设置提示的形式

4 ) 成功处理

5 ) 自定义规则

6 ) ***远程判断

3.图表

3.1.baidu-echarts

3.1.1.先导入控件包

3.1.2.添加测试元素

3.1.3.再导入脚本

3.1.4. option 说明

3.1.5. 工具箱代码

3.1.6. 图表对应数据

3.1.7.取动态数据

4.树 tree

4.1.JQuery EasyUI Tree

4.1.1.先导入控件包

4.1.2.添加测试元素

4.1.3.再导入脚本

4.1.4.属性

4.1.4.事件

4.1.5.方法

4.2.ztree

4.2.1.先导入控件包

4.2.2.添加测试元素

4.2.3.再导入脚本

4.2.4.节点属性

4.2.5.setting设置

4.2.6.异步加载数据

4.2.7.结点点击事件

4.2.8.方法

5.模态窗

5.1.layer

5.1.1.先导入控件包

5.1.2.添加测试元素

5.1.3.再导入脚本

*** 在子窗口中 使用parent 代表 父窗口

5.2.bootbox

5.2.1.先导入控件包

5.2.2.再导入脚本

6.富文本

6.1.simditor

6.1.1.先导入控件包

6.1.2.添加测试元素

6.1.3.再导入脚本

6.1.4.上传图片回传

6.2.TinyMCE

6.2.1.先导入控件包

6.2.2.添加测试元素

6.2.3.再导入脚本

6.2.4.controller后台处理

6.2.5.上传图片回传

2) 网络查询备选

3) 引入控件包 , 测试例子

4) 问题解决

0.3.常见控件库

0.4.常见案例库

*** 在子窗口中使用parent 代表父窗口