From c59857f7462defefd53a57280faecd44cbd72c37 Mon Sep 17 00:00:00 2001 From: Catouse Date: Mon, 29 Aug 2016 14:49:11 +0800 Subject: [PATCH] * update document files. --- docs/part/javascript-sortable.md | 2 +- docs/part/view-dashboard.md | 668 +++++++++++++++++++++++++------ docs/partial/remote-panel.html | 2 + 3 files changed, 542 insertions(+), 130 deletions(-) create mode 100644 docs/partial/remote-panel.html diff --git a/docs/part/javascript-sortable.md b/docs/part/javascript-sortable.md index 1fd50cc5..c1986878 100644 --- a/docs/part/javascript-sortable.md +++ b/docs/part/javascript-sortable.md @@ -66,7 +66,7 @@ $('#sortableList').sortable(); ## 选项 -在进行初始化时允许传入一个对象参数作为初始化选项。可以使用的选项如下： +在进行初始化时允许传入一个对象或者使用 `[data-*]` 属性参数作为初始化选项。可以使用的选项如下： diff --git a/docs/part/view-dashboard.md b/docs/part/view-dashboard.md index 398bd5b6..9f945a86 100644 --- a/docs/part/view-dashboard.md +++ b/docs/part/view-dashboard.md @@ -2,179 +2,590 @@ id: dashboard description: 支持拖放调整位置的面板网格 icon: icon-th-large -filter: yibiaopan ybp +filter: yibiaopan ybp panel mianban mb --- # 仪表盘 - +仪表盘提供了一种灵活的方式来通过多个面板组（`.panel`）并配合栅格来展现内容的方式。 -## 示例 +## 使用示例 -
+
-
-
-
+
+
-
- -
- - -
-
1 Html Panel : dl -
+ + 面板标题 +
-
-
Lorem.
-
Lorem ipsum dolor sit amet.
-
Ut.
-
Necessitatibus, fugit repellat fugiat a.
-
Aliquam.
-
Obcaecati cum suscipit consequuntur voluptas?
-
Minima!
-
Esse soluta iure corporis porro.
-
Sunt.
-
Delectus quos amet quidem eaque!
-
+

面板内容。

-
-
+
+
-
- -
- - -
-
2 Html Panel : ul + + 包含列表组 +
+
+
+ 列表组项目1 + 列表组项目2 + 列表组项目3 + 列表组项目4
-
-
    -
  • Lorem ipsum dolor sit amet.
    • -
  • Corrupti, hic illo a doloribus!
    • -
  • Magnam consequatur veniam ullam temporibus.
    • -
  • Dolores, nobis ratione dolorem voluptate.
    • -
  • Nulla, ratione dignissimos nesciunt sequi.
    • -
  • Praesentium, dicta accusamus laborum laboriosam!
    • -
  • Facere commodi dolor quasi. Nihil.
    • -
  • Esse, similique nulla doloremque dolorum.
    • -
-
-
-
3 Html Panel : ol
-
-
    -
  1. Lorem ipsum dolor sit amet.
    2. -
  2. Corrupti, hic illo a doloribus!
    3. -
  3. Magnam consequatur veniam ullam temporibus.
    4. -
  4. Dolores, nobis ratione dolorem voluptate.
    5. -
  5. Nulla, ratione dignissimos nesciunt sequi.
    6. -
  6. Praesentium, dicta accusamus laborum laboriosam!
    7. -
  7. Facere commodi dolor quasi. Nihil.
    8. -
  8. Esse, similique nulla doloremque dolorum.
    9. -
+
+
+
+ + 包含表格
-
-
-
-
-
4 Panel heading
-
-
-
-
-
-
5 Table
-
-
- - - - - +
+
Lorem ipsum.Debitis, consectetur.Ullam, asperiores.
+ - - - + + + + + + - - - + + + + - - - + + + + - - - + + + + - - - + + + + - - - + + + + - - - - - -
Lorem ipsum.Saepe, mollitia.Placeat, vel!ID名称积分排名
Lorem ipsum.Amet, architecto!Natus, quis!1526小马虎1056 1
Lorem ipsum.Quam, nesciunt.Perspiciatis, vel!1001勇敢的小鸭999 12
Lorem ipsum.Et, aut!Molestias, necetatibus?1045鸡大爷998 23
Lorem ipsum.Fugit, fuga?Iure, officiis.1025猪无畏860 25
Lorem ipsum.Saepe, neque!Deserunt, voluptates?1102糊涂虫749 30
Lorem ipsum.Praesentium, eum!Numquam, molestias.
+ + -
-
-
6 Panel heading
-
+
+
+
+ + 包含操作按钮 +
+ + +
+ + +
+
+
+
+

在面板头部（.panel-heading）包含链接和按钮来自定义操作。

+
-
-
-
7 Panel heading
-
+
+
+
+ + 加载远程内容 +
+ +
+
+
等待加载远程内容。
-
-
-
8 Panel heading
-
+
+
+
+
可移除的面板
+
+ +
+
+
+

点击顶部右侧的 按钮来移除该面板。

+
-
-
-
9 Panel heading
-
+
+
+
.panel-loading
+
+

为 .panel 添加 .panel-loading 类即可实现正在加载的外观。

+
+ + +```html +
+
+
+
+
+ + 面板标题 +
+
+

面板内容。

+
+
+
+
+
+
+ + 包含列表组 +
+
+
+ ... +
+
+
+
+
+
+
+ + 包含表格 +
+
+ + ... +
+
+
+
+
+
+
+ + 包含操作按钮 +
+ + +
+ + +
+
+
+
+

在面板头部（.panel-heading）包含链接和按钮来自定义操作。

+
+
+
+
+
+
+ + 加载远程内容 +
+ +
+
+
等待加载远程内容。
+
+
+
+
+
+
可移除的面板
+
+ +
+
+
+

点击顶部右侧的 按钮来移除该面板。

+
+
+
+
+
+
.panel-loading
+
+

为 .panel 添加 .panel-loading 类即可实现正在加载的外观。

+
+
+
+
+
+``` + +```javascript +$('#dashboard').dashboard({draggable: true}); +``` + +## 选项 + +在进行初始化时允许传入一个对象参数或者使用 `[data-*]` 属性作为初始化选项。可以使用的选项如下： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
选项名称可选值描述
`height`面板高度默认 `360`
`sensitive`是否启用灵敏判断`false`，`true`（默认）当设置为 `true` 时，在拖动面板时，即使鼠标没有移动可供放置的另一个面板区域内，如果此时被移动的面板影子元素已经与可供放置的一个面板有重合区域也会判断为可以放置在此面板区域内（执行重新排序操作）。
`draggable`是否可以拖拽排序`false`，`true`（默认）如果设定为 `true`，则用户可以拖拽面板头部（`.panel-heading`）来重新排列面板。
`resizable`是否可以更改栅格大小`false`，`true`（默认）如果设定为 `true`，则用户可以拖拽面板右侧边缘来动态更改栅格大小（决定面板宽度）。
`resizeMessage`显示大小变更消息`false`，`true`（默认）如果设定为 `true`，则在用户拖拽更改栅格大小时显示一个漂浮消息来指示当前栅格大小。
`data`初始化面板对象数组指定一个对象数组用来在初始化时生成栅格和面板。
`afterPanelRemoved`面板被移除时的回调函数函数当用户点击 `.panel-actions` 内的 `.remove-panel` 元素时会移除面板并调用此回调函数。
`panelRemovingTip`移除面板前的确认消息`false`（默认）或用于格式化文本的字符串如果设置为一个字符串，则会在移除面板前弹出以此字符串作为消息的确认对话框，在字符串内包含格式化参数 `'{0}'` 来显示当前被移除的面板标题。
`afterOrdered`重新排序面板后的回调函数函数
`onResize`更改栅格大小时的回调函数函数
`afterRefresh`远程加载完成后的回调函数函数
+ +使用选项： + +```javascript +// 定义选项对象 +var options = { + height: 400, + afterOrdered: function(e) { + console.log('排序完成：', e); + }, + // 设置更多选项... +}; + +// 初始化时传入选项参数 +$('#dashboard').dashboard(options) +``` + +## 结构 + +### 使用面板 + +面板（`.panel`）是仪表盘内用来展示内容的基本容器元素。 + +面板中的 `.panel-heading` 和 `.panel-body` 都是必须的。 + +默认情况下 `.panel-body` 包含内边距，如果需要移除外边距可以为 `.panel-body` 添加 `.no-padding` 类，这对于在 `.panel-body` 内直接包含 ``、 `