首页
关于
留言
友情链接
Search
1
粽子SHOP即时到账 微信插件
998 阅读
2
王者荣耀ios扫码登录 PHP源码
301 阅读
3
上元微信公众号助手 引流必备神器 网红留言信箱 V2.2
294 阅读
4
PS人像美颜插件 DR5.0增强版 一键人像磨皮/美白/高低频
260 阅读
5
基于layui Table的一个简单搜索功能,支持多条件搜索
174 阅读
程序源码
PHP源码
HTML源码
精品程序
活动资讯
技术分享
实用代码
实用工具
登录
Search
标签搜索
timi
王者荣耀
王者荣耀ios扫码
layer
layer图片预览
layer图片
layer弹窗
EN博客
累计撰写
12
篇文章
累计收到
119
条评论
首页
栏目
程序源码
PHP源码
HTML源码
精品程序
活动资讯
技术分享
实用代码
实用工具
页面
关于
留言
友情链接
搜索到
5
篇与
实用代码
的结果
2022-05-20
layui.layer 预览图片自适应大小
引入layer,给图片增加一个点击事件就OK了 var src = $(this).attr("src"); lookPicture(src,1); /** * layer 图片预览自适应 * @param resourcesUrl * @param resourcesType 传 1 就OK了 */ function lookPicture(resourcesUrl,resourcesType) { // resourcesUrl:接受的图片地址,resourcesType之前定义的数据类型(可省略) if (resourcesUrl == "") { layer.msg("没有发现图片!"); return; } var img = new Image(); img.onload = function () {//避免图片还未加载完成无法获取到图片的大小。 //避免图片太大,导致弹出展示超出了网页显示访问,所以图片大于浏览器时下窗口可视区域时,进行等比例缩小。 var max_height = $(window).height() - 100; var max_width = $(window).width(); //rate1,rate2,rate3 三个比例中取最小的。 var rate1 = max_height / img.height; var rate2 = max_width / img.width; var rate3 = 1; var rate = Math.min(rate1, rate2, rate3); //等比例缩放 var imgHeight = img.height * rate; //获取图片高度 var imgWidth = img.width * rate; //获取图片宽度 var imgHtml = "<img src='" + resourcesUrl + "' width='" + imgWidth + "px' height='" + imgHeight + "px'/>"; //弹出层 if (resourcesType ==1 ) { layer.open({ type:1,//可传入的值有:0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层) shade: 0.6, // maxmin: true, anim: 2, title: false, // title: '图片预览',// title: false, area: ['auto', 'auto'], // skin: 'layui-layer-nobg', //没有背景色 shadeClose: true, content: imgHtml }); } } img.src = resourcesUrl; }
2022年05月20日
1 阅读
0 评论
0 点赞
2022-03-30
jquery.autocomplete 基本样式与使用方法
Jq.autocomplete 用法引入JS<script src='js/jquery.min.js?v=20220330' type='text/javascript'></script> <script src='js/jquery.autocomplete.min.js' type='text/javascript'></script>CSS样式/* //2022-03-30 AY input搜索插件 */ .autocomplete-suggestions { border: 1px solid #999; background: #FFF; overflow: auto;cursor: pointer } .autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; } .autocomplete-selected { background: #F0F0F0; } .autocomplete-suggestions strong { font-weight: normal; color: #3399FF; }html与js <input type="text" id="title" /> <script> $("#title").autocomplete({ serviceUrl: 'index.php?m=bug&f=ajax&action=searchTitle', dataType:"json", type:"POST", deferRequestBy:200, }) </script> PHP代码 $queryKey = $postData->query; //获取关键字 $searchTitleList = "select title as value,id as data from table";//查询数据 $data = ['query' => $queryKey,'suggestions' => $searchTitleList]; //按格式返回 exit(json_encode($data,320));
2022年03月30日
17 阅读
0 评论
0 点赞
2022-03-29
基于layui Table的一个简单搜索功能,支持多条件搜索
给公司老系统开发功能,老系统的搜索模块需要提交整个页面,而且代码很乱配置很杂。于是基于layui Table自己手写了一个简单搜索功能,可以多条件搜索。就这样吧,记录一下,以后再优化。 # 获取用户列表 (可选,select下拉选项) $ulist = $this->administration->getUserListByValid("account as k,realname as v"); # 待搜索字段 $searchFields = [ ['text'=>'维修产品型号','field' => 'typeid','type' => 'input','values'=>''], ['text'=>'维修日期','field' => 'repair_time','type' => 'date','values'=>''], ['text'=>'维修处理状态','field' => 'state_text','type' => 'input','values'=>''], ['text'=>'更好材料型号','field' => 'change_typeid','type' => 'input','values'=>''], ['text'=>'维修联系人','field' => 'repair_name','type' => 'input','values'=>''], ['text'=>'维修联系人电话','field' => 'repair_phone','type' => 'input','values'=>''], ['text'=>'经办人','field' => 'repair_account','type' => 'select','values'=>$ulist], ['text'=>'费用','field' => 'repair_money','type' => 'input','values'=>''], ]; $optionHtml = ""; foreach ($searchFields as $field){ $optionHtml .= '<option value="'.$field['field'].'">'.$field['text'].'</option>'; }<div style="padding-top: 20px;text-align: center;display: none" id="searchBox"> <!-- $searchFields array 字段列表 text 展示文字 field 数据库字段 type 类型 input 输入 select 下拉选择 date日期选择 values 默认值 type为select时 values为数组 k=>v $optionHtml 下拉选择 搜索键 前端依赖 jquery 选择器 zui 表单样式 layui.laydate 日期选择模块 --> <div class="" style="max-width: 720px;margin: 0 auto"> <!-- 初始化第一个搜索条件 --> <div class="row searchBox searchBox_1" data-index="1"> <div class="col-xs-3"> <select class="form-control input-sm" id="field_1" onchange="ayFieldChange(1,this.value)"> <?php echo $optionHtml; ?> </select> </div> <div class="col-xs-2"> <select class="form-control input-sm" id="condition_1"> <option value="eq"> = </option><option value="gt"> > </option><option value="lt"> < </option><option value="elt"> <= </option> <option value="egt"> >= </option><option value="nq"> 不等于 </option><option value="%"> 包含 </option> </select> </div> <div class="col-xs-3" id="value_box_1"> <input type="text" class="form-control input-sm" id="value_1" placeholder=""> </div> <div class="col-xs-2"> <select class="form-control input-sm" id="where_1" onchange="ayWhereChange(1,this.value)"> <option value=""> 无更多条件 </option> <option value="and"> 并且 </option> <option value="or"> 或者 </option> </select> </div> <div class="col-xs-1"> <button class="searchBtn btn btn-sm btn-blue">搜索</button> </div> <div class="col-xs-1"> <button class="closesearchBtn btn btn-sm btn-blue">清空搜索</button> </div> </div> <script> let nextIndex = 2; // 下一个搜索条件下标 let searchFields = <?=json_encode($searchFields)?>; // 搜索字段数据 let optionHtml = '<?=$optionHtml?>'; // 搜索字段下拉option /** * 监听选中搜索字段 生成对应类型的输入框 * @param index * @param fieldValue */ function ayFieldChange(index,fieldValue){ for(var i = 0;i<searchFields.length;i++){ var tempFields = searchFields[i]; if(tempFields.field == fieldValue){ if(tempFields.type == "select"){ var inputHtml = "<select class='form-control input-sm' id='value_"+index+"'>"; for(var k=0;k<tempFields.values.length;k++){ inputHtml += "<option value='"+tempFields.values[k]['k']+"'>"+tempFields.values[k]['v']+"</option>"; } inputHtml += "</select>"; $("#value_box_"+index).html(inputHtml); }else if(tempFields.type == "date"){ var inputHtml = '<input type="text" class="form-control input-sm" id="value_'+index+'" placeholder="">'; $("#value_box_"+index).html(inputHtml); console.log("value_"+index); layui.laydate.render({ elem: "#value_"+index ,type: 'date' }); }else{ var inputHtml = '<input type="text" class="form-control input-sm" id="value_'+index+'" placeholder="">'; $("#value_box_"+index).html(inputHtml); } } } } /** * 添加搜索条件 * @param index * @param where */ function ayWhereChange(index,where){ if(index < nextIndex-1) return; if(where == "and" || where == "or"){ var html = '<div data-index="'+nextIndex+'" class="row searchBox searchBox_'+nextIndex+'">'+ '<div class="col-xs-3">' + '<select class="form-control input-sm" id="field_'+nextIndex+'" onchange="ayFieldChange('+nextIndex+',this.value)">' + optionHtml+ '</select></div>'+ '<div class="col-xs-2">'+ '<select class="form-control input-sm" id="condition_'+nextIndex+'"> '+ '<option value="eq"> = </option><option value="gt"> > </option><option value="lt"> < </option><option value="elt"> <= </option>'+ '<option value="egt"> >= </option><option value="nq"> 不等于 </option><option value="%"> 包含 </option>'+ '</select> </div>'+ '<div class="col-xs-3" id="value_box_'+nextIndex+'">'+ '<input type="text" class="form-control input-sm" id="value_'+nextIndex+'" placeholder="">'+ '</div>'+ '<div class="col-xs-2">'+ '<select class="form-control input-sm" id="where_'+nextIndex+'" onchange="ayWhereChange('+nextIndex+',this.value)">'+ ' <option value=""> 无更多条件 </option>'+ ' <option value="and"> 并且 </option>'+ ' <option value="or"> 或者 </option>'+ '</select>'+ ' </div>'+ '</div>'; nextIndex++; $(".searchBox_"+index).after(html) } } /** * 获取所有搜索条件 * @returns {any[]} */ function buildSearch(){ var searchBoxlist = $(".searchBox"); var where = new Array(); for (var i = 1;i<=searchBoxlist.length;i++){ var line = {}; line['field'] = $("#field_"+i).val() line['condition'] = $("#condition_"+i).val() line['value'] = $("#value_"+i).val()==undefined?"":$("#value_"+i).val() line['where'] = $("#where_"+i).val() where.push(line); if( line['where'] == "") break; } return where; } </script> </div> <!-- 搜索轮子 --> </div> <!-- --------------------- 搜索结束 --------------------- -->// 监听搜索 $(".searchBtn").click(function (){ var where = buildSearch(); table.reload('testReload', { page: { curr: 1 //重新从第 1 页开始 } ,where: { where } }); }) // 清空搜索 $(".closesearchBtn").click(function (){ table.reload('testReload', { page: { curr: 1 //重新从第 1 页开始 } ,where: [] }); }) /** * 构建where条件 * @param $where * @return string */ public function buildWhereSql($where){ $conditionChar = ["lt" => "<", "gt" => ">", "eq" => "=", "nq" => "<>", "egt" => ">=", "elt" => "<=",]; if(!$where){ return " 1 = 1 "; } $sql_str = ""; $next_where = ""; foreach ($where as $row){ if($next_where){ # 如果还有条件,使用上一次的连接条件 拼接SQL $sql_str .= " ".$next_where; } # 开始拼接where条件 $field = $row['field']; # 字段 $condition = $row['condition']; # 条件 $value = $row['value']; # 值 $s_str = " `$field` "; if($condition == "%"){ $s_str .= " like '%$value%'"; }else{ $zcahr = isset($conditionChar[$condition])?$conditionChar[$condition]:"="; $s_str .= " $zcahr '$value'"; } $next_where = $row['where']; $sql_str.=$s_str; if(empty($next_where)) break; } return $sql_str; }
2022年03月29日
174 阅读
0 评论
0 点赞
2022-01-20
宝塔设置秒级监控,10秒15秒30秒定时执行访问
宝塔最低只能设置1分钟监控,但是往往我们需要更高频率的监控,那么我们可以使用shell脚本实现这个功能。打开宝塔面板,点击【计划任务】任务类型:shell脚本任务名称:随便谢谢执行周期:【N分钟】 1脚本内容:#!/bin/bash step=10 #单位:秒;间隔的秒数,不能大于60。需要几秒监控就填几 for((i=0;i<60;i=(i+step)));do curl -s http://www.0en.cn/(你需要监控的地址) endDate=`date +"%Y-%m-%d %H:%M:%S"` echo "★[$endDate] Successful" echo "---------" sleep $step done; exit 0
2022年01月20日
61 阅读
0 评论
0 点赞
2022-01-09
JS唤起Win10消息通知
// 判断浏览器是否支持唤醒 if (window.Notification) { let popNotice = () => { if (!Notification.permission === 'granted') return const notification = new Notification('阿巴阿巴', { body: '提示提示提示' }) // 点击通知的回调函数 notification.onclick = function () { window.open('https://baidu.com') notification.close() } } /* 授权过通知 */ if (Notification.permission === 'granted') { popNotice() } else { /* 未授权,先询问授权 */ Notification.requestPermission(function (permission) { popNotice() }) } }
2022年01月09日
60 阅读
0 评论
0 点赞