Merge pull request #102 from yangxiaohu2014/help-dialog

update help dialog

dialogs/help/help.js

@@ -29,18 +29,19 @@
         // 2、匹配菜单项
         var reg_tcell = /\:/g;
         // 3、匹配键值
-        var reg_key = /\`[\w\/]+\`/g;
+        var reg_key = /\`(.+?)\`/g;
         // var 4、匹配快捷键组合选择
-        var reg_opt= /or|\+/gi;
+        var reg_opt= /or|\+|,/gi;
         // 菜单分类标题1
         var temp = '';
         var xmlhttp;
+        var arr, keys, info;
 
 
         // help-container start
         helpInfo += '<div class="help-container">';
         // help-header start
-        helpInfo += '<h2 class="help-header page-header">操作说明</h2>';
+        helpInfo += '<h2 class="help-header">操作说明</h2>';
         // help-header end
         // help-article start
         helpInfo += '<div class="help-article row">';
@@ -62,27 +63,22 @@
                     isFirstTable = false;
                 }
                 temp = line.substring(line.lastIndexOf(" "));
-                result += '<table class="shortcuts-table "><tr><td></td><td><span class="label shortcuts-thead">' + temp + '</span></td>';
+                result += '<table class="shortcuts-table "><tr><td></td><td><span class="shortcuts-thead">' + temp + '</span></td>';
             }
-            else {
+            else if (/\S/.test(line)) {
             // else if(reg_tcell.test(line)) {
 
                 result += '<tr class="shortcuts-tbody"><td class="shortcuts-group"><div class="right">';
 
-                while ((arr = reg_key.exec(line)) != null) {
-                    var arr1 = arr.toString();
-                    result += '<span class="shortcuts-key label">' + arr1.substring(1,arr1.length-1) + '</span>';
+                arr = line.split(':');
+                keys = arr[0];
+                info = arr[1];
 
-                    var arr2 = reg_opt.exec(line);
+                keys = keys.replace(reg_key, '<span class="shortcuts-key label $1">$1</span>');
 
-                    if(arr2 != null){
-                        result += '<span class="label shortcuts-opt">' + arr2 + '</span>';
-                    }
-                };
+                result += keys;
 
-
-                temp = line.substring(line.lastIndexOf(" "));
-                result += '</div></td><td class="shortcuts-use">' + temp + '</td>';
+                result += '</div></td><td class="shortcuts-use">' + info + '</td>';
                 // 加最后一项的结尾标签
                 result += '</tr>';
             }
@@ -112,8 +108,42 @@
                 }
                 this.root().html( html );
             },
-            initEvent: function ( km, $w ) {},
-            width: 590
+            initEvent: function ( km, $w ) {
+                // var margin = 10px;
+                // var table = $("table");//这里是区块名称
+                // var table_W = table[0].offsetWidth + margin;//取区块的实际宽度（包含间距，这里使用源生的offsetWidth函数，不适用jQuery的width()函数是因为它不能取得实际宽度，例如元素内有pandding就不行了）
+                // alert("me"); 
+                // function pbl(){//瀑布流布局函数
+                //     var h = [];//记录区块高度的数组
+                //     var n = 2;//两列显示
+                //     for(var i = 0;i < table.length;i++) {//有多少个table就循环多少次
+                //         table_H = table[i].offsetHeight;//获取每个table的高度
+                //         if(i < 2) {//n是一行最多的table，所以小于n就是第一行了
+                //             h[i] = table_H;//把每个li放到数组里面
+                //             table.eq(i).css("top",0);//第一行的Li的top值为0
+                //             table.eq(i).css("left",i * table_W);//第i个li的左坐标就是i*li的宽度
+                //             }
+                //         else{
+                //             min_H = Math.min.apply(null,h) ;//取得数组中的最小值，区块中高度值最小的那个
+                //             minKey = getarraykey(h, min_H);//最小的值对应的指针
+                //             h[minKey] += table_H + margin ;//加上新高度后更新高度值
+                //             table.eq(i).css("top",min_H + margin);//先得到高度最小的Li，然后把接下来的li放到它的下面
+                //             table.eq(i).css("left",minKey * table_W); //第i个li的左坐标就是i*li的宽度
+                //         }
+                //     }
+                // }
+
+                // /* 使用for in运算返回数组中某一值的对应项数(比如算出最小的高度值是数组里面的第几个) */
+                // function getarraykey(s, v) {
+                //     for(k in s) {
+                //         if(s[k] == v) {
+                //             return k;
+                //         }
+                //     }
+                // }
+            },
+            width: 1000
         } );
+
     }
 } )();
\ No newline at end of file

themes/default/css/help.css

 
 .shortcuts-opt {
-    margin: 0px 5px;
-    background-color: #D4D4D4 !important;
+    margin: 0px 7px;
+    background-color: #fff;
+    font-size: 14px;
 }
 .shortcuts-group {
 	padding-right: 15px;
+    width: 220px;
 }
 .shortcuts-thead {
-	background-color: black !important;
+    font-size: 14px;
+    font-weight: bold;
+    line-height: 14px;
 }
 #div1 {
 	display: none;
 }
-.help-container {
+/*.help-container {
 	width: 586px;
 	float: left;
+}*/
+.shortcuts-use {
+    width: 160px;
+    font-size: 14px;
+    font-weight: lighter;
 }
 .help-header {
 	padding-bottom: 9px;
 	margin: 20px 20px 30px;
 	border-bottom: 1px solid #EEE;
+    display: none;
 }
 table {
     max-width: 100%;
@@ -27,13 +37,14 @@ table {
     border-collapse: collapse;
     border-spacing: 0px;
     float: left;
-    margin-left: 20px;
-    margin-bottom: 30px;
+    margin-left: 10px;
+    margin-top: 30px;
 }
 td {
     display: table-cell;
     float: none;
     margin-left: 0px;
+    padding-bottom: 6px;
 }
 h2 {
 	font-size: 31.5px;
@@ -48,15 +59,16 @@ body {
 .label {
     display: inline-block;
     padding: 2px 4px;
-    font-size: 11.844px;
-    font-weight: bold;
+    font-size: 14px;
+    font-weight: normal;
     line-height: 14px;
-    color: #FFF;
+    color: #000;
     text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.25);
     white-space: nowrap;
     vertical-align: baseline;
-    background-color: #999;
+    background-color: #fff;
     border-radius: 3px;
+    border: 1px inset #999;
 }
 .right {
     float: right;