ふたりで

jquery+tabs+click+content+load+url 본문

javascript

jquery+tabs+click+content+load+url

graykang 2024. 3. 4. 16:43
728x90
반응형
SMALL

보통 텝기능을 만들 때 1번, 2번, 3번 같이 미리 정해진 텝과 해당 텝의 콘텐츠를 같은 화면에 다 작성해 두고

선택한 텝 만 보여주고 나머진 숨기는 방식을 많이 사용한다. 

하지만 텝이 많아지고 텝내의 콘텐츠가 많아지면 화면로딩 시 부하가 발생할 수밖에 없다. 화면로딩 부하를 조금이라도 

줄여 보겠다는 생각으로 텝을 클릭 시 ajax로 데이터를 호출하고 해당 데이터를 사용하여 동적으로 텝내의 콘텐츠를

append 하는 방식으로 구현을 하려다 좀 더 쉽고 심플한 방법이 없을까 알아보니 다음과 같은 기능이 있어 정리한다.

 

해당 기능은 jquery의. tabs과. load 기능을 사용해 텝을 클릭 시 해당 텝의 href에 명시된 url을 호출하여 해당 텝의

콘텐츠에 바로 보여주는 방식의 기능이다.

 

#출처:

https://api.jquery.com/load/#load-url-data-complete

 

.load() | jQuery API Documentation

Description: Load data from the server and place the returned HTML into the matched elements. Note: Prior to jQuery 3.0, the event handling suite also had a method named .load(). Older versions of jQuery determined which method to fire based on the set of

api.jquery.com

 

 

해당 기능은 같은 도메인 내의 url만 사용 가능하며 iframe과 비슷하게 동작한다...

관련하여 보안 이슈가 있는지는 확인해보진 않았지만 있을 수도 있으니 추후 확인 은 필요하다.

728x90
반응형
SMALL

해당 예제와 같은 방식을 사용하려면 url에 해당되는 페이지는 별도로 미리 구현을 해놔야 한다.

그래야 tab을 클릭할 때만 호출할 수 있다.

 

<!doctype html> 
<html lang="en"> 

<head> 
	<meta charset="utf-8"> 
	<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> 
	<script src="https://code.jquery.com/jquery-1.10.2.js"> 
	</script> 
	<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"> 
	</script> 

<script type="text/javascript"> 
    $(document).ready(function(){
        $tabs = $("#tabs").tabs({
            select: function(event, ui) {
                $('a', ui.tab).click(function() {
                    $(ui.panel).load(this.href);
                    return true;
                });
            }
        });
});
</script>
  
</head> 

<body> 
<div id="tabs">
    <ul>
        <li><a href="https://code.jquery.com/ui/1.10.4/jquery-ui.js">Tab1</a></li>
        <li><a href="https://code.jquery.com/jquery-1.10.2.js">Tab2</a></li>
    </ul>
</div>

</body> 

</html>

 

#결과 화면

(XSS 보안 때문에 예제에서는 href에 jquery CDN 주소를 사용해 봤다. naver등과 같은 페이지는 XSS보안에 걸려 에러가 난다.)

728x90
반응형
LIST
저작자표시 변경금지

'javascript' 카테고리의 다른 글

javascript FCM SDK11 initializeApp, getToken, getMessage Config bundle Job  (0) 2024.11.19
input 태그에 특수문자 입력 불가 처리.  (0) 2024.06.07
javascript 양수 음수 처리용 정규식  (0) 2023.08.11
spring3 ajax request 404 not found 이상한 현상...  (0) 2023.08.03
Printing a modal popup window with jquery  (0) 2023.05.19
'javascript' Related Articles more
Comments