XE Tip - XE와 관련된 TIP모음
이 공간에 올려진 대부분의 글들은 XE 공식 홈페이지에 올려진 글들 중에서 제가 우리 홈에 적용을 하기 위하여 작업을 하였던 것 중 잊지 않기 위하여 올려진 것 들입니다.
따라서 여기에 올려진 글의 내용들은 제가 창작을 한 것이 아님을 알려드립니다.
따라서 여기에 올려진 글의 내용들은 제가 창작을 한 것이 아님을 알려드립니다.
글 수 58
ie5, 6 사용자는 자바스크립트로 구현
ie7이상, 사파리, 불여우, 오페라 등은 CSS의 position:fixed 로 구현
오른쪽내용이 잘렸지만 마우스로 드래그 하면 모두 복사 할 수 있습니다.
2. 사용중인 레이아웃의 layout.html을 열어 아래의 코드를 제일 위에 넣습니다..
ie7이상, 사파리, 불여우, 오페라 등은 CSS의 position:fixed 로 구현
1. 먼저 다음과 같이 quick_menu.php 파일을 만들어 사용중인 레이아웃의 layout.html파일이 있는곳에 올립니다.
메뉴의 내용은 자신의 홈에 맞게 수정하세요.오른쪽내용이 잘렸지만 마우스로 드래그 하면 모두 복사 할 수 있습니다.
<?
$check = eregi("MSIE 5|MSIE 6",$_SERVER["HTTP_USER_AGENT"]);
if($check) { // ie5, 6 사용자: css에서 position:fixed 지원이 안되는 관계로 자바로 구현된 퀵메뉴 제공.
echo "<div id=\"quick\" >\n";
echo "<ul class=\"fixed\">\n";
} else { // ie 7이상, 사파리, 오페라, 불여우 등등 css에서 position:fixed로 구현된 퀵메뉴 제공.
echo "<ul class=\"menu_fixed\">\n";
}
?>
<li class="subject">Menu</li>
<li><a href="/?mid=home">Home</a></li>
<li><a href="/?mid=photo">Photo</a></li>
<li><a href="/?mid=pds">Pds</a></li>
<li><a href="/?mid=notice">Notice</a></li>
<li><a href="/?mid=biorhythm">Biorhythm</a></li>
<li><a href="/?mid=tide#today">Tide</a></li>
<li><a href="/?mid=calendar">Calendar</a></li>
<li><a href="/?mid=solar">Solar</a></li>
<li><a href="/?mid=lunar">Lunar</a></li>
<li><a href="/?mid=textyle">Blog</a></li>
<li class="top_bottom"><a href="#top" title="위로">Top</a> <a href="#footer" title="아래로">Bottom</a></li>
</ul>
<?
if($check) {
echo "</div>\n";
}
?>
2. 사용중인 레이아웃의 layout.html을 열어 아래의 코드를 제일 위에 넣습니다..
<include target="quick_menu.php" />
3. 사용중인 레이아웃의 layout.html에서 제일 처음로드되는 js파일에 아래 코드를 집어 넣습니다.
//슬라이드식 퀵메뉴(ie5, 6 사용자용)
var $j = jQuery.noConflict();
$j(document).ready(function(){
var currentPosition = parseInt($j("#quick").css("top"));
$j(window).scroll(function() {
var position = $j(window).scrollTop();
$j("#quick").stop().animate({"top":position+currentPosition+"px"},1000);
});
});
4. 사용중인 레이아웃의 layout.html에서 제일 처음로드되는 css파일에 아래 코드를 집어 넣습니다.
#quick { position:absolute; top:200px; right:20px; overflow:hidden; }
#quick .fixed { list-style:none; line-height:19px; font-family: Georgia, Times New Roman, Times, serif; border:1px #000000 solid; padding:10px; margin:0px; text-align:left; }
#quick .fixed a:link,#quick .fixed a:visited { color:#000000; text-decoration:none; }
#quick .fixed a:active,#quick .fixed a:hover,#quick .fixed a:focus { color:#f09; text-decoration:none; }
#quick .fixed .subject { text-align:center; color: #000000; font: bold 1.5em/1em Georgia, "Times New Roman", Times, serif; letter-spacing: -.05em; margin: 0 0 7px; padding: 0 0 7px; position: relative; border-bottom: double 4px #b09370; text-transform: none; text-shadow: 0 1px 0 #f7e4c8; }
#quick .fixed .top_bottom {text-align:center; }
.menu_fixed { position:fixed; right:20px; top:200px; list-style:none; line-height:19px; font-family: Georgia, Times New Roman, Times, serif; border:1px #000000 solid; padding:10px; margin:0px; text-align:left; }
.menu_fixed a:link,.menu_fixed a:visited { color:#000000; text-decoration:none; }
.menu_fixed a:active,.menu_fixed a:hover,.menu_fixed a:focus { color:#f09; text-decoration:none; }
.menu_fixed .subject { text-align:center; color: #000000; font: bold 1.5em/1em Georgia, "Times New Roman", Times, serif; letter-spacing: -.05em; margin: 0 0 7px; padding: 0 0 7px; position: relative; border-bottom: double 4px #b09370; text-transform: none; text-shadow: 0 1px 0 #f7e4c8; }
.menu_fixed .top_bottom {text-align:center; }
이상 모두 저장하여 원래 있던 곳으로 올리면 끝....^^*
이렇게 하면 퀵메뉴가 ie5, 6 사용자는 자바로 구현된 퀵메뉴를,
ie7이상 position:fixed;를 지원하는 웹브라우저는 CSS로 고정된 퀵메뉴를
보여줍니다.