Question

我喜欢在我的应用程序中实现侧面板，因为它是在Facebook应用程序中实现的。这是它的屏幕截图

screenshot

我想我需要夸大布局视图并添加滑动动画，但我不知道如何开始和实现它。

由于

Answer 1

有几种方法可以实现这一目标：

1-使用滚动条。 2-使用滑块。

你可以在互联网上找到关于我上面提到的控件的教程。

感谢。

Answer 2

嗨，请根据您的要求浏览以下html。

<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Mobile Application</title> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />  
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script> 

<style> 
.content { 
/*
background-color: #ccc; 
height: 583px;
border: 1px solid #333; 
margin: 0px; 
width : 250px;

position : relative;
left : 0%;
*/
position : absolute;
float : left;
width : 25%;
left : 0%
} 
.tbrows
{
background-color: #ccc; 
height: 40px;
border: 1px solid #333; 
margin: 0px; 
width : 250px;
float:left;
/*background: url(expanded.gif) no-repeat 10px center;*/
background-image:url('expanded.gif');
background-repeat:no-repeat;

background-position:right; 
}
.main
{
    background-color: #ccc;
    /*
    postion : absolute;
   left : 800px;
   */
   left : 0px;    
}
.divmain
{
/*
    background-color: #ccc;
    width : 75%;
    postion : absolute;
   height : 583px;
   margin-right : 5%;
    margin-top : 0%;
    margin-bottom : 2000px;
    float:left;
    border: 1px solid #333; 
   */
   background-color: #ccc;
   position :relative;
float : left;
 width : 100%;
 left:0%;  
}
.tbmain 
{
    background-color: #ccc;
    height : 583px;
}
.tdfont
{
font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    padding : 0px;
    font-weight:bold;
}
.tdimg
{
   width : 10px; 
}

.div1 {

    padding: 5px 25px;
    font-weight: bold;
    color: white;
    background: url(expanded.gif) no-repeat 10px center;
    cursor: default;
    border-bottom: 1px solid #ddd;  
}
.divsearch
{
  background-color: #fff; 
  height:25px; 
  padding:3px;
}
.widgetsTable{

     border:1px solid black;
      width:450px;
      height:240px;
      border-radius : 5px;        
}

.widgetHeader1
{
     /* border :3px solid #ccc;
      border-bottom :3px;
      border-bottom-color:red;
      */
      background-color:Orange; 
      height:40px;
      font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    padding : 0px;
    font-weight:bold;

}
.widgetHeader2
{
     /* border :3px solid #ccc;
      border-bottom :3px;
      border-bottom-color:red;
      */
      background-color:red;
      height:40px;
      font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    padding : 0px;
    font-weight:bold;

}
.widgetHeader3
{
     /* border :3px solid #ccc;
      border-bottom :3px;
      border-bottom-color:red;
      */
      background-color: Blue;


      height:40px;
      font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    padding : 0px;
    font-weight:bold;

}
.widgetHeader4
{
     /* border :3px solid #ccc;
      border-bottom :3px;
      border-bottom-color:red;
      */
      background-color:green;   
      height:40px;
      font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    padding : 0px;
    font-weight:bold;


}
.widgetBody
{
    background-color:#1c1c1c;       
}
</style> 
<script>

    $(document).ready(function () {
        $('#menu1').click(function () {
            // alert('hi');
            $('#div1').slideToggle('fast');
        });              
$('#menu2').click(function () {
    $('#div2').slideToggle('fast');
        });
 /*       
$('#tabmain').click(function () {
    //alert('hi');

    $('#divcontent').animate({width:"95%"});
    $('#dvmain').animate({left:"95%"});
   // $('#dvmain').animate({width:"20%"});
  //  $('#dvmain').animate({float:right});


        });


$('#divcontent').click(function () {
    //alert('hi');

    $('#divcontent').animate({width:"25%"});
    $('#dvmain').animate({left:"0%"});
   // $('#dvmain').animate({width:"20%"});
  //  $('#dvmain').animate({float:right});


        }); 

*/
var bclick = false;

$('#tdslide').click(function () {
    //alert('hi');

    if(!bclick)
        {
          $('#divcontent').animate({width:"95%"});
          $('#dvmain').animate({left:"95%"});
          bclick = true;
        }
    else
        {
          $('#divcontent').animate({width:"25%"});
          $('#dvmain').animate({left:"0%"});
          bclick = false;
        }
   // $('#dvmain').animate({width:"20%"});
  //  $('#dvmain').animate({float:right});


        }); 

/*
$('#menu3').click(function () {
    tabmain
    tdslide
    $('#div3').slideToggle('fast');
        })
*/
        //----
        /*
        $('#div1').live("swipe", function() {
            // Get the current page number from the id and increment it by 1.
            //alert('hi');
            });
        */
    });

    function show() {
        //  $("#td1").hide("medium");
        $("#td1").show("slow");
    }

    </script>

</head> 
<body> 

 <section id="page1" data-role="page" style ='position:relative'>   
<form id='frmlogin' name= 'frmlogin' >
<div  class='content' id='divcontent'> 

 <table width = 100%' border = '0' width = '100%' cellpadding = '0' cellspacing = '0'>
<tr>
 <td>
<ul data-role="listview">

<li data-role="divider" id='menu1' >Lists</li>
 <div id='div1' name='div1' style='display:none;height:100px;overflow:auto'  >
<li><a href="#" id='item1' >Item123</a></li>
<li><a href="#">Item2</a></li>
<li><a href="#">Item3</a></li>
<li><a href="#">Item4</a></li>
<li><a href="#">Item5</a></li>
<li><a href="#">Item6</a></li>
<li><a href="#">Item7</a></li>
<li><a href="#">Item8</a></li>
<li><a href="#">Item9</a></li>
<li><a href="#">Item10</a></li>
<li><a href="#">Item11</a></li>
<li><a href="#">Item12</a></li>
<li><a href="#">Item13</a></li>
<li><a href="#">Item14</a></li>
</div>
<li data-role="divider" id='menu2'>Actions</li>
<div id='div2' name='div2' style='display:none'>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</div>

</ul>
 </td>
</tr>
</table>



</div>      
<div class ='divmain' id = 'dvmain'>
<table   width = '100%' style ='height:595px' border='0' class = 'tbmain' id = 'tabmain' cellspacing = '0' cellpadding = '10'>
<tr width = '100%' style = 'height:10px;background-color:grey'>
<td width = '5%' id = 'tdslide'>click
<img src = 'toggle_plus.png'></img>
</td>
<td width = '95%' align = 'left'></td>    
<tr>    
<tr style = 'height:225px'>
<td width = '50%' valign ='center'>
 <table class= 'widgetsTable' align='center' cellspacing ='0' cellpadding = '0' >
  <tr valign='middle' class= 'widgetHeader1'  width = '100%'>
    <td>center</td>
  </tr>
  <tr >
   <td class='widgetBody'></td>
  </tr>
 </table>
 </td>
<td width = '50%' valign = 'center'>
<table class= 'widgetsTable' align='center' cellspacing ='0' cellpadding = '0' border ='0'>
  <tr valign='middle' class= 'widgetHeader2' style ='height:40px' width = '100%'>
    <td>center</td>
  </tr>
  <tr>
   <td class='widgetBody'></td>
  </tr>
 </table>
</td>
</tr>
<tr  style = 'height:225px'>    
<td width = '50%' valign = 'center'>
<table class= 'widgetsTable' align='center' cellspacing ='0' cellpadding = '0' border ='0'>
  <tr valign='middle' class= 'widgetHeader3' style ='height:40px' width = '100%'>
    <td>center</td>
  </tr>
  <tr>
   <td class='widgetBody'></td>
  </tr>
 </table>
</td>
<td width = '50%' valign = 'center' >
<table class= 'widgetsTable' align='center' cellspacing ='0' cellpadding = '0' border ='0'>
  <tr valign='middle' class= 'widgetHeader4' style ='height:40px' width = '100%'>
    <td>center</td>
  </tr>
  <tr>
   <td class='widgetBody'></td>
  </tr>
 </table>
</td>
</tr>
</table>

</div>

</form> 
 </section>
 </body>
</html>

Facebook滑动侧面板为Android应用程序

2 个答案: