AdminLTE3 入门，部分js插件介绍

分手后的思念是犯贱 2021-06-26 16:06 1068阅读 0赞

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

<link rel="stylesheet" href="./static/plugins/fontawesome-free/css/all.min.css">
    
    <link rel="stylesheet" href="./static/adminlte/css/adminlte.min.css">
    
    <link rel="stylesheet" href="./static/plugins/sweetalert2-theme-bootstrap-4/bootstrap-4.min.css">
    
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
    
    
    <script src="./static/plugins/jquery/jquery.min.js"></script>
    <script src="./static/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
    
    <script src="./static/adminlte/js/adminlte.min.js"></script>
    
    <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>
        
        <link rel="stylesheet" href="./plugins/fontawesome-free/css/all.min.css">
        
        <link rel="stylesheet" href="./dist/css/adminlte.min.css">
        
        <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">
            
            <nav></nav>
    
            
            <aside></aside>
    
            
            <div class="content-wrapper">
                
                <div class="content-header"></div>
    
                
                <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>
    
            
            <footer></footer>
        </div>
    
        
        <script src="./plugins/jquery/jquery.min.js"></script>
        
        <script src="./plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
        
        <script src="./dist/js/adminlte.min.js"></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');