$(function(){
$('#tabs').tabs();
ajaxCall('Restful');
$("#tabs").bind('tabsselect', function(event, ui) {
ajaxCall(ui.tab.innerHTML);
});
});
function ajaxCall(tabName){
$.ajax({
url: '<c:url value="/com/ajax.do" />',
data: "tabName="+tabName,
dataType: 'json',
success: function(data) {
$(data.divId).html(data.deion);
}
});
}
.....
<div id="content_pop">
<spring:message code="main.title"/>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Restful</a></li>
<li><a href="#tabs-2">ORM</a></li>
<li><a href="#tabs-3">Excel</a></li>
<li><a href="#tabs-4">OXM</a></li>
</ul>
<div id="tabs-1" class="Restful" style="height: 250px;"></div>
<div id="tabs-2" class="ORM" style="height: 250px;"></div>
<div id="tabs-3" class="Excel" style="height: 250px;"></div>
<div id="tabs-4" class="OXM" style="height: 250px;"></div>
</div>
</div>
-----------------------------------------------------
컨트롤단
@Resource ResourceBundleMessageSource messageSource;
@Resource MappingJacksonJsonView ajaxMainView;
@RequestMapping(value = "/com/ajax.do")
protected ModelAndView egovMain(String tabName, HttpServletRequest request) throws Exception {
Locale locale = localeResolver.resolveLocale(request); //language
Map<String, Object> model = new HashMap<String, Object>();
model.put("divId", "."+tabName);
model.put("deion", messageSource.getMessage(tabName, null, locale));
return new ModelAndView(ajaxMainView, model);
}
클릭하면 여친 생기는 부분인듯
신난다
메일로 보내드렸습니다~
제이쿼리ui로 탭을 만들고 탭에 내용을 넣기위해 컨트롤단의 ajax 콜해서 deion을 가져와서 탭안에 넣는다.