AdminLTE3 入门，以及部分js插件介绍
AdminLTE3 UI框架
最佳开源管理仪表板和控制面板主题。 AdminLTE 建立在 Bootstrap 之上，提供了一系列响应式、可重用和常用的组件。
1. 安装
yarn add admin-lte
git clone https://github.com/ColorlibHQ/AdminLTE.git
2. 依赖
- Bootstrap 4
- jQuery 3.3.1+
- Popper.js 1.14.7+
- 其他Plugins
# popper.min.js 用于设置弹窗、提示、下拉菜单
# 目前 bootstrap.bundle.min.js 已经包含了 popper.min.js。
3. 页面引用
<!-- Font Awesome Icons -->
<link rel="stylesheet" href="./static/plugins/fontawesome-free/css/all.min.css">
<!-- Theme Style -->
<link rel="stylesheet" href="./static/adminlte/css/adminlte.min.css">
<!-- SweetAlert2 -->
<link rel="stylesheet" href="./static/plugins/sweetalert2-theme-bootstrap-4/bootstrap-4.min.css">
<!-- Google Font: Source Sans Pro -->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
<!-- Base -->
<script src="./static/plugins/jquery/jquery.min.js"></script>
<script src="./static/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLte -->
<script src="./static/adminlte/js/adminlte.min.js"></script>
<!-- SweetAlert2 -->
<script src="./static/plugins/sweetalert2/sweetalert2.min.js"></script>
4. 图标 （Font Awesome）
官网：http://www.fontawesome.com.cn/
你可以通过设置CSS前缀fa和图标的具体名称，来把Font Awesome 图标放在任意位置。
Font Awesome 被设计为用于行内元素
<i class="fa fa-camera-retro"></i>
# 改变大小 (33% 递增)
<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x
5. 表单
<div class="card card-primary">
<div class="card-header">
<h3 class="card-title">Quick Example</h3>
</div>
<form role="form">
<div class="card-body">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
</div>
<div class="card-footer">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
<div class="card card-primary">
<div class="card-header">
<h3 class="card-title">Quick Example</h3>
</div>
<form role="form" class="form-horizontal">
<div class="card-body">
<div class="form-group row">
<label for="exampleInputEmail1" class="col-sm-2 col-form-label">Email address</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
</div>
<div class="card-footer">
<button type="submit" class="btn btn-primary">Submit</button>
<button type="submit" class="btn btn-default float-right">Cancel</button>
</div>
</form>
</div>
完整页面结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- Font Awesome Icons -->
<link rel="stylesheet" href="./plugins/fontawesome-free/css/all.min.css">
<!-- Theme Style -->
<link rel="stylesheet" href="./dist/css/adminlte.min.css">
<!-- Google Font: Source Sans Pro -->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
</head>
<body class="hold-transition sidebar-collapse">
<div class="wrapper">
<!-- Navbar -->
<nav></nav>
<!-- Main Sidebar Container -->
<aside></aside>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<div class="content-header"></div>
<!-- Main content -->
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="card card-primary card-outline">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the
card's
content.
</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Main Footer -->
<footer></footer>
</div>
<!-- jQuery -->
<script src="./plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="./plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE -->
<script src="./dist/js/adminlte.min.js"></script>
<!-- Page specific script -->
<script>
$(function () {
})
</script>
</body>
</html>
JS插件介绍
1. 富文本编辑器
官网：https://summernote.org/
-- adminlte之后
<link rel="stylesheet" href="./plugins/summernote/summernote-bs4.css">
<script src="./plugins/summernote/summernote-bs4.min.js"></script>
<script src="./plugins/summernote/lang/summernote-zh-CN.min.js"></script>
基本使用
-- html
<div class="card-body pad">
<div class="mb-3">
<textarea class="textarea" id="summernote" placeholder="Place some text here"
style="width: 100%; height: 200px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;"></textarea>
</div>
<p class="text-sm mb-0">
Editor <a href="https://github.com/summernote/summernote">Documentation and license
information.</a>
</p>
</div>
<script>
-- js
$('#summernote').summernote({
lang: 'zh-CN'
})
-- get
var markupStr = $('#summernote').summernote('code');
-- set
$('#summernote').summernote('code', markupStr);
-- enable, disable
$('#summernote').summernote('enable');
$('#summernote').summernote('disable');
</script>
2. 图片上传
官网：https://github.com/enyo/dropzone
3. 下拉框
官网：https://select2.org/
-- adminlte之前引入
<link rel="stylesheet" href="./plugins/select2/css/select2.min.css">
<script src="./plugins/select2/js/select2.min.js"></script>
1
2
3
4
5
基本使用
-- html
<div class="form-group">
<label>Minimal</label>
<select class="form-control select2" style="width: 100%;">
<option selected="selected">Alabama</option>
<option>Alaska</option>
<option>California</option>
<option>Delaware</option>
<option>Tennessee</option>
<option>Texas</option>
<option>Washington</option>
</select>
</div>
-- js
$('.select2').select2()
动态数据
-- array
$('#bmcpSelect').select2({
placeholder: '分类',
或
placeholder: {
id: '-1',
text: '分类'
},
minimumResultsForSearch: -1, // 隐藏搜索框
allowClear: true,
language: 'zh-CN',
theme: "bootstrap4", // 主题
data: [
{ "id": 1, "text": "Option 1" },
{ "id": 2, "text": "Option 2", "selected": true },
{ "id": 3, "text": "Option 3", "disabled": true }
],
})
-- ajax
$('#bmcpSelect').select2({
ajax: {
url: 'http://localhost:3721/api/select',
dataType: 'json',
// 请求参数 ?Type=1
data: {
'Type': 1
},
// 返回结果
processResults: res => ({results: res.data})
}
})
-- 查询、分页 "infinite scrolling"
$('#bmcpSelect').select2({
ajax: {
delay: 500,
url: 'http://localhost:3721/api/select',
dataType: 'json',
data: (params) => ({
search: params.term,
page: params.page || 1
}),
processResults: (res, params) => ({
results: res.data,
pagination: {
more: (params.page || 1) * 5 < res.count
}
}),
}
})
4. Lightbox
官网：http://ashleydw.github.io/lightbox/
1
5. 穿梭框
GitHub：https://github.com/istvan-ujjmeszaros/bootstrap-duallistbox
不能分页，不能加载大量数据
# 使用远程数据，只能手动添加 option
selectorx.append('<option value="9" selected>ops-coffee.cn</option>');
selectorx.bootstrapDualListbox('refresh');