历史消息界面

talkview/src/js/controller/historyMsgController.js

@@ -8,10 +8,40 @@ angular.module('appMessage').controller('HistoryMsgController', ['$scope', '$fil
     $scope.searchArea = "全部";
     $scope.activeData = "全部";
     $scope.animateFirst = true;
-    $scope.totalItems = 100;
+    $scope.totalItems = 1000;
     $scope.currentPage = Math.floor($scope.totalItems / 10) + 1; //初始当前页
     $scope.maxSize = 5; //最多显示7页其他的用···代替
 
+    $scope.$on('$viewContentLoaded', function() {
+        var oBox = $("#box")[0],
+            oLeft = $(".tab-content")[0],
+            oRight = $("#media")[0],
+            oLine = $(".div-draw")[0];
+        console.log(oLine);
+        oLine.onmousedown = function(e) {
+            var disX = (e || event).clientX;
+            oLine.left = oLine.offsetLeft;
+            console.log(disX, oLine.left);
+            document.onmousemove = function(e) {
+                var iT = oLine.left + ((e || event).clientX - disX);
+                var e = e || window.event;
+                oLine.style.margin = 0;
+                iT < 150 && (iT = 150);
+                iT > 300 && (iT = 300);
+                oLine.style.left = oLeft.style.width = iT + "px";
+                oRight.style.width = oBox.clientWidth - iT + "px";
+                return false;
+            };
+            document.onmouseup = function() {
+                document.onmousemove = null;
+                document.onmouseup = null;
+                oLine.releaseCapture && oLine.releaseCapture();
+            };
+            oLine.setCapture && oLine.setCapture();
+            return false;
+        };
+    });
+
     $scope.initAppContent = function(appContentJson) {
         $scope.appContent = JSON.parse(appContentJson);
     };

talkview/src/less/app.main.less

@@ -777,7 +777,7 @@ body {
     ::-webkit-scrollbar { width: 0px;}
     width:100%;
     height: 100%;
-    min-width: 700px;
+    min-width: 750px;
     margin: 0px auto;
     background: #FFF;
     font-size: 12px;
@@ -785,7 +785,7 @@ body {
     border-bottom: 1px solid #ddd;
     #head{
         line-height: normal !important;
-        background-color: #F5FAFE;
+        background-color: #E8F4F8;
         height: 40px;
         .selectData {
             float: right;
@@ -879,6 +879,7 @@ body {
     #leftTab {
         float: left;
         width: 150px;
+        height: 600px;
         .nav-pills {
             margin: 8px 10px 0px 10px;
             &.diy {
@@ -950,14 +951,12 @@ body {
         }
     }
     .tab-content {
-        background: #FFF;
         float: left;
         width: 180px;
-        height: 560px;
+        height: 600px;
         overflow-y: auto;
         overflow-x: hidden;
         border-left: 1px solid #ddd;
-        border-right: 1px solid #ddd;
         font-size: 12px;
         font-family: "微软雅黑","宋体";
         >.tab-pane {
@@ -993,7 +992,6 @@ body {
                     color: #009EE0;
                 }
                 >li {
-                    width: 178px;
                     height: 28px;
                     font-family: "微软雅黑","宋体";
                     padding-top:3px;
@@ -1035,8 +1033,19 @@ body {
             }
         }
     }
+    .div-draw {
+        position: absolute;
+        top: 0px;
+        left: 180px;
+        height: 600px;
+        width: 5px;
+        background-color: #FFF;
+        border-left: 1px solid #ddd;
+        cursor: e-resize;
+    }
     #media {
-        height: 510px;
+        height: 530px;
+        margin-left: 0px;
         overflow-y: auto;
         padding-bottom: 10px;
         background: #FFF;
@@ -1050,13 +1059,14 @@ body {
         }
     }
     #paginationTab {
-        height: 50px;
-        min-width: 820px;
+        height: 70px;
+        margin-left: 180px;
+        white-space: nowrap; /* 自适应宽度,不换行*/
+        overflow: hidden;
         background: #FFF;
         text-align: right;
-        >span {
-            float: left;
-            margin: 13px;
+        >p {
+            margin: -8px 80px;
         }
         >ul {
             margin: 8px;

talkview/src/templates/11.html

@@ -0,0 +1,81 @@
+<!DOCTYPE html> 
+<html> 
+<head> 
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
+<title>左右可拖动的内容显示区</title> 
+<style> 
+ul,li{margin:0;padding:0;} 
+body{font:14px/1.5 Arial;color:#666;} 
+#box{position:relative;width:600px;height:400px;border:2px solid #000;margin:10px auto;overflow:hidden;} 
+#box ul{list-style-position:inside;margin:10px;} 
+#top,#bottom{color:#FFF;width:300px;height:400px;overflow:hidden;} 
+#top{background:green; float:left} 
+#bottom{background:skyblue;float:right} 
+#line{position:absolute;top:0;left:50%;height:100%;width:4px;overflow:hidden;background:red;cursor:w-resize;} 
+</style> 
+<script> 
+function $(id) { 
+ return document.getElementById(id)  
+} 
+window.onload = function() { 
+ var oBox = $("box"), oTop = $("top"), oBottom = $("bottom"), oLine = $("line"); 
+ oLine.onmousedown = function(e) { 
+ var disX = (e || event).clientX; 
+ oLine.left = oLine.offsetLeft; 
+ document.onmousemove = function(e) {  
+  var iT = oLine.left + ((e || event).clientX - disX); 
+ var e=e||window.event,tarnameb=e.target||e.srcElement; 
+  var maxT = oBox.clientWight - oLine.offsetWidth; 
+  oLine.style.margin = 0; 
+  iT < 0 && (iT = 0); 
+  iT > maxT && (iT = maxT); 
+  oLine.style.left = oTop.style.width = iT + "px"; 
+  oBottom.style.width = oBox.clientWidth - iT + "px"; 
+ $("msg").innerText='top.width:'+oLine.style.width+'---bottom.width:'+oBottom.style.width+'---oLine.offsetLeft:'+oLine.offsetLeft+'---disX:'+disX+'---tarnameb:'+tarnameb.tagName; 
+  return false
+ };  
+ document.onmouseup = function() { 
+  document.onmousemove = null; 
+  document.onmouseup = null;  
+  oLine.releaseCapture && oLine.releaseCapture() 
+ }; 
+ oLine.setCapture && oLine.setCapture(); 
+ return false
+ }; 
+}; 
+</script> 
+</head> 
+<body> 
+<center>左右拖动红条改变显示区域宽度<span id="msg"></span></center> 
+<div id="box"> 
+ <div id="top"> 
+ <ul> 
+ <li><a href="#" target="_blank">jQuery初学实例代码集</a></li><li><a href="#" target="_blank">100多个ExtJS应用初学实例集</a></li> 
+  <li><a href="#" target="_blank">基于jQuery的省、市、县三级级联菜单</a></li> 
+  <li><a href="#" target="_blank">一个类似QQ网的JS相册展示特效</a></li> 
+  <li><a href="#" target="_blank">eWebEditor v4.60 最新通用精简版</a></li> 
+  <li><a href="#" target="_blank">FCKeditor 2.6.4.1 网页编辑器</a></li> 
+  <li><a href="#" target="_blank">jQuery平滑图片滚动</a></li> 
+  <li><a href="#" target="_blank">Xml+JS省市县三级联动菜单</a></li> 
+  <li><a href="#" target="_blank">jQuery 鼠标滑过链接文字弹出层提示的效果</a></li> 
+  <li><a href="#" target="_blank">JS可控制的图片左右滚动特效（走马灯）</a></li> 
+ </ul> 
+ </div> 
+ <div id="bottom"> 
+ <ul> 
+ <li><a href="#" target="_blank">网页上部大Banner广告特效及图片横向滚动代码</a></li> 
+  <li><a href="#" target="_blank">FlexSlider网页广告、图片焦点图切换插件</a></li> 
+  <li><a href="#" target="_blank">兼容IE，火狐的JavaScript图片切换</a></li> 
+  <li><a href="#" target="_blank">jQuery仿ios无线局域网WIFI提示效果（折叠面板）</a></li> 
+  <li><a href="#" target="_blank">TopUp js图片展示及弹出层特效代码</a></li> 
+  <li><a href="#" target="_blank">jQuery仿Apple苹果手机放大镜阅读效果</a></li> 
+  <li><a href="#" target="_blank">Colortip 文字title多样式提示插件</a></li> 
+  <li><a href="#" target="_blank">网页换肤，Ajax网页风格切换代码集</a></li> 
+  <li><a href="#" target="_blank">超强大、漂亮的蓝色网页弹出层效果</a></li> 
+  <li><a href="#" target="_blank">jQuery 图像预览功能的代码实现</a></li> 
+ </ul> 
+ </div> 
+ <div id="line"></div> 
+</div> 
+</body> 
+</html>