Search jQuery

jQuery Forum

Using jQuery

michael.b..

jQuery + tabs

in Using jQuery • 11 years ago

I have the following code that from a menu on the main page loads a dialog box with a secondary page.

$(".menu-dialog a").click(function () {
var href = $(this).attr("href");
var modal=$(this).attr("modal");
var title = $(this).attr("title");

var mydiv = $('<div id="mydiv" style="display:none" />'); // using a dialog box for each window
mydiv.dialog({
autoOpen: false,
draggable: true,
resizable: true,
modal: true,
width: "auto",
height: "auto",
title: title,
});
mydiv.load(href);
mydiv.dialog("option", "position", [10,90]);
mydiv.dialog('open');
return false;
})

If I want to include tabs in my secondary page, without any code additions the tab definitions are displayed as simple links.

Where do I add the code to transform the links into tabs? ("div.tabs".tabs())?

This is a sample of my secondary page

<head runat="server">
<title>wClaims</title>
</head>
<body>
<h1>wClaims</h1>
<div class="tabs" id="tabClaims">
<ul>
<li><a href="#Policy">By Policy</a></li>
<li><a href="#SurplusNote">By Surplus Note</a></li>
</ul>
</div>
<div id="Policy">
<p>Policy - Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
</div>
<div id="SurplusNote">
<p>SurplusNote - Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
</div>
</body>