Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
    <meta content="yes"name="apple-mobile-web-app-capable"/>
    <meta content="black"name="apple-mobile-web-app-status-bar-style"/>
    <meta name="format-detection"content="telphone=no"/>
    <link rel="stylesheet" href="../css/page.css">
    <title>手机页面模板</title>
    <link rel="stylesheet" href="http://www.w3cplus.com/mcommon/reset.css" media="all">
    <script src="http://www.w3cplus.com/mcommon/zepto.1.1.3.js"></script>
</head>
<body>
    <header id="header" class="header">
      <span class="icon-back"></span>
      <h1 class="page-title">整体布局改进</h1>
    </header>
    <div id="main" class="wrap-page">
        <section class="page page-index page-active">
            <ul class="nav-links">
              <li data-page="page-a">to page A</li>
              <li data-page="page-b">to page B</li>
              <li data-page="page-c">to page C</li>
            </ul>
        </section>  
        <section class="page page-a page-next">
            <div class="demo-test"><p>page A</p></div>
        </section>
        <section class="page page-b page-next">
            <div class="demo-test"><p>page B</p></div>
        </section>
        <section class="page page-c page-next">
            <div class="demo-test"><p>page C</p></div>
        </section>
    </div>
    <footer id="footer" class="footer" style="display:none;">footer</footer>
</body>
</html>
 
$(function(){
  var $main = $('#main'),
      $header = $('#header'),
      $back = $('.icon-back');
  
  function pageSlideOver(){
    $('.page-out').live('transitionend', function(){
      $(this).removeClass('page-out');
    });
    $('.page-in').live('transitionend', function(){
      $(this).removeClass('page-in');
    });
  }
  
  $main.on('tap', '.nav-links li', function(e){
​
    var $pageTo = $('.'+$(this).data("page")),
        name = $(this).data("page").substring(5);
    
    $(this).parents('.page').removeClass('page-active').addClass('page-prev page-out');
    $pageTo.removeClass('page-next').addClass('page-active page-in');
    
    pageSlideOver();
    $back.css({display:"block"}).data({"page":"page-index"});
    
    history.pushState({"page": name}, "" , "?page="+name);
  });
  
  $header.on('tap', '.icon-back', function(){
    $('.page-active').removeClass('page-active').addClass('page-next page-out');
//     console.log($(this).data('page'));
    $('.'+$(this).data('page')).removeClass('page-prev').addClass('page-active page-in');
    pageSlideOver();
    $back.css({display:"none"});
    history.go(-1);
  });
  
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
marvin1023pro
0viewers