<include target="a.html"/>
를 레이아웃 하단에서 펼치기(기본은 접혀있음) 했을 경우 보여주는 방식으로 하고 있어요
다만 사이트가 열릴때
<include target="a.html"/>까지 한꺼번에 다 열리고 접혀있는 형태인데
이걸 펼치기를 했을때 (특정 불러오는 버튼) a.html를 로드 시킬수는 없을까요?
-
Lv6 
Lv4 답변 너무 감사합니다. 제가 할줄 모르는건지..
<a href="#" id="click_event" >열기</a>
<include target="a.html" style="display:none;" id="click_event" />
일단 테스트로 위처럼 시전을 해보았지만.. 실패하네요 ㅠㅠ -
Lv19 include가 요소 이름은 아니어서 display 속성이 붙을 수 있는지 잘 모르겠습니다.
숨겼다가 보이게 하려면 a.html 전체를 감싸는 태그 요소에 display와 클릭 이벤트를 줘야 할 거 같아요.
원하시는 기능은 ajax호출에 더 가까운 것 같은데, xe에서는 외부 페이지 ajax 로드가 좀 많이 까다로웠던 걸로 기억하고 있어요. -
Lv4 
Lv30 전체메뉴를 그렇게 하시려고 하는 것 같은데 그렇게 어렵게 구현해서 얻어지는 득이 거의 없을 듯 한데요.
새롭게 갱신해야 하는 데이터라면 클릭했을때 그 시점의 데이터를 불러오면 좋겠지만..
단순한 고정된 텍스트를 미리 불러온다해도 로딩속도등에 영향이 거의 없을 것 입니다.
이러한 것들은 ajax로 불러오게 구현한 사례는 거의 없을 것 입니다.
이게 아닌 새로 갱신되는 것을 불러오려고 하셨다면 제 댓글은 무시해주세요. -
Lv30
Lv4 ^^ 전체 메뉴는 아니지만 성질은 비슷하겠네요 특정(이미지+기타 위젯)이포함된 페이지 쿠키 적용해서 접고 펼치기 구현되어있거등요 (한번 펼치면 계속펼쳐보이게)
다만 이미지와 위젯이 좀 있다보니... 로딩속도에 지정이 있어요 ㅠㅠ -
?
<include> 태그에 바로 CSS / JS를 적용하시면 안될겁니다.
<div id="section-toggle" style="display: none;"> <include target="a.html" /> </div> <a href="#" id="button-toggle">토글</a> <script> (function($){ $('#button-toggle').click(function(){ var disp = $('#section-toggle').css('display'); $('#section-toggle').css('display', (disp == 'none') ? 'block' : 'none'); }); })(jQuery); </script><script> document.getElementById('button-toggle').onclick = function(){ var disp = document.getElementById('section-toggle').style.display; document.getElementById('section-toggle').style.display = (disp == 'none') ? 'block' : 'none'; }; </script> -
?
Lv4 답변 정말 감사합니다. 하지만 저는 a.html페이지가 none 으로 그저 가려지는 방식이
아닌 전혀 불러오지 않은 상태에서 "펼치기 ,버튼" 등을 클릭했을때
페이지가 로딩되는 방법에 대해 알고 싶었어요 ^^ -
Lv4 ?<block cond="Context::get('lazyload') == 'true'"><include target="a.html" /></block> <div id="lazyload"></div> <a href="#" id="btn-lazyload">로드</a> <script> (function($){ $('#btn-lazyload').click(function(){ $.get('{getUrl("lazyload", "true")}', function(data){ $('#lazyload').html(data); }); }); })(jQuery); </script>CONTENT // MUST INCLUDED {@ exit()}a.html 에서 CSS/JS 등의 load 태그 사용은 고려되지 않았으므로, 참고하세요.
-
Lv4 ?조금 더 간편한(?) 방법으로 설명을 추가해 보았습니다.
jQuery.load 라는 함수가 있습니다. 이걸 활용하시면 될 것 같습니다.
a.html 이 들어갈 DIV를 하나 만들어 두시고, id를 지정해 주세요.
위 예제코드의 <div id="lazyload"></div> 같은거요.
그 다음엔, 사이트 주소 뒤에 특정 파라미터가 붙을 때 a.html 내용만 출력되도록 코드를 추가해 주세요.
예시코드에서는 http://~~~/?lazyload=true 일 경우 작동하도록 해 두었습니다.
어쨌든, 예시에서 layout.html의 첫번째 줄과, a.html 파일의 {@ exit()} 부분이 그걸 담당합니다.
저 exit 함수는 a.html 파일의 최하단에 들어가야 합니다.
이제, clickLoad 함수를 만드세요.
<script>
function clickLoad(){
jQuery('#lazyload').load('http://~~/?lazyload=true');
}
</script>
정도면 될겁니다.
대충 설명하자면, clickLoad 함수가 실행되면, http:~~/?lazyload=true 의 HTML 내용을 AJAX로 가져와,
그 결과값을 id가 lazyload 인 요소의 내용으로 설정하는겁니다.
clickLoad 함수를 실행할 수 있도록, 버튼을 하나 만드시구요.
<a href="#" onclick="clickLoad()">버튼</a>
정도면 될 것 같네요.
결과적으로 저 '버튼'이라는 버튼을 누르면 clickLoad 함수가 실행되고,
그 함수가 a.html 만 출력되는 페이지의 내용을 AJAX로 불러와, #lazyload 라는 DIV에 넣는거죠.
원하시는 기능을 간단하게 구현하기에는 이 방식말고는 떠오르는게 없네요^^;; -
?
Lv4 이처럼 신경써주셔서 정말 너무 감사해요.
제가 html css쪽 외 자바 나 php 에 너무 나약하다보니...
어떤 방식인지 이해는 했어요 다만 잘 안풀려서 문의를 좀더;;
jQuery('#lazyload').load('http://~~/?lazyload=true');
http://~~/?lazyload=true 이건 이상태 그대로 쓰는게 아니죠?
불러올 문서를 https:도메인/a.html/?lazyload=true 를 작성해야하나요?
사실 댓글보고 벌써 1시간 끙끙 거리고 있긴해요 ㅎ;; -
Lv4 ?예를 들어 가이드라는 페이지에 저 기능을 추가하고 가이드 페이지 코드가 guide 라면
jQuery('#lazyload').load('https://도메인/guide?lazyload=true');
이런식으로 되지 않을까요a.html 파일은 기존에 하신대로 layout.html 파일과 같은 위치에 그대로 두고요
얻어배우고 갑니다 ㅋ -
Lv4 음.. 의도치 않게 그냥 프레임? 방식이 되어버렸네요.
여러가지 시도 하다
단순히
<script>
function clickLoad(){
jQuery('#lazyload').load('https://aaa.com/1.htm');
}
</script>
<div id="lazyload"></div>
이렇게 줬더니 클릭시 div lazyload로 페이지를 불러오네요~
ㅎㅎ;;
제 능력 부족이라 쿠키와 다시 접지는 못하지만
이것도 나름 괜찮은거 같네요~ ㅎㅎ 감사합니다~
<include target="a.html" style="display:none;" id="click_event"> 으로 해두면 아마 안뜰거에요.
이렇게 해서, 스크립트에서는 click_event가 눌렸을때, display:block; 으로 바꾸게 하거나,
a.html 의 body style을 none 으로 한 다음 클릭시 display:block; 처리가 인상적인거 같습니다.