如何在jQuery UI对话框内容区域添加标签?
答案 0 :(得分:2)
找出在jQuery UI对话框中制作标签的代码。请从jQuery网站下载CSS和JavaScript文件,即捆绑包,并将其附加到您的项目中。
$(function() {
$("#tabs").tabs().addClass('ui-tabs-vertical ui-helper-clearfix');
$("#tabs li").removeClass('ui-corner-top').addClass('ui-corner-left');
});
$(document).ready(function () {
$("#dialog").dialog({
resizable:false,
closeOnEscape: false,
open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); },
modal: true,
width:800
}).parent().find('div.ui-dialog-titlebar').addClass('titleClass');
});
.ui-tabs-vertical { width: 55em; }
.ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; }
.ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }
.ui-tabs-vertical .ui-tabs-nav li a { display:block; }
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; }
.ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;}
</style>
<div id="dialog" style="background-color:Gray; text-align:center;">
<div class="demo">
<div id="tabs">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</a></li>
<li><a href="#tabs-3">Aenean lacinia</a></li>
</ul>
<div id="tabs-1">
<h2>Content heading 1</h2>
</div>
<div id="tabs-2">
<h2>Content heading 2</h2>
</div>
<div id="tabs-3">
<h2>Content heading 3</h2>
</div>
</div>
</div><!-- End demo -->
<div class="demo-description">
</div>
</div>
</body>
</html>