web常用的 UI布局框架

1.boostrap

框架官方网址：www.bootcss.com/

不多说，大多数人都在用这个框架来开发，官方文档的API完整可靠，还有各种Bootstrap相关优质项目推荐，前端开发首选框架

简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。

响应式

2.amaze UI（妹子UI)

官方网址：amazeui.org/

Amaze UI 以移动优先（Mobile first）为理念，从小屏逐步扩展到大屏，最终实现所有屏幕适配，适应移动互联潮流。

响应式

3.Layui

官方网址：www.layui.com/

Layui是一款采用自身模块规范编写的国产前端UI框架，遵循原生HTML/CSS/JS的书写与组织形式，门槛极低，拿来即用。从核心代码到API的每一处细节都经过精心雕琢，非常适合界面的快速开发。，从核心代码到API的每一处细节都经过精心雕琢，非常适合界面的快速开发。准确地说，她更多是为 服务端程序员 量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。

4.MUI(*)

官方网址：dev.dcloud.net.cn/mui/

最接近原生APP体验的高性能前端框架, 之前的很多前端框架（特别是响应式布局的框架），UI控件看起来太像网页，没有原生感觉，因此追求原生UI感觉也是我们的重要目标MUI以iOS平台UI为基础，补充部分Android平台特有的UI控件

最接近原生APP体验、高性能前端框架

乐淘首页 - 商品区域

1-整体布局，头部、底部固定定位

2- 主体触屏滑动效果

3-文字溢出处理：

mui-ellipsis：单行溢出

mui-ellipsis-2 ： 2行溢出

mui-ellipsis-3： 3行溢出

分类页

分类页左侧

分类页右侧

分类页的渲染动态

1-渲染左侧一级导航

2-渲染一级导航对应的二级导航

3-点击一级导航渲染对应的二级导航

搜索页

搜索页 - 静态页面完成

localStorage的使用方法

api基本使用
对于复杂类型的存储

搜索页 - 历史记录读取 - 列表渲染

将来下面三句话, 可以放在控制台执行, 进行假数据初始化

   
var arr = [ "耐克", "李宁", "新百伦", "耐克王", "阿迪王" ];

 var jsonStr = JSON.stringify( arr );

 localStorage.setItem( "search_list", jsonStr );

功能1: 历史记录渲染功能

(1) 读取本地历史, 得到 jsonStr
(2) 将 jsonStr 转换成数组
(3) 通过数组, 进行页面渲染(模板引擎)

搜索页 -- 完成清空功能

功能2: 清空历史记录功能

(1) 通过事件委托给清空记录绑定点击事件
(2) 清空, 将本地的搜索历史移除, removeItme(key);
(3) 重新渲染页面

	// mui确认框
    // 参数1: 提示文本
    // 参数2: 标题
    // 参数3: 提示框按钮按钮, 要求是一个数组
    // 参数4: 点击按钮后的回调函数
    mui.confirm( "你确定要清空历史记录嘛?", "温馨提示", ["取消", "确认"], function( e ) {}

搜索页 - 删除功能

功能3: 删除单条历史记录

(1) 事件委托绑定点击事件

(2) 将下标存在删除按钮中, 点击后获取下标
(3) 读取本地存储, 拿到数组
(4) 根据下标, 从数组中将该下标的项移除, splice
(5) 将数组转换成 jsonStr
(6) 存到本地存储中
(7) 重新渲染

搜索页 - 使用mui的消息确认框

搜索页 - 添加功能

功能4: 点击搜索按钮, 添加搜索记录

(1) 给搜索按钮注册点击事件
(2) 获取搜索框的内容，判断数据是否为空
(3) 读取本地存储, 拿到数组
(4) 将搜索框的内容, unshift 到数组的最前面
(5) 将数组转成jsonStr, 存到本地存储中
(6) 重新渲染
(7) 跳转到对应的页面

注：非空判断，不能有重复项，长度不能大于10

搜索页 - 链接跳转

地址栏传值

./searchList.html?key=运动鞋

web常用的 布局框架-实战笔记