Changeset 17407
- Timestamp:
- 2008/07/07 19:15:40 (18 years ago)
- Location:
- branches/comu-ver2
- Files:
-
- 3 edited
Legend:
- Unmodified
- Added
- Removed
-
branches/comu-ver2/data/Smarty/templates/default/admin/design/index.tpl
r17365 r17407 1 <!--{* 2 /* 3 * This file is part of EC-CUBE 4 * 5 * Copyright(c) 2000-2008 LOCKON CO.,LTD. All Rights Reserved. 6 * 7 * http://www.lockon.co.jp/ 8 * 9 * This program is free software; you can redistribute it and/or 10 * modify it under the terms of the GNU General Public License 11 * as published by the Free Software Foundation; either version 2 12 * of the License, or (at your option) any later version. 13 * 14 * This program is distributed in the hope that it will be useful, 15 * but WITHOUT ANY WARRANTY; without even the implied warranty of 16 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 17 * GNU General Public License for more details. 18 * 19 * You should have received a copy of the GNU General Public License 20 * along with this program; if not, write to the Free Software 21 * Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA. 22 */ 23 *}--> 24 <style type="text/css"> 25 div.dragged_elm { 26 position: absolute; 27 border: 1px solid black; 28 background: rgb(195,217,255); 29 color: #333; 30 cursor: move; 31 PADDING-RIGHT: 2px; 32 PADDING-LEFT: 2px; 33 PADDING-BOTTOM: 5px; 34 PADDING-TOP: 5px; 35 FONT-SIZE: 10pt; 36 } 37 38 div.drop_target { 39 border: 0px solid gray; 40 position: relative; 41 text-align: center; 42 color: #333; 43 } 44 45 </style> 46 <script type="text/javascript"> 1 <script type="text/javascript"> 47 2 48 3 function doPreview(){ … … 67 22 window.onresize = fnMoveObject; 68 23 69 70 24 // divタグを取得 25 all_elms = document.getElementsByTagName ( 'div' ); 71 26 72 // tdタグを取得73 all_t d = document.getElementsByTagName ( 'td');27 all_dragged = $(".dragged-elm"); 28 all_target = $(".drop-target"); 74 29 75 30 // 配列作成 … … 94 49 <input type="hidden" name="bloc_cnt" value="<!--{$bloc_cnt}-->" /> 95 50 <div id="design" class="contents-main"> 96 97 51 <!--{* ▼レイアウト編集ここから *}--> 98 <table> 99 <tr> 100 <th align="center">レイアウト編集</th> 101 <th align="center">未使用ブロック</th> 102 </tr> 52 <table id="design-layout-wrap"> 53 <thead> 54 <tr> 55 <th id="design-layout-wrap-edit">レイアウト編集</th> 56 <th id="design-layout-wrap-unused">未使用ブロック</th> 57 </tr> 58 </thead> 59 <tbody> 103 60 <tr> 104 61 <!--{* ▼レイアウトここから *}--> 105 62 <td> 106 <table id=" layout-table">63 <table id="design-layout-body"> 107 64 <tr> 108 <td colspan="3" > ヘッダー部</td>65 <td colspan="3" id="layout-header">ヘッダー部</td> 109 66 </tr> 110 67 <tr> 111 68 <!--{* 左ナビテーブルここから *}--> 112 <td rowspan="3" >113 <div tid="LeftNavi" class="drop _target" id="t1" style="width: 145px; height: 100px;"></div>69 <td rowspan="3" id="layout-left"> 70 <div tid="LeftNavi" class="drop-target" id="t1" style="width: 145px; height: 100px;"></div> 114 71 </td> 115 72 <!--{* 左ナビテーブルここまで *}--> 116 73 <!--{* メイン上部テーブルここから *}--> 117 <td >118 <div tid="MainHead" class="drop _target" id="t2" style="width: 145px; height: 100px;"></div>74 <td id="layout-main-head"> 75 <div tid="MainHead" class="drop-target" id="t2" style="width: 145px; height: 100px;"></div> 119 76 </td> 120 77 <!--{* メイン上部テーブルここまで *}--> 121 78 <!--{* 右ナビここから *}--> 122 <td rowspan="3" >123 <div tid="RightNavi" class="drop _target" id="t3" style="width: 145px; height: 100px;"></div>79 <td rowspan="3" id="layout-right"> 80 <div tid="RightNavi" class="drop-target" id="t3" style="width: 145px; height: 100px;"></div> 124 81 </td> 125 82 <!--{* 右ナビここまで *}--> … … 127 84 <!--{* メインここから *}--> 128 85 <tr> 129 <td id= 'Main'>メイン</td>86 <td id="layout-main">メイン</td> 130 87 </tr> 131 88 <!--{* メインここまで *}--> 132 89 <!--{* メイン下部ここから *}--> 133 90 <tr> 134 <td name='MainFoot' id="layout">135 <div tid="MainFoot" class="drop _target" id="t4" style="width: 145px; height: 100px;"></div>91 <td id="layout-main-foot"> 92 <div tid="MainFoot" class="drop-target" id="t4" style="width: 145px; height: 100px;"></div> 136 93 </td> 137 94 </tr> 138 95 <!--{* メイン下部ここまで *}--> 139 </tr>140 96 <tr> 141 <td colspan= 3>フッター部</td>97 <td colspan="3" id="layout-footer">フッター部</td> 142 98 </tr> 143 99 </table> … … 147 103 <!--{* ▼未使用ブロックここから *}--> 148 104 <td> 149 <div tid="Unused" class="drop _target" id="t5" style="width: 160px; height: 500px; border: 1px solid #cccccc;"></div>105 <div tid="Unused" class="drop-target" id="t5" style="width: 160px; height: 500px;"></div> 150 106 <div class="btn"><button type='button' onclick="fnTargetSelf(); fnFormModeSubmit('form1','new_bloc','','');"><span>新規ブロック作成</span></button></div> 151 107 </td> 152 108 <!--{* ▲未使用ブロックここまで *}--> 153 109 </tr> 110 </tbody> 154 111 </table> 155 112 <div class="btn"> … … 164 121 165 122 <table class="list center"> 166 <!--{foreach item=item from=$arrEditPage}-->123 <!--{foreach key=key item=item from=$arrEditPage}--> 167 124 <tr style="background-color:<!--{if $item.page_id == $page_id}--><!--{$smarty.const.SELECT_RGB}--><!--{else}-->#ffffff<!--{/if}-->;"> 168 125 <td> … … 174 131 <td> 175 132 <!--{if $item.edit_flg == 1}--> 176 133 <button type='button' onclick="fnTargetSelf(); fnFormModeSubmit('form1','delete','','');"><span>削除</span></button> 177 134 <!--{/if}--> 178 135 </td> … … 187 144 188 145 189 <!--{foreach item=item from=$tpl_arrBloc name="bloc_loop"}--> 190 <div align="center" target_id="<!--{$item.target_id}-->" did="<!--{$smarty.foreach.bloc_loop.iteration}-->" class="dragged_elm" id="<!--{$item.target_id}-->" 191 style="left:350px; top:0px; filter: alpha(opacity=100); opacity: 1; width: 120px;"> 146 <!--{foreach key=key item=item from=$tpl_arrBloc name="bloc_loop"}--> 147 <div target_id="<!--{$item.target_id}-->" did="<!--{$smarty.foreach.bloc_loop.iteration}-->" class="dragged-elm" style="left:350px; top:0px; filter: alpha(opacity=100); opacity: 1;width: 120px;"> 192 148 <!--{$item.name}--> 193 149 </div> 194 195 150 <input type="hidden" name="name_<!--{$smarty.foreach.bloc_loop.iteration}-->" value="<!--{$item.name}-->" /> 196 151 <input type="hidden" name="id_<!--{$smarty.foreach.bloc_loop.iteration}-->" value="<!--{$item.bloc_id}-->" /> … … 198 153 <input type="hidden" name="top_<!--{$smarty.foreach.bloc_loop.iteration}-->" value="<!--{$item.bloc_row}-->" /> 199 154 <!--{/foreach}--> 155 </div> 200 156 </form> -
branches/comu-ver2/html/user_data/packages/default/css/admin_contents.css
r17405 r17407 363 363 /* ステータス管理 */ 364 364 #order-status-list th.id {width: 40px;} 365 366 367 /* デザイン管理 368 ----------------------------------------------- */ 369 /* レイアウト管理 */ 370 div.dragged-elm { 371 position: absolute; 372 border: 1px solid black; 373 background: rgb(195,217,255); 374 color: #333; 375 cursor: move; 376 padding: 5px 2px; 377 font-size: 10pt; 378 text-align: center; 379 } 380 div.drop-target { 381 border: 0px solid gray; 382 position: relative; 383 text-align: center; 384 color: #333; 385 } 386 #design-layout-body { 387 width: 450px; 388 margin: 0 auto; 389 } 390 #design-layout-wrap-unused {width:164px;} 391 #layout-left, #layout-right { 392 width: 150px; 393 height: 400px; 394 vertical-align: top; 395 } 396 #layout-main-head, #layout-main-foot { vertical-align: top; } 397 #layout-header, #layout-footer, #layout-main { text-align: center; } 365 398 366 399 -
branches/comu-ver2/html/user_data/packages/default/js/layout_design.js
r16708 r17407 297 297 298 298 for ( var i = 0; i < all_elms.length; i++ ) { 299 // drop _target上にきた場合にのみ処理を行う300 if ( isEventOnElm ( evt, all_elms[i].id ) ) { 299 // drop-target上にきた場合にのみ処理を行う 300 if ( isEventOnElm ( evt, all_elms[i].id ) ) { 301 301 if ( all_elms[i].attributes['tid'] ) { 302 302 var tid = getAttrValue ( all_elms[i], 'tid' ); … … 358 358 // 背景色を戻す 359 359 for ( var i = 0; i < all_elms.length; i++ ) { 360 // drop _target上にきた場合にのみ処理を行う360 // drop-target上にきた場合にのみ処理を行う 361 361 if ( isEventOnElm ( evt, all_elms[i].id ) && all_elms[i].attributes['tid']) { 362 362 // 背景色の変更 … … 387 387 var evtY = getEventY(evt) + getPageScrollY(); 388 388 389 var drop_target = document.getElementById( drop_target_id ); 390 391 drp_left = getX( drop_target ); 392 drp_top = getY( drop_target ); 393 394 var x = drp_left; 395 var y = drp_top; 396 397 var width = getWidth ( drop_target ); 398 var height = getHeight ( drop_target ); 389 var drop_target = $("#" + drop_target_id ); 390 391 var offset = drop_target.offset(); 392 var x = offset.left; 393 var y = offset.top; 394 395 var width = drop_target.width(); 396 var height = drop_target.height(); 399 397 400 398 // alert(evtX +" / "+ x +" / "+ evtY +" / "+ y +" / "+ width +" / "+ height); … … 408 406 for ( var cnt = 0; cnt < all_elms.length; cnt++ ) { 409 407 410 // classが drop _target の場合のみ処理を行う411 if ( getAttrValue ( all_elms[cnt], 'class' ) == 'drop _target' ) {408 // classが drop-target の場合のみ処理を行う 409 if ( getAttrValue ( all_elms[cnt], 'class' ) == 'drop-target' ) { 412 410 var tid = getAttrValue ( all_elms[cnt], 'tid' ); 413 411 … … 436 434 437 435 for ( var i = 1; i < all_elms.length; i++ ) { 438 // classが dragged _elm の場合のみ処理を行う439 if ( getAttrValue ( all_elms[i], 'class' ) == 'dragged_elm') {436 // classが dragged-elm の場合のみ処理を行う 437 if ( getAttrValue ( all_elms[i], 'class' ) == "dragged-elm" ) { 440 438 441 439 // マウスダウンイベントと関連付けを行う … … 531 529 532 530 // 高さ計算 533 for ( var cnt = 0; cnt < all_elms.length; cnt++ ){531 $(".drop-target").each(function(){ 534 532 var target_height = 0; 535 536 // classが drop_target の場合のみ処理を行う 537 if ( getAttrValue ( all_elms[cnt], 'class' ) == 'drop_target' ) { 538 var tid = getAttrValue ( all_elms[cnt], 'tid' ); 539 540 for ( var j = 0; j < arrObj[tid].length; j++ ) { 541 target_height = target_height + arrObj[tid][j].margin + arrObj[tid][j].height; 542 } 543 544 // 下の幅 545 target_height = target_height + 20; 546 547 // 左右ナビ、未使用領域の高さを保持 548 if (tid == 'LeftNavi' || tid == 'RightNavi' || tid == 'Unused') { 549 if (NaviHeight < target_height) { 550 NaviHeight = target_height; 551 } 552 } 553 554 // メイン上部領域の高さを保持 555 if (tid == 'MainHead') { 556 if (target_height > defMainNavi) { 557 MainHeadHeight = target_height; 558 } 559 } 560 561 // メイン下部領域の高さを保持 562 if (tid == 'MainFoot') { 563 if (target_height > defMainNavi) { 564 MainFootHeight = target_height; 565 } 566 } 567 } 568 } 569 570 // メイン領域の高さを保持 533 var tid = $(this).attr("tid"); 534 535 for ( var j = 0; j < arrObj[tid].length; j++ ) { 536 target_height = target_height + arrObj[tid][j].margin + arrObj[tid][j].height; 537 } 538 539 // 下の幅 540 target_height = target_height + 20; 541 542 // 左右ナビ、未使用領域の高さを保持 543 if (tid == 'LeftNavi' || tid == 'RightNavi' || tid == 'Unused') { 544 if (NaviHeight < target_height) { 545 NaviHeight = target_height; 546 } 547 } 548 549 // メイン上部領域の高さを保持 550 if (tid == 'MainHead') { 551 if (target_height > defMainNavi) { 552 MainHeadHeight = target_height; 553 } 554 } 555 556 // メイン下部領域の高さを保持 557 if (tid == 'MainFoot') { 558 if (target_height > defMainNavi) { 559 MainFootHeight = target_height; 560 } 561 } 562 }); 563 564 // メイン領域の高さを保持 571 565 // alert(NaviHeight+"/"+MainHeadHeight+"/"+MainFootHeight); 572 566 MainHeight = NaviHeight - ( MainHeadHeight + MainFootHeight ); … … 580 574 } 581 575 // 変更 582 for ( var cnt = 0; cnt < all_elms.length; cnt++ ) { 583 var target_height = 0; 584 585 // classが drop_target の場合のみ処理を行う 586 if ( getAttrValue ( all_elms[cnt], 'class' ) == 'drop_target' ) { 587 var tid = getAttrValue ( all_elms[cnt], 'tid' ); 588 589 // tidによって処理を分ける 590 if (tid == 'LeftNavi' || tid == 'RightNavi') { 591 target_height = NaviHeight; 592 }else if (tid == 'MainHead' ) { 593 target_height = MainHeadHeight; 594 }else if (tid == 'MainFoot') { 595 target_height = MainFootHeight; 596 }else if (tid == 'Unused'){ 597 target_height = NaviHeight+100; 598 } 599 600 all_elms[cnt].style.height = target_height; 601 } 602 } 576 $(".drop-target").each(function(){ 577 var tid = $(this).attr("tid"); 578 579 // tidによって処理を分ける 580 if (tid == 'LeftNavi' || tid == 'RightNavi') { 581 $(this).height(NaviHeight); 582 }else if (tid == 'MainHead' ) { 583 $(this).height(MainHeadHeight); 584 }else if (tid == 'MainFoot') { 585 $(this).height(MainFootHeight); 586 }else if (tid == 'Unused'){ 587 $(this).height(NaviHeight+100); 588 } 589 }); 603 590 604 591 // メインテーブルの高さも変更 605 for (var i = 0; i < all_td.length; i++) { 606 name = getAttrValue ( all_td[i], 'name' ); 607 if (name == 'Main') { 608 all_td[i].height = MainHeight-2; 609 } 610 } 592 $("#layout-main").height(MainHeight-2); 611 593 } 612 594 … … 660 642 var moveX = GetWindowSize("width") - scrX; 661 643 var BlankX = ( GetWindowSize("width") - 878 ) / 2 662 663 for ( var i = 0; i < all_elms.length; i++) { 664 if (all_elms[i].style.left != "" ) { 665 666 var elm_class = getAttrValue ( all_elms[i], 'class' ); 667 668 if (elm_class == 'drop_target') { 669 var tid = getAttrValue ( all_elms[i], 'tid' ); 670 671 if (tid == 'LeftNavi') { 672 LeftMargin = marginLeftNavi; 673 }else if (tid == 'RightNavi') { 674 LeftMargin = marginRightNavi; 675 }else if (tid == 'MainHead' || tid == 'MainFoot') { 676 LeftMargin = marginMain; 677 }else{ 678 LeftMargin = marginUnused; 679 } 680 681 if (BlankX > 0) { 682 all_elms[i].style.left = BlankX + LeftMargin + 'px'; 683 }else{ 684 all_elms[i].style.left = LeftMargin + 'px'; 685 } 686 } 687 } 688 } 644 645 $(".drop-target").each(function(){ 646 if ($(this).css("left") == "") { 647 var tid = $(this).attr('tid'); 648 649 if (tid == 'LeftNavi') { 650 LeftMargin = marginLeftNavi; 651 }else if (tid == 'RightNavi') { 652 LeftMargin = marginRightNavi; 653 }else if (tid == 'MainHead' || tid == 'MainFoot') { 654 LeftMargin = marginMain; 655 }else{ 656 LeftMargin = marginUnused; 657 } 658 659 if (BlankX > 0) { 660 $(this).css("left", BlankX + LeftMargin + 'px'); 661 }else{ 662 $(this).css("left", LeftMargin + 'px'); 663 } 664 } 665 }); 689 666 690 667 scrX = GetWindowSize("width");
Note: See TracChangeset
for help on using the changeset viewer.
