# BUI-Fast-Snippet ## 目录 [TOC] --- ## 简介 BUI Fast 是BUI提供的快速书写代码提示插件，在Sublime,Atom,VSCode, APICloud Studio2 ,Webstorm中集成BUI控件及方法的代码提示，为快速开发助力. 里面封装了控件的常用参数及常用方法的语法补全, 版本对应 BUI的版本. > 1.3.1版本新增控件名加"-demo" 快速生成控件初始化及结构,只要把结构复制到body对应的位置就行. | **描述** | **修改日期** | |:-------------------|-------------------:| | 新增 ui-icon等相关布局 | 2018-11-12 | --- ## 安装方法1: 在应用市场输入 `bui-fast` , 安装即可. 方法2: 使用快捷键 mac: `command + shift + p` , windows: `ctrl + shift + p`; - 输入`Install from VSIX`, 回车 ; 找到 `BUI-Fast-Snippet-Vscode/bui-fast-0.0.1.vsix` 文件安装即可, 再按提示reload. --- ## 简单使用示例 html触发结构代码片段的指令格式为: 'ui-控件名'，之后点击Tab键即可进行补全 JS触发代码片段的指令格式为： 'bui-控件名'，之后点击Tab键即可进行补全 **注意:** 生成代码后, 按Tab会定位在常用的编辑区域, 如果要写另外的控件代码, 要先按 Esc 再重复之前操作. #### HTML 快速生成BUI控件结构 (在body里面书写) __ui-accordion__ Tab ( 生成折叠菜单结构 ) ```html

``` **注意**:如果忘记控件的名字, 输入 <ui- 会有提醒相关的控件 ( 生成的结构记得删掉第一个 < ). ### JS 快速生成BUI控件初始化 (在script里面书写) __bui-accordion__ Tab ```js var uiAccordion = bui.accordion({ id:"#uiAccordion" }); ``` ### JS 快速生成完整demo ( 推荐, 1.3.0 新增 ) (在script里面书写) __bui-list-demo__ Tab ( 生成list控件的初始化跟html结构 ) 需要把html结构剪切到对应的位置去. 更多demo 请查看底部的控件列表 ``` // 列表控件 js 初始化: var uiList = bui.list({ id: "#uiList", url: "", data: {}, // 数据请求带过去的参数,分页在field配置 template: listTemplate, field: { page: "page", // 分页参数名 size: "pageSize", // 分页大小参数名 data: "" // 数据字段名 } }); // 列表模板 function listTemplate (data) { var html = ""; $.each(data,function(index, el) { html += '

'+el.name+'

'; }); return html; } // 列表控件 html 对应的结构:

``` ### JS 快速生成BUI常用方法 (在script里面书写) __bui-ajax__ Tab ( 生成请求的方法 ) ```js bui.ajax({ url: "http://", data: {},//接口请求的参数 // 可选参数 method: "GET", timeout: 20000 }).done(function(result){ }).fail(function(result){ }); ``` --- ## BUI JS方法及控件缩写 JS触发代码片段的指令格式为： 'bui-控件名'，之后点击Tab键即可进行补全 #### 控件简单初始化控件名: bui.accordion 我们只需要输入 __bui-accordion-demo__ Tab 就会生成完整的示例 ### 控件完整demo缩写一览 (推荐 1.3.0新增) | **缩写代码** | **描述** | |:------------- |:-------------------| | bui-accordion-demo | 折叠菜单完整示例 | | bui-actionsheet-demo | 上拉菜单完整示例 | | bui-dialog-demo | 弹出框完整示例 | | bui-dropdown-demo | 下拉菜单完整示例 | | bui-list-demo | 列表侧滑完整示例 | | bui-listview-demo | 列表侧滑完整示例 | | bui-listview-demo-custom | 列表侧滑静态完整示例 | | bui-pullrefresh-demo | 下拉刷新完整示例 | | bui-scroll-demo | 滚动控件完整示例 | | bui-number-demo | 数字条完整示例 | | bui-pickerdate-demo | 日期完整示例 | | bui-rating-demo | 星级评分完整示例 | | bui-scroll-demo | 滚动控件完整示例 | | bui-sidebar-demo | 滚动控件完整示例 | | bui-slide-demo | 焦点图滑动完整示例 | | bui-tab-demo | Tab控件-示例 | | bui-tab-demo-footer | Tab控件菜单在底部滚动-示例 | | bui-swipe-demo | 抽屉菜单完整示例 | | bui-levelselect-demo | 级联菜单完整示例 | | bui-input-demo | 输入框完整示例 | | bui-searchbar-demo | 搜索完整示例 | | bui-select-demo | 选择列表完整示例 | | bui-stepbar-demo | 步骤条完整示例 | | bui-upload-demo | 上传完整示例 | 控件名: bui.accordion 我们只需要输入 __bui-accordion__ Tab 就会生成最简单的初始化脚本 | **缩写代码** | **描述** | |:------------- |:-------------------| | bui-accordion | 折叠菜单初始化 | | bui-actionsheet | 上拉菜单初始化 | | bui-dialog | 弹出框初始化 | | bui-dropdown | 下拉菜单初始化 | | bui-list | 列表初始化 | | bui-listview | 列表侧滑初始化 | | bui-pullrefresh | 下拉刷新初始化 | | bui-scroll | 滚动加载初始化 | | bui-number | 数字条初始化 | | bui-pickerdate | 日期初始化 | | bui-rating | 星级评分初始化 | | bui-searchbar | 搜索控件初始化 | | bui-sidebar | 滚动控件初始化 | | bui-slide | 滑动控件初始化 | | bui-tab | 滑动Tab控件初始化 | | bui-swipe | 抽屉菜单初始化 | | bui-levelselect | 级联菜单初始化 | | bui-input | 输入框初始化 | | bui-searchbar | 搜索初始化 | | bui-select | 选择列表初始化 | | bui-stepbar | 步骤条初始化 | | bui-upload | 上传初始化 | | bui-router 新 | BUI 单页初始化 | | router-load 新 | 单页跳转 | | router-refresh 新 | 单页刷新 | | router-replace 新 | 单页替换 | | router-back 新 | 单页后退 | | router-getPageParams 新 | 获取页面参数 | | router-loadPart 新 | 局部加载 | | loader-define 新 | 模块定义 | | loader-require 新 | 模块加载 | | loader-import 新 | 脚本及样式资源动态引入 | | loader-map 新 | 单个模块配置 | | loader-mapall 新 | 多个模块配置 | ## BUI HTML结构缩写一览 html触发结构代码片段的指令格式为: 'ui-控件名'，之后点击Tab键即可进行补全 ### 控件结构缩写 | **缩写代码** | **描述** | |:------------- |:-------------------| | ui-accordion | 折叠菜单结构 | | ui-actionsheet | 上拉菜单结构 | | ui-dialog | 弹出框结构 | | ui-dropdown | 下拉菜单结构 | | ui-listview | 列表侧滑结构 | | ui-listview-custom | 列表侧滑静态结构 | | ui-number | 数字条结构 | | ui-pickerdate | 日期结构 | | ui-rating | 星级评分结构 | | ui-list | 列表滚动控件结构 | | ui-scroll | 滚动控件结构 | | ui-sidebar | 滚动控件结构 | | ui-slide | 滑动控件结构 | | ui-slide-tab | 滑动Tab控件结构 | | ui-swipe | 抽屉菜单结构 | | ui-searchbar | 搜索结构 | | ui-range | 滑动条结构 | | ui-switch | 切换按钮结构 | | ui-select | 选择列表结构 | | ui-stepbar | 步骤条结构 | | ui-btn | 按钮 | | ui-levelselect 新| 级联控件结构 | | ui-tab 新| 选项卡结构 | | ui-upload 新| 上传结构 | | ui-input | 输入框 | ### 页面结构缩写 | **缩写代码** | **描述** | |:------------- |:-------------------| | ui-router 新 | BUI 单页标准结构 | | ui-html | BUI HTML标准结构 | | ui-page | BUI 页面标准结构 | | ui-header | 生成header结构 | | ui-header-side | 生成header左对齐结构 | | ui-panel | panel结构 | | ui-table | 表格结构 | | ui-form | 表单结构 | | ui-form-edit | 表单填写结构 | | ui-form-submit| 表单底部结构 | | ui-nav | 导航菜单 | | ui-nav-icon | 导航菜单带图标 | | ui-list-arrow | 箭头列表结构 | | ui-list-checkbox | 多选列表结构 | | ui-list-radio | 单选列表结构 | | ui-list-group | 分组列表结构 | | ui-list-icon | 图标列表结构 | | ui-list-photo | 图片列表结构 | | ui-list-thumbnail | 列表多行带缩略图结构 | | ui-icon | 图标 | | ui-icon-bg | 背景图标 | | ui-icon-grid | 九宫格图标结构 | | ui-icon-round | 九宫格背景图标结构 | | ui-icon-img | 九宫格图标图片类结构 | | ui-hint | 静态提醒 | | ui-tag | 标签类 | | ui-sub | 角标 | | ui-badges | 红点提醒 | ### 布局结构缩写 | **缩写代码** | **描述** | |:------------- |:-------------------| | ui-box | 弹性布局结构 | | ui-box-space | 弹性布局留白结构 | | ui-box-center | 块元素水平垂直居中结构 | | ui-fluid | 百分比布局结构 | | ui-fluid-space| 百分比留白布局结构 | | ui-fluid-5 | 5列布局结构 | ### 表单元素结构缩写 | **缩写代码** | **描述** | |:------------- |:------------------- | | ui-radio | 单选框 | | ui-checkbox | 多选框 | | ui-checkbox-custom | 多选框自定义结构,便于修改样式 | | ui-choose | 单选多选的不同样式 | | ui-switch | 开关切换 | | ui-range | 拖动条 | | ui-progress | 进度条结构 | | ui-check 新| 选择按钮结构 |