Skip to content

M
mui
Commit b22cd0ff authored by hbcui1984's avatar hbcui1984
Browse files
Options

修复hello mui分页界面返回键无效的bug；

parent a2664c4b
Hide whitespace changes
Inline Side-by-side
Showing with 211 additions and 221 deletions
examples/hello-mui/examples/pagination.html
View file @ b22cd0ff
...@@ -22,230 +22,220 @@ ...@@ -22,230 +22,220 @@
padding-top: 0; padding-top: 0;
} }
</style> </style>
<script type="text/javascript">
mui.init();
</script>
</head> </head>
<body> <body>
<div class="mui-content">
<header class="mui-bar mui-bar-nav"> <h5 class="mui-content-padded">分页(默认尺寸)</h5>
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <div class="mui-content-padded">
<h1 class="mui-title">Pagination</h1> <ul class="mui-pagination">
</header> <li class="mui-previous mui-disabled">
<div class="mui-content"> <a href="#">
<h5 class="mui-content-padded">分页(默认尺寸)</h5> &laquo;
<div class="mui-content-padded"> </a>
<ul class="mui-pagination"> </li>
<li class="mui-previous mui-disabled"> <li class="mui-active">
<a href="#"> <a href="#">
&laquo; 1
</a> </a>
</li> </li>
<li class="mui-active"> <li>
<a href="#"> <a href="#">
1 2
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
2 3
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
3 4
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
4 5
</a> </a>
</li> </li>
<li> <li class="mui-next">
<a href="#"> <a href="#">
5 &raquo;
</a> </a>
</li> </li>
<li class="mui-next"> </ul>
<a href="#"> </div>
&raquo; <h5 class="mui-content-padded">分页(大尺寸)</h5>
</a> <div class="mui-content-padded">
</li> <ul class="mui-pagination mui-pagination-lg">
</ul> <li class="mui-previous">
</div> <a href="#">
<h5 class="mui-content-padded">分页(大尺寸)</h5> &laquo;
<div class="mui-content-padded"> </a>
<ul class="mui-pagination mui-pagination-lg"> </li>
<li class="mui-previous"> <li>
<a href="#"> <a href="#">
&laquo; 1
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
1 2
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
2 3
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
3 4
</a> </a>
</li> </li>
<li> <li class="mui-active">
<a href="#"> <a href="#">
4 5
</a> </a>
</li> </li>
<li class="mui-active"> <li class="mui-next mui-disabled">
<a href="#"> <a href="#">
5 &raquo;
</a> </a>
</li> </li>
<li class="mui-next mui-disabled"> </ul>
<a href="#"> </div>
&raquo; <h5 class="mui-content-padded">分页(小尺寸)</h5>
</a> <div class="mui-content-padded">
</li> <ul class="mui-pagination mui-pagination-sm">
</ul> <li class="mui-previous">
</div> <a href="#">
<h5 class="mui-content-padded">分页(小尺寸)</h5> &laquo;
<div class="mui-content-padded"> </a>
<ul class="mui-pagination mui-pagination-sm"> </li>
<li class="mui-previous"> <li>
<a href="#"> <a href="#">
&laquo; 1
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
1 2
</a> </a>
</li> </li>
<li> <li class="mui-active">
<a href="#"> <a href="#">
2 3
</a> </a>
</li> </li>
<li class="mui-active"> <li>
<a href="#"> <a href="#">
3 4
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
4 5
</a> </a>
</li> </li>
<li> <li class="mui-next">
<a href="#"> <a href="#">
5 &raquo;
</a> </a>
</li> </li>
<li class="mui-next"> </ul>
<a href="#"> </div>
&raquo; <h5 class="mui-content-padded">翻页(默认)</h5>
</a> <div class="mui-content-padded">
</li> <ul class="mui-pager">
</ul> <li>
</div> <a href="#">
<h5 class="mui-content-padded">翻页(默认)</h5> 上一页
<div class="mui-content-padded"> </a>
<ul class="mui-pager"> </li>
<li> <li>
<a href="#"> <a href="#">
上一页 下一页
</a> </a>
</li> </li>
<li> </ul>
<a href="#"> </div>
下一页 <h5 class="mui-content-padded">翻页(对齐)</h5>
</a> <div class="mui-content-padded">
</li> <ul class="mui-pager">
</ul> <li class="mui-previous">
</div> <a href="#">
<h5 class="mui-content-padded">翻页(对齐)</h5> 上一页
<div class="mui-content-padded"> </a>
<ul class="mui-pager"> </li>
<li class="mui-previous"> <li class="mui-next">
<a href="#"> <a href="#">
上一页 下一页
</a> </a>
</li> </li>
<li class="mui-next"> </ul>
<a href="#"> </div>
下一页 <h5 class="mui-content-padded">翻页(禁用)</h5>
</a> <div class="mui-content-padded">
</li> <ul class="mui-pager">
</ul> <li class="mui-disabled">
</div> <span> 上一页 </span>
<h5 class="mui-content-padded">翻页(禁用)</h5> </li>
<div class="mui-content-padded"> <li>
<ul class="mui-pager"> <a href="#">
<li class="mui-disabled"> 下一页
<span> 上一页 </span> </a>
</li> </li>
<li> </ul>
<a href="#"> </div>
下一页 </div>
</a> <script>
</li> (function($) {
</ul> $('.mui-pagination').on('tap', 'a', function() {
</div> var li = this.parentNode;
</div> var classList = li.classList;
<script> if (!classList.contains('mui-active') && !classList.contains('mui-disabled')) {
(function($) { var active = li.parentNode.querySelector('.mui-active');
if (classList.contains('mui-previous')) {//previous
$('.mui-pagination').on('tap', 'a', function() { if (active) {
var li = this.parentNode; var previous = active.previousElementSibling;
var classList = li.classList; console.log('previous', previous);
if (!classList.contains('mui-active') && !classList.contains('mui-disabled')) { if (previous && !previous.classList.contains('mui-previous')) {
var active = li.parentNode.querySelector('.mui-active'); $.trigger(previous.querySelector('a'), 'tap');
if (classList.contains('mui-previous')) {//previous } else {
if (active) { classList.add('mui-disabled');
var previous = active.previousElementSibling; }
console.log('previous', previous); }
if (previous && !previous.classList.contains('mui-previous')) { } else if (classList.contains('mui-next')) {//next
$.trigger(previous.querySelector('a'), 'tap'); if (active) {
} else { var next = active.nextElementSibling;
classList.add('mui-disabled'); if (next && !next.classList.contains('mui-next')) {
} $.trigger(next.querySelector('a'), 'tap');
} } else {
} else if (classList.contains('mui-next')) {//next classList.add('mui-disabled');
if (active) { }
var next = active.nextElementSibling; }
if (next && !next.classList.contains('mui-next')) { } else {//page
$.trigger(next.querySelector('a'), 'tap'); active.classList.remove('mui-active');
} else { classList.add('mui-active');
classList.add('mui-disabled'); var page = parseInt(this.innerText);
var previousPageElement = li.parentNode.querySelector('.mui-previous');
var nextPageElement = li.parentNode.querySelector('.mui-next');
previousPageElement.classList.remove('mui-disabled');
nextPageElement.classList.remove('mui-disabled');
if (page <= 1) {
previousPageElement.classList.add('mui-disabled');
} else if (page >= 5) {
nextPageElement.classList.add('mui-disabled');
}
} }
} }
} else {//page });
active.classList.remove('mui-active'); })(mui);
classList.add('mui-active'); </script>
var page = parseInt(this.innerText); </body>
var previousPageElement = li.parentNode.querySelector('.mui-previous');
var nextPageElement = li.parentNode.querySelector('.mui-next');
previousPageElement.classList.remove('mui-disabled');
nextPageElement.classList.remove('mui-disabled');
if (page <= 1) {
previousPageElement.classList.add('mui-disabled');
} else if (page >= 5) {
nextPageElement.classList.add('mui-disabled');
}
}
}
});
})(mui);
</script>
<style type="text/css">
.mui-content{
padding: 10px;
}
</style>
</body>
</html> </html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment