群组资料界面

talkview/src/js/controller/groupsinfoController.js

@@ -3,6 +3,7 @@
 angular.module('appMessage').controller('GroupsinfoController', ['$scope', function($scope) {
     //lxtalkClient.Invoke('{15180DEF-D508-45F7-BAEB-6486CD8752C8}', '_Register', '', $scope);
     $scope.searchClass = "允许任何人加入该群";
+
     $scope.actived = function($event) {
         var activeClick = $($event.target);
         console.log(activeClick);
@@ -22,4 +23,11 @@ angular.module('appMessage').controller('GroupsinfoController', ['$scope', funct
         }
     };
 
+    $scope.activeTable = function($event) {
+        var activeClick = $($event.target);
+        console.log(activeClick);
+        $("#content>tbody>tr").removeClass("activebcolor");
+        $(activeClick[0].parentElement).addClass("activebcolor");
+        $(activeClick[0].parentElement.parentElement).addClass("activebcolor");
+    };
 }]);

talkview/src/js/controller/historyMsgController.js

@@ -1,5 +1,4 @@
 'use strict';
-
 angular.module('appMessage').controller('HistoryMsgController', ['$scope', '$filter', '$timeout', function($scope, $filter, $timeout) {
     //lxtalkClient.Invoke('{15180DEF-D508-45F7-BAEB-6486CD8752C8}', '_Register', '', $scope);
     $scope.count = true;
@@ -17,27 +16,27 @@ angular.module('appMessage').controller('HistoryMsgController', ['$scope', '$fil
             oLeft = $(".tab-content")[0],
             oRight = $("#media")[0],
             oLine = $(".div-draw")[0];
-        console.log(oLine);
+        console.log($(oLine));
         oLine.onmousedown = function(e) {
-            var disX = (e || event).clientX;
-            oLine.left = oLine.offsetLeft;
-            console.log(disX, oLine.left);
+            var oClientX = (e || event).clientX; //鼠标位置距离最左端长度
+            var oLineX = oLine.offsetLeft; //line相对父元素的长度
+            console.log((e || event));
             document.onmousemove = function(e) {
-                var iT = oLine.left + ((e || event).clientX - disX);
+                var LineX = oLineX + ((e || event).clientX - oClientX);
                 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";
+                LineX < 150 && (LineX = 150);
+                LineX > 300 && (LineX = 300);
+                oLine.style.left = oLeft.style.width = LineX + "px";
+                oRight.style.width = oBox.clientWidth - LineX + "px";
                 return false;
             };
             document.onmouseup = function() {
                 document.onmousemove = null;
                 document.onmouseup = null;
-                oLine.releaseCapture && oLine.releaseCapture();
+                oLine.releaseCapture && oLine.releaseCapture(); //将鼠标事件退回
             };
-            oLine.setCapture && oLine.setCapture();
+            oLine.setCapture && oLine.setCapture(); //将后续的mouse事件都发送给当前对象
             return false;
         };
     });

talkview/src/js/router.js

@@ -7,7 +7,7 @@ angular.module('appMessage').run(['$rootScope', '$state', '$stateParams',
     function($stateProvider, $urlRouterProvider, $compileProvider) {
         $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|local):/);
         $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|local):/);
-        $urlRouterProvider.otherwise('/historyMsg'); //
+        $urlRouterProvider.otherwise('/groupsInfo'); //
         $stateProvider.state('messages', {
                 url: '/messages',
                 templateUrl: 'templates/messages.html',

talkview/src/less/app.main.less

@@ -1023,10 +1023,6 @@ body {
                             font-weight: normal;
                             vertical-align: middle;
                             margin-left: 5px;
-                            width: 800%;
-                            white-space: nowrap;
-                            overflow: hidden;
-                            text-overflow: ellipsis;
                         }
                     }
                 }
@@ -1048,7 +1044,6 @@ body {
         margin-left: 0px;
         overflow-y: auto;
         padding-bottom: 10px;
-        background: #FFF;
         border-bottom: 1px solid #eee;
         .well {
             background: #FFF;
@@ -1091,6 +1086,7 @@ body {
 }
 
 .groupinfo {
+    ::-webkit-scrollbar { width: 0px;}
     width: 500px;
     height: 500px;
     margin: 0px auto;
@@ -1114,7 +1110,7 @@ body {
                     float: left;
                     width: 80px;
                     height: 80px;
-                    margin: 10px 0px 10px 25px;
+                    margin: 10px 0px 10px 30px;
                     border-radius: 100%;
                     border:2px solid #ccc;
                     background: #96CEDF;
@@ -1128,6 +1124,7 @@ body {
                     }
                 }
                 .displayname {
+                    margin-right: 20px;
                     color: #444;
                     font-size: 18px;
                     font-weight: 500;
@@ -1147,52 +1144,51 @@ body {
                         outline: none;
                         color: #666;
                         background: #FFF;
-                        width: 80%;
+                        width: 85%;
                         white-space: nowrap;
                         overflow: hidden;
                         text-overflow: ellipsis;
                     }
                 }
                 #groupClass {
-                    margin: 45px 5px 30px 20px;
+                    margin: 45px 20px 30px 35px;
                     color: #666;
-                    font-size: 16px;
+                    font-size: 14px;
                     font-weight: 500;
                     font-family: "微软雅黑","宋体";
                     >span {
                         float: left;
-                        margin-left: 10px;
-                        margin-right: 15px;
+                        margin-right: 30px;
                     }
                     .input-sm {
                         cursor: default;
-                        width: 180px;
+                        width: 270px;
                         font-weight: 500;
                         font-family: "微软雅黑","宋体";
                     }
                 }
                 #groupIntroduction {
                     height: 110px;
-                    margin: 0px 5px 0px 20px;
+                    margin: 0px 20px 0px 35px;
                     color: #666;
-                    font-size: 16px;
+                    font-size: 14px;
                     font-weight: 500;
                     font-family: "微软雅黑","宋体";
                     >span {
                         float: left;
-                        margin-left: 10px;
+                        margin-right: 30px;
                     }
                 }
                 #groupNotice {
                     height: 110px;
-                    margin: 10px 5px 0px 20px;
+                    margin: 10px 20px 0px 35px;
                     color: #666;
-                    font-size: 16px;
+                    font-size: 14px;
                     font-weight: 500;
                     font-family: "微软雅黑","宋体";
                     >span {
                         float: left;
-                        margin-left: 10px;
+                        margin-right: 30px;
                     }
                 }
                 .text-message {
@@ -1201,7 +1197,7 @@ body {
                     height: 100px;
                     width: 330px;
                     float: left;
-                    padding: 5px;
+                    padding: 0px;
                     color: #444;
                     font-size: 12px;
                     font-weight: 500;
@@ -1210,7 +1206,7 @@ body {
             }
             #form3 {
                 >div {
-                    margin: 30px 40px 20px 40px;
+                    margin: 30px 40px 20px 42px;
                     line-height: normal;
                     white-space: nowrap; /* 自适应宽度,不换行*/
                     overflow: hidden;
@@ -1237,7 +1233,6 @@ body {
                     height: 80px;
                     float: right;
                     margin-right: 50px;
-                    margin-top: 3px;
                     padding: 2px 5px;
                     color: #444;
                     border: 1px solid #eee;
@@ -1274,7 +1269,7 @@ body {
                 }
             }
             #form2 {
-                margin: 20px auto;
+                margin: 30px auto;
                 line-height: normal;
                 white-space: nowrap; /* 自适应宽度,不换行*/
                 overflow: hidden;
@@ -1304,6 +1299,22 @@ body {
                         tr {
                             line-height: 24px;
                         }
+                        >tbody>tr:hover >td>input {
+                            overflow: hidden;
+                            background: #EEE;
+                        }
+                        >tbody>tr:hover {
+                            overflow: hidden;
+                            background: #EEE;
+                        }
+                        >tbody >.activebcolor {
+                            overflow: hidden;
+                            background: #EEE;
+                            >td>input {
+                                overflow: hidden;
+                                background: #EEE;
+                            }
+                        }
                     }
                     td>input {
                         border: none;

talkview/src/templates/11.html

@@ -1,81 +0,0 @@
-<!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>

talkview/src/templates/groupsInfo.html

@@ -1,7 +1,7 @@
 <div class="groupinfo">
     <div id="tablist">
         <!-- Nav tabs -->
-        <ul class="nav nav-pills" role="tablist">
+        <ul class="nav nav-pills diy" role="tablist">
             <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">群组资料</a></li>
             <li role="presentation"><a href="#members" aria-controls="members" role="tab" data-toggle="tab">成员列表</a></li>
             <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">群组设置</a></li>
@@ -47,10 +47,10 @@
                     <table id="header">
                         <thead>
                             <tr>
-                                <th style="width:30px;"></th>
-                                <th style="width:170px">成员</th>
+                                <th style="width:50px;"></th>
+                                <th style="width:120px">成员</th>
                                 <th style="width:250px">显示名</th>
-                                <th style="width:50px">操作</th>
+                                <th style="width:80px">操作</th>
                             </tr>
                         </thead>
                     </table>
@@ -58,30 +58,30 @@
                     <table id="content">
                         <thead>
                             <tr>
-                                <th style="width:30px;"></th>
-                                <th style="width:170px"></th>
+                                <th style="width:50px;"></th>
+                                <th style="width:120px"></th>
                                 <th style="width:250px"></th>
-                                <th style="width:50px"></th>
+                                <th style="width:80px"></th>
                             </tr>
                         </thead>
                         <tbody>
-                            <tr>
+                            <tr ng-click="activeTable($event)">
                                 <td style="text-align:center;"></td>
                                 <td><input type="text" readonly="readonly" value="lsswsrjkjyxgs"></td>
                                 <td><input type="text" readonly="readonly" value="丽水市万赛软件科技有限公司维护号丽水市万赛软件科技有限公司维护号"></td>
-                                <td><span style="padding-left:10px;font-size:14px;color:#E35850;" class="glyphicon glyphicon-remove"></span></td>
+                                <td><span style="padding-left:0px;font-size:14px;color:#E35850;" class="glyphicon glyphicon-remove"></span></td>
                             </tr>
-                            <tr>
+                            <tr ng-click="activeTable($event)">
                                 <td style="text-align:center;"></td>
                                 <td><input type="text" readonly="readonly" value="lsswsrjkjyxgs"></td>
                                 <td><input type="text" readonly="readonly" value="丽水市万赛软件科技有限公司维护号丽水市万赛软件科技有限公司维护号"></td>
-                                <td><span style="padding-left:10px;font-size:14px;color:#E35850;" class="glyphicon glyphicon-remove"></span></td>
+                                <td><span style="padding-left:0px;font-size:14px;color:#E35850;" class="glyphicon glyphicon-remove"></span></td>
                             </tr>
-                            <tr>
+                            <tr ng-click="activeTable($event)">
                                 <td style="text-align:center;"></td>
                                 <td><input type="text" readonly="readonly" value="lsswsrjkjyxgs"></td>
                                 <td><input type="text" readonly="readonly" value="丽水市万赛软件科技有限公司维护号丽水市万赛软件科技有限公司维护号"></td>
-                                <td><span style="padding-left:10px;font-size:14px;color:#E35850;" class="glyphicon glyphicon-remove"></span></td>
+                                <td><span style="padding-left:0px;font-size:14px;color:#E35850;" class="glyphicon glyphicon-remove"></span></td>
                             </tr>
                         </tbody>
                     </table>

talkview/src/templates/historyMsg.html

@@ -26,7 +26,7 @@
                 <option>系统消息</option>
             </select>
         </div>
-        <button type="button" class="glyphicon glyphicon-refresh" title="刷新" ng-click="onRefresh($event)"></button>
+        <button type="button" class="glyphicon glyphicon-refresh" title="重置" ng-click="onRefresh($event)"></button>
     </div>
     <div style="border-top:solid 1px #ddd;"></div>
     <div id="leftTab">
@@ -43,7 +43,7 @@
                 <ul>
                     <li class="Li" ng-click="actived($event)">
                         <label class="lf">
-                        <img src="../img/自己头像1.png"><span>杭州测试王巧巧(ls_wqq)</span>
+                        <img src="../img/自己头像1.png"><span>杭州测试王巧巧杭州测试王巧巧ls_wqq)</span>
                     </label>
                     </li>
                     <li class="Li" ng-click="actived($event)">