1
私はFacebookアプリケーションに実装されているので、私のアプリケーションにサイドパネルを実装するのが好きです。ここ はそれのスクリーンショットアンドロイドアプリの側面スライドパネル
である私は、レイアウトビューを膨らませるとスライドのアニメーションを追加する必要があると思いますが、私はそれを起動して実装する方法のアイデアを得ていないのです。
おかげ
A
答えて
2
あなたがこれを達成することができますいくつかの方法があります。
の1-使用スクローラが。 2スライダーを使用します。
上記のコントロールに関するインターネット上のチュートリアルを見つけることができます。
ありがとうございました。
-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>
関連する問題
- 1. スライドパネルonClick
- 2. エラー - スプラッシュ画面、アンドロイドアプリ
- 3. 複数のスライドパネル
- 4. オフスクリーンからのスライドパネル
- 5. JQueryプラグイン：エキスパンドボックス/スライドパネル
- 6. Wicketスライドパネル/ div/x
- 7. 丸い側面
- 8. アンカーボタンが側面
- 9. Google Chromeのオプションのスライドパネル
- 10. ホーム画面にアンドロイドアプリのショートカットの位置
- 11. jQuery：1つ後ろのスライドパネル
- 12. WPFでのダイナミックコントロールとスライドパネル/ロールアウト
- 13. Jquery Imageスライドパネル上のマウス
- 14. DevicePolicyManagerの設定画面でアンドロイドアプリのロック画面を開く
- 15. 側面のみのボックスシャドウ
- 16. H2の側面にある2本の線、下側と上側
- 17. jqueryを使用したスライドパネル
- 18. jQuery show hide左からスライドパネル
- 19. アンドロイドアプリから顔面を開く
- 20. Flutterでのスライドパネルの操作方法は？
- 21. フレックスボックスを使用したスライドパネルの作成
- 22. 有料のアンドロイドアプリのサーバー側のユーザー認証
- 23. マルチモジュールMavenプロジェクトのAOPの側面
- 24. 画面の左側の白い縦線
- 25. パッケージとパッケージの側面の適用
- 26. mp4ビデオの側面の黒い線 - iPhone
- 27. アンドロイドアプリのロック画面での向きの処理
- 28. 画面のドラッグ可能な左側（JQuery）
- 29. PostSharp - 他の側面を破る
- 30. スリック、側面のアイテムを隠す