<!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切换的更多相关文章

  1. 7月新的开始 - LayUI的基本使用 - Tab选项卡切换显示对应数据

    LayUI tab选项卡+page展示 要求:实现tab选项卡改变的同时展示数据也跟着改变 实现条件: 1. 选项卡 [官网 – 文档/示例 – 页面元素 – 选项卡] 2.数据表格 [官网 – 文档 ...

  2. LayUI的基本使用 - Tab选项卡切换显示对应数据

    要求:实现tab选项卡改变的同时展示数据也跟着改变 实现条件: 1. 选项卡 [官网 – 文档/示例 – 页面元素 – 选项卡] 2.数据表格 [官网 – 文档/示例 – 内置模块 – 数据表格] 3 ...

  3. layui 框架 table插件 实现键盘快捷键 切换单元格编辑

    最近使用layui的框架时,发现table插件不支持键盘快捷键切换单元格,花了点时间实现此功能. 分享给有需要的朋友们~~~ 效果图 代码: 1.支持 enter,上,下,右键 切换单元格,支持隐藏列 ...

  4. layui中的tab切换

    tab切换是常见的效果,为了方便经常使用插架中自带的,下面是layui中自带的tab切换效果, 主要代码如下: <!DOCTYPE html> <html lang="en ...

  5. layui table 行按钮事件，启用禁用切换

    {{# ){ }} <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="forbidden& ...

  6. 分页组件 - layui.laypage

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  7. Layui的一点小理解（上）

    首先声明这是个人的一点理解,如有不对之处请指正,以下的例子有在官网上看到的,有的是自己写的.还是老规矩最后会附上官网的,如有不明白之处,请查看文档或留言. 既然说Layui,当然要简单的介绍以下什么是 ...

  8. layui 轮播图动态数据不显示问题

    layui.use('carousel', function() { var carousel = layui.carousel; var ins = carousel.render({ elem: ...

  9. layui报错 "Layui hint: 模块名 xxx 已被占用" 的问题解决方案

    由于扩展模块数量众多, 于是我需要将扩展模块分类到二级文件夹中, 我在页面中是这么写的 <script> layui.extend({ courseTask: 'task/courseTa ...

随机推荐

  1. 转：HR schema

    ###createe RemRem $Header: hr_cre.sql 29-aug-2002.11:44:03 hyeh Exp $RemRem hr_cre.sqlRemRem Copyrig ...

  2. 有哪些可能的原因导致BDE死掉啊啊，求救了，谢谢

    一个服务程序在后台跑,用到了BDE访问SQLServer,隔了一段时间就会莫名其妙的与数据库连接失败,查了一下BDE,发现已经死掉了,bde administrator也无法打开,报错,重启或注销机器 ...

  3. LODOP中的各种宽高和位置简短问答

    LODOP中的位置边距,可查看本博客另一篇相关博文:LODOOP中的各种边距 打印项.整体偏移.可打区域.内部边距关于LODOP中的各种宽高,可查看本博文简短问答下方的正文:.该文其实有两个以前的相关 ...

  4. 神啊，看看Log4Net这个东西吧

    这个东西实在是让人感动的想哭囊…………-_-..... Log4Net.config文件 <?xml version="1.0" encoding="utf-8&q ...

  5. 如何在Windows Server 2008 R2中更改桌面图标

    如何在Windows Server 2008 R2中更改桌面图标 Windows Server 2008 R2 已经在 MSDN 和 TechNet Plus 订阅上公布,gOxiA 在第一时间下载并 ...

  6. web端自动化——自动化测试准备工作

    准备工作# 在开始自己项目的自动化测试之前,我们最好已经完成了下面的准备工作: 1.熟悉待测系统 对项目的待测系统整体功能和业务逻辑有比较清晰的认识. 2.编写系统的自动化测试用例大纲和自动化测试用例 ...

  7. linux如何找回已经删除的文件？lsof

    简介 lsof(list open files)是一个列出当前系统打开文件的工具.在linux环境下,任何事物都以文件的形式存在,通过文件不仅仅可以访问常规数据,还可以访问网络连接和硬件.所以如传输控 ...

  8. 【嵌入式硬件Esp32】（1）例程Hello World Example 注释

    /* Hello World Example This example code is in the Public Domain (or CC0 licensed, at your option.) ...

  9. Mac下WordPress4.1安装使用笔记

    WordPress简介         WordPress是一种使用PHP语言开发的博客平台,用户可以在支持PHP和MySQL数据库的服务器上架设属于自己的网站.也可以把 WordPress当作一个内 ...

  10. QT qml---- loader使用方法

    "简洁是智慧的灵魂,冗长是肤浅的藻饰"------------------<哈姆莱特>莎士比亚 Import Statement: import QtQuick 2.5 ...