Hello Hexo

  • John Doe
  • 43 Minutes
  • April 26, 2017

功能列表

导航栏

方案：Bootstrap

1
2
3
4
5
6
7
8
// 引入js和css文件
<link href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.3/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="navbar-header"></div>
  <div class="collapse navbar-collapse"></div>
</nav>

效果：
导航栏

列表/图标

方案：jQueryUI

引入jQuery和jQuery UI文件：

1
2
3
<link rel='stylesheet' href='http://libs.useso.com/js/jqueryui/1.10.4/css/jquery-ui.min.css'>
<script src='http://libs.useso.com/js/jquery/1.11.0/jquery.min.js'></script>
<script src='http://libs.useso.com/js/jqueryui/1.10.4/jquery-ui.min.js'></script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<main id='container'>
  <header id='header'>
    <span>View:</span>
    <button class='view-list'>List</button>
    <button class='view-grid'>Grid</button>
  </header>
  <ol class='grid' id='frame'>
    <!-- 每一个frame代表一个文件 -->
    <li class='frame'>
      <div class='inset'>
        <div class='image'></div>
        <div class='info'>
          <div class='title'>Lorem Ipsum</div>
          <div class='description'></div>
          <div class='shares'>
            <div class='icon-lik likes'></div>
            <div class='icon-ask comments'></div>
          </div>
        </div>
      </div>
    </li>
  </ol>
  ......
</main>

效果：

缩略图
列表

树

方案：bootstrap-treeview

1
2
3
4
5
6
<!-- Required Stylesheets -->
<link href="./css/bootstrap.css" rel="stylesheet">
<!-- Required Javascript -->
<script src="./js/jquery.js"></script>
<script src="./js/bootstrap-treeview.js"></script>

设置控件容器：

1
<div id="tree"></div>

最基本的调用方法（详细见参考链接）：

1
$('#tree').treeview({data: defaultData});

效果：

文件树

统计图表

方案：Highcharts

1
2
// 引入js文件
<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>

初始化图表：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
var chart = new Highcharts.Chart({
 chart: {
   renderTo: 'con', // 图表渲染的节点id
   type: 'column'   // 图表的类型
 },
 title: {
   // 副标题
 },
 subtitle: {
   // 副标题
 },
 xAxis: {
   // 横坐标参数
 },
 yAxis: {
   // 纵坐标参数
 }
 tooltip: {
   // 鼠标划过图表时的提示信息
 },
 plotOptions: {
   // 其他样式设置
 },
 series: [{ // 数据源
   name: 'New York',
   data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
 }, {
   name: 'London',
   data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
 }, {
   name: 'Berlin',
   data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
 }]
 })

效果：

统计图表

消息

方案：bootstrap > badge

1
<a class="message">消息 <span class="badge">5</span></a>

效果：消息

弹出菜单

方案：bootstrap-menu

1
<script src="./js/BootstrapMenu.min.js"></script>

应用举例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var menu = new BootstrapMenu('#button', {
  actions: [{
      name: 'Action',
      onClick: function() {
        // run when the action is clicked
      }
    }, {
      name: 'Another action',
      onClick: function() {
        // run when the action is clicked
      }
    }, {
      name: 'A third action',
      onClick: function() {
        // run when the action is clicked
      }
  }]
});

效果：

菜单

提示框

方案：Toastr

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// Display an info toast with no title
toastr.info('Are you the 6 fingered man?')
// Display a warning toast, with no title
toastr.warning('My name is Inigo Montoya. You killed my father, prepare to die!')
// Display a success toast, with a title
toastr.success('Have fun storming the castle!', 'Miracle Max Says')
// Display an error toast, with a title
toastr.error('I do not think that word means what you think it means.', 'Inconceivable!')
// Immediately remove current toasts without using animation
toastr.remove()
// Remove current toasts using animation
toastr.clear()

效果：

提示框

浮动窗口浏览

方案：bootstrap > modal

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<button type="button" class="btn btn-success btn-lg" data-toggle="modal" data-target="#myModal">悬浮窗</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                  </button>
        <h4 class="modal-title" id="myModalLabel">
          模态框（Modal）标题
        </h4>
      </div>
      <div class="modal-body">
        <iframe src="http://www.baidu.com" width="100%" height="100%" />
      </div>
    </div>
  </div>
</div>

效果：

浮动窗

文件批量上传

方案：Stream上传插件

1
2
<link href="./css/stream-v1.css" rel="stylesheet">
<script src="./js/stream-v1.js"></script>

相关参数配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
/**
 * 配置文件（如果没有默认字样，说明默认值就是注释下的值）
 */
var config = {
    browseFileId: "i_select_files", /** 选择文件的ID, 默认: i_select_files */
    browseFileBtn: "<div class='btn btn-default'>请选择文件</div>", /** 显示选择文件的样式, 默认: `<div>请选择文件</div>` */
    dragAndDropArea: "i_select_files", /** 拖拽上传区域，Id（字符类型"i_select_files"）或者DOM对象,取消该项可不设置拖拽区域,默认: `i_select_files` */
    dragAndDropTips: "<span>把文件(文件夹)拖拽到这里</span>", /** 拖拽提示, 默认: `<span>把文件(文件夹)拖拽到这里</span>` */
    filesQueueId: "i_stream_files_queue", /** 文件上传容器的ID, 默认: i_stream_files_queue */
    filesQueueHeight: 150, /** 文件上传容器的高度（px）, 默认: 450 */
    messagerId : "i_stream_message_container", /** 消息显示容器的ID, 默认: i_stream_message_container */
    multipleFiles: true, /** 多个文件一起上传, 默认: false */
    autoUploading: false, /** 选择文件后是否自动上传, 默认: true */
    autoRemoveCompleted: true, /** 是否自动删除容器中已上传完毕的文件, 默认: false */
    maxSize: 104857600//, /** 单个文件的最大大小，默认:2G */
    retryCount : 5, /** HTML5上传失败的重试次数 */
    postVarsPerFile : { /** 上传文件时传入的参数，默认: {} */
      param1: "val1",
      param2: "val2"
    },
    swfURL: "swf/FlashUploader.swf", /** SWF文件的位置 */
    tokenURL: "php/upload.php?action=tk", /** 根据文件名、大小等信息获取Token的URI（用于生成断点续传、跨域的令牌） */
    frmUploadURL: "php/upload.php?action=fd;", /** Flash上传的URI */
    uploadURL: "php/upload.php?action=up", /** HTML5上传的URI */
    simLimit: 200, /** 单次最大上传文件个数 */
    extFilters: [".txt", ".rpm", ".rmvb", ".gz", ".rar", ".zip", ".avi", ".mkv", ".mp3"], /** 允许的文件扩展名, 默认: [] */
    onSelect: function (list) {//选择文件后的响应事件
        // TODO
    },
    onMaxSizeExceed: function (size, limited, name) {//文件大小超出的响应事件
        toastr.error("文件大小超出限制！");
    },
    onFileCountExceed: function (selected, limit) {//文件数量超出的响应事件
        toastr.error("文件数量超出限制！");
    },
    onExtNameMismatch: function (name, filters) {//文件的扩展名不匹配的响应事件
        toastr.error("不支持的文件类型！");
    },
    onCancel: function (file) {//取消上传文件的响应事件
        toastr.warning("文件上传取消。");
    },
    onComplete: function (file) {//单个文件上传完毕的响应事件
        // TODO
    },
    onQueueComplete: function () {//所以文件上传完毕的响应事件
        toastr.success("文件上传完成。");
    },
    onUploadError: function (status, msg) {//文件上传出错的响应事件
        toastr.error("文件上传出错！");
    }
};
var _t = new Stream(config);

效果：

上传文件

富文本编辑器

方案：LineControl Editor

1
2
3
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link href="editor.css" type="text/css" rel="stylesheet"/>
<script src="editor.js"></script>

设置富文本编辑器的容器：

1
<div id="rtf-editor"></div>

初始化富文本编辑器：

1
$("#rtf-editor").Editor();

初始化插件的时候添加一些配置参数：

1
2
3
4
5
6
7
8
9
10
11
editor('createMenuItem', {
  "text": "TouchGlasses", //Text replaces icon if its not available
  "icon":"fa fa-glass", //This is a Font-Awesome Icon
  "tooltip": "Touch Glasses",
  "custom": function(button, parameters){
    //Your Custom Function.
    alert("Cheers!!!");
  },
  "params": {'option1':"value1"} //Any custom parameters you want to pass
                                //to your custom function.
 });

编辑器的默认配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
'texteffects':true,
'aligneffects':true,
'textformats':true,
'fonteffects':true,
'actions' : true,
'insertoptions' : true,
'extraeffects' : true,
'advancedoptions' : true,
'screeneffects':true,
'bold': true,
'italics': true,
'underline':true,
'ol':true,
'ul':true,
'undo':true,
'redo':true,
'l_align':true,
'r_align':true,
'c_align':true,
'justify':true,
'insert_link':true,
'unlink':true,
'insert_img':true,
'hr_line':true,
'block_quote':true,
'source':true,
'strikeout':true,
'indent':true,
'outdent':true,
'fonts':fonts,
'styles':styles,
'print':true,
'rm_format':true,
'status_bar':true,
'font_size':fontsizes,
'color':colors,
'splchars':specialchars,
'insert_table':true,
'select_all':true,
'togglescreen':true

效果：

富文本编辑器

© 2017 Hexo
POWER BY HEXO, THEME BY LAUGHING