Jquery 使用3列和3个listview_Jquery_Jquery Mobile

Jquery 使用3列和3个listview

jquery jquery-mobile

Jquery 使用3列和3个listview,jquery,jquery-mobile,Jquery,Jquery Mobile,我需要在一个页面中使用3列，3个不同的列表视图，但是当我使用第一列时 <div data-role="page" id="left"> 我已经创建了一个使用网格的示例，；主菜单、左菜单和右菜单。可以使用.show（）和.hide（）显示和隐藏菜单。隐藏菜单后，主体将填充空间。这是代码 HTML JQM代码看看这个。使用标题上的按钮隐藏/显示侧菜单。这很好，标题上的按钮也很好，但是如何在左侧菜单中放置第二个菜单（listvuew）？当我点击左侧菜单上的“1”时，我需要在相同的位置

我需要在一个页面中使用3列，3个不同的列表视图，但是当我使用第一列时

<div data-role="page" id="left">

我已经创建了一个使用网格的示例，；主菜单、左菜单和右菜单。可以使用

.show（）

和

.hide（）

显示和隐藏菜单。隐藏菜单后，主体将填充空间。这是代码

HTML

JQM代码

看看这个。使用标题上的按钮隐藏/显示侧菜单。这很好，标题上的按钮也很好，但是如何在左侧菜单中放置第二个菜单（listvuew）？当我点击左侧菜单上的“1”时，我需要在相同的位置打开第二个菜单，如代码中的cat1和home。可以使用Tks@OmarCollapsible a。如果你喜欢，请告诉我，我会发布一个答案。使用可折叠功能可以很好地解决我的问题，但菜单的深度和项目的数量是可变的。我知道问题出在data role=“page”上，因为内容块需要从这个data role开始，而且我没有看到任何带有两个listviesw的级联代码，甚至没有使用和工作。因此，如果您有其他解决方案，我会很高兴。对不起，我的英语不好。

<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>

<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>

.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;
}

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