回复 5楼dof的帖子
现在遇到了一个新的问题是:如何控制tabs页签选中的问题
如上图所示,如果选中中间的费用信息页签,点击保存后,页面会postback刷新,刷新后再次看到页面的时候页签的选中项变成了基础信息这个页签而不是费用信息
<script type="text/javascript" src="../AccountingCost/js/jquery-1.4.4.min.js"></script>
<%--<link type="text/css" href="../AccountingCost/css/ui-lightness/jquery-ui-1.8.10.custom.css" rel="stylesheet" />
<script type="text/javascript" src="../AccountingCost/js/jquery-ui-1.8.10.custom.min.js"></script>--%>
<link href="../AccountingCost/css/start/jquery-ui-1.10.2.custom.css" rel="stylesheet"
type="text/css" />
<script src="../AccountingCost/js/jquery-ui-1.10.2.custom.min.js" type="text/javascript"></script>
<script src="../AccountingCost/js/jquery-ui-1.10.2.custom.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
// Accordion
$("#accordion").accordion({ header: "h3" });
// Tabs
$('#tabs').tabs();
// Dialog
$('#dialog').dialog({
autoOpen: false,
width: 600,
buttons: {
"Ok": function () {
$(this).dialog("close");
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
// Dialog Link
$('#dialog_link').click(function () {
$('#dialog').dialog('open');
return false;
});
// Datepicker
$('#datepicker').datepicker({
inline: true
});
// Slider
$('#slider').slider({
range: true,
values: [17, 67]
});
// Progressbar
$("#progressbar").progressbar({
value: 20
});
//hover states on the static widgets
$('#dialog_link, ul#icons li').hover(
function () { $(this).addClass('ui-state-hover'); },
function () { $(this).removeClass('ui-state-hover'); }
);
});
</script>
<style type="text/css">
/*demo page css*/
body
{
font: 62.5% "Trebuchet MS" , sans-serif; /*margin: 50px;*/
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
padding-left: 0px;
padding-top: 0px;
padding-right: 0px;
}
.demoHeaders
{
margin-top: 2em;
}
#dialog_link
{
padding: .4em 1em .4em 20px;
text-decoration: none;
position: relative;
}
#dialog_link span.ui-icon
{
margin: 0 5px 0 0;
position: absolute;
left: .2em;
top: 50%;
margin-top: -8px;
}
ul#icons
{
margin: 0;
padding: 0;
}
ul#icons li
{
margin: 2px;
position: relative;
padding: 4px 0;
cursor: pointer;
float: left;
list-style: none;
}
ul#icons span.ui-icon
{
float: left;
margin: 0 4px;
}
</style>
<div id="tabs" style="margin-left: 1px; margin-top: 1px; margin-right: 3px; padding-left: 0px;
padding-top: 0px; padding-right: 0px;">
<ul style="height: 28px;">
<li style="height: 28px;"><a href="#tabs-1">基础信息</a></li>
<li style="height: 28px;"><a href="#tabs-2">费用信息</a></li>
<li style="height: 28px;"><a href="#tabs-3">里程信息</a></li>
</ul>
<div id="tabs-1" style="margin-left: 0px; margin-top: 0px; margin-right: 0px; padding-left: 0px;padding-top: 0px; padding-right: 0px; height: 500px;">
</div>
<div id="tabs-2" style="margin-left: 0px; margin-top: 0px; margin-right: 0px; padding-left: 0px;padding-top: 0px; padding-right: 0px; height: 500px;">
</div>
<div id="tabs-3" style="margin-left: 0px; margin-top: 0px; margin-right: 0px; padding-left: 0px;padding-top: 0px; padding-right: 0px; height: 500px;">
</div>
</div> |