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:sugggestion.js
Sep 02 Javascript
JS截取字符串常用方法详细整理
Oct 28 Javascript
js将字符串转成正则表达式的实现方法
Nov 13 Javascript
jQuery Mobile和HTML5开发App推广注册页
Nov 07 Javascript
Bootstrap的modal拖动效果
Dec 25 Javascript
BootStrap便签页的简单应用
Jan 06 Javascript
带你快速理解javascript中的事件模型
Aug 14 Javascript
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
Sep 14 Javascript
Element-ui table中过滤条件变更表格内容的方法
Mar 02 Javascript
vue车牌号校验和银行校验实战
Jan 23 Javascript
vue tab切换,解决echartst图表宽度只有100px的问题
Jul 19 Javascript
vue实现tab栏点击高亮效果
Aug 19 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
玩转图像函数库―常见图形操作
2006/09/03 PHP
PHP操作XML作为数据库的类
2010/12/19 PHP
Ubuntu下安装PHP的mongodb扩展操作命令
2015/07/04 PHP
php获取客户端IP及URL的方法示例
2017/02/03 PHP
Aster vs Newbee BO5 第三场2.19
2021/03/10 DOTA
运用Windows XP附带的Msicuu.exe、Msizap.exe来彻底卸载顽固程序
2007/04/21 Javascript
jquery json 实例代码
2010/12/02 Javascript
jquery动态添加删除一行数据示例
2014/06/12 Javascript
jQuery往textarea中光标所在位置插入文本的方法
2015/06/26 Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
2015/12/04 Javascript
解决JS组件bootstrap table分页实现过程中遇到的问题
2016/04/21 Javascript
基于jQuery的AJAX和JSON实现纯html数据模板
2016/08/09 Javascript
将form表单通过ajax实现无刷新提交的简单实例
2016/10/12 Javascript
微信小程序实现自定义picker选择器弹窗内容
2020/05/26 Javascript
Vue双向绑定实现原理与方法详解
2020/05/07 Javascript
Vue和React有哪些区别
2020/09/12 Javascript
Python中字符编码简介、方法及使用建议
2015/01/08 Python
Python自定义scrapy中间模块避免重复采集的方法
2015/04/07 Python
python开发之tkinter实现图形随鼠标移动的方法
2015/11/11 Python
python开发之文件操作用法实例
2015/11/13 Python
视觉直观感受若干常用排序算法
2017/04/13 Python
python删除服务器文件代码示例
2018/02/09 Python
对Python中type打开文件的方式介绍
2018/04/28 Python
对Python 内建函数和保留字详解
2018/10/15 Python
win7下 python3.6 安装opencv 和 opencv-contrib-python解决 cv2.xfeatures2d.SIFT_create() 的问题
2019/10/24 Python
详解如何使用rem或viewport进行移动端适配
2020/08/14 HTML / CSS
澳大利亚最受欢迎的美发和美容在线商店:Catwalk
2018/12/12 全球购物
aden + anais英国官网:美国婴儿贴身用品品牌
2019/09/08 全球购物
视图的作用
2014/12/19 面试题
介绍一下Make? 为什么使用make
2016/07/31 面试题
EJB的几种类型
2012/08/15 面试题
战友聚会邀请函
2014/01/18 职场文书
小学生期末评语
2014/04/21 职场文书
知识改变命运演讲稿
2014/05/21 职场文书
2014审计局领导班子民主生活会对照检查材料思想汇报
2014/09/20 职场文书
健康状况证明模板
2014/10/23 职场文书