<include target="a.html"/>
를 레이아웃 하단에서 펼치기(기본은 접혀있음) 했을 경우 보여주는 방식으로 하고 있어요
다만 사이트가 열릴때
<include target="a.html"/>까지 한꺼번에 다 열리고 접혀있는 형태인데
이걸 펼치기를 했을때 (특정 불러오는 버튼) a.html를 로드 시킬수는 없을까요?
<include target="a.html"/>
를 레이아웃 하단에서 펼치기(기본은 접혀있음) 했을 경우 보여주는 방식으로 하고 있어요
다만 사이트가 열릴때
<include target="a.html"/>까지 한꺼번에 다 열리고 접혀있는 형태인데
이걸 펼치기를 했을때 (특정 불러오는 버튼) a.html를 로드 시킬수는 없을까요?
댓글 16
<include target="a.html" style="display:none;" id="click_event"> 으로 해두면 아마 안뜰거에요.
이렇게 해서, 스크립트에서는 click_event가 눌렸을때, display:block; 으로 바꾸게 하거나,
a.html 의 body style을 none 으로 한 다음 클릭시 display:block; 처리가 인상적인거 같습니다.
<a href="#" id="click_event" >열기</a>
<include target="a.html" style="display:none;" id="click_event" />
일단 테스트로 위처럼 시전을 해보았지만.. 실패하네요 ㅠㅠ
자바스크립트에서 또는 제이쿼리로 처리해야합니다.
제가 업무가 많아.. 코드를 직접 작성하기가 ㅜ
숨겼다가 보이게 하려면 a.html 전체를 감싸는 태그 요소에 display와 클릭 이벤트를 줘야 할 거 같아요.
원하시는 기능은 ajax호출에 더 가까운 것 같은데, xe에서는 외부 페이지 ajax 로드가 좀 많이 까다로웠던 걸로 기억하고 있어요.
다만 none 처리가 아닌 클릭시 로드가 되는 방식을 원했던 ㅠㅠ
새롭게 갱신해야 하는 데이터라면 클릭했을때 그 시점의 데이터를 불러오면 좋겠지만..
단순한 고정된 텍스트를 미리 불러온다해도 로딩속도등에 영향이 거의 없을 것 입니다.
이러한 것들은 ajax로 불러오게 구현한 사례는 거의 없을 것 입니다.
이게 아닌 새로 갱신되는 것을 불러오려고 하셨다면 제 댓글은 무시해주세요.
다만 이미지와 위젯이 좀 있다보니... 로딩속도에 지정이 있어요 ㅠㅠ
<include> 태그에 바로 CSS / JS를 적용하시면 안될겁니다.
<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>
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>
아닌 전혀 불러오지 않은 상태에서 "펼치기 ,버튼" 등을 클릭했을때
페이지가 로딩되는 방법에 대해 알고 싶었어요 ^^
<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>
// MUST INCLUDED
{@ exit()}
a.html 에서 CSS/JS 등의 load 태그 사용은 고려되지 않았으므로, 참고하세요.
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에 넣는거죠.
원하시는 기능을 간단하게 구현하기에는 이 방식말고는 떠오르는게 없네요^^;;
제가 html css쪽 외 자바 나 php 에 너무 나약하다보니...
어떤 방식인지 이해는 했어요 다만 잘 안풀려서 문의를 좀더;;
jQuery('#lazyload').load('http://~~/?lazyload=true');
http://~~/?lazyload=true 이건 이상태 그대로 쓰는게 아니죠?
불러올 문서를 https:도메인/a.html/?lazyload=true 를 작성해야하나요?
사실 댓글보고 벌써 1시간 끙끙 거리고 있긴해요 ㅎ;;
예를 들어 가이드라는 페이지에 저 기능을 추가하고 가이드 페이지 코드가 guide 라면
jQuery('#lazyload').load('https://도메인/guide?lazyload=true');
이런식으로 되지 않을까요
a.html 파일은 기존에 하신대로 layout.html 파일과 같은 위치에 그대로 두고요
얻어배우고 갑니다 ㅋ
여러가지 시도 하다
단순히
<script>
function clickLoad(){
jQuery('#lazyload').load('https://aaa.com/1.htm');
}
</script>
<div id="lazyload"></div>
이렇게 줬더니 클릭시 div lazyload로 페이지를 불러오네요~
ㅎㅎ;;
제 능력 부족이라 쿠키와 다시 접지는 못하지만
이것도 나름 괜찮은거 같네요~ ㅎㅎ 감사합니다~