Changeset 17407 for branches/comu-ver2/html/user_data

Timestamp:

2008/07/07 19:15:40 (18 years ago)

Author:

pineray

Message:

レイアウト管理の調整（未了）。IEで不具合がおきる。

Location:

branches/comu-ver2/html/user_data/packages/default

Files:

• css/admin_contents.css (modified) (1 diff)
• js/layout_design.js (modified) (8 diffs)

branches/comu-ver2/html/user_data/packages/default/css/admin_contents.css

@@ -363 +363 @@
 /* ステータス管理 */
 #order-status-list th.id {width: 40px;}
+
+
+/* デザイン管理
+----------------------------------------------- */
+/* レイアウト管理 */
+div.dragged-elm {
+    position:   absolute;
+    border:     1px solid black;
+    background: rgb(195,217,255);
+    color:      #333;
+    cursor:     move;
+    padding:    5px 2px;
+    font-size:  10pt;
+    text-align: center;
+}
+div.drop-target {
+    border:      0px solid gray;
+    position:    relative;
+    text-align:  center;
+    color:       #333;
+}
+#design-layout-body {
+    width: 450px;
+    margin: 0 auto;
+}
+#design-layout-wrap-unused {width:164px;}
+#layout-left, #layout-right {
+    width: 150px;
+    height: 400px;
+    vertical-align: top;
+}
+#layout-main-head, #layout-main-foot { vertical-align: top; }
+#layout-header, #layout-footer, #layout-main { text-align: center; }
 
 

branches/comu-ver2/html/user_data/packages/default/js/layout_design.js

@@ -297 +297 @@
     
     for ( var i = 0; i < all_elms.length; i++ ) {
-        // drop_target上にきた場合にのみ処理を行う
-        if ( isEventOnElm ( evt, all_elms[i].id ) ) {       
+        // drop-target上にきた場合にのみ処理を行う
+        if ( isEventOnElm ( evt, all_elms[i].id ) ) {
             if ( all_elms[i].attributes['tid'] ) {
                 var tid = getAttrValue ( all_elms[i], 'tid' );
@@ -358 +358 @@
     // 背景色を戻す
     for ( var i = 0; i < all_elms.length; i++ ) {
-        // drop_target上にきた場合にのみ処理を行う
+        // drop-target上にきた場合にのみ処理を行う
         if ( isEventOnElm ( evt, all_elms[i].id ) && all_elms[i].attributes['tid']) {
             // 背景色の変更
@@ -387 +387 @@
     var evtY = getEventY(evt) + getPageScrollY();
     
-    var drop_target = document.getElementById( drop_target_id );
-
-    drp_left = getX( drop_target );
-    drp_top = getY( drop_target );
-
-    var x = drp_left;
-    var y = drp_top;
-
-    var width = getWidth ( drop_target );
-    var height = getHeight ( drop_target );
+    var drop_target = $("#" + drop_target_id );
+
+    var offset = drop_target.offset();
+    var x = offset.left;
+    var y = offset.top;
+
+    var width = drop_target.width();
+    var height = drop_target.height();
     
 //  alert(evtX +" / "+ x +" / "+ evtY +" / "+ y +" / "+ width +" / "+ height);
@@ -408 +406 @@
     for ( var cnt = 0; cnt < all_elms.length; cnt++ ) {
 
-        // classが drop_target の場合のみ処理を行う
-        if ( getAttrValue ( all_elms[cnt], 'class' ) == 'drop_target' ) {
+        // classが drop-target の場合のみ処理を行う
+        if ( getAttrValue ( all_elms[cnt], 'class' ) == 'drop-target' ) {
             var tid = getAttrValue ( all_elms[cnt], 'tid' );
             
@@ -436 +434 @@
 
     for ( var i = 1; i < all_elms.length; i++ ) {
-        // classが dragged_elm の場合のみ処理を行う
-        if ( getAttrValue ( all_elms[i], 'class' ) == 'dragged_elm' ) {
+        // classが dragged-elm の場合のみ処理を行う
+        if ( getAttrValue ( all_elms[i], 'class' ) == "dragged-elm" ) {
         
             // マウスダウンイベントと関連付けを行う
@@ -531 +529 @@
 
     // 高さ計算
-    for ( var cnt = 0; cnt < all_elms.length; cnt++ ) {
+    $(".drop-target").each(function(){
         var target_height = 0;
-    
-        // classが drop_target の場合のみ処理を行う
-        if ( getAttrValue ( all_elms[cnt], 'class' ) == 'drop_target' ) {
-            var tid = getAttrValue ( all_elms[cnt], 'tid' );
-
-            for ( var j = 0; j < arrObj[tid].length; j++ ) {
-                target_height = target_height + arrObj[tid][j].margin + arrObj[tid][j].height;
-            }
-
-            // 下の幅
-            target_height = target_height + 20;
-
-            // 左右ナビ、未使用領域の高さを保持
-            if (tid == 'LeftNavi' || tid == 'RightNavi' || tid == 'Unused') {
-                if (NaviHeight < target_height) {
-                    NaviHeight = target_height;
-                }
-            }
-
-            // メイン上部領域の高さを保持
-            if (tid == 'MainHead') {
-                if (target_height > defMainNavi) {
-                    MainHeadHeight = target_height;
-                }
-            }
-
-            // メイン下部領域の高さを保持
-            if (tid == 'MainFoot') {
-                if (target_height > defMainNavi) {
-                    MainFootHeight = target_height;
-                }
-            }   
-        }
-    }
-
-    // メイン領域の高さを保持
+        var tid = $(this).attr("tid");
+
+        for ( var j = 0; j < arrObj[tid].length; j++ ) {
+            target_height = target_height + arrObj[tid][j].margin + arrObj[tid][j].height;
+        }
+
+        // 下の幅
+        target_height = target_height + 20;
+
+        // 左右ナビ、未使用領域の高さを保持
+        if (tid == 'LeftNavi' || tid == 'RightNavi' || tid == 'Unused') {
+            if (NaviHeight < target_height) {
+                NaviHeight = target_height;
+            }
+        }
+
+        // メイン上部領域の高さを保持
+        if (tid == 'MainHead') {
+            if (target_height > defMainNavi) {
+                MainHeadHeight = target_height;
+            }
+        }
+
+        // メイン下部領域の高さを保持
+        if (tid == 'MainFoot') {
+            if (target_height > defMainNavi) {
+                MainFootHeight = target_height;
+            }
+        }
+    });
+
+    // メイン領域の高さを保持
 //  alert(NaviHeight+"/"+MainHeadHeight+"/"+MainFootHeight);
     MainHeight = NaviHeight - ( MainHeadHeight + MainFootHeight );
@@ -580 +574 @@
     }
     // 変更
-    for ( var cnt = 0; cnt < all_elms.length; cnt++ ) {
-        var target_height = 0;
-
-        // classが drop_target の場合のみ処理を行う
-        if ( getAttrValue ( all_elms[cnt], 'class' ) == 'drop_target' ) {
-            var tid = getAttrValue ( all_elms[cnt], 'tid' );
-            
-            // tidによって処理を分ける
-            if (tid == 'LeftNavi' || tid == 'RightNavi') {
-                target_height = NaviHeight;
-            }else if (tid == 'MainHead' ) {
-                target_height = MainHeadHeight;
-            }else if (tid == 'MainFoot') {
-                target_height = MainFootHeight;
-            }else if (tid == 'Unused'){
-                target_height = NaviHeight+100;
-            }
-
-            all_elms[cnt].style.height = target_height;
-        }
-    }
+    $(".drop-target").each(function(){
+        var tid = $(this).attr("tid");
+
+        // tidによって処理を分ける
+        if (tid == 'LeftNavi' || tid == 'RightNavi') {
+            $(this).height(NaviHeight);
+        }else if (tid == 'MainHead' ) {
+            $(this).height(MainHeadHeight);
+        }else if (tid == 'MainFoot') {
+            $(this).height(MainFootHeight);
+        }else if (tid == 'Unused'){
+            $(this).height(NaviHeight+100);
+        }
+    });
     
     // メインテーブルの高さも変更
-    for (var i = 0; i < all_td.length; i++) {
-        name = getAttrValue ( all_td[i], 'name' );
-        if (name == 'Main') {
-            all_td[i].height = MainHeight-2;
-        }
-    }
+    $("#layout-main").height(MainHeight-2);
 }
 
@@ -660 +642 @@
     var moveX = GetWindowSize("width") - scrX;
     var BlankX = ( GetWindowSize("width") - 878 ) / 2
-    
-    for ( var i = 0; i < all_elms.length; i++) {
-        if (all_elms[i].style.left != "" ) {
-
-            var elm_class = getAttrValue ( all_elms[i], 'class' );
-
-            if (elm_class == 'drop_target') {
-                var tid = getAttrValue ( all_elms[i], 'tid' );
-                
-                if (tid == 'LeftNavi') {
-                    LeftMargin = marginLeftNavi;
-                }else if (tid == 'RightNavi') {
-                    LeftMargin = marginRightNavi;
-                }else if (tid == 'MainHead' || tid == 'MainFoot') {
-                    LeftMargin = marginMain;
-                }else{
-                    LeftMargin = marginUnused;
-                }
-
-                if (BlankX > 0) {
-                    all_elms[i].style.left = BlankX + LeftMargin + 'px';
-                }else{
-                    all_elms[i].style.left = LeftMargin + 'px';
-                }
-            }
-        }
-    }
+
+    $(".drop-target").each(function(){
+        if ($(this).css("left") == "") {
+            var tid = $(this).attr('tid');
+
+            if (tid == 'LeftNavi') {
+                LeftMargin = marginLeftNavi;
+            }else if (tid == 'RightNavi') {
+                LeftMargin = marginRightNavi;
+            }else if (tid == 'MainHead' || tid == 'MainFoot') {
+                LeftMargin = marginMain;
+            }else{
+                LeftMargin = marginUnused;
+            }
+
+            if (BlankX > 0) {
+                $(this).css("left", BlankX + LeftMargin + 'px');
+            }else{
+                $(this).css("left", LeftMargin + 'px');
+            }
+        }
+    });
     
     scrX = GetWindowSize("width");