首页
关于
归档
朋友
留言
API平台
告白墙
休闲游戏
更多
留言板
练字贴
Layui手册
Search
1
【PHP】PHPoffice/PHPSpreadsheet读取和写入Excel
1,006 阅读
2
【Git】No tracked branch configured for branch master or the branch doesn't exist.
742 阅读
3
【composer】composer常用命令
487 阅读
4
【Layui】控制页面元素展示隐藏
437 阅读
5
【MySQL】MySQL触发器应用场景和使用方法
417 阅读
默认分类
PHP
ThinkPHP
Laravel
面向对象
设计模式
算法
基础
网络安全
Web
HTML
CSS
JavaScript
jQuery
Layui
VUE
uni-app
Database
MySQL
Redis
RabbitMQ
Nginx
Git
Linux
Soft Ware
Windows
网赚
Go
登录
Search
标签搜索
PHP
函数
方法
类
MySQL
ThinkPHP
OOP
JavaScript
Layui
Web
Linux
Array
设计模式
Git
PHPSpreadsheet
PHPoffice
排序算法
面试题
Windows
基础
小破孩
累计撰写
212
篇文章
累计收到
16
条评论
首页
栏目
默认分类
PHP
ThinkPHP
Laravel
面向对象
设计模式
算法
基础
网络安全
Web
HTML
CSS
JavaScript
jQuery
Layui
VUE
uni-app
Database
MySQL
Redis
RabbitMQ
Nginx
Git
Linux
Soft Ware
Windows
网赚
Go
页面
关于
归档
朋友
留言
API平台
告白墙
休闲游戏
留言板
练字贴
Layui手册
搜索到
10
篇与
的结果
2023-08-09
【Layui】图片预览
要在 layui 中点击图片实现预览功能,你可以使用 layui 的 layer.photos 方法来轻松实现图片预览。以下是如何在点击图片时使用 layer.photos 来创建图片预览的示例代码:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Layui Image Preview</title> <link rel="stylesheet" href="path/to/layui/css/layui.css"> <script src="path/to/layui/layui.js"></script> </head> <body> <div class="images-container"> <img class="preview-image" src="path/to/image1.jpg" alt="Image 1"> <img class="preview-image" src="path/to/image2.jpg" alt="Image 2"> <img class="preview-image" src="path/to/image3.jpg" alt="Image 3"> </div> <script> layui.use(['layer'], function() { var layer = layui.layer; // 点击事件处理 $('.preview-image').on('click', function() { var images = []; // 存放图片信息的数组 var currentImage = this.src; // 获取所有图片信息 $('.preview-image').each(function() { images.push({ alt: $(this).attr('alt'), src: $(this).attr('src') }); }); // 在弹窗中预览图片 layer.photos({ photos: { title: '图片预览', // 弹窗标题 data: images, start: images.findIndex(img => img.src === currentImage) // 从当前图片开始预览 }, shadeClose: true, // 点击遮罩关闭弹窗 closeBtn: 2 // 显示关闭按钮 }); }); }); </script> </body> </html> 在上述示例代码中,我们创建了一个包含多个图片的容器,然后为每个图片添加了共同的类名 preview-image。通过点击图片,会触发 layer.photos 方法,该方法可以用来创建一个图片预览弹窗。我们使用一个包含图片信息的数组来配置预览图片,其中 title 为弹窗标题,data 包含图片信息,start 指定从数组中的哪个索引开始预览。请注意,替换代码中的图片 URL 和其他相关信息。此示例为演示目的,你可以根据实际需求进行调整和修改。
2023年08月09日
184 阅读
0 评论
0 点赞
2023-05-22
【Layui】控制页面元素展示隐藏
页面打开监听 layer.ready(function () { $(".integralnum").show(); $(".jichugoods").hide(); });
2023年05月22日
437 阅读
0 评论
0 点赞
2023-05-10
【Layui】layui点击输入框选择时间,时间控件闪烁或消失
解决办法:在render的时候添加 ,trigger: 'click' 属性 来解决.laydate.render({ elem: '#issueDate_id' ,type: 'datetime' ,trigger: 'click' //自动弹出控件的事件,采用click弹出 ,可以解决控件点击闪烁的问题 });
2023年05月10日
169 阅读
0 评论
0 点赞
2022-12-31
【Layui】layui预览图片,视频
window.showBigImage = function (e) { layer.open({ type: 1, title: false, closeBtn: 0, shadeClose: true, //点击阴影关闭 area: [$(e).width + 'px', $(e).height + 'px'], //宽高 content: "<img src=" + $(e).attr('src') + " />" }); }; 使用方法: <img class="layui-upload-img" style="width: 95px;" src="{$icon.index_url}" id="demo1" onclick="showBigImage(this)"> function imgOpen(url) { layui.use(['carousel', 'laydate', 'layer'], function () { //页面层-图片 layer.open({ closeBtn: 2, shift: 3, shadeClose: true, // 点击遮罩关闭层 type: 1, title: '预览图', resize: true, // maxmin: true, //打开放大缩小按钮 area: ['1024px', '608px'], content: "<span><img style='width:100%;height: 100%;' src=" + url + " /></span>",//注意,如果str是object,那么需要字符拼接。 }); // layer.photos({ // photos: { // "title": '预览图', // "start": 0, // "data": [{ "src": url}] // } // , closeBtn: 1//是否显示关闭按钮 // }); }) } //视频预览,传url,width,height function previewVideo(url, width, height) { width = width ? width : '65%'; height = height ? height : '65%'; let content = '<video width="100%" height="90%" controls="controls" autobuffer="autobuffer" autoplay="autoplay" loop="loop">' + '<source src="' + url + '" type="video/mp4"></source></video>'; layer.open({ type: 1, maxmin: true, //打开放大缩小按钮 title: '视频播放', area: [width, height], content: content, }); }
2022年12月31日
186 阅读
0 评论
0 点赞
2022-12-15
【Layui】Layui事件监听
//监听表单单选框复选框选择 form.on('radio', function (data) { console.log(data.value); //得到被选中的值 }); //监听表单下拉菜单选择 form.on('select', function (data) { console.log(data.value); //得到被选中的值 }); //监听表单复选框选择 form.on('checkbox', function (data) { console.log(data.value); //得到被选中的值 }); //监听表格复选框选择 table.on('checkbox(demo)', function (obj) { console.log(obj); }); //layui监听input内容变动简单粗暴 $(function(){ //输入框的值改变时触发 $("#inputid").on("input",function(e){ //获取input输入的值 console.log(e.delegateTarget.value); }); }); //点击触发监听 $(document).on('click','.class',function(othis){ var data = othis.currentTarget; data.remove(); layer.msg('清除成功'); }); 带注释 form.on('event(过滤器值)', callback); //监听checkbox复选 form.on('checkbox(filter)', function(data){ console.log(data.elem); //得到checkbox原始DOM对象 console.log(data.elem.checked); //是否被选中,true或者false console.log(data.value); //复选框value值,也可以通过data.elem.value得到 console.log(data.othis); //得到美化后的DOM对象 }); //监听switch复选 form.on('switch(filter)', function(data){ console.log(data.elem); //得到checkbox原始DOM对象 console.log(data.elem.checked); //开关是否开启,true或者false console.log(data.value); //开关value值,也可以通过data.elem.value得到 console.log(data.othis); //得到美化后的DOM对象 }); //监听radio单选: form.on('radio(filter)', function(data){ console.log(data.elem); //得到radio原始DOM对象 console.log(data.elem.dataset);//获取dataset参数 console.log(data.value); //被点击的radio的value值 }); //监听submit提交: <button lay-submit lay-filter="*">提交</button> form.on('submit(*)', function(data){ console.log(data.elem) //被执行事件的元素DOM对象,一般为button对象 console.log(data.form) //被执行提交的form对象,一般在存在form标签时才会返回 console.log(data.field) //当前容器的全部表单字段,名值对形式:{name: value} return false; //阻止表单跳转。如果需要表单跳转,去掉这段即可。 }); 监听Select的改变 <!-- 不用form 用div也可以 --> <form class="layui-form"> <div class="layui-form-item"> <label class="layui-form-label">下拉选择框</label> <div class="layui-input-block"> <select name="interest" lay-filter="aihao"> <option value="0">写作</option> <option value="1">阅读</option> <option value="2">听歌</option> <option value="4">游戏</option> </select> </div> </div> </form> <script type="text/javascript" src="./layui/layui.js"></script> <script type="text/javascript"> layui.use('form', function(){ var form = layui.form; form.on('select(aihao)',function(data){ console.log(data); console.log(data.elem); //得到select原始DOM对象 console.log(data.value); //得到被选中的值 console.log(data.othis); //得到美化后的DOM对象 console.log(data.elem.dataset);//获取dataset参数 }); });
2022年12月15日
271 阅读
0 评论
0 点赞
2022-12-14
【Layui】layui自动关闭页面
layui <script> layui.use('layer',function(){ var layer = layui.layer; layer.ready(function(){ layer.msg('操作成功,3秒后会自动关闭当前页面!', {offset: '15px',icon: 1,time: 3000}, function(){ var index = parent.layer.getFrameIndex(window.name); parent.layer.close(index) window.parent.location.reload(); return false; }); }); }); </script> js <div id="box"> <p>页面在 <span id="Os">5</span> s后跳转 </p> </div> <script> var Os=document.getElementById("Os"); var num=5; var timer=setInterval(function () { num--; Os.innerText=num; if(num==0){ window.location.href="https://www.baidu.com/"; } },1000) </script>
2022年12月14日
157 阅读
0 评论
0 点赞
2022-11-11
【Layui】Layui表单校验
layui 表单自带校验: lay-verify:是表单验证的关键字其中对其指定不同值可实现简单验证required (该输入框必填项)phone(手机号)email(邮箱)url(网址)number(数字)date(日期)identity(身份证)同时Layui支持多条规则的验证:格式:lay-verify=”验证A|验证B”例如:lay-verify=”require|phone|number”这表示此处填入为 手机号,必须为数字,且为必填项。
2022年11月11日
115 阅读
0 评论
0 点赞
2022-06-23
【Layui】Layui获取多选的id
// 监听checkbox form.on('checkbox(change)',function(data){ var arr_box = []; $('input[type=checkbox]:checked').each(function() { arr_box.push($(this).val()); }); var str_arr = arr_box.toString(arr_box); // console.log(strarr); // console.log(arr_box.join(",")); 自定义分隔符 $("#chargess").val(str_arr); }); //全选 form.on('checkbox(allChoose)', function (data) { var child = $("input[name='test']"); child.each(function (index, item) { item.checked = data.elem.checked; // console.log($(this).val()); }); form.render('checkbox'); }); //单选 function exportsheet(){ var chk_value=[]; $('input[name="test"]:checked').each(function(){ chk_value.push($(this).val()); }); console.log(chk_value); }
2022年06月23日
322 阅读
0 评论
0 点赞
2022-06-23
【Layui】实现发送验证码倒计时
/** * 发送验证码 */ var countdown=60; function sendsms(){ var sms = $('#sendsmsid').text(); if(sms == '发送验证码' || sms == '重新发送验证码'){ var iphone = $("#phone").val(); $.ajax({ url:"{:url('index/getSmsByIphoneNumber')}", type:'get', dataType: "json", data:{mobile_num:iphone}, success:function(res){ // console.log(res); // return false; if(res.code == 200){ layer.msg(res.message, { icon: 6,//成功的表情 },function(){ judgeAgainSend(); }); return false; }else{ layer.msg(res.message,{icon: 5});//失败的表情 return false; } }, }); }else{ judgeAgainSend(); } } /** * 判断重新发送 * @returns {boolean} */ function judgeAgainSend(){ if(countdown == 0){ $('#sendsmsid').text('重新发送验证码'); $('#sendsmsid').removeClass('layui-btn-disabled'); countdown = 60; return false; }else{ $('#sendsmsid').text('已发送 '+countdown+'秒 后可重新发送'); $('#sendsmsid').addClass('layui-btn-disabled'); countdown--; setTimeout(function() { sendsms(); } ,1000) } }
2022年06月23日
113 阅读
0 评论
0 点赞
2022-06-23
【Layui】x-admin后台页面使用layer.msg提示失败解决办法
form.on 监听提交,所包含的代码最后要加上 return false; layui.use(['form', 'layer'], function() { $ = layui.jquery; var form = layui.form, layer = layui.layer; //自定义验证规则 form.verify({ pass: [/(.+){6,12}$/, '密码必须6到12位'], repass: function(value) { if ($('#L_pass').val() != $('#L_repass').val()) { return '两次密码不一致'; } }, phonesms:function(value){ if(!value.match('^[0-9]*$')){ return '验证码是数字'; } if(value.length != 6){ return '验证码长度是6位数字'; } } }); //监听提交 form.on('submit(add)', function(data) { //发异步,把数据提交给php layer.confirm('是否确定进行下一步',{ icon: 3, //问号的表情 btn: ['下一步','取消'] ,//按钮 },function () { var result = data.field, info = $('.layui-form').serialize(); $.ajax({ url:"{:url('page/registOne')}", type:'get', dataType: "json", data:$('.layui-form').serialize(), success:function(res){ // console.log(res); // return false; if(res.code == 200){ layer.msg(res.message, { icon: 6,//成功的表情 time: 3000 //3秒关闭(如果不配置,默认是3秒) }, function(){ // location.reload(); location.href="{:url('page/registTwo')}"; }); }else{ layer.msg(res.message,{icon: 5});//失败的表情 return; } }, }); }); return false; }) });
2022年06月23日
123 阅读
0 评论
0 点赞