layui的CSS 和layui.all.js 文件分别载入文件后,为啥对DIV里的设置了对应的class却出不了结果

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了layui的CSS 和layui.all.js 文件分别载入文件后,为啥对DIV里的设置了对应的class却出不了结果相关的知识,希望对你有一定的参考价值。

<div class="layui-tab layui-tab-card">
<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">1</div>
<div class="layui-tab-item">2</div>
<div class="layui-tab-item">3</div>
<div class="layui-tab-item">4</div>
<div class="layui-tab-item">5</div>
<div class="layui-tab-item">6</div>
</div>
</div>

参考技术A <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>layui.form小例子</title>
<link rel="stylesheet" href="layui.css" media="all">
</head>
<body>
<form class="layui-form"> <!-- 提示:如果你不想用form,你可以换成div等任何一个普通元素 -->
<div class="layui-form-item">
<label class="layui-form-label">输入框</label>
<div class="layui-input-block">
<input type="text" name="" placeholder="请输入" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">下拉选择框<

layui快速上手

第一步当然是下载 并引入layui的文件 layui.css   ayui.js  官网中还有一个layui.all.js  等会再看它的用处

引用好了之后可以来看一个基本页面

<link href="layui/css/layui.css" rel="stylesheet" />
<script src="layui/layui.js"></script>
<script>
layui.use([‘layer‘, ‘form‘], function () {
var layer = layui.layer
, form = layui.form;
layer.msg(‘Hello World‘);
});
</script>

如你所见 这个页面跟alert()的功能差不多 实现一个带有样式的弹窗 到这里layui的第一步已经实现了

模块化的用法:下面介绍的是第一种用法模块化,也是官网所推荐的 如

layui.use([‘layer‘, ‘form‘], function () {
var layer = layui.layer
, form = layui.form;
layer.msg(‘Hello World‘);
});

在这一段代码中  就引入了两个模块  layer模块 和form模块 引入多个模块就用数组  单个就 采用单个的写法 :layui.use(‘form‘, function(){})

当你在你的 页面引入layui.all.js  时就代表你希望一开始就加载所有的模块 后面就不必再去声明他们了(这种方法省事)

如下的用法 

<script>
; !function () {
var layer = layui.layer
, form = layui.form;

layer.msg(‘Hello World‘);
}();
</script>

 


















以上是关于layui的CSS 和layui.all.js 文件分别载入文件后,为啥对DIV里的设置了对应的class却出不了结果的主要内容,如果未能解决你的问题,请参考以下文章

分享知识快乐自己:Layui 常用样式

layui的模块化和非模块化使用

关于layui弹出层的使用

layui的图片上传使用

layui可以像easyui那样用js的方式加载吗

layui use render 等函数的意思。