WEUI框架学习：项目练习（一）
今天开始写项目，今天一天编写了智学无忧的登录界面，界面图如下：
在刚开始编辑的时候还没有一点思绪，不知道从哪里开始。看了一会就有了一个大体的结构。
分析各个部分的编写：
头部导航：是使用weui-cell 编写分为左、中、右三个部分，使用weui-navbar把头部固定定位在窗口的最顶端。但是还是有一点缺陷，js部分还没有完成，这样只是一个静态的。代码如下：
<div class="weui-navbar"> <div class="weui-cell" style="width: 100%;"> <div class="weui-cell__hd"> <i class="iconfont icon-cuowu"></i> </div> <div class="weui-cell__bd" style="text-align: center;"> <p>智学无忧教育系统</p> </div> <div class="weui-cell__ft"> <i class="iconfont icon-gengduo"></i> </div> </div> </div>
内容部分：内容分为logo部分、输入框部分，开关部分，登录按钮，和flex布局部分，从上直下的布局来编写的，通过css样式来设置logo和输入框的布局。代码如下：
<div class="zxwusub"> <!--智学无忧logo--> <div class="zxlogo"> <img src="example/images/0001.png" /> </div> <!--学员登录--> <div class="weui-cells__title" style="text-align: center; color: #008080;"> <h1>学员登录<h1></div> <!--手机号--> <div class="weui-cell" style="padding: 16px 15px; background-color: #FFFFFF;"> <div class="weui-cell__hd"> <i class="iconfont icon-denglu1"></i> </div> <div class="weui-cell__bd"> <input id="telsa" class="weui-input" value="" style="padding: 0;" type="tel" placeholder="请输入手机号或email"/> </div> <div id="tels" class="weui-cell__ft"> <i class="weui-icon-clear cleals"></i> <i class="weui-icon-success"></i> <i class="weui-icon-warn"></i> </div> </div> <!--密码框--> <div class="weui-cell" style="padding: 16px 15px; background-color: #FFFFFF;"> <div class="weui-cell__hd"> <i class="iconfont icon-denglu1"></i> </div> <div class="weui-cell__bd"> <input id="passl" class="weui-input" value="" style="padding: 0px;" type="password" placeholder="请输入6位数以上密码"/> </div> <div id="pass" class="weui-cell__ft"> <i class="weui-icon-clear clealsa"></i> <i class="weui-icon-success"></i> <i class="weui-icon-warn"></i> </div> </div> <!--记住密码--> <div class="weui-cells weui-cells_from"> <div class="weui-cell weui-cell_switch"> <div class="weui-cell__bd"> 记住密码 </div> <div class="weui-cell__ft"> <input class="weui-switch" type="checkbox"/> </div> </div> </div> <button class="weui-btn" style="background-color: #008080;">登录</button> <div class="weui-flex" style="border-bottom: #F7F7FA solid 1px;"> <div class="weui-flex__item flexs" ><div class="placeholder"><a href="#">立即注册</a></div></div> <div class="weui-flex__item flexs" ><div class="placeholder"><a href="#">忘记密码？</a></div></div> </div> </div>
css样式如下：
.zxwusub { width: 100%; height: 100%; background-color: #FBF9FE; margin-top: 47px; } .zxlogo { width: 100px; height: 100px; margin: auto; padding: 30px 0; } .zxlogo img { max-width: 100%; height: auto; border-radius: 50%; box-shadow: 0 0 17px 2px #80cbc4; } #tels i { display: none; } input::-webkit-input-placeholder { text-align: center; } #pass i { display: none; } .flexs { text-align: center; height: 50px; line-height: 50px; background-color: #FFFFFF; } .flexs a { color: #000000; }
logo的布局是使用margin：auto是图片水平居中，学员登录字样是使用weui-cells__title来编写，输入框的布局是使用weui-cell。
js大码如下：
//手机号码的输入 $(function(){ var telsrge=/^[0-9]{11}$/; var emlrge=/^[1-9a-zA-Z]+@[0-9a-zA-Z]{2,3}.[0-9a-zA-Z]{2,6}$/; $("#telsa").on("focus",function(){ $("#tels").children("i").eq(0).show().siblings().hide(); $("#telsa").attr("placeholder","") $("#tels .cleals").on("click",function(){ $("#telsa").val(""); }) }) $("#telsa").on("blur",function(){ var inpval=$(this).val(); if(inpval==""||inpval==null){ $("#tels").children("i").eq(2).show().siblings().hide(); $("#telsa").attr("placeholder","请输入手机号或email") }else if(!telsrge.test(inpval)&&!emlrge.test(inpval)) { $("#tels").children("i").eq(0).show().siblings().hide(); }else{ $("#tels").children("i").eq(1).show().siblings().hide(); } }) }) //密码 $(function(){ var mirge=/^[0-9a-zA-Z]{6,}$/; $("#passl").on("focus",function(){ $("#pass").children("i").eq(0).show().siblings().hide(); $("#passl").attr("placeholder","") $("#pass .clealsa").on("click",function(){ $("#passl").val(""); }) }) $("#passl").on("blur",function(){ var ipval=$(this).val(); if (ipval==""||ipval==null) { $("#pass").children("i").eq(2).show().siblings().hide(); $("#passl").attr("placeholder","请输入手机号或email") }else if(!mirge.test(ipval)){ $("#pass").children("i").eq(0).show().siblings().hide(); }else{ $("#pass").children("i").eq(1).show().siblings().hide(); } }) })
输入框给了一个动态，在手机号输入框和密码输入框中，判断了输入的字符是不是为空，并用正则表达式进行了判断，给了一个在输入字符是可以点击左边的一个按键把输入的字符清空。
底部导航部分：是使用weui-tabbar来编写的，其中的图片通过阿里图库引入的。代码如下：
<div class="weui-tab__panel"> <div class="tabbar01"> 签到 </div> <div class="tabbar01">单词</div> <div class="tabbar01">上机</div> <div class="tabbar01">测试</div> <div class="tabbar01">更多</div> </div> <div class="weui-tabbar"> <a href="javascrpt:;" class="weui-tabbar__item weui-tabbar__item_on daohang"> <i class="weui-tabbar__icon iconfont icon-qiandao"></i> <p class="weui-tabbar__label">签到</p> </a> <a href="javascript:;" class="weui-tabbar__item daohang"> <i class="weui-tabbar__icon iconfont icon-danci"></i> <p class="weui-tabbar__label">单词</p> </a> <a href="javascript:;" class="weui-tabbar__item daohang"> <i class="weui-tabbar__icon iconfont icon-shangjitongji"></i> <p class="weui-tabbar__label">上机</p> </a> <a href="javascript:;" class="weui-tabbar__item daohang"> <i class="weui-tabbar__icon iconfont icon-huabanfuben"></i> <p class="weui-tabbar__label">测试</p> </a> <a href="javascript:;" class="weui-tabbar__item daohang"> <i class="weui-tabbar__icon iconfont icon-gengduo"></i> <p class="weui-tabbar__label">更多</p> </a> </div>
js代码如下：
$(function(){ $(".daohang").on("click",function(){ $(".zxwusub").hide(); var index=$(this).index(); $(".tabbar01").eq(index).show().siblings().hide(); $(this).children("p").css("color","green"); $(this).siblings().children("p").css("color","#999999") }) })
现在实现的功能就是点击下面的5个导航对应的界面就会显示出来，并且导航下面的文字会变颜色。
在编辑过程中自己犯了一个错误，本来想给输入框在输入的时候显示的文字离左边图标有一定的距离，我就给输入框加了左右内边距，但是在显示出来的时候，总个见面在右边会出现一个白色的空白溢出的位置使界面的宽度变宽。还有就是给输入框中placeholder属性的时候，它是在最左边的，为了使界面美观，需要使它居中，刚开始是使用 text-align: center; 但是在输入字符的时候输入的字符也会居中，不是我所需要的，最后在使用了一个样式来解决这个问题
input::-webkit-input-placeholder { text-align: center; } 输入的字符就不会居中而是在左边。