where I am using Jquery UI. I have an accordion menu, which has multiple hyperlinks in each accordion menu.
What I am trying to do, is when I click on one of these hyperlinks, I want it to open the page I am calling, that is to be displayed within a new tab that can be closed with an x (like these simple manipulation ones), but in a new tab to be displayed.
My aim is that I can have mupliple tabs open that have been launched by selecting differet hyperlink options within the accordion, so the user closes them when they want to.
I have not found anything on how to do this.
Can someone please help.
Thanks
Hi I think I have worked it out. Thanks for responding @johnrobinson
I did this with a button, but will do what I need.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery UI Example Page</title>
<link type="text/css" href="css/custom-theme/jquery-ui-1.8.20.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.20.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.callapse.js"></script>
<meta charset="utf-8">
<style>
#dialog label, #dialog input { display:block; }
#dialog label { margin-top: 0.5em; }
#dialog input, #dialog textarea { width: 95%; }
#tabs { margin-top: 1em; }
#tabs li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; }
#add_tab { cursor: pointer; }
</style>
<script>
$(function() {
var $tab_title_input = $( "#tab_title"),
$tab_content_input = $( "#tab_content" );
var tab_counter = 2;
// tabs init with a custom tab template and an "add" callback filling in the content
var $tabs = $( "#tabs").tabs({
tabTemplate: "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>",
add: function( event, ui ) {
var tab_content = "andyContent" || "Tab " + tab_counter + " content.";
$( ui.panel ).append( "<p>" + tab_content + "</p>" );
}
});
// modal dialog init: custom buttons and a "close" callback reseting the form inside
var $dialog = $( "#dialog" ).dialog({
autoOpen: false,
modal: true,
buttons: {
Add: function() {
addTab();
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
open: function() {
$tab_title_input.focus();
},
close: function() {
$form[ 0 ].reset();
}
});
// actual addTab function: adds new tab using the title input from the form above
function addTab() {
var tab_title = "andytitle" || "Tab " + tab_counter;
$tabs.tabs( "add", "#tabs-" + tab_counter, tab_title );
tab_counter++;
}
// addTab button: just opens the dialog
$( "#add_tab" )
.button()
.click(function() {
addTab();
});
// close icon: removing the tab on click
// note: closable tabs gonna be an option in the future - see http://dev.jqueryui.com/ticket/3924
$( "#tabs span.ui-icon-close" ).live( "click", function() {
var index = $( "li", $tabs ).index( $( this ).parent() );
if(index != 0){
$tabs.tabs( "remove", index );
}
});
});
</script>
</head>
<body>
<div class="demo">
<button id="add_tab">Add Tab</button>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</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. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>
</div>
</body>
</html>
</div>