问题
I need to use 3 columns in a page, with 3 different listviews, but when I use the first
<div data-role="page" id="left">
and close this div, the others columns don´t appear.
left_menu.php and right_menu.php are similar to principal.php
How to solve this?
<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>
回答1:
I have created an example using Grids,; Main, left and right menus. The menus can be shown and hidden using .show() and .hide(). The Main body fills the space once menus are hidden. Here is the code.
working Demo
HTML
<div data-role="page">
<div class="ui-grid-b">
<div class="ui-block-a" id="menu-l">
<div data-role="header" data-theme="c">
<h3 class="menu-l">Left Menu</h3>
</div>
<div data-role="content" data-theme="c">
<!-- main lisview-->
<ul data-role="listview" data-theme="e" id="main">
<li><a href="#" id='cat1'>#cat 1</a>
</li>
<li><a href="#" id='cat2'>#cat 2</a>
</li>
<li><a href="#" id='cat3'>#cat 3</a>
</li>
</ul>
<!-- /main -->
<!-- sub-menu lisview-->
<ul data-role="listview" data-theme="b" id="sub">
<li><a href="#" id='cat1'>sub 1</a>
</li>
<li><a href="#" id='cat2'>sub 2</a>
</li>
<li><a href="#" id='cat3'>sub 3</a>
</li>
<li><a href="#" id='back'>Back to main menu</a>
</li>
</ul>
<!-- /sub-menu -->
</div>
</div>
<div class="ui-block-b" id="main">
<div data-role="header" data-theme="d">
<a href="#" data-icon="arrow-l" data-iconpos="notext" id="btn-l"></a>
<a href="#" data-icon="arrow-r" data-iconpos="notext" id="btn-r"></a>
<h1>Main</h1>
</div>
<div data-role="content" data-theme="d">
<ul data-role="listview">
<li><a href="#">4</a>
</li>
<li><a href="#">5</a>
</li>
<li><a href="#">6</a>
</li>
</ul>
</div>
</div>
<div class="ui-block-c" id="menu-r">
<div data-role="header" data-theme="c">
<h3 class="menu-r">Right Menu</h3>
</div>
<div data-role="content" data-theme="c">
<ul data-role="listview" data-theme="b">
<li><a href="#">7</a>
</li>
<li><a href="#">8</a>
</li>
<li><a href="#">9</a>
</li>
</ul>
</div>
</div>
</div>
<div data-role="footer">
<h1>Footer</h1>
</div>
</div>
CSS
.ui-block-a {
width: 25% !important;
height: 100% !important;
}
.ui-block-b {
width: 50% !important;
height: 100% !important;
}
.ui-block-c {
width: 25% !important;
height: 100% !important;
}
.menu-l {
font-size: 11px !important;
margin-left: 5px !important;
padding-top: 13px !important;
}
.menu-r {
font-size: 11px !important;
margin-right: 5px !important;
padding-top: 13px !important;
}
JQM Code
$('#btn-l').on('click', function () {
if ($('#menu-l').is(':visible')) {
$('#menu-l').hide();
$(this).buttonMarkup({
icon: 'arrow-r'
});
} else {
$('#menu-l').show();
$(this).buttonMarkup({
icon: 'arrow-l'
});
}
if ($('#menu-r').is(':visible') && $('#menu-l').is(':visible')) {
$('.ui-block-b').attr('style', 'width: 50% !important;');
} else if ($('#menu-r').is(':visible') || $('#menu-l').is(':visible')) {
$('.ui-block-b').attr('style', 'width: 75% !important;');
} else {
$('.ui-block-b').attr('style', 'width: 100% !important;');
}
});
$('#btn-r').on('click', function () {
if ($('#menu-r').is(':visible')) {
$('#menu-r').hide();
$(this).buttonMarkup({
icon: 'arrow-l'
});
} else {
$('#menu-r').show();
$(this).buttonMarkup({
icon: 'arrow-r'
});
}
if ($('#menu-r').is(':visible') && $('#menu-l').is(':visible')) {
$('.ui-block-b').attr('style', 'width: 50% !important;');
} else if ($('#menu-r').is(':visible') || $('#menu-l').is(':visible')) {
$('.ui-block-b').attr('style', 'width: 75% !important;');
} else {
$('.ui-block-b').attr('style', 'width: 100% !important;');
}
});
// Left menu and subm-menu
$('#sub').hide();
$('#main').on('click', 'li a', function () {
$('#main').hide();
$('#sub').show();
});
$('#sub').on('click', 'a#back', function () {
$('#main').show();
$('#sub').hide();
});
来源：https://stackoverflow.com/questions/15904218/using-3-columns-with-3-listview