今天要探讨的是国内的一个前端框架Amaze UI。俗称“妹子UI”。它是一个专注于移动开发的前端框架。各种插件让工程师如鱼得水般爽快。并且支持兼顾国内主流浏览器及 App 内置浏览器。Amaze UI 含近 20 个 CSS 组件、20 余 JS 组件,更有多个包含不同主题的 Web 组件,可快速构建界面出色、体验优秀的跨屏页面,大幅提升开发效率。相比国外框架,Amaze UI 关注中文排版,根据用户代理调整字体,实现更好的中文排版效果。如此优秀的框架,对于众多的前端攻城狮们来说,无疑是一个超大的福利!好,别的也不多讲了。我们一块来看下它的使用方式。

1.引入文件
引入以下的JS 和 css文件。当然如果你想要离线的,也可以去官方直接下载版本包,下载完以后JS 和css 文件均在 assets文件夹内。

  1. http://cdn.amazeui.org/amazeui/2.5.2/css/amazeui.css 
  2. http://cdn.amazeui.org/amazeui/2.5.2/css/amazeui.min.css 
  3. http://cdn.amazeui.org/amazeui/2.5.2/js/amazeui.js 
  4. http://cdn.amazeui.org/amazeui/2.5.2/js/amazeui.min.js 
  5. http://cdn.amazeui.org/amazeui/2.5.2/js/amazeui.ie8polyfill.js 
  6. http://cdn.amazeui.org/amazeui/2.5.2/js/amazeui.ie8polyfill.min.js 
  7. http://cdn.amazeui.org/amazeui/2.5.2/js/amazeui.widgets.helper.js 
  8. http://cdn.amazeui.org/amazeui/2.5.2/js/amazeui.widgets.helper.min.js 

2.引入你想用的插件
官方jQuery插件地址:http://amazeui.org/javascript
官方css插件地址:http://amazeui.org/css/
官方web组件地址:http://amazeui.org/widgets
可以打开以上地址,找到你想用的效果,复制粘贴到你网站上,就可以完成功能。
备注:web组件不考虑 IE8/9支持
3.其它问题
1.如果用线上的引入包,有些童鞋会发现效果的一些按钮图片没有出来。这是因为,它们定义一些图标的时候,都是用css:before选择器来定义。而线上的引入包,只定义了这些选择器,但定义的fonts文件夹没有。所以,尽量的去官网下载个框架包,把fonts文件夹放到网站的根目录就可以了。
2.下载的框架包里那些*.html文件,其实每个都是框架。

  1. index.html - 空白 HTML 模板; 
  2. blog.html - 博客页面模板; 
  3. landing.html - Landing Page 模板; 
  4. login.html - 登录界面模板; 
  5. sidebar.html - 带边栏的文章模板; 
  6. admin-*.html - 简单的管理后台界面; 

建议亲们每个都打开看一下,符合自己项目的,可以直接修改使用。
3.Amaze UI 面向现代浏览器开发,对 IE 8/9 等浏览器只提供有限的支持。
4.有限支持 IE 8/9 的 JS 插件:

  1. 警告框(Alert); 
  2. 按钮交互(Button); 
  3. 折叠面板(Collpase); 
  4. 下拉组件(Dropdown); 
  5. 模态窗口(Modal); 
  6. 弹出框(Popover); 
  7. 图片轮播(Slider); 
  8. 侧边栏(OffCanvas); 
  9. 滚动侦测(ScrollSpyNav); 
  10. 固定元素(Sticky); 
  11. 选项卡(Tabs); 
返回顶部