# 1\. 更新
`UI选择务必慎重，货比三家。`
弱水三千只取一瓢：弱水三千只取一瓢，源起佛经中的一则故事，警醒人们`在一生中可能会遇到很多美好的东西，但只要用心好好把握住其中的一样就足够了`
😊😊😊😊欢迎贡献😊😊😊😊
* 2017-1209 ZanUI (Vue)
* 2017-1218 Onsen UI(Vue, React, Angular)
* 2017-1215 增加 Vuetify, Weex UI, Semantic UI React,element-react, element-angular,NG-ZORRO
* 2017-1214 增加 Mint UI
* 2017-1211 增加 Layui, UIkit
* 2017-1206 增加 cube-ui, Amaze ui React
除了老牌构建于jQuery框架之上的UI外, 新锐UI派系：
* 基于Vue: ELementUI, iViewui
* 基于React: AntDesign, Amaze UI React
# [](https://wdd.js.org/all-best-ui-frame.html#2-%E7%A7%BB%E5%8A%A8%E7%AB%AF "2. 移动端")2\. 移动端
## [](https://wdd.js.org/all-best-ui-frame.html#2-1-WeUI "2.1. WeUI")2.1. WeUI
[](https://wdd.js.org/img/images/20180207094906_feQoNF_Screenshot.jpeg)
来自：腾讯
> WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。
> [详情](https://weui.io/)
## [](https://wdd.js.org/all-best-ui-frame.html#2-2-SUI-Mobile "2.2. SUI Mobile")2.2. SUI Mobile
[](https://wdd.js.org/img/images/20180207094938_FjBqKD_Screenshot.jpeg)
来自：阿里
> SUI Mobile 是一套基于 Framework7 开发的UI库。它非常轻量、精美，只需要引入我们的CDN文件就可以使用，并且能兼容到 iOS 6.0+ 和 Android 4.0+，非常适合开发跨平台Web App。轻量的UI库
> SUI Mobile 非常轻量，核心库压缩Gzip后的JS、CSS网络传输体积总共只有52K，却提供了20+个常用的组件。[详情](http://m.sui.taobao.org/)
## [](https://wdd.js.org/all-best-ui-frame.html#2-3-Amaze-%E5%A6%B9%E5%AD%90-UI "2.3. Amaze ~ 妹子 UI")2.3. Amaze ~ 妹子 UI
[](https://wdd.js.org/img/images/20180207094922_0rwozv_Screenshot.jpeg)
> 中国首个开源 HTML5 跨屏前端框架[详情](http://amazeui.org/)
* Amaze UI 以移动优先（Mobile first）为理念，从小屏逐步扩展到大屏，最终实现所有屏幕适配，适应移动互联潮流。
* Amaze UI 含近 20 个 CSS 组件、20 余 JS 组件，更有多个包含不同主题的 Web 组件，可快速构建界面出色、体验优秀的跨屏页面，大幅提升开发效率。
* 相比国外框架，Amaze UI 关注中文排版，根据用户代理调整字体，实现更好的中文排版效果；兼顾国内主流浏览器及 App 内置浏览器兼容支持。
* Amaze UI 面向 HTML5 开发，使用 CSS3 来做动画交互，平滑、高效，更适合移动设备，让 Web 应用更快速载入。
## [](https://wdd.js.org/all-best-ui-frame.html#2-4-jQuery-mobile "2.4. jQuery mobile")2.4. jQuery mobile
[](https://wdd.js.org/img/images/20180207095020_QB3Wp3_Screenshot.jpeg)
> jQuery移动是一个基于html5的用户界面系统,为响应web站点和应用程序都可以访问所有的智能手机,平板电脑和桌面设备而设计。[详情](https://jquerymobile.com/)
## [](https://wdd.js.org/all-best-ui-frame.html#2-5-Framework7 "2.5. Framework7")2.5. Framework7
[](https://wdd.js.org/img/images/20180207095038_xJKBFh_Screenshot.jpeg)
> Framework7 是一个开源免费的框架可以用来开发混合移动应用（原生和HTML混合）或者开发 iOS & Android 风格的WEB APP。也可以用来作为原型开发工具，可以迅速创建一个应用的原型。[详情](http://framework7.taobao.org/)
* Framework7 最主要的功能是可以使用HTML、CSS和JS来开发iOS7应用。Framework7 是完全免费开源的。
* Framework7 并不能兼容所有的设备。她只专注于为 iOS 和 Google Material 设计提供最好的体验。
* 如果你想开发 iOS 或者 Android 混合应用（Phonegap）或者你想开发 iOS 和 Google Material 风格的WEB APP，那么Framework7将会是你的首选。
## [](https://wdd.js.org/all-best-ui-frame.html#2-6-cube-ui%EF%BC%88Vue%EF%BC%89 "2.6. cube-ui（Vue）")2.6. cube-ui（Vue）
`cube-ui 是由滴滴开源的基于 Vue.js 实现的移动端组件库。`[详情](https://didi.github.io/cube-ui/#/zh-CN)
● 质量可靠：由滴滴内部组件库精简提炼而来，历经考验，并且每个组件都有充分单元测试，为后续集成提供保障。
● 体验极致：以迅速响应、动画流畅、接近原生为目标，在交互体验方面追求极致。
● 标准规范：遵循统一的设计交互标准，高度还原设计效果；接口标准化，统一规范使用方式，开发更加简单高效。
● 扩展性强：支持按需引入和后编译，轻量灵活；扩展性强，可以方便地基于现有组件实现二次开发。
[](https://wdd.js.org/img/images/20180207095110_mdSrCw_Screenshot.jpeg)
## [](https://wdd.js.org/all-best-ui-frame.html#2-7-Mint-UI-Vue "2.7. Mint UI (Vue)")2.7. Mint UI (Vue)
基于 Vue.js 的移动端组件库[详情](https://mint-ui.github.io/#!/zh-cn)
[](https://wdd.js.org/img/images/20180207095129_EYQPfv_Screenshot.jpeg)
[](https://wdd.js.org/img/images/20180207095149_shP7k0_Screenshot.jpeg)
## [](https://wdd.js.org/all-best-ui-frame.html#2-8-Weex-UI-Vue "2.8. Weex UI (Vue)")2.8. Weex UI (Vue)
`一个基于 Weex 的富交互、轻量级、高性能的 UI 组件库`[详情](https://alibaba.github.io/weex-ui/#/cn/)
[](https://wdd.js.org/img/images/20180207095205_GZN6wf_Screenshot.jpeg)
## [](https://wdd.js.org/all-best-ui-frame.html#2-9-Onsen-UI-Vue-React-Angular "2.9. Onsen UI(Vue, React, Angular)")2.9. Onsen UI(Vue, React, Angular)
`最偏亮高效的开发HTML5应用和WEB apps, 支持angular, vue ,react`,[详情](https://onsen.io/)
[](https://wdd.js.org/img/images/20180207095223_FfYrPd_Screenshot.jpeg)
# [](https://wdd.js.org/all-best-ui-frame.html#3-PC%E7%AB%AF "3. PC端")3\. PC端
## [](https://wdd.js.org/all-best-ui-frame.html#3-1-EasyUI "3.1. EasyUI")3.1. EasyUI
[](https://wdd.js.org/img/images/20180207095243_zIIavI_Screenshot.jpeg)
> easyui是一种基于jQuery的用户界面插件集合。easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。[详情](http://www.jeasyui.net/)
* 使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。
* easyui是个完美支持HTML5网页的完整框架。
* easyui节省您网页开发的时间和规模。
* easyui很简单但功能强大的。
## [](https://wdd.js.org/all-best-ui-frame.html#3-2-Bootstrap "3.2. Bootstrap")3.2. Bootstrap
[](https://wdd.js.org/img/images/20180207095304_snl6Va_Screenshot.jpeg)
> 简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。[详情](http://www.bootcss.com/)
## [](https://wdd.js.org/all-best-ui-frame.html#3-3-jQuery-UI "3.3. jQuery UI")3.3. jQuery UI
[](https://wdd.js.org/img/images/20180207095319_n66Uay_Screenshot.jpeg)
> jQuery UI 是建立在 jQuery JavaScript 库上的一组用户界面交互、特效、小部件及主题。无论您是创建高度交互的 Web 应用程序还是仅仅向窗体控件添加一个日期选择器，jQuery UI 都是一个完美的选择。
> jQuery UI 包含了许多维持状态的小部件（Widget），因此，它与典型的 jQuery 插件使用模式略有不同。所有的 jQuery UI 小部件（Widget）使用相同的模式，所以，只要您学会使用其中一个，您就知道如何使用其他的小部件（Widget）。[详情](https://jqueryui.com/)
## [](https://wdd.js.org/all-best-ui-frame.html#3-4-SUI "3.4. SUI")3.4. SUI
[](https://wdd.js.org/img/images/20180207095334_yEhDb0_Screenshot.jpeg)
> SUI 是一套基于bootstrap开发的前端组件库，同时她也是一套设计规范。
> 通过SUI，可以非常方便的设计和实现精美的页面。[详情](http://sui.taobao.org/sui/docs/index.html)
## [](https://wdd.js.org/all-best-ui-frame.html#3-5-ZUI "3.5. ZUI")3.5. ZUI
[](https://wdd.js.org/img/images/20180207095351_BLEw5e_Screenshot.jpeg)
> 一个基于 Bootstrap 深度定制开源前端实践方案，帮助你快速构建现代跨屏应用。[详情](http://zui.sexy/#/)
## [](https://wdd.js.org/all-best-ui-frame.html#3-6-Plane-UI "3.6. Plane UI")3.6. Plane UI
[](https://wdd.js.org/img/images/20180207095604_L0tf0x_Screenshot.jpeg)
> HTML5 跨终端响应式前端界面框架[详情](https://pandao.github.io/planeui/)
## [](https://wdd.js.org/all-best-ui-frame.html#3-7-Semantic-UI "3.7. Semantic UI")3.7. Semantic UI
[](https://wdd.js.org/img/images/20180207095620_R0B6If_Screenshot.jpeg)
> Semantic UI 是一款语义化设计的前端开源框架，其功能强大，使用简单，为设计师和开发师提供可复用的完美设计方案。[详情](https://semantic-ui.com/)
## [](https://wdd.js.org/all-best-ui-frame.html#3-8-materialize "3.8. materialize")3.8. materialize
[](https://wdd.js.org/img/images/20180207095630_COJfPb_Screenshot.jpeg)
> 基于谷歌material design设计的框架[详情](http://materializecss.com/)
## [](https://wdd.js.org/all-best-ui-frame.html#3-9-ElementUI-%EF%BC%88Vue%EF%BC%89 "3.9. ElementUI （Vue）")3.9. ElementUI （Vue）
Element由`饿了吗`团队开源，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助你的网站快速成型。[详情](http://element.eleme.io/#/zh-CN)
[](https://wdd.js.org/img/images/20180207095643_iqtE1s_Screenshot.jpeg)
## [](https://wdd.js.org/all-best-ui-frame.html#3-10-iviewui-%EF%BC%88Vue%EF%BC%89 "3.10. iviewui （Vue）")3.10. iviewui （Vue）
一套基于 Vue.js 的高质量 UI 组件库[详情](https://www.iviewui.com/)
[](https://wdd.js.org/img/images/20180207095655_71FOMw_Screenshot.jpeg)
## [](https://wdd.js.org/all-best-ui-frame.html#3-11-ANT-DESIGN-React "3.11. ANT DESIGN (React)")3.11. ANT DESIGN (React)
一套企业级的 UI 设计语言和 React 实现。
[https://ant.design/index-cn](https://ant.design/index-cn)
* 提炼自企业级中后台产品的交互语言和视觉风格。
* 开箱即用的高质量 React 组件。
* 使用 TypeScript 构建，提供完整的类型定义文件。
* 基于 npm + webpack + dva 的企业级开发框架。
[](https://wdd.js.org/img/images/20180207095708_TkWO4d_Screenshot.jpeg)
## [](https://wdd.js.org/all-best-ui-frame.html#3-12-MDUI "3.12. MDUI")3.12. MDUI
MDUI 是一套基于 Material Design 的前端框架。轻量级、多主题切换、响应式、无依赖。
[http://www.mdui.org/](http://www.mdui.org/)
[](https://wdd.js.org/img/images/20180207095724_pTKd1y_Screenshot.jpeg)
## [](https://wdd.js.org/all-best-ui-frame.html#3-13-Amaze-UI-React-React "3.13. Amaze UI React (React)")3.13. Amaze UI React (React)
`基于 React.js 开发的 Web 组件库`[详情](http://amazeui.org/react/)
[](https://wdd.js.org/img/images/20180207095734_B7WvWB_Screenshot.jpeg)
## [](https://wdd.js.org/all-best-ui-frame.html#3-14-Layui "3.14. Layui")3.14. Layui
> layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，`遵循原生 HTML/CSS/JS 的书写与组织形式`，`门槛极低`，拿来即用。其外在极简，却又不失饱满的内在，`体积轻盈，组件丰盈`，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。layui 首个版本发布于2016年金秋，她区别于那些基于 MVVM 底层的 UI 框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，她更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。[详情](http://www.layui.com/doc/)
[](https://wdd.js.org/img/images/20180207095745_pOm9JI_Screenshot.jpeg)
## [](https://wdd.js.org/all-best-ui-frame.html#3-15-UIkit "3.15. UIkit")3.15. UIkit
> 轻量级模块化前端框架[详情](https://getuikit.com/)
[](https://wdd.js.org/img/images/20180207095757_muC5KG_Screenshot.jpeg)
## [](https://wdd.js.org/all-best-ui-frame.html#3-16-Vuetify-Vue "3.16. Vuetify (Vue)")3.16. Vuetify (Vue)
基于vue2的material风格组件化框架[详情](https://vuetifyjs.com/)
[](https://wdd.js.org/img/images/20180207095808_9FR3VY_Screenshot.jpeg)
## [](https://wdd.js.org/all-best-ui-frame.html#3-17-Semantic-UI-React-React "3.17. Semantic UI React(React)")3.17. Semantic UI React(React)
The official Semantic-UI-React integration.[detail](https://react.semantic-ui.com/introduction)
* jQuery Free
* Declarative API
* Augmentation
* Shorthand Props
* Sub Components
* Auto Controlled State
[](https://wdd.js.org/img/images/20180207095822_3kxbmi_Screenshot.jpeg)
## [](https://wdd.js.org/all-best-ui-frame.html#3-18-element-react-React "3.18. element-react (React)")3.18. element-react (React)
element ui的react版本[详情](https://eleme.github.io/element-react/#/zh-CN/quick-start)
[](https://wdd.js.org/img/images/20180207095833_MwiVC2_Screenshot.jpeg)
## [](https://wdd.js.org/all-best-ui-frame.html#3-19-element-angular-angular "3.19. element-angular (angular)")3.19. element-angular (angular)
element ui的react版本[详情](https://element-angular.faas.ele.me/guide/install)
[](https://wdd.js.org/img/images/20180207095843_HEcA0p_Screenshot.jpeg)
## [](https://wdd.js.org/all-best-ui-frame.html#3-20-NG-ZORRO-angular "3.20. NG-ZORRO (angular)")3.20. NG-ZORRO (angular)
这里是 Ant Design 的 Angular^5.0.0 实现，开发和服务于企业级后台产品。[详情](https://ng.ant.design/#/docs/angular/introduce)
[](https://wdd.js.org/img/images/20180207095855_58jPPd_Screenshot.jpeg)
# [](https://wdd.js.org/all-best-ui-frame.html#4-PC-amp-%E7%A7%BB%E5%8A%A8%E7%AB%AF "4. PC & 移动端")4\. PC & 移动端
## [](https://wdd.js.org/all-best-ui-frame.html#4-1-ZanUI-Vue "4.1. ZanUI (Vue)")4.1. ZanUI (Vue)
> Vant ( \\ˈvænt\\ ) 是有赞前端团队基于有赞统一的规范实现的 Vue 组件库，提供了一整套 UI 基础组件和业务组件。[详情](https://www.youzanyun.com/zanui)
* 48+ 个经过有赞线上业务检验的组件
* 单测覆盖率超过 90%
* 完善详实的 中英文文档
* 专门的设计师团队维护视觉规范，统一而优雅
* 支持 babel-plugin-import
* 支持 TypeScript
[](https://wdd.js.org/img/images/20180207100013_ZEC0Op_Screenshot.jpeg)
[](https://wdd.js.org/img/images/20180207100025_pmdTYa_Screenshot.jpeg)
- 学习网站
- iframe
- 跨域
- 渲染数据，防止内存泄漏
- 工具类
- 一般使用方法
- 获取url（路由）参数
- HTML标签转义
- 转义html标签
- 加入收藏夹
- 提取页面代码中所有网址
- 动态加载脚本文件
- 返回顶部的通用方法
- 实现base64解码
- 确认是否是键盘有效输入值
- 全角半角转换
- 版本对比
- 压缩CSS样式代码
- 字符串长度截取
- 时间日期格式转换
- 返回脚本内容
- 格式化CSS样式代码
- 获取cookie值
- 获得URL中GET参数值
- 获取移动设备初始化大小
- 获取页面高度
- 获取页面scrollLeft
- 获取页面scrollTop
- 获取页面可视高度
- 获取页面可视宽度
- 获取页面宽度
- 获取移动设备屏幕宽度
- 判断是否移动设备
- 判断是否是移动设备访问
- 加载样式文件
- 清除脚本内容
- 时间个性化输出功能
- 金额大写转换函数
- 清除空格
- 随机数时间戳
- 实现utf8解码
- 返回字符串构成种类(字母，数字，标点符号)的数量
- 清除所有中文字符(包括中文标点符号)
- 清除所有中文字符及空格
- 校验是否包含空格
- 校验是否包含中文字符(包括中文标点符号)
- 校验是否为网址
- 接成URL带参数
- 获取浏览器名称
- 邮箱
- 手机号码
- 根据url地址下载
- el是否包含某个class
- el添加某个class
- el去除某个class
- 获取滚动的坐标
- 滚动到顶部
- el是否在视口范围内
- 洗牌算法随机
- 劫持粘贴板
- 严格的身份证校验
- 随机数范围
- 将阿拉伯数字翻译成中文的大写数字
- 将数字转换为大写金额
- 检测密码强度
- 字符转换首字大小写
- 去除空格
- 最大值与最小值和平均值
- 函数节流器
- 16进制颜色转RGBRGBA字符串
- 追加url参数
- base64文件转文件和文件转base64
- base64转换为blob和blob转换为file
- 生成 uid 或者 uuid 4种方法
- 正则
- 按复制快捷键或者右键复制
- 表情
- 获取dom某个属性上的值
- 获取dom某个属性的值
- 获取系统
- 去除emoji表情符号
- 本地文件转换 Bool url 访问地址
- 禁止ios 击穿后底部还能滑动
- 将数字负数转换为字符串类型
- 将字符串类型数字判断正负
- 判断是否有小数点
- 判断是否有科学技术法
- 去除0123字符串类型的数字
- 浏览器共享屏幕
- 兼容navigator.getUserMedia与AudioContext
- 音频轨迹
- vue
- vue 技巧
- vue 2.xx 脚手架快速搭建环境
- vue 优化模块
- css
- input或textarea_placeholder
- 布局巧
- form/formData
- form
- formData
- Visual-Studio-code
- VS Code
- vscode-fileheader 生成注释
- View In Browser（右键浏览器预览）
- Chinese (Simplified) Language（中文语音包）
- 北京地摊位置
- 输入框使用第三方语音输入文本问题
- adb 文档
- serve后台
- docker
- 介绍
- 安装
- 常用命令
- mysql
- 安装
- 破解Navicat Premium 无限试用
- 源码技巧
- 实例化
- 判断是否传实例化对象
- 实例化构造函数
- ui 框架