jQuery UI Widgets › Forums › Navigation › Tabs › how to load external page in div to tabs
This topic contains 4 replies, has 2 voices, and was last updated by Nadezhda 10 years ago.
Hello I have seen the examples but still I can not load an external page in the tabs div.
here is my code as I think the dynamic tabs
scripts
$(‘ul’).each(function () {
$(this).find(‘li’).click(function () {
var listItem = this;
$(“#jqxtabs”).css(‘display’, ‘block’);
$(“#jqxtabs”).jqxTabs({ width: 400, height: 300, showCloseButtons: true, theme: ‘Custom’ });
cont = $(“#jqxtabs”).jqxTabs(‘length’)
if ((cont == 1) && (tabsCount == 0)) {
$(‘#jqxtabs’).jqxTabs(‘removeAt’, 0);
var clickedURL = $(‘a’, this).attr(‘href’);
$(‘#jqxtabs’).jqxTabs(‘addAt’, 0, $(listItem).text(), clickedURL);
}
else {
$(‘#jqxtabs’).jqxTabs(‘addAt’, tabsCount, $(listItem).text(), $(listItem).text());
}
tabsCount += 1;
});
HTML
<div id=’jqxtabs’>
<ul style=’margin-left: 20px;’>
<div id=”Contenido0″>
</div>
</div>
</div>
I need to load the page of the href of the list in the div but I could not, I hope I say as
I hope to explain sorry
Hello miguels,
Could you, please, re-post your code and format it by selecting it and clicking the code button in the toolbar so that your script and HTML code are more readable.
Best Regards,
Nadezhda
jQWidgets team
http://www.jqwidgets.com/
ok sorry this my code in HTML
<link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="../jqwidgets/styles/Custom.css" type="text/css" />
<script type="text/javascript" src="../Scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxtabs.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var tabsCount = 0;
var cont;
var visible = false;
$('#jqxtabs').on('removed', function (event) {
var index = event.args.item;
cont = $("#jqxtabs").jqxTabs('length')
if (visible == true) {
if (cont == 0) {
$('#jqxtabs').jqxTabs('addAt', 0, "", "");
$("#jqxtabs").css('display', 'none');
visible = false;
}
else
{ $('#jqxtabs').jqxTabs('removeAt', index); }
tabsCount -= 1;
}
});
$('ul').each(function () {
$(this).find('li').click(function () {
var listItem = this;
$("#jqxtabs").css('display', 'block');
$("#jqxtabs").jqxTabs({ width: 400, height: 300, showCloseButtons: true, theme: 'Custom' });
cont = $("#jqxtabs").jqxTabs('length')
if ((cont == 1) && (tabsCount == 0)) {
$('#jqxtabs').jqxTabs('removeAt', 0);
var clickedURL = $('a', this).attr('href');
$('#jqxtabs').jqxTabs('addAt', 0, $(listItem).text(), clickedURL);
}
else {
$('#jqxtabs').jqxTabs('addAt', tabsCount, $(listItem).text(), $(listItem).text());
}
tabsCount += 1;
visible = true;
});
});
});
</script>
<form id="form1" runat="server">
<div>
<ul>
<li><a href="paginas/pagina1.aspx">Pagina1</a></li>
<li><a href="paginas/pagina2.aspx">Pagina2</a></li>
<li><a href="paginas/pagina3.aspx">Pagina3</a></li>
</ul>
<div id='jqxtabs' style='display:none;'>
<ul style='margin-left: 20px;'>
<li></li>
</ul>
<div id="Contenido0">
</div>
</div>
</div>
</form>this is my code .. so completely as I have just created a pore for each menu tabs do not load the page in the content tab
Hi miguels,
Please, find the following example which shows how to add new tab dynamically to jqxTabs. When you click on some tab the external page will be loaded.
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// create jqxTabs.
$('#jqxTabs').jqxTabs({ height: 250, width: 500, showCloseButtons: true });
$('#jqxButton').jqxButton({
width: '200px',
height: 30,
});
$('#jqxButton').click(function () {
$('#jqxTabs').jqxTabs('addAt', 2, '<a href="pages/ajax3.htm">tabTitle</a>', '');
});
});
</script>
</head>
<body class='default'>
<div id='jqxWidget'>
<div id='jqxTabs' style="float: left;">
<ul style="margin-left: 30px;" id="unorderedList">
<li><a href="pages/ajax1.htm">ajax1</a></li>
<li><a href="pages/ajax2.htm">ajax2</a></li>
</ul>
<div>
</div>
<div>
</div>
</div>
<div style='margin-top: 10px;'>
<input type="button" id='jqxButton' value="Add new item item" />
</div>
</div>
</body>
</html>If you want to show it in the tab content you should place the content in the div element.
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// create jqxTabs.
$('#jqxTabs').jqxTabs({ height: 250, width: 500, showCloseButtons: true });
$("#1").load("pages/ajax1.htm");
$("#2").load("pages/ajax2.htm");
$('#jqxButton').jqxButton({
width: '200px',
height: 30,
});
var newContent = "<div id='3'></div>";
$('#jqxButton').click(function () {
$('#jqxTabs').jqxTabs('addAt', 0, 'tabTitle', newContent);
$("#3").load("pages/ajax3.htm");
});
});
</script>
</head>
<body class='default'>
<div id='jqxTabs' style="float: left;">
<ul style="margin-left: 30px;" id="unorderedList">
<li>Node.js</li>
<li>Active Server Pages</li>
</ul>
<div id="1"></div>
<div id="2"></div>
</div>
<input type="button" id='jqxButton' value="Add new item item" />
</body>
</html>I hope the above examples will be helpful to you.
Best Regards,
Nadezhda
jQWidgets team
http://www.jqwidgets.com/
You must be logged in to reply to this topic.