Search and Top Navigation
#5616 closed bug (notabug)
Opened May 14, 2010 07:11PM UTC
Closed May 14, 2010 07:52PM UTC
Last modified October 11, 2012 09:15PM UTC
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:
1. The ticket summary mentions only button and doesn't summarize what the issue is, only that it has something to do with 'adding' and 'placement'. What are you adding it to? Where is it being placed?
1. The description should contain:
1. The description should not contain any more than a few lines of code. If you have too much code to fit in the description, use an attachment
1. Ensure you have a minimal test case. Your current code sample contains at least:
Is every one of these required to produce this button issue you've found? If not, remove the code that isn't needed.
1. The component field should be filled with the component that you believe contains the bug, not ui.core
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.