#5616 closed bug (notabug)
Add Button placement issue
Reported by: | wasi2000 | Owned by: | |
---|---|---|---|
Priority: | minor | Milestone: | |
Component: | ui.core | Version: | 1.8.1 |
Keywords: | Cc: | ||
Blocked by: | Blocking: |
Description
This works fine in Mozilla. In IE, if you place the button in the <ul> then it will be attached with the last list item. As my tabs are moveable so whenever I move my last tab this add button is also joining the tab.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="TabStrip._Default" %>
<!DOCTYPE html PUBLIC "-W3CDTD XHTML 1.0 TransitionalEN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server">
<title></title> <link type="text/css" href="jquery-ui-1.8.1.custom.css" rel="stylesheet" /> <link type="text/css" href="menu.css" media="screen" rel="stylesheet" />
<script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script type="text/javascript" src="jquery-ui-1.8.custom.min.js"></script>
<script src="jquery.jeditable.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="menu.js"></script> <script type="text/javascript">
$(function() {
$('.edit').editable(function(value, settings) {
return (value);
}, {
type: 'text', event: 'dblclick'
});
$("#tabs").tabs().find(".ui-tabs-nav").sortable({ axis: 'x' });
addTab button: just opens the dialog $('#add_tab').button().click(function() { }); $('#add_tab').button();
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>'
});
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()); $tabs.tabs('remove', index);
});
MENUS $('#flat').menu({
content: $('#search-engines').html(), grab content from this page showSpeed: 400
});
$('#tabs span.ui-icon-triangle-1-s').live('click', function() {
var index = $('li', $tabs).index(this); var index = $('span', $tabs).index(this); $($('span').get(index)).menu({
content: $($('span').get(index)).next().html(), grab content from this page showSpeed: 400
});
});
});
</script>
<!-- styles for this example page only -->
<style type="text/css"> body { font-size:62.5%; margin:0; padding:0; } #menuLog { font-size:1.4em; margin:20px; } .hidden { position:absolute; top:0; left:-9999px; width:1px; height:1px; overflow:hidden; } .fg-button {cursor:pointer;}
</style>
</head> <body> <form id="form1" runat="server">
<div id="tabs">
<ul>
<li><span class="ui-icon ui-icon-locked" style="float:left;"></span>
<a class="edit" href="#tabs-1">Tab1</a> <span class="ui-icon ui-icon-triangle-1-s" style="float:left;cursor:pointer;"></span> <div class="hidden">
<ul>
<li><a href="#">Google</a></li> <li><a href="#">Yahoo</a></li> <li><a href="#">MSN</a></li>
</ul>
</div> <span class="ui-icon ui-icon-close" style="float:left;cursor:pointer;"></span>
</li> <li><span class="ui-icon ui-icon-locked" style="float:left;"></span>
<a class="edit" href="#tabs-2">Tab2</a> <span class="ui-icon ui-icon-triangle-1-s" style="float:left;cursor:pointer;"></span>
<div class="hidden">
<ul>
<li><a href="#">Ask</a></li> <li><a href="#">AOL</a></li>
</ul>
</div> <span class="ui-icon ui-icon-close" style="float:left;cursor:pointer;"></span>
</li> <li style="{overflow:auto}"><span class="ui-icon ui-icon-locked" style="float:left;"></span> <a class="edit" href="#tabs-3">Tab3</a>
<span class="ui-icon ui-icon-triangle-1-s" style="float:left;cursor:pointer;"></span>
<div class="hidden">
<ul>
<li><a href="#">Google</a></li> <li><a href="#">Yahoo</a></li>
</ul>
</div>
<span class="ui-icon ui-icon-close" style="float:left;cursor:pointer;"></span>
</li> <button id="add_tab">Add Tab</button>
</ul> <div class="right"></div> <div id="tabs-1">
<p>Tab-1 Contents</p>
</div> <div id="tabs-2">
<p>Tab-2 Contents</p>
</div> <div id="tabs-3">
<p>Tab-3 Contents 1</p> <p>Tab-3 Contents 1</p>
</div>
</div>
</form> </body> </html>
This ticket is not valid. In general, please see http://wiki.jqueryui.com/Bug-Fixing-Guide . More specifically:
Feel free to fix up the ticket according to these suggestions and reopen. If you're not sure what you have is in fact or bug or if perhaps your code needs some kind of tweak, please start on the forum instead, but you still should have a minimal test case before posting there.
Thanks.