Question

我需要在页面中使用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>

Answer 1

我创建了一个使用网格的例子;主菜单，左菜单和右菜单。可以使用.show()和.hide()显示和隐藏菜单。一旦菜单被隐藏，主体就会填充空间。这是代码。

<强> 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代码

$('#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();
});

使用3列和3列表视图

1 个答案: