XE 레이아웃에 Windows창 같이 움직이고 작아지고 커지고 화면조절 되는 팝업창 설치하는 방법입니다.
먼저 팝업창을 설치할 레이아웃의 layout.html안에 메인화면부분에 아래의 코드를 삽입합니다.
1. PopUp창 출력설정
<!-- PopUp창 -->
<block cond="!$layout_info->popup == ''"><include target="popup.html" /></block>
2. popup.html 내용
<load target="./js/prototype.js" /> <load target="./js/scriptaculous.js" /> <load target="./js/effects.js" /> <load target="./js/dragdrop.js" /> <load target="./js/windows.js" /> <load target="windows.css" /> <div id="window_A" class="window_container" style="opacity:0.0;visibility:hidden;position:absolute;"> <div id="window_A_resize_handle" class="window_resize_handle"></div> <div id="window_A_topslice" class="window_topslice" > <div id="window_A_drag_handle" class="window_dragger"></div> <img style="z-index:100;margin-left:10px;margin-top:4px;position:absolute;" name="button_dirty_window_A" src="/images/but_clea.gif" /> <div class="window_button_holder" style="z-index:100;position:absolute;"> <a href="#" onClick="mywindow.minimize();"><img border="0" src="/images/but_mini.gif" /></a> <a href="#" onClick="mywindow.maximize();"><img border="0" src="/images/but_maxi.gif" /></a> <a href="#" onClick="mywindow.close();"><img border="0" src="/images/but_clos.gif" /></a> </div> <div class="window_handle_left"></div> <div class="window_handle_center"><span class="window_title">{$layout_info->popup_title}</span></div> <div class="window_handle_right"></div> </div> <div id="window_A_middleslice" class="window_middleslice"> <div class="window_border_left" > <div style="height:40px;width:15px;position:absolute;bottom:0px;"> <img src="/images/window_8.gif" /> </div> <img src="/images/window_9.gif" /> </div> <div class="window_content" id="window_A_content"> <div style="padding:5px;"> <div class="debug_field" id="command_div"></div> <span cond="$layout_info->popup_text">{$layout_info->popup_text}</span> <span cond="$layout_info->popup_image"><a href="{$layout_info->popup_image_url}" target="_{$layout_info->popup_image_target}"><img src="{$layout_info->popup_image}" width="350" /></a></span> </div> </div> <div class="window_border_right" > <div style="height:40px;width:15px;position:absolute;bottom:0px;"> <img src="/images/window_A.gif" /> </div> <img src="/images/window_B.gif" /> </div> </div> <div id="window_A_bottomslice" class="window_bottomslice"> <div class="window_bottom_left"></div> <div class="window_bottom_center"></div> <div class="window_bottom_right"></div> </div> </div> <block cond="!$layout_info->popup_width">{@ $layout_info->popup_width = '400'}</block> <block cond="!$layout_info->popup_height">{@ $layout_info->popup_height = '400'}</block> <block cond="!$layout_info->popup_posx">{@ $layout_info->popup_posx = '300'}</block> <block cond="!$layout_info->popup_posy">{@ $layout_info->popup_posy = '150'}</block> <script type="text/javascript"> var mywindow; var anotherwindow; window.onload=function() { mywindow=new Window( { "name":"TestWindow", "z_index":1000, "min_height":10, "action":"debug", "id":"window_A", "scrollbars":1, "is_minimized":0, "stayontop":0, "min_width":10, "height":{$layout_info->popup_height}, "posx":{$layout_info->popup_posx}, "posy":{$layout_info->popup_posy}, "width":{$layout_info->popup_width}}); </script>
빨간색부분이 팝업창안의 내용이 들어가는 부분입니다.
지우시고 일반 내용을 넣어셔도 됩니다.
3. windows.css 내용
.window_dragger a { text-decoration:none; font-weight:bold; font-size:10px; } .window_dragger { cursor:move; z-index:1; width:100%; height:36px; position:absolute; top:0px; left:0px; } .window_resize_handle { position:absolute; cursor:se-resize; width:20px; height:16px; font-size:10px; z-index:1; } .window_container { padding:0px; position:absolute; } .window_fader { border:0px; width:100%; } .window_topslice { position:relative; border:0px; width:100%; height:36px; } .window_middleslice { width:100%; position:relative; } .window_bottomslice { position:absolute; height:16px; border:0px; width:100%; } .window_handle_left { font-size:3px; position: absolute; left:0px; top:0px; width:15px; height:36px; background:url(./images/window_0.gif); } .window_title { line-height:30px; font-size:14px; font-weight:bold; font-family:sans-serif; overflow:hidden; } .window_handle_center { font-size:3px; background:url(./images/window_1.gif); background-repeat:repeat-x; top:0px; height:36px; border:0px; margin-left: 15px; margin-right:74px; text-align:center; } .window_handle_right { background:url(./images/window_2.gif); font-size:3px; position: absolute; right:0px; top:0px; width:74px; height:36px; border:0px; } .window_border_left { background:url(./images/window_3.gif); background-repeat:repeat-y; position: absolute; left:0px; width:15px; border:0px; } .window_content { text-align:left; /*overflow:auto;*/ position:relative; background:#D7D0BE; font-family:sans-serif; font-size:14px; border:0px; margin-left: 15px; margin-right:16px; padding:0px; } .window_border_right { background:url(./images/window_4.gif); background-repeat:repeat-y; position: absolute; right:0px; top:0px; width:16px; border:0px; } .window_bottom_left { font-size:3px; position: absolute; left:0px; bottom:0px; width:15px; height:16px; background:url(./images/window_5.gif); border:0px; } .window_bottom_center { font-size:3px; background:url(./images/window_6.gif); background-repeat:repeat-x; margin-bottom:0px; height:16px; border:0px; margin-left: 15px; margin-right:16px; } .window_bottom_right { background:url(./images/window_7.gif);font-size:3px; position: absolute; right:0px; bottom:0px; width:16px; height:16px; border:0px; } .window_button_holder { position:absolute; right:19px; text-align:right; width:60px; padding-top:8px; font-size:6px }
4. js 파일들과 이미지들은 압축파일안에 모두 들어 있습니다.
5. 레이아웃설정은 info.xml 안에 추가해 주세요.
<group> <title xml:lang="ko">팝업창 설정</title> <title xml:lang="en">PopUp Info</title> <var name="popup" type="select"> <title xml:lang="ko">PopUp 출력</title> <title xml:lang="en">PopUp User</title> <description xml:lang="ko">팝업출력</description> <description xml:lang="en">PopUp User</description> <options value=""> <title xml:lang="ko">출력안함</title> <title xml:lang="en">None</title> </options> <options value="Y"> <title xml:lang="ko">출력</title> <title xml:lang="en">User</title> </options> </var> <var name="popup_title" type="text"> <title xml:lang="ko"> ┖ PopUp창 제목</title> <title xml:lang="en"> ┖ PopUp Title</title> <description xml:lang="ko">PopUp창의 제목</description> <description xml:lang="en">PopUp Title</description> </var> <var name="popup_text" type="textarea"> <title xml:lang="ko"> ┖ PopUp내용</title> <title xml:lang="en"> ┖ PopUp Text</title> <description xml:lang="ko">PopUp안에 들어갈 내용을 등록합니다.(Html사용 가능)</description> <description xml:lang="en">PopUp Text(Html use)</description> </var> <var name="popup_image" type="image"> <title xml:lang="ko"> ┖ PopUp내용 이미지</title> <description xml:lang="ko">PopUp창 내용안에 들어갈 이미지를 등록</description> </var> <var name="popup_image_url" type="text"> <title xml:lang="ko"> ┖ PopUp 이미지 링크</title> <title xml:lang="en"> ┖ PopUp Image Url</title> <description xml:lang="ko">PopUp 이미지 클릭시 이동할 링크 URL을 입력해 주세요.</description> <description xml:lang="en">PopUp Image Url</description> </var> <var name="popup_image_target" type="select"> <title xml:lang="ko"> ┖ PopUp 이미지 Target</title> <title xml:lang="en"> ┖ PopUp Image Target</title> <description xml:lang="ko">PopUp 이미지 클릭시 창의 선택</description> <description xml:lang="en">PopUp Image Target</description> <options value="blank"> <title xml:lang="ko">새창</title> <title xml:lang="en">New Window</title> </options> <options value="parent"> <title xml:lang="ko">현재창</title> <title xml:lang="en">Current Window</title> </options> </var> <var name="popup_width" type="text"> <title xml:lang="ko"> ┖ PopUp창 가로넓이</title> <title xml:lang="en"> ┖ PopUp Width</title> <description xml:lang="ko">PopUp창의 넓이(기본 400)</description> <description xml:lang="en">PopUp Width</description> </var> <var name="popup_height" type="text"> <title xml:lang="ko"> ┖ PopUp창 세로높이</title> <title xml:lang="en"> ┖ PopUp Height</title> <description xml:lang="ko">PopUp창의 높이(기본 400)</description> <description xml:lang="en">PopUp Height</description> </var> <var name="popup_posx" type="text"> <title xml:lang="ko"> ┖ PopUp창 가로위치</title> <title xml:lang="en"> ┖ PopUp X</title> <description xml:lang="ko">PopUp창의 가로위치(기본 300)</description> <description xml:lang="en">PopUp X</description> </var> <var name="popup_posy" type="text"> <title xml:lang="ko"> ┖ PopUp창 세로위치</title> <title xml:lang="en"> ┖ PopUp Y</title> <description xml:lang="ko">PopUp창의 세로위치(기본 150)</description> <description xml:lang="en">PopUp Y</description> </var> </group>
p.s 내가 할 수 있는 모든 방법을 동원해도 "24시간 동안 닫기"는 성공하지를 못하였네요ㅠㅠ
CSS3로 메뉴에 hover 효과주기 - 회전하며 ...
마우스오버시 우측으로 펼쳐지는 내용 및 메뉴
