首页
Search
1
Linux 下 Bash 脚本 bad interpreter 报错的解决方法
46 阅读
2
Arch Linux 下解决 KDE Plasma Discover 的 Unable to load applications 错误
38 阅读
3
如何在 IOS Shadowrocket 上配置服务
34 阅读
4
Arch Linux 下解决 KDE Plasma Discover 的 Unable to load applications 错误
34 阅读
5
如何在 Clash for Windows 上配置服务
30 阅读
clash
服务器
javascript
全部
游戏资讯
登录
Search
加速器之家
累计撰写
635
篇文章
累计收到
0
条评论
首页
栏目
clash
服务器
javascript
全部
游戏资讯
页面
搜索到
339
篇与
的结果
2024-08-22
Layui富文本编辑器拓展,增加工具栏
在原有layedit基础上新增1.html源码模式2.全屏3.批量上传图片、插入视频4.字体颜色、背景色设置、段落格式设置5.插入表格6.右键修改图片视频、段落居中格式、删除等功能7.插入水平线hr8.锚点9.插入代码和插入超链接拓展10.插入自定义链接11.简单实现撤销重做下载:https://gitee.com/YuJian11/layedit.git使用方法:步骤一:将下载好的ace.js和layedit.js文件复制到\layui-v2.5.5\lay\modules目录下,并替换layedit.js,如下图所示步骤二、引入相关文件:<script src="https://www.tpxhm.com/lib/layui-v2.5.5/lay/modules/ace.js" charset="utf-8"></script>步骤三、使用编辑器<textarea id="layeditDemo" style="display: none;"></textarea> <script> layui.use(['layedit', 'layer', 'jquery'], function(){ var layedit = layui.layedit; layedit.set({ //暴露layupload参数设置接口 --详细查看layupload参数说明 uploadImage: { url: '{{route("ladmin.article.upload")}}', accept: 'image', acceptMime: 'image/*', exts: 'jpg|png|gif|bmp|jpeg', size: '10240' } , uploadVideo: { url: '{{route("ladmin.article.upload")}}', accept: 'video', acceptMime: 'video/*', exts: 'mp4|flv|avi|rm|rmvb', size: '20480' } //右键删除图片/视频时的回调参数,post到后台删除服务器文件等操作, //传递参数: //图片: imgpath --图片路径 //视频: filepath --视频路径 imgpath --封面路径 , calldel: { url: '/Attachment/DeleteFile' } //开发者模式 --默认为false , devmode: true //插入代码设置 , codeConfig: { hide: true, //是否显示编码语言选择框 default: 'javascript' //hide为true时的默认语言格式 } , tool: [ 'html', 'code', 'strong', 'italic', 'underline', 'del', 'addhr', '|', 'fontFomatt', 'colorpicker', 'face' , '|', 'left', 'center', 'right', '|', 'link', 'unlink', 'image_alt', 'video', 'anchors' , '|', 'fullScreen' ] , height: '400px' }); var ieditor = layedit.build('layeditDemo'); }); </script>注意这里图片上传接口和视频删除接口,以及图片删除接口layui富文本编辑器layedit同步编辑器内容到textarea1、给textarea绑定lay-verify="art_content",然后在form的表单自定义验证中加入如下代码即可<textarea id="layeditDemo" name="art_content" lay-verify="art_content"></textarea>2、同步内容var ieditor = layedit.build('layeditDemo'); //处理同步问题 form.verify({ art_content: function(value) { return layedit.sync(ieditor); } });这里用到官方的layedit.sync(index),用于同步编辑器内容到textarea(一般用于异步提交)参数 index:即var ieditor = layedit.build('layeditDemo');该方法返回的索引
2024年08月22日
2 阅读
0 评论
0 点赞
2024-08-22
Layui 如何使用tab选项卡
layui 选项卡通过 element模块的监听tab事件来进行切换操作,元素功能的开启只需要加载element模块即会自动完成,所以不用跟其它模块一样为某一个功能而调用一个方法。她只需要找到她支持的元素,如你的页面存在一个 Tab元素块,那么element模块会自动赋予她该有的功能。例子:<div class="layui-tab" lay-filter="demo"> <ul class="layui-tab-title"> <li class="layui-this">网站设置</li> <li>商品管理</li> <li>订单管理</li> </ul> <div class="layui-tab-content"> <div class="layui-tab-item layui-show">内容1</div> <div class="layui-tab-item">内容2</div> <div class="layui-tab-item">内容3</div> </div> </div>js代码:引入elementlayui.use('element', function(){ var element = layui.element; //一些事件触发 element.on('tab(demo)', function(data){ console.log(data); }); });
2024年08月22日
4 阅读
0 评论
0 点赞
2024-08-22
Layui颜色选择器的使用,如何使用layui的颜色选择器
效果展示:在使用layui框架的时候,我们有时候需要设置文本颜色,比如标题等,我们会设置一个字段来存储标题颜色,这回就可以使用到Layui自带的颜色选择器了,使用方法如下:html代码部分:<div class="layui-form-item"> <label class="layui-form-label required">颜色</label> <div class="layui-input-inline" style="width: 120px;"> <input type="text" name="color" value="#626061" placeholder="请选择颜色" class="layui-input" id="test-form-input"> </div> <div class="layui-inline" style="left: -11px;"> <div id="test-form"></div> </div> </div>js代码部分:<script> layui.use(['form','layer','colorpicker'], function () { var form = layui.form, layer = layui.layer, colorpicker = layui.colorpicker, $ = layui.$; //颜色 colorpicker.render({ elem: '#test-form' ,color: '#626061' ,done: function(color){ $('#test-form-input').val(color); } }); }); </script>
2024年08月22日
5 阅读
0 评论
0 点赞
2024-08-22
Layui表格如何实现点击图片预览图片功能
在使用layui框架的时候,我们有时需要放大表格中的图片,可以使用下面的方法来实现。表格部分代码table.render({ elem: '#currentTableId', url: '{:url("union.customer.getCustomer")}', toolbar: '#toolbarDemo', defaultToolbar: ['filter', 'exports', 'print', { title: '提示', layEvent: 'LAYTABLE_TIPS', icon: 'layui-icon-tips' }], cols: [[ {type: "checkbox", width: 50}, {field: 'id', width: 80, title: 'ID', sort: true}, {field: 'cate', width: 100, title: '问卷类型'}, {field: 'nick', minwidth: 80, title: '用户信息'}, {field: 'content', minwidth: 80, title: '服务评价'}, {field: 'other_proposal', minwidth: 80, title: '意见'}, { title: '图片' ,align: "center" ,width:300 ,templet: function (d) { return '<div >'+d.photo+'</div>'; } }, {field: 'created_at', title: '时间', width: 160, sort: true}, {title: '操作', width: 130, toolbar: '#currentTableBar', align: "center"} ]], limits: [5, 15, 20, 25, 50, 100], limit: 5, page: true, unresize: false, // skin: 'line', response: { statusName: 'code' //规定数据状态的字段名称,默认:code ,statusCode: 200 //规定成功的状态码,默认:0 ,msgName: 'msg' //规定状态信息的字段名称,默认:msg ,countName: 'count' //规定数据总数的字段名称,默认:count ,dataName: 'data' //规定数据列表的字段名称,默认:data } }); 点击图片预览放大图片//元素加载完成之后点击事件 $(document).on("click", ".layui-form img[name = 'coverUrl']", function (e) { console.log(e) layer.open({ type: 1, title: false, closeBtn: 0, shadeClose: true, //点击阴影关闭 area: ['50%', '50%'], content: "<img width='100%' height='auto' src="https://www.tpxhm.com/fdetail/ + $(this).context.currentSrc + " />", }); })
2024年08月22日
3 阅读
0 评论
0 点赞
2024-08-22
解决layui框架excel导出长数据科学计数法问题
Layui框架自带的导出excel数据默认导出的数据会以数字格式存放,比较长的数据存放后会经过科学计数法加工,从而导致数据错误解决方法:1、在/lib/layui-v2.5.5/lay/modules/table.js中搜索:d.exportFile2、将d.exportFile这个函数,用下面内容替换掉: d.exportFile = function (e, t, i) { t = t || d.clearCacheKey(d.cache[e]), i = i || "csv"; var a = c.config[e] || {}, // 分页按钮 l = {csv: "text/csv", xls: "application/vnd.ms-excel"}[i], // meta格式 n = document.createElement("a"), // a 标签 type = i, meta = l, title = a.title layui.each(t, function (ks, vs) { var inner = {} layui.each(vs, function (k, v) { if (/^\d{9,}$/.test(v)) { vs[k] = vs[k] + '\t' } inner[k] = vs[k] }); t[ks] = inner }) if (r.ie) { var i = [], a = []; layui.each(t, function (t, l) { var n = []; "object" == typeof e ? (layui.each(e, function (e, a) { 0 == t && i.push(a || "") }), layui.each(d.clearCacheKey(l), function (e, t) { n.push(t) })) : d.eachCols(e, function (e, a) { a.field && "normal" == a.type && !a.hide && (0 == t && i.push(a.title || ""), n.push(l[a.field])) }), a.push(n.join(",")) }); var data = i.join(",") + "\r\n" + a.join("\r\n") navigator.msSaveBlob(new Blob(['\ufeff' + data], {type: meta + ';charset=utf-8;'}), title + '.' + type) } else { return n.href = "data:" + l + ";charset=utf-8,\ufeff" + encodeURIComponent(function () { var i = [], a = []; return layui.each(t, function (t, l) { var n = []; "object" == typeof e ? (layui.each(e, function (e, a) { 0 == t && i.push(a || "") }), layui.each(d.clearCacheKey(l), function (e, t) { n.push(t) })) : d.eachCols(e, function (e, a) { a.field && "normal" == a.type && !a.hide && (0 == t && i.push(a.title || ""), n.push(l[a.field])) }), a.push(n.join(",")) }), i.join(",") + "\r\n" + a.join("\r\n") }()), n.download = (a.title || "table_" + (a.index || "")) + "." + i, document.body.appendChild(n), n.click(), void document.body.removeChild(n)} },
2024年08月22日
4 阅读
0 评论
0 点赞
1
...
43
44
45
...
68