搜索到
10
篇与
的结果
-
【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 和其他相关信息。此示例为演示目的，你可以根据实际需求进行调整和修改。 -
-
-
【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, }); }
-
【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参数 }); });
-
【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>
-
-
【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); } //全选 const checkboxes = document.getElementsByClassName('checkboxlist'); const selectedCheckboxes = []; for(let i = 0; i < checkboxes.length; i++) { if(checkboxes[i].type === 'checkbox' && checkboxes[i].checked) { selectedCheckboxes.push(checkboxes[i].value); } }
-
【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) } }
-
【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; }) });
