1.layer
(1).layer是一种第三方库,用于弹框。
(2).网址:http://layer.layui.com/
(3).引用:
<script src="layer-v3.0.3/layer/layer.js"></script>
(4).案例:
询问框:
layer.confirm('您是如何看待前端开发?', {
btn: ['重要','奇葩'] //按钮
}, function(){
layer.msg('的确很重要', {icon: 1});
}, function(){
layer.msg('也可以这样', {
time: 20000, //20s后自动关闭
btn: ['明白了', '知道了']
});
});
提示层:
layer.msg('玩命提示中');
(5).layer官网上的代码可直接引用。
2.bootstrap
(1).bootstrap是一种第三方库,用于美化页面。
(2).网址:http://www.bootcss.com/
(3).引用:
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" />
(4).案例:
表格:
<table class="table">
<caption>基本的表格布局</caption>
<thead>
<tr>
<th>名称</th>
<th>城市</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
</tr>
</tbody>
</table>
按钮:
<button type="button" class="btn btn-primary">按钮</button>
(5).class属性值不能随便更改,如果随便更改样式可能就会消失,如果想在bootstrap样式上添加一些新样式建议使用行内样式。
3.在线编辑器
(1).在线编辑器是一种第三方库,可以让用户获得可编辑效果。
(2).网址:http://kindeditor.net/demo.php
(3).引用
<script src="kindeditor-master/kindeditor-all.js"></script>
(4).案例
在HTML加上
<textarea id="editor_id" name="content" style="700px;height:300px;"></textarea>
在script标记中加上
$(function(){
KindEditor.ready(function(K) {
window.editor = K.create('#editor_id');
});
});
(5).在线编辑器的引用位置jquery的引用位置的后面,因为在线编辑器里有jquery代码。