我需要在一个页面中使用 3 列,有 3 个不同的列表视图,但是当我使用第一个时
<div data-role="page" id="left">
并关闭此 div,其他列不会出现。
left_menu.php
和right_menu.php
principal.php 类似
如何解决这个问题?
<style type="text/css">
body
{
margin: 0; /* margin and padding only necessary to cater for Mac IE5 */
padding: 0;
/*\*/ overflow: hidden; /* because Mac IE5 don't understand */
}
div
{
margin: 0;
padding: 0;
}
#central
{
/*\*/
position: absolute;
top: 0%;
right: 40%;
bottom: 0%;
left: 20%;
/* Exclude all previous props for Mac IE5 */
margin: 26% 31% 1% 21%; /* Cater for Mac IE5 */
/*\*/ margin: 0; /* Put back for all the rest */
/*\*/ overflow: auto; /* no need for Mac IE5 to see this */
}
#sidebar-left
{
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 20%;
overflow: auto;
}
#sidebar-right
{
position: absolute;
top: 4px;
right: -4px;
bottom: 0;
overflow: auto;
width: 35%;
}
</style>
</head>
<body>
<div id="sidebar-left">
<?php require_once('left_menu.php'); ?>
</div>
<div id="central">
<?php require_once('principal.php'); ?>
</div>
<div id="sidebar-right">
<?php require_once('menu_right.php'); ?>
</div>
</div>
//-----------------------------------//
principal.php
<div data-role="header">
<h1>Select</h1>
<a href="../index.php" data-icon="home" data-iconpos="left" data-direction="reverse"
class="ui-btn-right">Home</a>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="c">
<li><a href=#cat1>Option 1</a></li>
<li><a href=#cat2>Option 2</a></li>
<li><a href=#cat3>Option 3</a></li>
</ul>
</div>
<div data-role="page" id="cat1">
<div data-role="header">
<h1>Option 1</h1>
<a href="../index.php" data-icon="home" data-iconpos="left" data-direction="reverse" class="ui-btn-right">Home</a>
</div>
<div data-role="content">
<ul data-role="listview" data-filter="false" data-inset="true" data-theme="c">
<li><a href="insert.php" data-rel="dialog" data-transition="pop">Test 1</a></li>
<li><a href="insert.php" data-rel="dialog" data-transition="pop">Test 2</a></li>
<li><a href="insert.php" data-rel="dialog" data-transition="pop">Test 3</a></li>
</ul>
</div>
</div>