I am trying to use this sliding panel , done using jquery mobile. It works perfectly.
I would like to put a small button, like a tick, on the border of the sliding panel. This button should slide also, with the panel. Pressing this button would open the panel and it should be always visible. I don't know how to do it and I don't know if it is even possible.
<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>
Working example: 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;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.