AdminLTE3 入门，部分js插件介绍

最新推荐文章于 2022-08-11 08:30:00 发布

风神.NET跨平台

最新推荐文章于 2022-08-11 08:30:00 发布

阅读量2k

点赞数

原文链接：https://blog.csdn.net/WuLex

版权

AdminLTE2，AdminLTE3 UI框架专栏收录该内容

7 篇文章 4 订阅

订阅专栏

最佳开源管理仪表板和控制面板主题。 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>

基本使用

-- 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/

5. 穿梭框

GitHub：https://github.com/istvan-ujjmeszaros/bootstrap-duallistbox

不能分页，不能加载大量数据

# 使用远程数据，只能手动添加 option
selectorx.append('<option value="9" selected>ops-coffee.cn</option>');
selectorx.bootstrapDualListbox('refresh');

风神.NET跨平台

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
AdminLTE3 入门，部分js插件介绍

最佳开源管理仪表板和控制面板主题。 AdminLTE 建立在 Bootstrap 之上，提供了一系列响应式、可重用和常用的组件。1. 安装yarn add admin-ltegit clone https://github.com/ColorlibHQ/AdminLTE.git2. 依赖- Bootstrap 4- jQuery 3.3.1+- Popper.js 1.14.7+- 其他Plugins# popper.min.js 用于设置弹窗、提示、下拉菜单# 目前 bootstra
复制链接

扫一扫