wex5 教程 之 图文讲解 后台管理界面设计与技巧

视频教程地址：http://v.youku.com/v_show/id_XMTgwOTAyMTkyMA==.html?from=s1.8-1-1.2&spm=a2h0k.8191407.0.0

一.效果演示：

管理员登陆    演示地址：http://ch-app.cloudx5.com  帐号:admin 密码:admin

登陆成功，进入管理员界面，保存登陆状态到数据库

左侧菜单慢慢缩进，并且菜单文字隐藏

鼠标经过头像，图像动态滑动下拉，指标旋转

时间同步

首页图文统计，引入echarts。

二.设计思路与代码实现

1.页面部局与组件组装

pannel组件，实现上下部分。top部分，用titleBar组件创建标题栏。

根据设计要求，依次创建头像，指标，登陆按钮，登陆时间，左滑按钮，同步时间，同步星期，关闭       按钮。

图像下滑，本质是div.左滑菜单用buttonGroup实现。内容页为contents页面集合容器。

2.绑定技术，js逻辑，css样式控制

头像路径绑定：

modle初始化，接收登陆页用户信息，用三目表达式进行判断，如果数据字段登陆状态为1,返回头像路           径，否则返回空值，图像为空。

同理，绑定登陆按钮，显示为昵称，否则显示为登陆。

头像下拉和 指向按钮旋转：:

css样式

注意事项:position:绝对位置，z-index:9999,值为最大，意为该对像处于最上层。diaplay:none不显示。

transition为变形初始样式指定监控样式。transform为变形样式，包括：rotate(旋转)，scale(缩放)，              translate(变形)，skew(倾斜);

js实现：

用jquery class选择器，选中div,执行jquery方法，hover.两个函数分别为鼠标接触与离开。

slideDown(200),下拉及时间，silidUp(200),上滑及时间。

$(".iconTowords") 找到js 对像，应用addClass和removeClass方法增加或删除样式。

左滑菜单

css样式：

左侧菜单弹出样式，宽度为10%缩进为3%

transition为css动画设置。必须设置在初始样式，监控css样式改变。all为所有样式改变都会触发动画效        果同，0.5s时间快慢设置。

右侧内容页，宽度90%，左边距margin-left:10%，与左侧菜单相适应。

绑定技术实现:

定义样式data

点击，改变data值

样式执行与样式data进行绑定。格式为json形式，左侧为执行样式，值为判断条件，返回值为true时执行。

菜单文字显示与隐藏：

css样式定义

同上，用bind-css 与数据字段定，实现css样式控制显示与隐藏。

内容页用相同原理实现，左右两侧用百分比的样式互相拉抻。运用自适应思想完成页面响应。

3. 时间同步：

window.setInterval设定定时器。timeOut为执行函数，时间间隔为1000毫秒。

星期同步：

系统方法newDate().getDay()取值为1234567阿拉伯数字，这里用data创建二维表形式，取对应值为汉          字即可。

4.图表echarts引入

绝对路径收入

参数设置。可根据需求，引入变量，与数据库交互，动态显示。

用echarts全局变量，创建echarts实例，初始化到某个div上，并加载参数。

5.页面关闭

页面关闭或浏览器关闭，将当前帐号的登陆状态改为0，即登陆状态为退出。