精华内容
下载资源
问答
  • jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
  • layui 点击链接复制内容到剪切板

    万次阅读 2019-04-10 09:16:05
    var tableObj = table.render({ id: 'list_table', elem: '#list_table', url: '', ... alert('复制成功'); clipboard.destroy(); //解决多次弹窗 e.clearSelection(); }); } })
    var tableObj = table.render({
                id: 'list_table',
                elem: '#list_table',
                url: '',
                align: "center",
                cols: [[ //表头
                    {type: 'checkbox'},
                    {type: 'numbers', title: '序号',width:80},
                    {
                        field: 'lock', title: '链接', align: 'center', templet: function (d) {
                        return   '<a href="javascript:;" data-clipboard-text="" class="font-primary" lay-event="share">分享</a>';
                    }, unresize: true, align: 'center'
                    }
                ]]
            });
    
     table.on('tool(mainList)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;
    		if (layEvent === 'share') {
    	              $(".font-primary").attr("data-clipboard-text",data.id);
    	              var clipboard = new ClipboardJS('.font-primary');
    	              clipboard.on('success', function(e) {
    	                  alert('复制成功');
    	                  clipboard.destroy();  //解决多次弹窗
    	                  e.clearSelection();
    	              });
    		 }
    	})
    
    展开全文
  • 每天早晨伴着花香,麦黄,听着鸟叫,蝉鸣,打开电脑,整理思路,进入代码数字的世界,简单的东西自己打,不会的功能找UI,来个弹出框,再搞个小表单,不想成为绞尽脑汁的成为秃头小可爱,那就复制粘贴改改改。...

    95058b2def065ef0efffef5076a9b556.png

    不知不觉我们已经进入了项目最后的冲刺期啦,

    每天早晨伴着花香,麦黄,

    听着鸟叫,蝉鸣,

    打开电脑,整理思路,

    进入代码数字的世界,

    简单的东西自己打,不会的功能找UI,

    来个弹出框,再搞个小表单,

    不想成为绞尽脑汁的成为秃头小可爱,

    那就复制粘贴改改改。

    b40a8fb47001ee39eb10e21671e58d6a.png

    (不要打扰我,我很快乐,日渐秃头算什么!!!)

    0ff11d7008032889e03fefada9496fd9.png

    fdcd1b9f768fb11b3c2ea9797661f1d2.gif

    1

    LayUI是什么

    f10bf42a41666738cc15207b18643924.gif

    layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到 API 的每一处细节都经过精心雕琢,非常适合界面的快速开发。layui 首个版本发布于 2016 年金秋,她区别于那些基于 MVVM 底层的 UI 框架,却并非逆道而行,而是信奉返璞归真之道。准确地说,她更多是为服务端程序员量身定做,你无需涉足各种前端工具的复杂配置,只需面对浏览器本身,让一切你所需要的元素与交互,从这里信手拈来。

    fdcd1b9f768fb11b3c2ea9797661f1d2.gif

    2

    layui怎么下载

    (1):官网下载:“https://www.layui.com/解压再下载”

    5159f760448bdf12279227b1d4858f8b.png

    (2):github官网下载:“https:github.com/sentsin/layui/.

    4b80065d921ceceb5480142d70d837da.png

    (3):npm下载,下载命令为npm I layui-src 

    36315bfde11e1031e6cf2f17a57a7630.png

    快速上手:

    获得 layui 后,将其完整地部署到你的项目目录(或静态资源服务器),你只需要引入下述两个文件:

    7a5e35d08a582f77d90a1ef998fceae2.png

    应该如何加载模块?

    事实上我们在模块规范已经有明确地说明,你可以采用预先加载和按需加载两种模式,但后者我们并不推荐(文档也解释原因了)。因此我们强烈推荐的方式是:你应该在你js文件的代码最外层,就把需要用到的模块 layui.use一下,如:

    9c6afd8b0e915db988dd8e6ac16316b7.png

    fdcd1b9f768fb11b3c2ea9797661f1d2.gif

    3

    为什么使用layui

    Layui的存在价值

    事实上,layui更多是面向于后端开发者,所以在组织形式上毅然采用了几年前的以浏览器为宿主的类 AMD 模块管理方式,却又并非受限于 CommonJS 的那些条条框框,它拥有自己的模式,更加轻量和简单。layui 定义为“经典模块化”,并非是刻意强调“模块”理念本身,而是有意避开当下 JS 社区的主流方案,试图以尽可能简单的方式去诠释高效!它的所谓经典,是在于对返璞归真的执念,它以当前浏览器普通认可的方式去组织模块!layui 认为这种轻量的组织方式,仍然可以填补 WebPack 以外的许多场景。所以它坚持采用经典模块化,也正是能让人避开工具的复杂配置,重新回归到原生态的HTML/CSS/JavaScript本身!

    fdcd1b9f768fb11b3c2ea9797661f1d2.gif

    4

    layui的模块和元素有哪些

    元素与模块:

    元素:布局(栅格、后台布局)、颜色、字体图标、动画、按钮、表单、导航条、面包屑、选项卡、进度条、面板、静态表格、徽章、时间线、辅助元素等。

    模块:layui 提供了丰富的内置模块,他们皆可通过模块化的方式按需加载,其中包括:layer、laydate、laypage、laytpl、table、form、upload、element、等。

    e642fb803cf64b84ddc995a67053dfa2.png

    d5b3bd736820aba79c5e6b27fbc8ac21.png fdcd1b9f768fb11b3c2ea9797661f1d2.gif

    5

    layui的兼容性和适应场景

    LayUI的兼容性及面向场景

    layui 兼容人类正在使用的全部浏览器(IE6/7除外),可作为 PC 端后台系统与前台界面的速成开发方案

    fdcd1b9f768fb11b3c2ea9797661f1d2.gif

    6

    layui的基本目录

    目录结构:

    ├─css //css目录

    │ │─modules //模块css目录(一般如果模块相对较大,会进行单独提取,比如下面三个)

    │ │ ├─laydate

    │ │ ├─layer

    │ │ └─layim

    │ └─layui.css //核心样式文件

    ├─font //字体图标目录

    ├─images //图片资源目录(目前只有layim和编辑器用到的GIF表情)

    │─lay //模块核心目录

    │ └─modules //各模块组件

    │─layui.js //基础核心库

    └─layui.all.js // 包含layui.js和所有模块的合并文件

    7e7a434f2bcfaee2c5ed18d902cea5c1.png

    好啦!LayUI的大致内容都给大家介绍完毕啦,相信大家对此都有了一个大概的了解,那么让我们再来说点儿项目期间的小事情吧

    680948fcefb6f23be76ecc3fa4a56e1a.png

    不知不觉我们的项目马上就要结束了,这段期间相信大家都在尽我所能的为各自的小团队付出努力着,有争吵,有欢笑,有汗水,也有泪水,有看到成功运行出效果的喜悦,也有排错排不出的崩溃,但是不管是什么,相信只要付出便会有收获,相信在这麦收果香的季节里,在每一个默默付出的深夜里,每一个人都有所成长,每一个团队都有收获胜利的喜悦,加油吧,各位小可爱们,愿你不秃头愿你有成就

    5c1fd668fd213bdf0078bdbb2810bcf4.png

    编辑:乐多

    审核:杨俊

    素材来源:学习部提供

    展开全文
  • layui的常用代码可以一键复制粘贴 一键复制layui代码的网址,点击此处调整 网址地址:http://www.shagua.wiki/project/3?p=84 点击按钮,直接复制按钮的代码

    layui的常用代码可以一键复制粘贴

    一键复制layui代码的网址,点击此处调整
    网址地址:http://www.shagua.wiki/project/3?p=84

    点击按钮,直接复制按钮的代码

    在这里插入图片描述

    展开全文
  • table.js 找到单元格缩放后,下拉展示内容 layui-table-grid-down 鼠标放上单元格时,显示复制按钮 a.layBody.on("click", "td", function (e) { ... } }).on("mouseenter", "td", function () { b.call(this) ...

    点击单元格复制内容在这里插入图片描述
    table.js 找到单元格缩放后,下拉展示内容 layui-table-grid-down

    鼠标放上单元格时,显示复制按钮

    a.layBody.on("click", "td", function (e) {
    			...
    }
    }).on("mouseenter", "td", function () {
    	b.call(this)
    	// 调用 ly 方法
    	ly.call(this)
    }).on("mouseleave", "td", function () {
    	b.call(this, "hide")
    	// 隐藏
    	ly.call(this, "hide")
    });
    var copy = "layui-table-list-copy",ly = function (e) {
    	var i = t(this), a = i.children(f);
    	if (e) i.find(".layui-table-list-copy").remove();
    	else if (i.attr('lay-event') === "PrimaryId" && a.prop("scrollWidth") === a.outerWidth()) {
    		if (a.find("." + copy)[0]) return;
    		// 插入icon,input框方便待会选中内容.
    		i.append('<div class="' + copy + '"><i class="layui-icon layui-icon-file-b"></i><input class="table-copy-text" style="display: none;" value="'+$(a).text()+'"></div>')
    	}
    }
    a.layBody.on("click","."+copy,function(e) {
    	var i = t(this), n = i.parent(), d = n.children(f), copyText = $('.table-copy-text');
    	// 显示 input
    	copyText.show();
    	d.contentEditable = true;
    	// 选择 input 内容
    	copyText.select();
    	try{
    		// 利用 document.execCommand 进行复制操作
    		if(document.execCommand("Copy","false",null)){
    			layer.msg('复制成功');
    		}else{
    			layer.msg("复制失败!请手动复制!");
    		}
    	}catch(err){
    		layer.msg("复制错误!请手动复制!")
    	}
    	copyText.hide();
    	layui.stope(e)
    });
    var g = "layui-table-grid-down", b = function (e) {
    	...
    };
    

    记得样式加上 全局搜索 layui-table-grid-down 样式有的都给 layui-table-list-copy 加上

    展开全文
  •   需求:从一张数据表格中选中需要的数据,点击添加按钮把选中的数据复制一份显示在另一个数据表格中。   应用环境:选择商品销售。   UI:   功能完成思路:Layui框架中的数据表格接收的数据是一个数组...
  • 点击此处,调整到演示网站
  • layui点击复制

    2021-06-16 16:37:58
    首先需要引用js文件, <script th:src="|${portalDomain}/commons/...然后在layui表格中加入一下属性 {field: 'coverUrl', title: '封面地址', align: 'center',sort:true,width:110,templet:function (d) { retu
  • 写input的css样式时,不能设置display:none,否则就不能复制;input要隐藏起来,可以设置opacity: 0; 点击弹框事件: layui.use('layer', function () { var layer = layui.layer; $(".m2_roll").on("click", ...
  • layui.use(['table', 'layer', 'form', 'upload','layedit'], function () { var table = layui.table , $ = layui.jquery , upload = layui.upload , layer = layui....
  • 今天小编就为大家分享一篇layui 富文本赋值,取值,取纯文本值的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 最近在学习使用layui的时候碰到了一个巨诡异的问题,使用layui-icon时出现了默认图标问题,先上图: ...以上这篇解决layui使用layui-icon出现默认图标的问题就是小编分享给大家的全部内容了,希望能给大家
  • 主要介绍了Layui弹框中数据表格中可双击选择一条数据的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 基于 链接: LAY-EXCEL 导出数据表格内容到excel ,记录下来后面用的时候copy 即用 有兴趣可以看看,copy起来要改改改,自己整理了方便下次copy copy 部分 导入js <script src=...
  • layui表格如何将新增的内容放在第一行?在线等
  • layui 富文本内容存储问题

    千次阅读 2019-05-16 19:47:19
    关于layui的富文本编辑内容存储问题 早上接到产品经理的反馈 说是注册协议的图文详情保存以及修改报错 马上去检查发现是图文详情的字段里面还有单引号(某种字体直接复制粘贴在富文本编辑器里面) 就会造成 你在...
  • form.verify({ content1: function(value) { return layedit.sync(index1); } });
  • layui内容自动填充

    2021-04-30 11:05:33
    如果复制官网上的代码不显示该效果 需要在下拉框的父级添加 :layui-form <div class="form-group"> <label class="col-sm-2 control-label">搜索选择框</label> <div class="layui-input-...
  • 第一步引入js 文件&lt;script src="./clipboard.min.js?v={:C('VERSION')}"... 我的邀请码: /*要复制内容*/ &lt;span class="span2" style="margin-left: 1%;"&
  • layui 清空Form表单数据

    2021-02-24 18:50:43
    $("#cjformid")[0].reset();;
  • 当表格中的内容太长缩略后,点击会弹出并显示全部,但是弹出之后切换分页或者点击左侧菜单切换页面,都不会消失。 解决方案一: 索性就让这个弹框不出现 添加样式 .layui-table-tips-main { display: none; } ....
  • Layui里面所包含的组件,官方都已提供了代码示例,包括我今天所分享的上传文件以及图片,下面是上传图片的前端源代码: 效果如图所示: 点击“商品图片”,可在本地选择图片进行上传,效果如下: 点击立即提交即可...
  • 下面贴出代码直接复制(上面红框是关键点,不要忘记复制): &lt;div class="layui-form-item"&gt; &lt;label class="layui-form-label"&gt;发布内容&lt;/lab...
  • 复制即可 $(document).on('click', function(event) { var tableTips = $('.layui-layer.layui-layer-tips.layui-table-tips'); if(tableTips.length) { var tagElem = event.target || event.srcElement; if...
  • layui iframe跳转页面内容显示不完全

    千次阅读 2018-07-29 09:22:52
    写后台的,对前端不是特别熟悉,做了一个页面发现页面内容显示了一部分,下面的提交按钮别遮住了,layui下拉滚动条也拉到底了 看到网上很多说,页面中的body体中的class="layui-layout-body"即可,...
  • Layui实现左侧点击菜单,右侧显示内容

    万次阅读 多人点赞 2019-08-16 17:20:49
    Layui实现左侧点击菜单,右侧显示内容 功能简介: layui实现点击左侧的菜单,在右侧显示内容。 其实并不是非要layui前端框架,这个左侧点击,右边显示内容的原理是iframe完成的,其它框架都可以实现。 1、核心代码 ...
  • 第一步:在templates目录下新建一个index.html文件(文件内容根据自己的业务需求在layui官网复制即可),同时改变其布局只需将form标签放到一个自定义div内,若要更改其标签颜色只需将内置的背景色CSS类添加到lable...
  • 使用layui框架以及IDEA遇到的问题

    千次阅读 2019-03-25 15:16:57
    解决方法:检查端口是否配置正确,检查hosts内容是否配置127.0.0.1的映射,最终将映射改为nantian问题得以解决 2.项目中webapp文件下的resources资源文件不能放到WEB-INF文件下,否则layui资源无法使用 3.Idea中运行...
  • <!DOCTYPE html> <html> <head> ...meta charset="utf-8">...layui</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatib...
  • layui介绍

    2021-01-10 18:04:00
    layui介绍: ​ layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,开箱即用。 ​ layui 兼容人类正在使用的全部浏览器(IE6/7除外),可作为 PC 端...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,206
精华内容 482
关键字:

layui复制内容