[JQuery] JQuery UI 使用Tabs

• 本篇使用JQuery UI實作Tbas及在Tbas切換頁面時以iframe方式嵌入頁面
• 參考網址: JQuery UI官網: http://jqueryui.com/

-----------------------------------------------------------------------------------------------------------

• 必備資源

<link rel="stylesheet" href="themes/base/jquery.ui.all.css">
<script src="jquery/jquery-1.5.1.js"></script>
<script src="ui/jquery.ui.core.js"></script>
<script src="ui/jquery.ui.widget.js"></script>
<script src="ui/jquery.ui.tabs.js"></script>

• Tabs html 顯示部分

<div class="demo">
<div id="tabs">
    <ul>
        <li><a id="title1" href="#tabs-1">服務1</a></li>
        <li><a id="title2" href="#tabs-2">服務2</a></li>
        <li><a id="title3" href="#tabs-3">服務3</a></li>
    </ul>
    <div id="tabs-1"></div>
    <div id="tabs-2"></div>
    <div id="tabs-3">
        <p>第一行.</p>
        <p>第二行.</p>
    </div>
</div><!-- End tabs -->

• JQuery部分

<script>
$(function() {
    /**Tabs*/
    $( "#tabs" ).tabs();    
    /**嵌入Iframe*/
    $("#title1").click(function(){
        var iframeStr = "<iframe src='iframeTest.jsp' width='90%'
                          height='300'frameborder='0'>";
        $("#tabs-1").html(iframeStr);
    })

    /**嵌入Iframe*/
    $("#title2").click(function(){
        var iframeStr = "<iframe src='ajaxChild.jsp?serviceId="+$("#serviceId").val()
                          +"'width='90%' height='300' frameborder='0'>";
        alert("tabs-2");//test
        $("#tabs-2").html(iframeStr);
    })

});//$(function() {
</script>

• 塞入網頁Hidden值

<form id="form_data" name="form_data" action="IQueryTabs.jsp" Method="post">
<INPUT TYPE="hidden" id="serviceId" name="serviceId" value="<%=serviceId+1%>" />
</form>