layui切换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="__STATIC__/add/layui/css/layui.css" media="all">
<!-- 注意:如果你直接复制所有代码到本地,上述css路径需要改成你本地的 -->
</head>
<body> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
<legend>简洁风格的Tab</legend>
</fieldset> <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
<ul class="layui-tab-title">
<li class="layui-this">网站设置</li>
<li>用户管理</li>
<li>权限分配</li>
<li>商品管理</li>
<li>订单管理</li>
</ul>
<div class="layui-tab-content" style="height: 100px;">
<div class="layui-tab-item layui-show">
<textarea id="demo" style="display: none;">{$list['title']}</textarea>
</div>
<div class="layui-tab-item">
<textarea id="demo2" style="display: none;">{$list['reference_money']}</textarea>
</div>
<div class="layui-tab-item">
<textarea id="demo3" style="display: none;">{$list['detail_img']}</textarea>
</div>
<div class="layui-tab-item">
<textarea id="demo4" style="display: none;">{$list['start_time']}</textarea>
</div>
<div class="layui-tab-item">
<textarea id="demo5" style="display: none;">{$list['end_time']}</textarea>
</div>
</div>
</div> </div> <script src="__STATIC__/js/jquery.min.js" charset="utf-8"></script>
<script src="__STATIC__/add/layui/layui.js" charset="utf-8"></script> <!-- 注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地的 -->
<script>
layui.use(['element','layedit'], function(){
var $ = layui.jquery
,element = layui.element; //Tab的切换功能,切换事件监听等,需要依赖element模块
var layedit = layui.layedit; layedit.set({
uploadImage: {
url: '{:url(\'Achievementactivity/layuitabupload\')}' //接口url
,type: '' //默认post
}
});
//注意:layedit.set 一定要放在 build 前面,否则配置全局接口将无效。
layedit.build('demo'); //建立编辑器
layedit.build('demo2'); //建立编辑器
layedit.build('demo3'); //建立编辑器
layedit.build('demo4'); //建立编辑器
layedit.build('demo5'); //建立编辑器 });
</script> </body>
</html>
layui切换的更多相关文章
- 7月新的开始 - LayUI的基本使用 - Tab选项卡切换显示对应数据
LayUI tab选项卡+page展示 要求:实现tab选项卡改变的同时展示数据也跟着改变 实现条件: 1. 选项卡 [官网 – 文档/示例 – 页面元素 – 选项卡] 2.数据表格 [官网 – 文档 ...
- LayUI的基本使用 - Tab选项卡切换显示对应数据
要求:实现tab选项卡改变的同时展示数据也跟着改变 实现条件: 1. 选项卡 [官网 – 文档/示例 – 页面元素 – 选项卡] 2.数据表格 [官网 – 文档/示例 – 内置模块 – 数据表格] 3 ...
- layui 框架 table插件 实现键盘快捷键 切换单元格编辑
最近使用layui的框架时,发现table插件不支持键盘快捷键切换单元格,花了点时间实现此功能. 分享给有需要的朋友们~~~ 效果图 代码: 1.支持 enter,上,下,右键 切换单元格,支持隐藏列 ...
- layui中的tab切换
tab切换是常见的效果,为了方便经常使用插架中自带的,下面是layui中自带的tab切换效果, 主要代码如下: <!DOCTYPE html> <html lang="en ...
- layui table 行按钮事件,启用禁用切换
{{# ){ }} <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="forbidden& ...
- 分页组件 - layui.laypage
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- Layui的一点小理解(上)
首先声明这是个人的一点理解,如有不对之处请指正,以下的例子有在官网上看到的,有的是自己写的.还是老规矩最后会附上官网的,如有不明白之处,请查看文档或留言. 既然说Layui,当然要简单的介绍以下什么是 ...
- layui 轮播图动态数据不显示问题
layui.use('carousel', function() { var carousel = layui.carousel; var ins = carousel.render({ elem: ...
- layui报错 "Layui hint: 模块名 xxx 已被占用" 的问题解决方案
由于扩展模块数量众多, 于是我需要将扩展模块分类到二级文件夹中, 我在页面中是这么写的 <script> layui.extend({ courseTask: 'task/courseTa ...
随机推荐
- matlab学习笔记2--matlab的帮助
一起来学matlab-matlab学习笔记2--matlab的帮助 觉得有用的话,欢迎一起讨论相互学习~Follow Me 参考书籍 <matlab 程序设计与综合应用>张德丰等著 感谢张 ...
- vue react 路由history模式刷新404问题解决方案
vue单页因微信分享和自动登录需要,对于URL中存在’#’的地址,处理起来比较坑.用history模式就不会存在这样的问题.但是换成history模式,就会有个新的问题,就是页面刷新后,页面就无法显示 ...
- 【Tools】PDF编辑软件-pdfelement 6.8 官网文件中文+破解版本
试用了下,感觉还不错分享给大家. 有币的求赏,小弟下载缺币.没币的从附件下载. 赏币地址:https://download.csdn.net/download/qq_18187161/10744059 ...
- orleans 的一种模式
为了避免过热的grain,按时间%cpu数,分派任务到grain中,然后有限制的去访问原来过热的grain.eg:tokengrain,1个半小时后,更新所有的grain.
- Jira强制退出时(如意外停电)再启动报Locked错误的几个解决办法
查看jira_home的路径在/opt/atlassian/jira/atlassian-jira/WEB-INF/classes/jira-application.properties文件中查看 方 ...
- php类的继承(基本概念,访问权限修饰符,重写override)
类的继承 简单理解: 某个类A具有某些特征,另一个类B,也具有A类的所有特征,并且还可能具有自己的更多的一些特征,此时,我们就可以实现:B类使用A的特征信息并继续添加自己的一些特有特征信息. 基本概念 ...
- Java面试 - 复制引用和复制对象的区别?
复制引用:把原对象的地址赋给了一个新的引用变量,只要其中一个对象的属性发生变化,另一个对象的属性也随之发生变化. 复制对象:把原对象的内容赋给了一个新的对象,其中一个对象的属性发生变化,并不影响另一个 ...
- Linux DHCP 服务器配置与管理
一.环境介绍: 运行软件:VMware Workstation Pro 14 系统环境:CentOS-7-x86_64-1810 二.操作配置: 1.DHCP 服务器搭建 1)安装DHCP yum i ...
- 【转载】Maven入门实践
Maven 确确实实是个好东西,用来管理项目显得很方便,但是如果是通过 Maven 来远程下载 JAR 包的话,我宿舍的带宽是4兆的,4个人共用,有时候用 Maven 来远程下载 JAR 包会显得很慢 ...
- thrift原理与架构
是什么: 一个RPC框架.