前端那些事之svg转化为字体图标和一个多迁的日期 插件

转化为字体图标和一个多迁的日期 插件"/>

前端那些事之svg转化为字体图标和一个多迁的日期 插件

2019独角兽企业重金招聘Python工程师标准>>>

.html 动态添加下拉框案例 .html .html

• svg转化为字体图标

• 到icomoom官网：
• 点击import icons按钮
• 添加电脑上的svg
• 点击添加的svg
• 在右下角：Generate Font 按钮
• 点击下载

//一个可以多选的日期插件

kalendae.js

//阿里的组件

/index-cn

实现的代码//初始化
layui.use(['layer', 'datatable'], function() {var $ = layui.jquery,layer = layui.layer;$(function() {debugger$('#userTable').dataTable({"language": lang, //提示信息"autoWidth": false, //自适应宽度，"lengthMenu": [15, 30, 50],"stripeClasses": ["odd", "even"], //为奇偶行加上样式，兼容不支持CSS伪类的场合"searching": true, //是否允许Datatables开启本地搜索"paging": true, //是否开启本地分页"lengthChange": true, //是否允许产品改变表格每页显示的记录数"info": true, //控制是否显示表格左下角的信息//跟数组下标一样，第一列从0开始，这里表格初始化时，第四列默认降序"order": [1, 'desc'], //asc升序   desc降序 "aoColumnDefs": [{"orderable": false,"aTargets": [0, 10] // 指定列不参与排序}],"deferRender": true, //延迟渲染"ajax": "../../../json/user.json", //数据的路径"columns": [{ //定义列"data": function(obj) {return '<input type="radio" class="fly-checkbox" name="sublist" data-id=' + obj.id + '>';}}, {"data": "id"}, {"data": function(obj) {return '<u class="btn-showuser">' + obj.userName + '</u>';}}, {"data": "userSex"}, {"data": "phone"}, {"data": "identity"}, {"data": "email"}, {"data": "address"}, {"data": function(obj) {return replaceTime(obj.joinTime / 1000);}},{"data": function(obj) {if(obj.status) {return '<span class="label label-success radius">已启用</span>';} else {return '<span class="label label-default radius">已停用</span>';}},"className": "td-status"},{"data": function(obj) {// if(obj.status) {return '<input type="radio">';// return '<span title="停用" class="handle-btn handle-btn-stop"><i class="linyer icon-zanting"></i></span><span title="编辑" class="handle-btn handle-btn-edit"><i class="linyer icon-edit"></i></span><span title="修改密码" class="handle-btn handle-btn-updatepwd"><i class="linyer icon-xgpwd2"></i></span><span title="删除" class="handle-btn handle-btn-delect"><i class="linyer icon-delect"></i></span>';// } else {//   return '<span title="启用" class="handle-btn handle-btn-run"><i class="linyer icon-qiyong"></i></span><span title="编辑" class="handle-btn handle-btn-edit"><i class="linyer icon-edit"></i></span><span title="修改密码" class="handle-btn handle-btn-updatepwd"><i class="linyer icon-xgpwd2"></i></span><span title="删除" class="handle-btn handle-btn-delect"><i class="linyer icon-delect"></i></span>';// }},// "className": "td-handle"}]});});//用户--查看$("#userTable").on('click', '.btn-showuser', function() {var username = $(this).html();var href = 'user-show.html';layer_show(username, href, '', '400', '500');});/*用户-添加*/$("#btn-adduser").on('click', function() {var username = $(this).html();var href = 'user-add.html';layer_show(username, href, '', '800', '600');});/*刷新当前页面*/$("#refresh").on('click', function() {window.location.reload();});/*用户-停用*/$('.table-sort').on('click', '.handle-btn-stop', function() {var obj = $(this);layer.confirm('确认要停用吗？', {icon: 0,title: '警告',shade: false}, function(index) {$(obj).parents("tr").find(".td-handle").prepend('<span class="handle-btn handle-btn-run" title="启用"><i class="linyer icon-qiyong"></i></span>');$(obj).parents("tr").find(".td-status").html('<span class="label label-default radius">已停用</span>');$(obj).remove();layer.msg('已停用!', {icon: 5,time: 1000});});});/*用户--启用*/$('.table-sort').on('click', '.handle-btn-run', function() {var obj = $(this);layer.confirm('确认要启用吗？', {icon: 0,title: '警告',shade: false}, function(index) {$(obj).parents("tr").find(".td-handle").prepend('<span class="handle-btn handle-btn-stop" title="停用"><i class="linyer icon-zanting"></i></span>');$(obj).parents("tr").find(".td-status").html('<span class="label label-success radius">已启用</span>');$(obj).remove();layer.msg('已启用!', {icon: 6,time: 1000});});});/*用户-编辑*/$('.table-sort').on('click', '.handle-btn-edit', function() {var obj = $(this);layer_show('编辑', 'user-edit.html', '', '800', '600');});/*密码-修改*/$('.table-sort').on('click', '.handle-btn-updatepwd', function() {var obj = $(this);layer_show('编辑', 'user-updatepwd.html', '', '600', '500');});/*用户-删除*/$('.table-sort').on('click', '.handle-btn-delect', function() {var obj = $(this);layer.confirm('确认要删除吗？', {icon: 0,title: '警告',shade: false}, function(index) {$(obj).parents("tr").remove(); //删除方法layer.msg('已删除!', {icon: 1,time: 1000});});});//批量删除$('#btn-delect-all').on('click', function() {//这是相对应的那一行数据移出console.log($(".table-sort tbody :checkbox:checked").length);if($(".table-sort tbody :checkbox:checked").length == 0) {layer.msg('请选择需要删除的数据！', {icon: 0});} else {layer.confirm('确认要删除吗？', {icon: 0,title: '警告',shade: false}, function(index) {$(".table-sort tbody :checkbox:checked").parents('tr').remove(); //删除方法layer.msg('已删除!', {icon: 1,time: 1000});});}});
});

<!doctype html>
<html><head><meta charset="utf-8"><meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><link rel="stylesheet" href="../../src/css/index.css" /><link rel="stylesheet" href="../../src/layui/css/layui.css" /><style>.layui-form-checkbox[lay-skin=primary] {margin-top:6px;border:none!important;padding-right:0;background:rgba(255,255,255,0)}.layui-form-checkbox[lay-skin=primary] span {float:right;background:0 0;color:#666;display:none;}</style><title>用户资料编辑</title></head><body><div class="pd-20 user-add"><form class="layui-form " action=""><div class="layui-form-item"><label class="layui-form-label">用户名</label><div class="layui-input-inline"><input type="text" name="username" lay-verify="username" autocomplete="off" placeholder="请输入用户名" class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label">密码</label><div class="layui-input-inline"><input type="password" name="password" lay-verify="pass" placeholder="请输入密码" autocomplete="off" maxlength="20" class="layui-input" id="oldpass"></div><div class="layui-form-mid layui-word-aux">请填写6到20位密码</div></div><div class="layui-form-item"><label class="layui-form-label">新密码</label><div class="layui-input-inline"><input type="password" name="password" lay-verify="pass" placeholder="请输入密码" autocomplete="off" maxlength="20" class="layui-input" id="newpass"></div><div class="layui-form-mid layui-word-aux">请填写6到20位密码</div></div><!--<div class="layui-form-item">--><!--<label class="layui-form-label">手机号</label>--><!--<div class="layui-input-inline">--><!--<input type="tel" name="phone" lay-verify="phone" autocomplete="off" placeholder="请输入手机号" class="layui-input">--><!--</div>--><!--</div>--><!--<div class="layui-form-item" lay-verify="">--><!--<label class="layui-form-label">选择地址</label>--><!--<div class="layui-input-inline">--><!--<select name="province" id="province" lay-filter='province'>--><!--</select>--><!--</div>--><!--<div class="layui-input-inline">--><!--<select name="city" id="city" lay-filter='city'>--><!--</select>--><!--</div>--><!--<div class="layui-input-inline">--><!--<select name="county" id="county" lay-filter='county'>--><!--</select>--><!--</div>--><!--</div>--><!--<div class="layui-form-item">--><!--<label class="layui-form-label">身份证</label>--><!--<div class="layui-input-inline">--><!--<input type="text" name="identity" lay-verify="identity" autocomplete="off" placeholder="请输入身份证号码" class="layui-input">--><!--</div>--><!--</div>--><!--<div class="layui-form-item">--><!--<label class="layui-form-label">邮箱</label>--><!--<div class="layui-input-inline">--><!--<input type="text" name="email" lay-verify="email" autocomplete="off" placeholder="请输入邮箱" class="layui-input">--><!--</div>--><!--</div>--><div class="layui-form-item"><label class="layui-form-label">性别</label><div class="layui-input-block"><input type="checkbox" class="btn-checkall fly-checkbox" name="all" lay-filter="test"></div></div><div class="layui-form-item" pane id="input"><label class="layui-form-label">性别</label><div class="layui-input-inline"><input type="checkbox" class="btn-checkall fly-checkbox" name="test1"></div><label class="layui-form-label">性别</label><div class="layui-input-inline"><input type="checkbox" class="btn-checkall fly-checkbox" name="test1"></div><div class="layui-input-inline"><input type="checkbox" class="btn-checkall fly-checkbox" name="test1"><label class="layui-form-label">性别</label></div></div><div class="layui-form-item"><label class="layui-form-label"></label><div class="layui-input-inline"><button class="layui-btn" lay-submit="" lay-filter="useradd">立即提交</button><button type="reset" class="layui-btn layui-btn-primary">重置</button></div></div></form></div><script src="../../src/layui/layui.js"></script><script src="../../src/js/define/common.js"></script><!--<script src="../../src/js/lib/selectCity.js"></script>--><!--<script src="../../src/js/define/user-edit.js"></script>--><script>var datas;layui.use(['form', 'jquery','element'], function() {var form = layui.form(),element =layui.element(),$ = layui.jquery;form.verify({username: function(value) {if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)) {return '用户名不能有特殊字符';}if(/(^\_)|(\__)|(\_+$)/.test(value)) {return '用户名首尾不能出现下划线\'_\'';}if(/^\d+\d+\d$/.test(value)) {return '用户名不能全为数字';}},pass: [/(?!^\[0-9]+$)(?!^[a-zA-Z]+$)(?!^[_#@]+$).{6,20}/, '密码必须6到20位，且不能出现空格'],});//blur监听
//            $('input[name="username"]').on('blur', function() {
//                var value = $(this).val();
//                if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)) {
//                    layer.msg('用户名不能有特殊字符');
//                }
//                if(/(^\_)|(\__)|(\_+$)/.test(value)) {
//                    layer.msg('用户名首尾不能出现下划线\'_\'');
//                }
//                if(/^\d+\d+\d$/.test(value)) {
//                    layer.msg('用户名不能全为数字');
//                }
//            });
//            $(".layui-form-checkbox").find('span').hide();//去掉layu选择框样式$('input[type="checkbox"]').each(function() {$(this).next().find('span').hide();});form.on('checkbox(test)', function(data){console.log(datas = data.elem.checked);
//                console.log(data.elem); //得到checkbox原始DOM对象
//                console.log(data.elem.checked); //是否被选中，true或者false
//                console.log(data.value); //复选框value值，也可以通过data.elem.value得到});$("#input input[type=checkbox][name=test1]").attr("checked",datas);
//            form.render('checkbox');//监听提交form.on('submit(useradd)', function(data) {var oldpass=$("#oldpass").val();var value = $("#newpass").val();if(value==oldpass){layer.msg('新密码不能和旧密码相同！');}
//                layer.alert(JSON.stringify(data.field), {
//                    title: '最终的提交信息'
//                })
//                return false;});})</script></body></html>

转载于: