如何將“勾號”按鈕放到jquerymobile幻燈片面板上
[英]How to put a “tick” button to a jquerymobile slide panel
問題描述
我正在嘗試使用這個滑動面板 ，使用jquery mobile完成。 它完美地運作。
我想在滑動面板的邊框上放一個小按鈕，如刻度線。 此按鈕也應與面板一起滑動。 按此按鈕將打開面板，它應始終可見。 我不知道怎么做，我不知道它是否可能。
<div data-role="panel" id="left-panel" data-display="overlay" data-position="left" data-theme="c">
<img src="small_image_as_button" /><!-- click here to open the panel -->
<nav id="indice">
<!-- content here -->
</nav>
</div>
1 個解決方案
解決方案1
4 已采納 2013-04-30 13:08:36
工作示例： http ： //jsfiddle.net/Gajotres/qgDst/
HTML：
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="b" data-role="header">
<h1>Index page</h1>
</div>
<div data-role="content">
</div>
<div data-role="panel" id="left-panel" data-display="overlay" data-position="left" data-theme="c">
<img src="small_image_as_button" /><!-- click here to open the panel -->
<nav id="indice">
<!-- content here -->
</nav>
<div data-role="button" id="tick-button">>></a>
</div>
</div>
</body>
</html>
Javascript：
$(document).on('pagebeforeshow', '#index', function(){
$(document).on('click tap', '#tick-button', function(){
$("#left-panel").panel( "open");
});
});
CSS：
.ui-panel-closed {
visibility: visible !important;
width: 100px !important;
left: 160px !important;
overflow: visible !important;
}
.ui-content {
padding: 0 15px 15px 15px !important;
}
#tick-button {
position: absolute;
top: 100px;
right: -27px;
width: 25px;
height: 100px;
margin: 0 0 !important;
border-radius: 0 1em 1em 0;
}
#tick-button .ui-btn-inner {
padding: 0 0 !important;
height: 100% !important;
font:10px 'Courier New', 'Verdana',serif;
line-height: 100px;
color: #555;
text-shadow: 1px 1px #fff;
}
JavaScript 滑動面板，如何使按鈕可用？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.