搜索UI完成，底部footer的bug修复

userWeb/UI/control.html

@@ -37,19 +37,40 @@
 		</div>
 		<div class="hr"></div>
 	</div>
-	<div id="control_avatar"><!-- 我的UI -->
+	<div id="control_avatar"><!-- 头像-我的UI -->
 		
 	</div>
 	<div id="control_cart"><!-- 购物车侧拉UI -->
-		
 	</div>
 	<div id="control_menu"><!-- 菜单侧拉UI -->
-		
+		<div class="main">
+			<p class="shut">&times;</p>
+			<div>
+				<div class="one">
+					<div class="lang">
+						<p class="tit">Language</p>
+						<p>en</p>
+						<p>cn</p>
+					</div>
+					<div class="money">
+						<p class="tit">Currencies</p>
+						<p>USD</p>
+						<p>EUR</p>
+						<p>Chinese Yuan</p>
+					</div>
+				</div>
+				<div class="contact">
+					<p class="tit">Contact Us</p>
+					<p>
+						Email: support@imgtee.com <br/>
+						Messager: imgtee <br/>
+						QQ   : 12345678 <br/>
+					</p>
+				</div>
+				<div class="follow">
+					<p class="tit">Follow Us On Social</p>
+				</div>
+			</div>
+		</div>
 	</div>
-	<footer>
-		<span>@ Copyright 2009-2017 All rights reserved imgtee.com</span>
-		<span>
-			
-		</span>
-	</footer>
 </div>

userWeb/UI/css/control.css

@@ -20,7 +20,7 @@
 #control header nav a{
 	display: inline-block;
     height: 123px;
-    width:25%;
+    width:20%;
     text-align: center;
     line-height: 123px;
     font-weight: 500;
@@ -220,7 +220,7 @@
 #control_search .hr{
     background-color: #f1f1f1;
     height: 2px;
-    margin-top: 50px;
+    margin: 50px 0;
 }
 /*四个控件按钮--头像*/
 #control_avatar{
@@ -233,10 +233,96 @@
 /*四个控件按钮--菜单*/
 #control_menu{
     display:none;
+    background-color: rgba(153, 153, 153,.5);
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    text-align:right;
+}
+#control_menu .main{
+    width: 29%;
+    height: 100%;
+    display: inline-block;
+    background-color: #fff;
+}
+#control_menu .shut{
+    text-align: left;
+    margin: 4rem 0 0 2rem;
+    font-size: 50px;
+    color: #D1D5DA;
+    line-height: 28px;
+    font-weight: 300;
 }
+
 /*页脚*/
-#control footer{
+#uiLayer>footer{
     background-color: #F1F1F1;
     width:100%;
     height: 35px;
-}
+    line-height: 35px;
+    color: #a5a7ae;
+    text-indent: 2rem;
+}
+#uiLayer>footer>div{
+    float: right;
+    padding-right: 3rem;
+    line-height: 0;
+}
+#uiLayer>footer>div>span{
+    display:inline-block;
+    width:25px;
+    height:25px;
+    background-position-x: 3px;
+    background-repeat: no-repeat;
+    margin: 8px 1.5rem 0 0;
+}
+#uiLayer>footer .facebook{
+    background-image: url("../img/facebook_icon.svg");
+}
+#uiLayer>footer .facebook:hover{
+    background-image: url("../img/facebook_icon_hover.svg");
+}
+
+#uiLayer>footer .twitter{
+    background-image: url("../img/twitter_icon.svg");
+}
+#uiLayer>footer .twitter:hover{
+    background-image: url("../img/twitter_icon_hover.svg");
+}
+
+#uiLayer>footer .pinterest{
+    background-image: url("../img/pinternest_iocn.svg");
+}
+#uiLayer>footer .pinterest:hover{
+    background-image: url("../img/pinternest_iocn_hover.svg");
+}
+
+#uiLayer>footer .google{
+    background-image: url("../img/google_icon.svg");
+}
+#uiLayer>footer .google:hover{
+    background-image: url("../img/google_icon_hover.svg");
+}
+
+#uiLayer>footer .instagram{
+    background-image: url("../img/instagram_icon.svg");
+}
+#uiLayer>footer .instagram:hover{
+    background-image: url("../img/instagram_icon_hover.svg");
+}
+
+#uiLayer>footer .wechat{
+    background-image: url("../img/wechat_icon.svg");
+}
+#uiLayer>footer .wechat:hover{
+    background-image: url("../img/wechat_icon_hover.svg");
+}
+
+#uiLayer>footer .youtube{
+    background-image: url("../img/youtube_icon.svg");
+}
+#uiLayer>footer .youtube:hover{
+    background-image: url("../img/youtube_icon_hover.svg");
+}

userWeb/UI/js/about.js

@@ -6,4 +6,5 @@ addUI("about",function(){
 		"text-decoration": 'none'
 	});
 	$("#about").show();
+	loadFooter();//加载页脚
 });

userWeb/UI/js/control.js

@@ -1,9 +1,8 @@
 // 添加公共UI
 addUI("control",function(){ //加载control回调
-	var controlO = new controlF();
+	var controlObj = new controlF();
 	$("#control").show();
-	console.log("加载control回调")
-	controlSuccess()	//load完公共部分在load其他
+	controlSuccess()//load完公共部分在load其他
 });
 function controlF(){
 	function lang(){	//语言初始化
@@ -15,6 +14,7 @@ function controlF(){
 		$("#control_search .hot .tit").text(currentLang.co0005)
 	}
 	lang();
+	//搜索按钮
 	$("#control header .search")[0].onclick=function(){
 		var blockArr = $("#uiLayer>div").not('#control')
 		for (var i = 0; i < blockArr.length; i++) {
@@ -25,10 +25,16 @@ function controlF(){
 		blockArr.fadeOut("1000",function(){
 			$("#control_search").fadeIn("1000");
 		});
+		//myEndFunction_focus动画完成后的回调
 		var x = $("#control_search .input>div>span")[0];
 		x.addEventListener("webkitAnimationEnd", myEndFunction_focus);
 		x.addEventListener("animationend", myEndFunction_focus);
+
+		$("#uiLayer footer").hide("slow");
+		var footer = $("#uiLayer footer").detach()
 		function myEndFunction_focus() {
+			$("#uiLayer").append(footer);
+			$("#uiLayer footer").fadeIn("slow");
 			$("#control_search .input>div>p>input")[0].focus()
 		}
 		// 关闭搜索UI
@@ -42,4 +48,17 @@ function controlF(){
 			})
 		}
 	}
+	//头像按钮
+	$("#control header .avatar")[0].onclick=function(){
+		console.log("头像按钮")
+	}
+	//购物车侧拉按钮
+	$("#control header .cart")[0].onclick=function(){
+		console.log("购物车侧拉按钮")
+	}
+	//菜单侧拉按钮
+	$("#control header .menu")[0].onclick=function(){
+		$("#control_menu").css('display', 'block');
+		console.log("菜单侧拉按钮")
+	}
 }

userWeb/UI/js/custom.js

@@ -6,4 +6,5 @@ addUI("custom",function(){
 		"text-decoration": 'none'
 	});
 	$("#custom").show();
+	loadFooter();//加载页脚
 });

userWeb/UI/js/footer.js

@@ -0,0 +1,14 @@
+var str = 
+'<footer>'+
+	'<span>@ Copyright 2009-2017 All rights reserved imgtee.com</span>'+
+	'<div>'+
+		'<span class="facebook"></span>'+
+		'<span class="twitter"></span>'+
+		'<span class="pinterest"></span>'+
+		'<span class="google"></span>'+
+		'<span class="instagram"></span>'+
+		'<span class="wechat"></span>'+
+		'<span class="youtube"></span>'+
+	'</div>'+
+'</footer>';
+$("#uiLayer").append(str);

userWeb/UI/js/home.js

@@ -1,4 +1,5 @@
 // 添加首页默认UI
 addUI("home",function(){
 	$("#home").show();
+	loadFooter();//加载页脚
 });

userWeb/UI/js/shop.js

@@ -6,4 +6,5 @@ addUI("shop",function(){
 		"text-decoration": 'none'
 	});
 	$("#shop").show();
+	loadFooter();//加载页脚
 });

userWeb/about.html

@@ -27,9 +27,12 @@
     <!-- UI层配置 -->
     <script src="UI/js/control.js"></script>            <!-- 公共导航及控件UI层  -->
     <script>
-        function controlSuccess(){
+        function controlSuccess() {//公共部分加载完成后加载关于
             dynamicLoadScript("UI/js/about.js")
         }
+        function loadFooter(){//关于加载完成后加载页脚
+            dynamicLoadScript("UI/js/footer.js")
+        }
     </script>
 </body>
 </html>

userWeb/config/common.css

@@ -1,6 +1,10 @@
 /*
  *全局样式
  */
+.container-fluid {
+    padding-right: 5px;
+    padding-left: 5px;
+}
 #uiLayer{
   background-color:#fff;
 }

userWeb/custom.html

@@ -27,9 +27,12 @@
     <!-- UI层配置 -->
     <script src="UI/js/control.js"></script>            <!-- 公共导航及控件UI层  -->
     <script>
-        function controlSuccess() {
+        function controlSuccess() {//公共部分加载完成后加载定制
             dynamicLoadScript("UI/js/custom.js")
         }
+        function loadFooter(){//定制加载完成后加载页脚
+            dynamicLoadScript("UI/js/footer.js")
+        }
     </script>
 </body>
 </html>

userWeb/home.html

@@ -27,9 +27,12 @@
     <!-- UI层配置 -->
     <script src="UI/js/control.js"></script>            <!-- 公共导航及控件UI层  -->
     <script>
-        function controlSuccess() {
+        function controlSuccess() {//公共部分加载完成后加载首页
             dynamicLoadScript("UI/js/home.js")
         }
+        function loadFooter(){//首页加载完成后加载页脚
+            dynamicLoadScript("UI/js/footer.js")
+        }
     </script>
 </body>
 </html>

userWeb/shop.html

@@ -27,9 +27,12 @@
     <!-- UI层配置 -->
     <script src="UI/js/control.js"></script>            <!-- 公共导航及控件UI层  -->
     <script>
-        function controlSuccess() {
+        function controlSuccess() {//公共部分加载完成后加载商店
             dynamicLoadScript("UI/js/shop.js")
         }
+        function loadFooter(){//商店加载完成后加载页脚
+            dynamicLoadScript("UI/js/footer.js")
+        }
     </script>
 </body>
 </html>