Hi!
Straight to the subject. I watched some cool videos at Microsoft Virtual Academy about jQuery and jQuery UI and got stock when we got to adding tabs programmatically.
This was because the code demonstrated in the video, as stated below, is deprecated as of today.
Then I thought ... hmm ... there should be a way around that? Minutes later, I was right.
The html example is given below while the jQuery code to add the tab programmatically follows.
Kindly share your ideas and experiences as far as the subject goes, you just might just make someone's day.
Hearty Regards.
Straight to the subject. I watched some cool videos at Microsoft Virtual Academy about jQuery and jQuery UI and got stock when we got to adding tabs programmatically.
This was because the code demonstrated in the video, as stated below, is deprecated as of today.
$('#myTabs').tabs().tabs("add", "newPage.html", "New Tab");
Then I thought ... hmm ... there should be a way around that? Minutes later, I was right.
The html example is given below while the jQuery code to add the tab programmatically follows.
Kindly share your ideas and experiences as far as the subject goes, you just might just make someone's day.
Hearty Regards.
HTML5 - sample.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>jQuery UI Plugins - Tabs</title>
<!--
jQuery and jQuery UI CDN included in the script tag below.
Visit jQuery website, in the Downloads section,
you would find a list of CDN e.g. Google, Microsoft
that provide JQuery and JQuery UI links.
-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js">
</script>
<!-- Personal JavaScript file included here -->
<script type="text/javascript" src="script.js"></script>
<!-- jQuery Stylesheet from CDN -->
<link rel="stylesheet"
href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.5/themes/eggplant/jquery-ui.css">
</head>
<body>
<h1>jQuery UI Plugins - Tabs</h1>
<div id="myTabs">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</a></li>
<li><a href="#tabs-3">Aenean lacinia</a></li>
</ul>
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus.</p>
</div>
<div id="tabs-2">
<p>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.</p>
</div>
<div id="tabs-3">
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem.</p>
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit.</p>
</div>
</div>
</body>
</html>
jQuery - script.js File
$(function () {
// #DEFINE: Programmatically adding a new tab
// get number of div in #myTabs then set the next div nth position
var divChildren = $('#myTabs div');
var nextDiv = eval(divChildren.size() + 1);
// get li in ul in #myTabs then set the next li nth position
var ulChildren = $('#myTabs ul li');
var nextLi = eval(ulChildren.size() + 1);
// insert the next li
$('#myTabs ul').append(
"<li><a href="#tabs-" + nextli + ">Yippee \"New Tab\"</a></li>"
);
// insert the next div
$('#myTabs').append(
'<div id=tabs-' + nextdiv + '>' + '<p>Yipee! We made it here.<br>'
+ '<iframe src=\"sample2.html\" '
+ 'style=\"border:none; height:180px; width:100%;\"></iframe></div>'
);
// Optional: styling the iframe content - use any means convenient
// works on IE, fails on Chrome due to domain mismatch
$('iframe').load(function () {
$('iframe').contents().find("head").append(
"<style type='text/css'> body { color: LightGreen; } </style>");
});
// #END: end of new tab
// create the tabs
$('#myTabs').tabs();
});
No comments:
Post a Comment