我正在尝试使用 this sliding 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>
最佳答案
工作示例: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 - 如何将 "tick"按钮放入 jquerymobile 滑动面板，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16297156/