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>
<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却出不了结果的主要内容,如果未能解决你的问题,请参考以下文章