layui表格内放置图片,并点击放大的实例


Posted in Javascript onSeptember 10, 2019

我就废话不多说了,直接上代码吧!

cols: [[ //表头
  {
      field: 'brand_img_url',
      title: '图片',
      sort: true,
      templet: function(d){
        return '<div οnclick="show_img(this)" ><img src="'+d.brand_img_url+'" alt="" width="50px" height="50px"></a></div>';
      }
    }
 ]]
//显示大图片
    function show_img(t) {
      var t = $(t).find("img");
      //页面层
      layer.open({
        type: 1,
        skin: 'layui-layer-rim', //加上边框
         area: ['80%', '80%'], //宽高
        shadeClose: true, //开启遮罩关闭
        end: function (index, layero) {
          return false;
        },
        content: '<div style="text-align:center"><img src="' + $(t).attr('src') + '" /></div>'
      });
    }

以上这篇layui表格内放置图片,并点击放大的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript插件化开发教程 (一)
Jan 27 Javascript
jQuery操作表单常用控件方法小结
Mar 23 Javascript
angularjs表格分页功能详解
Jan 21 Javascript
原生js实现百叶窗效果及原理介绍
Apr 12 Javascript
javascript实现列表切换效果
May 02 Javascript
jQuery实现下拉框多选 jquery-multiselect 的实例代码
Jul 14 Javascript
javascript insertAfter()定义与用法示例
Jul 25 Javascript
JavaScript 继承详解(六)
Oct 11 Javascript
详解vue.js之props传递参数
Dec 12 Javascript
jquery中done和then的区别(详解)
Dec 19 jQuery
微信小程序实现元素渐入渐出动画效果封装方法
May 18 Javascript
JavaScript 防抖和节流遇见的奇怪问题及解决
Nov 20 Javascript
layui监听工具栏的实例(操作列表按钮)
Sep 10 #Javascript
es6中reduce的基本使用方法
Sep 10 #Javascript
layui导出所有数据的例子
Sep 10 #Javascript
解决layui-open关闭自身窗口的问题
Sep 10 #Javascript
layui下拉框获取下拉值(select)的例子
Sep 10 #Javascript
layer弹出层自定义提交取消按钮的例子
Sep 10 #Javascript
在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法
Sep 10 #Javascript
You might like
PHP程序员面试 切忌急功近利(更需要注重以后的发展)
2010/09/01 PHP
php cli配置文件问题分析
2015/10/15 PHP
比较完整的微信开发php代码
2016/08/02 PHP
详解PHP字符串替换str_replace()函数四种用法
2017/10/13 PHP
jquery png 透明解决方案(推荐)
2010/08/21 Javascript
JSONP 跨域访问代理API-yahooapis实现代码
2012/12/02 Javascript
学习js在线html(富文本,所见即所得)编辑器
2012/12/18 Javascript
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
2013/01/24 Javascript
jQuery中实现动画效果的基本操作介绍
2013/04/16 Javascript
动态加载dtree.js树treeview(示例代码)
2013/12/17 Javascript
Javascript中的五种数据类型详解
2014/12/26 Javascript
JavaScript获取当前网页最后修改时间的方法
2015/04/03 Javascript
ECMAScript中函数function类型
2015/06/03 Javascript
jquery基础知识第一讲之认识jquery
2016/03/17 Javascript
JS中使用apply、bind实现为函数或者类传入动态个数的参数
2016/04/26 Javascript
Web前端框架bootstrap实战【第一次接触使用】
2016/12/28 Javascript
Bootstrap列表组学习使用
2017/02/09 Javascript
layui导航栏实现代码
2017/05/19 Javascript
原生JS发送异步数据请求
2017/06/08 Javascript
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
2017/07/22 jQuery
jquery tmpl模板(实例讲解)
2017/09/02 jQuery
微信公众平台获取access_token的方法步骤
2019/03/29 Javascript
webpack.DefinePlugin与cross-env区别详解
2020/02/23 Javascript
vue-resource post数据时碰到Django csrf问题的解决
2020/03/13 Javascript
js+css实现全屏侧边栏
2020/06/16 Javascript
vue setInterval 定时器失效的解决方式
2020/07/30 Javascript
vue3+typeScript穿梭框的实现示例
2020/12/29 Vue.js
paramiko模块安装和使用(远程登录服务器)
2014/01/27 Python
ubuntu系统下使用pm2设置nodejs开机自启动的方法
2018/05/12 NodeJs
Python创建空列表的字典2种方法详解
2020/02/13 Python
python interpolate插值实例
2020/07/06 Python
python中numpy数组与list相互转换实例方法
2021/01/29 Python
彪马英国官网:PUMA英国
2019/02/11 全球购物
美国室内盆栽植物购买网站:Plants.com
2020/04/24 全球购物
仪器仪表检测毕业生自荐信
2013/10/31 职场文书
甜品店的创业计划书范文
2014/01/02 职场文书