From 625372267cd221b08643838982a08401754d6149 Mon Sep 17 00:00:00 2001 From: dailer Date: Sun, 24 Mar 2019 18:02:43 +0800 Subject: [PATCH] update --- README.md | 15 +++++++++- dom/一个图标_文字的组件.md | 38 +++++++++++++++++++++++++ layout/一个图标_文字的组件.md | 33 +++++++++++++++++++++ screenshorts/6.png | Bin 0 -> 4958 bytes screenshorts/7.png | Bin 0 -> 4497 bytes 5 files changed, 85 insertions(+), 1 deletion(-) create mode 100644 dom/一个图标_文字的组件.md create mode 100644 layout/一个图标_文字的组件.md create mode 100644 screenshorts/6.png create mode 100644 screenshorts/7.png diff --git a/README.md b/README.md index 02a47aa..6f717a8 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,13 @@ # decision-plugin-demos ## Stage1: DOM操作 +如果你并未深入阅读过FineUI使用文档,仅仅追求最快效率的实现简单的需求,我们提供了对DOM操作的支持.如何直接操作DOM: + +1. 元素选择器: 绝大多数的FineUI控件都会设置基础className,可以通过开发者工具检查元素,查看对应的className.但这样具有局限性,如果querySelector返回的结果不唯一怎么办? +2. BI.Plugin.registerObject: 通过查询组件shortcut列表,可以注册组件,在组件渲染后获取组件的实例. `BI.Plugin.registerObject(key,cb)` + +下面几个示例列举了常见的使用场景,通过用Jquery对元素进行增删改: + 1. [修改平台LOGO](./dom/修改平台logo.md) 2. [修改平台标题](./dom/修改平台标题.md) @@ -9,4 +16,10 @@ 5. [侧栏移动到右侧](./dom/侧栏移动到右侧.md) 6. [贴底隐藏的侧边栏](./dom/贴底隐藏的侧边栏.md) 7. [按鼠标中键关闭标签](./dom/按鼠标中键关闭标签.md) -8. [全屏状态下左右切换按钮](./dom/全屏状态下左右切换按钮.md) \ No newline at end of file +8. [全屏状态下左右切换按钮](./dom/全屏状态下左右切换按钮.md) +9. [一个图标+文字的组件](./dom/一个图标_文字的组件.md) + +## Stage2: 布局组件 +使用布局组件前请先查阅[布局组件API](https://kms.finedevelop.com/pages/viewpage.action?pageId=58494216),了解一下基础布局的使用场景和API. +应用布局组件的好处是我们只需关心想要什么形式的布局,而无需关系怎么实现,免去了写各种繁杂的样式处理居中,浮动,边距等问题. +1. [一个图标+文字的组件](./layout/一个图标_文字的组件.md) \ No newline at end of file diff --git a/dom/一个图标_文字的组件.md b/dom/一个图标_文字的组件.md new file mode 100644 index 0000000..66695eb --- /dev/null +++ b/dom/一个图标_文字的组件.md @@ -0,0 +1,38 @@ +# 一个图标+文字的组件 +图标+文字的形式是很常见的组件,如果用Jquery实现一个这样的组件可以这样 +## js +``` +// 创建一个图标+文字的组件 +var IconText = BI.inherit(BI.Widget, { + + render: function () { + + var container = $("
"); + var icon = $(""); + var text = $("
这是一个图标+文字的组件
"); + container.append(icon); + container.append(text); + this.element.append(container); + } +}); +BI.shortcut("dec.plugin.icon_text", IconText); +``` +## css +``` +.plugin-icon-text-icon { + width: 24px; + height: 24px; + background: url("./icon/upload_success.png") center, center, no-repeat; + background-size: contain; +} + +.plugin-icon-text { + display: flex; + justify-content: flex-start; + align-items: center; + margin: 10px; +} +``` + +## 效果预览 +![](../screenshorts/6.png) \ No newline at end of file diff --git a/layout/一个图标_文字的组件.md b/layout/一个图标_文字的组件.md new file mode 100644 index 0000000..f3b1734 --- /dev/null +++ b/layout/一个图标_文字的组件.md @@ -0,0 +1,33 @@ +# 一个图标+文字的组件 +由[一个图标+文字的组件](../dom/一个图标_文字的组件.md)可以看到,我们手写了外层布局的样式,手动把icon和text添加到了container中.如果用FineUI提供的布局组件改怎么写呢? +通过查阅[FineUI基础教程](https://kms.finedevelop.com/pages/viewpage.action?pageId=58494116)来知悉如何创建一个组件,以及一些基础控件的使用,想象一下,我们要实现的图标+文字组件是怎样组合的:一个水平方向的布局,内部为一个图标和文字.于是我们需要用到`bi.vertical_adapt`布局加 `bi.icon` `bi.label` 两个控件,而图标多数情况下我们是需要水平垂直居中的,因此还需要`bi.center_adapt` 容纳一下. +## js +``` + // 创建一个图标+文字的组件 + var IconText = BI.inherit(BI.Widget, { + + render: function () { + return { + type: "bi.vertical_adapt", // 首先是垂直居中布局容纳两个子元素 + items: [ + { + type: "bi.center_adapt", // 水平垂直居中布局 + cls: "setting-font", // 图标定义的类名 + items: [ + { + type: "bi.icon" // 图标组件, + } + ], + width: 24, + height: 24 + }, { + type: "bi.label", // label文字标签 + height: 24, + text: "这是一个图标+文字的组件" + } + ] + }; + } + }); + BI.shortcut("dec.plugin.icon_text", IconText); +``` \ No newline at end of file diff --git a/screenshorts/6.png b/screenshorts/6.png new file mode 100644 index 0000000000000000000000000000000000000000..34988745d5a8e90e6ffeeec4475d948357b4aa4e GIT binary patch literal 4958 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