Layim模块化右键菜单
发表于|更新于|码不能停
|总字数:196|阅读时长:1分钟|浏览量:
一直觉得社区那群“先驱”搞的右键菜单要么太丑,要么风格不统一,很难受。
这两天仔细看了看心姐的源码,把历史消息里的右键菜单揪出来改了一把,感觉很良好。
演示地址已挂,请在本地搭建后测试。
调用方法,先引用上边暴露出来的方法,然后:
1 | layim.on('ready', function (options) { |
文章作者: m-finder
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 M-finder!
相关推荐

2018-03-23
结合layui流加载实现的瀑布流
最近在用layui做一个社区站点,有个页面想做成瀑布流形式,但是layui本身的流加载并没有实现这个功能,所以在研究了几个臃肿的插件源码后,自己做了一个可以结合layui流加载使用的轻量级瀑布流插件,用起来也比较简单。 图丢了,演示效果无。 使用说明:友情提示:如果不熟悉layui的用法,请百度过去仔细阅读一下文档。 在页面中用layui的定义的模式扩展引入common.js ajax加载数据信息,获得数据总分页数 laytpl渲染数据 流加载判断是否还有下一页数据 waterfall整理页面元素的定位 javascript 内容: common.js 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859layui.define(['jquery', 'element', 'util', 'laytpl'], function (exports) { var $ = layui.jquery , element = layui.element , layer = layui.layer , util = layui.util , laytpl = layui.laytpl; var gather = { waterfall: function () { var box = $(".layui-col-md3"); var boxWidth = box.eq(0).width(); var num = Math.floor($("#zone-list").width() / boxWidth); var boxArr = []; box.each(function (index, value) { var boxHeight = box.eq(index).height(); if (index < num) { boxArr[index] = boxHeight; } else { var minboxHeight = Math.min.apply(null, boxArr), minboxIndex = $.inArray(minboxHeight, boxArr); $(value).css({ "position": "absolute", "top": minboxHeight + 15, "left": box.eq(minboxIndex).position().left }); boxArr[minboxIndex] += box.eq(index).height() + 15; if (boxHeight + minboxHeight > $("#zone-list").height()) { $("#zone-list").height(150 + boxArr[minboxIndex]); } } }); }, json: function (url, data, func, options) { var that = this, type = typeof data === 'function'; if (type) { options = func func = data; data = {}; } options = options || {}; return $.ajax({ type: options.type || 'post', dataType: options.dataType || 'json', data: data, url: url, success: function (res) { func && func(res); }, error: function (e) { layer.msg('请求异常,请重试', {shift: 6}); options.error && options.error(e); } }); }, }; exports('common', gather);}); 调用 12345678910111213141516171819202122232425262728var action = '/zone';common.json(action, '', function (res) { flow.load({ elem: '#zone-list' , isAuto: true , isLazyimg: true , mb: 100 , done: function (page, next) { var lis = []; common.json(action, {page: page}, function (res) { var getTpl = zonesTpl.innerHTML, view = document.getElementById('zone-list'); layui.each(res.data.data, function (index, item) { laytpl(getTpl).render(item, function (html) { lis.push(html); }); }); if (page < res.data.last_page) { next(lis.join(''), true); } else { next(lis.join(''), false); } common.waterfall(); }); } });}); html内容: 1234567891011121314151617<script id="zonesTpl" type="text/html"> <div class="layui-col-md3"> <div class="zone-box"> <div class="dt_text"> <span class="zone-word">@{{ d.content }}</span> </div> @{{# var img = layui.jquery.grep(d.imgs.split(','), function(n) {return layui.jquery.trim(n).length > 0;}) }} <div class="img_box base-img-w img-w-@{{ img.length }}" > <a class="img_w " href="javascript:;"> @{{# for(var k=0;k< img.length;k++){ }} <img src="@{{ img[k] }}" > @{{# } }} </a> </div> </div> </div></script> 好了,就是这么简单。

2017-12-22
Layui使用备忘
一个关于 form 渲染特殊用法的解决方案。 需求 :项目中需要做一个带参导入功能 , 画面效果如下图: 遇到的问题 : 弹窗中 select 不显示 select 显示后 , 选中某项时无法把值传入后台 解决办法 : 在弹窗的 success 中使用 form.render(‘select’) 重新渲染select 在弹窗的 success 中增加 select 切换事件监听 , 然后使用变量 uploader 承接 upload.render , 在监听到 select 切换时 , 使用 uploader.config.data = {‘asset_type’: data.value} 来更新 upload 中的 data 参数 , 最后再给 upload 增加 before 参数 , 来接收不切换 select 时的 data 值 . 代码 :html : 123456789101112131415161718192021222324252627<script id="importTpl" type="text/html"> <form class="layui-form layui-form-pane " method="POST" onsubmit="return false" > <div style="padding: 15px;width:400px;margin:0 auto;"> <div class="layui-form-item" > <label class="layui-form-label">导入文件类型</label> <div class="layui-input-block"> <select name="asset_type" id='asset_type' lay-filter="asset_type"> <option value="1" selected>个人贷款</option> <option value="4">票据</option> </select> </div> </div> <div class="layui-form-item" > <button type="button" class="layui-btn layui-btn-primary" id="import"> <i class="layui-icon"></i> 选择文件 </button> </div> <div class="layui-row" > <button class="layui-btn do-import layui-btn-danger " type="button"> 确定导入 </button> </div> </div> </form></script> javascript : 123456789101112131415161718192021222324252627282930313233$('#asset-import').click(function () { layer.open({ area: ['450px', '250px'], title: '项目导入', type: 1, content: $('#importTpl').html(), success: function (layero, index) { form.render('select'); form.on('select', function (data) { uploader.config.data = {'asset_type': data.value}; }); var uploader = upload.render({ url: '/reg/asset-import' , elem: '#import' , accept: 'file' , auto: false , bindAction: '.do-import' , before: function (obj) { uploader.config.data = {'asset_type': $('#asset_type').val()}; } , done: function (res) { layer.close(index); if (res.code == 0) { layer.msg(res.msg, {icon: 1}); } else { layer.alert(res.msg, {icon: 2}); } } }); } });});

2018-03-14
Pjax的正确使用
以前偶然之间接触到pjax这个插件,眼前一亮,被它惊艳到了。 顿时觉得心痒难耐,便着手测试想要加在博客里,几经折腾,页面的跳转总算是改善许多,但是离我所见到的完美却总是差一步:每次跳转页面都会闪一下。 奈何文档太少,或者说我所遇到的问题水平太low,这个问题也就一直伴随着我的博客。 服务器到期后,我就把博客迁到了github,用着还挺满意,还拉了几个同学也来用这个,这两天有个同学换了套别人做的模板,让我又见识到了pjax的魅力。 妈蛋,不能忍。 看文档没能解决我的问题,那我找别人的源码去。 于是今天下班路上,扒了几篇码云的源码,终于是解决了这个伴随已久的不完美! 123456789101112131415161718192021<script type="text/javascript"> layui.config({ base: '/js/' ,version: false }).extend({ index: 'index' ,pjax: 'pjax' }).use(['pjax','index'],function (){ var $ = layui.jquery; $(function () { $(document).pjax('a', '#main',{fragment:'#main'}); $(document).on('pjax:start', function () { NProgress.start(); }); $(document).on('pjax:end', function () { NProgress.done(); }); }); });</script> 因为引入了layui,虽然在这个版本的博客里没什么大用,我还是把pjax裹了一层做成了layui的扩展。 之前我是这么写的: 1$(document).pjax('a', '#main'); 今天在对比之下,发现我少了 {fragment:’#main’},加进去一试,好了。 原来我曾经离完美只差一步之遥。 这个东西应该是指定新页面所替换的位置,也就是在拿到新页面的内容以后会在这个元素里边替换。 应该就是这么个意思吧…… 解决了,挺开心的,就是觉得我真的该再下下功夫学英文了。

2017-12-22
代码备忘录
杂七杂八大乱炖。 计算两个日期的差值12345$datetime1 = new DateTime('2009-10-11'); //new DateTime = date_create , 在某些框架中用 new DateTime 需要加 '\' ;$datetime2 = new DateTime('2009-10-13'); $interval = $datetime1->diff($datetime2); echo $interval->format('%R%a days'); 新建文件夹1234$dir = iconv("UTF-8", "GBK", "C:/www/report/"); //linux下可不转码if (!file_exists($dir)){ mkdir ($dir,0755,true);} Ascii 码转换12345678910111213141516function stringFromColumnIndex($pColumnIndex = 0) { static $_indexCache = array(); if (!isset($_indexCache[$pColumnIndex])) { // Determine column string if ($pColumnIndex < 26) { $_indexCache[$pColumnIndex] = chr(65 + $pColumnIndex); } elseif ($pColumnIndex < 702) { $_indexCache[$pColumnIndex] = chr(64 + ($pColumnIndex / 26)) . chr(65 + $pColumnIndex % 26); } else { $_indexCache[$pColumnIndex] = chr(64 + (($pColumnIndex - 26) / 676)) . chr(65 + ((($pColumnIndex - 26) % 676) / 26)) . chr(65 + $pColumnIndex % 26); } } return $_indexCache[$pColumnIndex];}echo stringFromColumnIndex(37); 计算时间过去了多久 天\时\分\秒123456789101112131415161718192021function secsToStr($secs) { $r = ''; if ($secs >= 86400) { $days = floor($secs / 86400); $secs = $secs % 86400; $r = $days . ' 天'; } if ($secs >= 3600) { $hours = floor($secs / 3600); $secs = $secs % 3600; $r .= $hours . ' 小时'; } if ($secs >= 60) { $minutes = floor($secs / 60); $secs = $secs % 60; $r .= $minutes . ' 分钟'; } $r .= $secs . ' 秒'; return $r;}echo secsToStr(545517.1111111111); win10 配置 pthreads 多线程扩展pthreads 只支持 ts 版本的 php , 即线程安全版 phpstudy 自定义版本时总在报错 , 所以换了 xmapp pthreads 下载地址 : 没错,点我 要对应版本号和位数 位数以 php 的为准 下载解压后 , 把 php_pthreads.dll 和 pthreadVC2.dll 复制到 php\ext 下边 php.ini 最后边新增 : extension=php_pthreads.dll 然后再复制一个 pthreadVC2.dll 到系统目录 系统为 32 位的就复制进 C:\Windows\System32 64 位的就复制进 C:\Windows\SysWOW64 重启 xmapp , 新建一个 test.php 12345678910111213141516class AsyncOperation extends \Thread { public function __construct($arg){ $this->arg = $arg; } public function run(){ if($this->arg){ printf("Hello %s\n", $this->arg); } }}$thread = new AsyncOperation("World");if($thread->start()){ $thread->join();} 通过 url 访问 test 文件 , 出现 Hello World 就成功了 或者查看 phpinfo 里边有没有 pthreads 扩展 Js调用系统桌面通知:12345678if (window.Notification && Notification.permission !== "denied") { Notification.requestPermission(function (status) { var n = new Notification("sir, you got a message", { icon: '/img/logo.png', body: 'you will have a meeting 5 minutes later.' }); });} js声音提醒123audioElementHovertree = document.createElement('audio'); audioElementHovertree.setAttribute('src', 'http://w.qq.com/audio/classic.mp3'); audioElementHovertree.setAttribute('autoplay', 'autoplay'); 数据分配:12345678910111213141516$max_worker_num = 30;$data_num = 74;if ($data_num == 0) { return;}for ($i = 0; $i < $data_num; $i++) { $data[$i] = $i;}$min_worker_num = min($data_num, $max_worker_num);$data_arr = array_chunk($data, ceil($data_num / $min_worker_num), true);$worker_num = ceil($data_num / ceil($data_num / $min_worker_num));