|
|
|
|
# decision-plugin-demos
|
|
|
|
|
## Stage0: 了解一下全局的方法与变量
|
|
|
|
|
1. [全局变量globalModel详解](./global/全局变量globalModel详解.md)
|
|
|
|
|
1. [平台组件用到的key值整理](./global/平台组件用到的key值整理.md)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## 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)
|
|
|
|
|
3. [增加一个footer](./dom/增加一个footer.md)
|
|
|
|
|
4. [隐藏侧边栏](./dom/隐藏侧边栏.md)
|
|
|
|
|
5. [侧栏移动到右侧](./dom/侧栏移动到右侧.md)
|
|
|
|
|
6. [贴底隐藏的侧边栏](./dom/贴底隐藏的侧边栏.md)
|
|
|
|
|
7. [按鼠标中键关闭标签](./dom/按鼠标中键关闭标签.md)
|
|
|
|
|
8. [全屏状态下左右切换按钮](./dom/全屏状态下左右切换按钮.md)
|
|
|
|
|
9. [一个图标+文字的组件](./dom/一个图标_文字的组件.md)
|
|
|
|
|
|
|
|
|
|
## Stage2: 基础组件化入门
|
|
|
|
|
使用布局组件前请先查阅[FineUI开发指南](http://fanruan.design/fineui-doc/index.html#/docs/learn/giud),了解一下如何定义一个FineUI控件.以及[FineUI基础组件](http://fanruan.design/fineui-doc/index.html#/docs/components/label)了解一下FineUI提供的一些基础布局控件和其他控件.
|
|
|
|
|
FineUI的精华之一就在于我们可以基于布局组件随心所遇的搭建更复杂的组件,我们只需关心想要什么形式的布局,而无需关系怎么实现,免去了写各种繁杂的样式处理居中,浮动,边距等问题.
|
|
|
|
|
首先先看一个组件化的demo [如何定义一个FineUI组件](./basic/如何定义一个FineUI组件.md)
|
|
|
|
|
|
|
|
|
|
1. [一个图标+文字的组件](./basic/一个图标_文字的组件.md)
|
|
|
|
|
2. [常用表单,文字标签+输入框](./basic/文字标签_输入框.md)
|
|
|
|
|
|
|
|
|
|
## Stage3: 根据API自定义复杂的业务功能
|
