所以我试图将对话框与 jQuery UI 形式的选项卡 UI 组件结合起来,我已经快到了,但我似乎无法将对话框关闭按钮从对话框 UI 标题栏移动到选项卡 UI。
我尝试将现有的对话框 UI 标题栏关闭按钮移动到选项卡 UI 栏,但这带来了很多问题,并且该按钮在鼠标悬停时移动。我尝试在选项卡 UI 栏中创建带有关闭图标的按钮,但事实证明,很难将按钮定位在最右侧,并且具有按钮的外观和感觉(上面带有关闭图标)。
问题在于选项卡 UI 栏仅接受 <li>
因为它是<ul>
。如果我想在那里添加其他内容,我需要将其包含在 <li>
中这会导致很多问题,或者我找不到简单的解决方案。
谁能帮帮我吗?
这是我当前的代码:
<script type="text/javascript">
$(document).ready(function() {
$('#dialog-movie-info').dialog({
draggable: false,
resizable: false,
show: 'fade',
hide: 'fade',
modal: true,
height: 370,
width: 650,
position: ['center', 35],
open: function() {
//$('.ui-dialog-titlebar-close').appendTo('#ui-tab-dialog-close');
$(this).parent().children('.ui-dialog-titlebar').remove();
$('#tabs-movie').tabs();
},
close: function() {
$(this).find('#tab-info').children().remove();
$(this).dialog('destroy');
}
});
}
</script>
<div id="dialog-movie-info" class="ui-helper-hidden">
<div id="tabs-movie">
<ul>
<li><a href="#tab-info"><img src="template/images/icon-block.png" alt="" />Information</a></li>
<li><a href="#tab-cast"><img src="template/images/icon-block.png" alt="" />Cast List</a></li>
</ul>
<div id="tab-info">
<em>Info tab...</em>
</div>
<div id="tab-cast">
<em>Cast tab...</em>
</div>
</div>
</div>
最佳答案
我找到了一个非常适合我的解决方案:
Javascript:
$(document).ready(function() {
$('#tabs-movie').tabs();
$('#dialog-movie-info').dialog({
closeOnEscape: false,
draggable: false,
resizable: false,
autoOpen: false,
open: function() {
$(this).find('.ui-dialog-titlebar-close').blur();
}
}).parent().find('.ui-dialog-titlebar-close').prependTo('#tabs-movie').closest('.ui-dialog').children('.ui-dialog-titlebar').remove();
});
HTML:
<div id="dialog-movie-info">
<div id="tabs-movie">
<ul>
<li><a href="#tab-info"><img src="template/images/icon-block.png" alt="" />Information</a></li>
<li><a href="#tab-cast"><img src="template/images/icon-block.png" alt="" />Cast List</a></li>
</ul>
<div id="tab-info"></div>
<div id="tab-cast">
<em>Cast Tab!</em>
</div>
</div>
</div>
CSS:
#tabs-movie {
border: none;
padding: 0;
}
关于jquery - 如何在 jQuery 中将 UI 对话框与 UI 选项卡结合起来?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4317975/