<script>
  //打开自动初始化页面的功能
  //建议不要打开自动初始化，而是自己调用 $.init 方法完成初始化
  $.config = {
    autoInit: true
  }
</script>
<script src='sm.js'></script>

<header class="bar bar-nav">
  <h1 class="title">标题</h1>
</header>

<header class="bar bar-nav">
  <h1 class='title'>按钮</h1>
</header>
<div class="content">
  <div class="content-block">
    <p><a href="#" class="button">Usual Button 1</a></p>
    <p><a href="#" class="button button-light">light button</a></p>
    <p><a href="#" class="button button-dark">dark button</a></p>
    <p><a href="#" class="button button-success">success button</a></p>
    <p><a href="#" class="button button-danger">danger button</a></p>
    <p><a href="#" class="button button-warning">warning button</a></p>
    <p><a href="#" class="button disabled">disabled button</a></p>
  </div>
  <div class="content-block">
    <p><a href="#" class="button button-round">Round Button 1</a></p>
  </div>
  <div class="content-block">
    <p><a href="#" class="button button-big">Big Button </a></p>
    <p><a href="#" class="button button-big button-round">Big Round Button </a></p>
  </div>
</div>

<header class="bar bar-nav">
  <h1 class='title'>按钮组</h1>
</header>
<div class="content">
  <div class="content-block">
    <p class="buttons-row"><a href="#" class="button">Button 1</a><a href="#" class="button">Button 2</a><a href="#" class="button">Button 3</a></p>
    <p class="buttons-row"><a href="#" class="button active">Button 1</a><a href="#" class="button">Button 2</a><a href="#" class="button">Button 3</a></p>
    <p class="buttons-row"><a href="#" class="button">Button 1</a><a href="#" class="button active">Button 2</a><a href="#" class="button">Button 3</a></p>
    <p class="buttons-row"><a href="#" class="button button-round">Button 1</a><a href="#" class="button button-round">Button 2</a></p>
    <p class="buttons-row"><a href="#" class="button button-round">Button 1</a><a href="#" class="button button-round active">Button 2</a></p>
  </div>
</div>

<header class="bar bar-nav">
  <h1 class='title'>填充按钮</h1>
</header>
<div class="content">
  <div class="content-block">
    <p><a href="#" class="button button-fill">Fill Button </a></p>
    <p><a href="#" class="button button-fill button-success">Fill Button </a></p>
    <p><a href="#" class="button button-fill button-danger">Fill Button </a></p>
    <p><a href="#" class="button button-fill button-warning">Fill Button </a></p>
  </div>
</div>

<header class="bar bar-nav">
  <h1 class='title'>列表和栅格布局按钮</h1>
</header>
<div class="content">
  <div class="content-block-title">List block buttons</div>
  <div class="list-block">
    <ul>
      <li><a href="#" class="item-link list-button">List Button 1</a></li>
      <li><a href="#" class="item-link list-button">List Button 2</a></li>
      <li><a href="#" class="item-link list-button">List Button 3</a></li>
    </ul>
  </div>
  <div class="content-block-title">Inset list block buttons</div>
  <div class="list-block inset">
    <ul>
      <li><a href="#" class="item-link list-button">List Button 1</a></li>
      <li><a href="#" class="item-link list-button">List Button 2</a></li>
      <li><a href="#" class="item-link list-button">List Button 3</a></li>
    </ul>
  </div>
  <div class="content-block-title">Using Grid</div>
  <div class="content-block">
    <div class="row">
      <div class="col-50"><a href="#" class="button button-big button-fill button-danger">Cancel</a></div>
      <div class="col-50"><a href="#" class="button button-big button-fill button-success">Submit</a></div>
    </div>
  </div>
</div>

<header class="bar bar-nav">
  <h1 class='title'>表单</h1>
</header>
<div class="content">
  <div class="list-block">
    <ul>
      <!-- Text inputs -->
      <li>
        <div class="item-content">
          <div class="item-media"><i class="icon icon-form-name"></i></div>
          <div class="item-inner">
            <div class="item-title label">姓名</div>
            <div class="item-input">
              <input type="text" placeholder="Your name">
            </div>
          </div>
        </div>
      </li>
      <li>
        <div class="item-content">
          <div class="item-media"><i class="icon icon-form-email"></i></div>
          <div class="item-inner">
            <div class="item-title label">邮箱</div>
            <div class="item-input">
              <input type="email" placeholder="E-mail">
            </div>
          </div>
        </div>
      </li>
      <li>
        <div class="item-content">
          <div class="item-media"><i class="icon icon-form-password"></i></div>
          <div class="item-inner">
            <div class="item-title label">密码</div>
            <div class="item-input">
              <input type="password" placeholder="Password" class="">
            </div>
          </div>
        </div>
      </li>
      <li>
        <div class="item-content">
          <div class="item-media"><i class="icon icon-form-gender"></i></div>
          <div class="item-inner">
            <div class="item-title label">性别</div>
            <div class="item-input">
              <select>
                <option>Male</option>
                <option>Female</option>
              </select>
            </div>
          </div>
        </div>
      </li>
      <!-- Date -->
      <li>
        <div class="item-content">
          <div class="item-media"><i class="icon icon-form-calendar"></i></div>
          <div class="item-inner">
            <div class="item-title label">生日</div>
            <div class="item-input">
              <input type="date" placeholder="Birth day" value="2014-04-30">
            </div>
          </div>
        </div>
      </li>
      <!-- Switch (Checkbox) -->
      <li>
        <div class="item-content">
          <div class="item-media"><i class="icon icon-form-toggle"></i></div>
          <div class="item-inner">
            <div class="item-title label">开关</div>
            <div class="item-input">
              <label class="label-switch">
                <input type="checkbox">
                <div class="checkbox"></div>
              </label>
            </div>
          </div>
        </div>
      </li>
      <li class="align-top">
        <div class="item-content">
          <div class="item-media"><i class="icon icon-form-comment"></i></div>
          <div class="item-inner">
            <div class="item-title label">文本域</div>
            <div class="item-input">
              <textarea></textarea>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
  <div class="content-block">
    <div class="row">
      <div class="col-50"><a href="#" class="button button-big button-fill button-danger">取消</a></div>
      <div class="col-50"><a href="#" class="button button-big button-fill button-success">提交</a></div>
    </div>
  </div>
</div>

<header class="bar bar-nav">
  <h1 class='title'>只有图标的表单</h1>
</header>
<div class="content">
  <div class="list-block">
    <ul>
      <!-- Text inputs -->
      <li>
        <div class="item-content">
          <div class="item-media"><i class="icon icon-form-name"></i></div>
          <div class="item-inner">
            <div class="item-input">
              <input type="text" placeholder="Your name">
            </div>
          </div>
        </div>
      </li>
      <li>
        <div class="item-content">
          <div class="item-media"><i class="icon icon-form-email"></i></div>
          <div class="item-inner">
            <div class="item-input">
              <input type="email" placeholder="E-mail">
            </div>
          </div>
        </div>
      </li>

      <!-- Select -->
      <li>
        <div class="item-content">
          <div class="item-media"><i class="icon icon-form-gender"></i></div>
          <div class="item-inner">
            <div class="item-input">
              <select>
                <option>Male</option>
                <option>Female</option>
              </select>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</div>

<header class="bar bar-nav">
  <h1 class='title'>只有文案的表单</h1>
</header>
<div class="content">
  <div class="list-block">
    <ul>
      <!-- Text inputs -->
      <li>
        <div class="item-content">
          <div class="item-inner">
            <div class="item-title label">Name</div>
            <div class="item-input">
              <input type="text" placeholder="Your name">
            </div>
          </div>
        </div>
      </li>
      <li>
        <div class="item-content">
          <div class="item-inner">
            <div class="item-title label">E-mail</div>
            <div class="item-input">
              <input type="email" placeholder="E-mail">
            </div>
          </div>
        </div>
      </li>

      <!-- Select -->
      <li>
        <div class="item-content">
          <div class="item-inner">
            <div class="item-title label">Gender</div>
            <div class="item-input">
              <select>
                <option>Male</option>
                <option>Female</option>
              </select>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</div>

<header class="bar bar-nav">
  <h1 class='title'>标签页</h1>
</header>
<div class="content">
  <div class="buttons-tab">
    <a href="#tab1" class="tab-link active button">全部</a>
    <a href="#tab2" class="tab-link button">待付款</a>
    <a href="#tab3" class="tab-link button">待发货</a>
  </div>
  <div class="content-block">
    <div class="tabs">
      <div id="tab1" class="tab active">
        <div class="content-block">
          <p>This is tab 1 content</p>
        </div>
      </div>
      <div id="tab2" class="tab">
        <div class="content-block">
          <p>This is tab 2 content</p>
        </div>
      </div>
      <div id="tab3" class="tab">
        <div class="content-block">
          <p>This is tab 3 content</p>
        </div>
      </div>
    </div>
  </div>
</div>

<header class="bar bar-nav">
  <h1 class='title'>标签页</h1>
</header>
<div class="content">
  <div class="content-block">
    <div class="buttons-row">
      <a href="#tab1" class="tab-link active button">Tab 1</a>
      <a href="#tab2" class="tab-link button">Tab 2</a>
      <a href="#tab3" class="tab-link button">Tab 3</a>
    </div>
  </div>
  <div class="tabs">
    <div id="tab1" class="tab active">
      <div class="content-block">
        <p>This is tab 1 content</p>
      </div>
    </div>
    <div id="tab2" class="tab">
      <div class="content-block">
        <p>This is tab 2 content</p>
      </div>
    </div>
    <div id="tab3" class="tab">
      <div class="content-block">
        <p>This is tab 3 content</p>
      </div>
    </div>
  </div>
</div>

<header class="bar bar-nav">
  <h1 class='title'>栅格</h1>
</header>
<div class="content">
  <div class="content-padded grid-demo">
    <div class="row">
      <div class="col-50">50%</div>
      <div class="col-50">50%</div>
    </div>
    <div class="row">
      <div class="col-33">33%</div>
      <div class="col-33">33%</div>
      <div class="col-33">33%</div>
    </div>
    <div class="row">
      <div class="col-20">20%</div>
      <div class="col-80">80%</div>
    </div>
    <h2>无间距</h2>
    <div class="row no-gutter">
      <div class="col-20">20%</div>
      <div class="col-80">80%</div>
    </div>
  </div>
</div>

  <header class="bar bar-nav">
    <h1 class="title">Confirm</h1>
  </header>
  ...
  <div class="content">
    <div class="content-block">
      <p><a href="#" class="confirm-ok">Confirm with text and Ok callback</a></p>
      <p><a href="#" class="confirm-ok-cancel">Confirm with text, Ok and Cancel callbacks</a></p>
      <p><a href="#" class="confirm-title-ok">Confirm with text, title and Ok callback</a></p>
      <p><a href="#" class="confirm-title-ok-cancel">Confirm with text, title, Ok and Cancel callback</a></p>
    </div>
  </div>
  ...
  

  $(document).on('click','.confirm-ok', function () {
      $.confirm('Are you sure?', function () {
          $.alert('You clicked Ok button');
      });
  });

  $(document).on('click', '.confirm-ok-cancel',function () {
      $.confirm('Are you sure?',
        function () {
          $.alert('You clicked Ok button');
        },
        function () {
          $.alert('You clicked Cancel button');
        }
      );
  });
  $(document).on('click','.confirm-title-ok', function () {
      $.confirm('Are you sure?', 'Custom Title', function () {
          $.alert('You clicked Ok button');
      });
  });
  $(document).on('click','.confirm-title-ok-cancel', function () {
      $.confirm('Are you sure?', 'Custom Title',
        function () {
          $.alert('You clicked Ok button');
        },
        function () {
          $.alert('You clicked Cancel button');
        }
      );
  });
  

  <header class="bar bar-nav">
    <h1 class="title">Prompt</h1>
  </header>
  ...
  <div class="content">
    <div class="content-block">
      <p><a href="#" class="prompt-ok">Prompt with text and Ok callback</a></p>
      <p><a href="#" class="prompt-ok-cancel">Prompt with text, Ok and Cancel callbacks</a></p>
      <p><a href="#" class="prompt-title-ok">Prompt with text, title and Ok callback</a></p>
      <p><a href="#" class="prompt-title-ok-cancel">Prompt with text, title, Ok and Cancel callback</a></p>
    </div>
  </div>
  ...
  

  $(document).on('click','.prompt-ok', function () {
      $.prompt('What is your name?', function (value) {
          $.alert('Your name is "' + value + '". You clicked Ok button');
      });
  });

  $(document).on('click','.prompt-ok-cancel', function () {
      $.prompt('What is your name?',
        function (value) {
          $.alert('Your name is "' + value + '". You clicked Ok button');
        },
        function (value) {
          $.alert('Your name is "' + value + '". You clicked Cancel button');
        }
      );
  });
  $(document).on('click', '.prompt-title-ok',function () {
      $.prompt('What is your name?', 'Custom Title', function (value) {
          $.alert('Your name is "' + value + '". You clicked Ok button');
      });
  });
  $(document).on('click', '.prompt-title-ok-cancel',function () {
      $.prompt('What is your name?', 'Custom Title',
        function (value) {
          $.alert('Your name is "' + value + '". You clicked Ok button');
        },
        function (value) {
          $.alert('Your name is "' + value + '". You clicked Cancel button');
        }
      );
  });
  

  <header class="bar bar-nav">
      <h1 class="title">自定义Modals</h1>
  </header>
  ...
  <div class="content">
    <div class="content-block">
      <p><a href="#" class="open-3-modal">Modal With 3 Buttons</a></p>
      <p><a href="#" class="open-slider-modal">Modal With Slider</a></p>
      <p><a href="#" class="open-tabs-modal">Modal With Tabs</a></p>
      <p><a href="#" class="open-vertical-modal">Modal With Vertical Buttons</a></p>
    </div>
  </div>
  ...
  

  $(document).on('click','.open-3-modal', function () {
    $.modal({
      title:  'Modal with 3 buttons',
      text: 'Vivamus feugiat diam velit. Maecenas aliquet egestas lacus, eget pretium massa mattis non. Donec volutpat euismod nisl in posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae',
      buttons: [
        {
          text: 'B1',
          onClick: function() {
            $.alert('You clicked first button!')
          }
        },
        {
          text: 'B2',
          onClick: function() {
            $.alert('You clicked second button!')
          }
        },
        {
          text: 'B3',
          bold: true,
          onClick: function() {
            $.alert('You clicked third button!')
          }
        },
      ]
    })
    });
    $(document).on('click','.open-slider-modal', function () {
    var modal = $.modal({
      title: 'Awesome Photos?',
      text: 'What do you think about my photos?',
      afterText:  '<div class="swiper-container" style="width: auto; margin:5px -15px -15px">'+
                    '<div class="swiper-pagination"></div>'+
                    '<div class="swiper-wrapper">'+
                      '<div class="swiper-slide"><img src="..." height="150" style="display:block"></div>' +
                      '<div class="swiper-slide"><img src="..." height="150" style="display:block"></div>'+
                    '</div>'+
                  '</div>',
      buttons: [
        {
          text: 'Bad :('
        },
        {
          text: 'Awesome!',
          bold: true,
          onClick: function () {
            $.alert('Thanks! I know you like it!')
          }
        },
      ]
    })
    $.swiper($$(modal).find('.swiper-container'), {pagination: '.swiper-pagination'});
    });

    $(document).on('click','.open-tabs-modal', function () {
    $.modal({
      title:  '<div class="buttons-row">'+
                '<a href="#tab1" class="button active tab-link">Tab 1</a>'+
                '<a href="#tab2" class="button tab-link">Tab 2</a>'+
              '</div>',
      text: '<div class="tabs">'+
              '<div class="tab active" id="tab1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam convallis nunc non dolor euismod feugiat. Sed at sapien nisl. Ut et tincidunt metus. Suspendisse nec risus vel sapien placerat tincidunt. Nunc pulvinar urna tortor.</div>'+
              '<div class="tab" id="tab2">Vivamus feugiat diam velit. Maecenas aliquet egestas lacus, eget pretium massa mattis non. Donec volutpat euismod nisl in posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae</div>'+
            '</div>',
      buttons: [
        {
          text: 'Ok, got it',
          bold: true
        },
      ]
    })
    });

    $(document).on('click','.open-vertical-modal', function () {
    $.modal({
      title:  'Vertical Buttons Layout',
      text: 'Vivamus feugiat diam velit. Maecenas aliquet egestas lacus, eget pretium massa mattis non. Donec volutpat euismod nisl in posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae',
      verticalButtons: true,
      buttons: [
        {
          text: 'Button 1',
          onClick: function() {
            $.alert('You clicked first button!')
          }
        },
        {
          text: 'Button 2',
          onClick: function() {
            $.alert('You clicked second button!')
          }
        },
        {
          text: 'Button 3',
          onClick: function() {
            $.alert('You clicked third button!')
          }
        },
      ]
    })
    });
  

  <header class="bar bar-nav">
    <h1 class="title">预加载 Modal (Preloader Modal)</h1>
  </header>
  ...
  <div class="content">
    <div class="content-block">
      <p><a href="#" class="open-preloader">Open Preloader</a></p>
      <p><a href="#" class="open-preloader-title">Open Preloader with custom title</a></p>
    </div>
  </div>
  ...
  

  $(document).on('click', '.open-preloader', function () {
    $.showPreloader();
    setTimeout(function () {
        $.hidePreloader();
    }, 2000);
  });
  $(document).on('click','.open-preloader-title', function () {
    $.showPreloader('Custom Title')
    setTimeout(function () {
        $.hidePreloader();
    }, 2000);
  });
  

  <header class="bar bar-nav">
      <h1 class="title">指示器(indicator)</h1>
  </header>
  ...
  <div class="content">
    <div class="content-block">
      <p><a href="#" class="open-indicator">Open Indicator</a></p>
    </div>
  </div>
  ...
  

  $(document).on('click','.open-indicator', function () {
      $.showIndicator();
      setTimeout(function () {
          $.hideIndicator();
      }, 2000);
  });
  

/* msg{string}: toast内容
 * duration{number}：toast显示时间,默认2000
 * extraclass{string}：给toast根节点附加class，高度自定义属性，方便用户自行控制不同场景的样式。
 * 如果使用了第三个参数，请自行在业务css里添加extraclass对应的样式
 * /

$.toast("操作失败");

$.toast('操作成功，正在跳转...', 2345, 'success top');

  
<div class="modal modal-no-buttons">
  ...
  <div class="popup">
    Any HTML content goes here
  </div>
</div>  

  
<header class="bar bar-nav">
    <h1 class="title">Popup(HTML)</h1>
</header>
...
<div class="content">
    <div class="content-block">
      <p><a href="#" class="open-about">Open About Popup </a></p>
      <p><a href="#" class="open-services">Open Services Popup </a></p>
    </div>
       
</div> 
<!-- About Popup -->
<div class="popup popup-about">
  <div class="content-block">
    <p>About</p>
    <p><a href="#" class="close-popup">Close popup</a></p>
    <p>Lorem ipsum dolor ...</p>
  </div>
</div>
<!-- Services Popup -->
<div class="popup popup-services">
  <div class="content-block">
    <p>Services</p>
    <p><a href="#" class="close-popup">Close popup</a></p>
    <p>Lorem ipsum dolor ...</p>
  </div>
</div>  

  
<header class="bar bar-nav">
    <h1 class="title">Popup(JavaScript)</h1>
</header>
...
<div class="content">
    <div class="content-block">
      <p><a href="#" class="open-about">Open About Popup </a></p>
      <p><a href="#" class="open-services">Open Services Popup </a></p>
    </div>
       
</div> 
<!-- About Popup -->
<div class="popup popup-about">
  <div class="content-block">
    <p>About</p>
    <p><a href="#" class="close-popup">Close popup</a></p>
    <p>Lorem ipsum dolor ...</p>
  </div>
</div>
<!-- Services Popup -->
<div class="popup popup-services">
  <div class="content-block">
    <p>Services</p>
    <p><a href="#" class="close-popup">Close popup</a></p>
    <p>Lorem ipsum dolor ...</p>
  </div>
</div>  

  
$(document).on('click','.open-about', function () {
  $.popup('.popup-about');
});
 
$(document).on('click','.open-services', function () {
  $.popup('.popup-services');
});   

  
<header class="bar bar-nav">
    <h1 class="title">Popup事件</h1>
</header>
...
<div class="content">
  <div class="content-block">
    <!-- In data-popup attribute we specify CSS selector of popup we need to open -->
    <p><a href="#" data-popup=".popup-about" class="open-popup">Open About Popup </a></p>
    <p><a href="#" data-popup=".popup-services" class="open-popup">Open Services Popup </a></p>
  </div>
</div>
<!-- About Popup -->
<div class="popup popup-about">
  <div class="content-block">
    <p>About</p>
    <p><a href="#" class="close-popup">Close popup</a></p>
    <p>Lorem ipsum dolor ...</p>
  </div>
</div>
<!-- Services Popup -->
<div class="popup popup-services">
  <div class="content-block">
    <p>Services</p>
    <p><a href="#" class="close-popup">Close popup</a></p>
    <p>Lorem ipsum dolor ...</p>
  </div>
</div>  

  
$(document).on('click','.popup-about', function () {
  console.log('About Popup opened')
});
$(document).on('click','.popup-about', function () {
  console.log('About Popup is closing')
});
$(document).on('click','.popup-services', function () {
  console.log('Services Popup is opening')
});
$(document).on('click','.popup-services', function () {
  console.log('Services Popup is closed')
});    

  
<header class="bar bar-nav">
    <h1 class="title">动态的 Popup</h1>
</header>
...
<div class="content">
  <div class="content-block">
    <!-- In data-popup attribute we specify CSS selector of popup we need to open -->
    <p><a href="#" class="create-popup">Create Popup</a></p>
  </div>
</div>

  
$(document).on('click','.create-popup', function () {
  var popupHTML = '<div class="popup">'+
                    '<div class="content-block">'+
                      '<p>Popup created dynamically.</p>'+
                      '<p><a href="#" class="close-popup">Close me</a></p>'+
                    '</div>'+
                  '</div>'
  $.popup(popupHTML);
}); 

<header class="bar bar-nav">
  <h1 class="title">联系人列表</h1>
</header>
<div class="content">
  <div class="list-block contacts-block">
    <div class="list-group">
      <ul>
        <li class="list-group-title">A</li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">标题1</div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">标题2</div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">标题3</div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">标题4</div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">标题5</div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">标题6</div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">标题7</div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">标题8</div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="list-group">
      <ul>
        <li class="list-group-title">B</li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">标题1</div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">标题2</div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">标题3</div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">标题4</div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">标题5</div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">标题6</div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="list-group">
      <ul>
        <li class="list-group-title">C</li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">标题1</div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">标题2</div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">标题3</div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">标题4</div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">标题5</div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">标题6</div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">标题7</div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="list-group">
      <ul>
        <li class="list-group-title">V</li>
        <li>
          <div class="item-content">
            <div class="item-inner">
              <div class="item-title">标题1</div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

<header class="bar bar-nav">
  <h1 class="title">多媒体列表</h1>
</header>
<div class="content">
  <div class="content-block-title">曲目</div>
  <div class="list-block media-list">
    <ul>
      <li>
        <a href="#" class="item-link item-content">
          <div class="item-media"><img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" style='width: 4rem;'></div>
          <div class="item-inner">
            <div class="item-title-row">
              <div class="item-title">标题</div>
              <div class="item-after">$15</div>
            </div>
            <div class="item-subtitle">标题</div>
            <div class="item-text">此处是文本内容...</div>
          </div>
        </a>
      </li>
    </ul>
  </div>
  <div class="content-block-title">邮件应用</div>
  <div class="list-block media-list">
    <ul>
      <li>
        <a href="#" class="item-link item-content">
          <div class="item-inner">
            <div class="item-title-row">
              <div class="item-title">Facebook</div>
              <div class="item-after">17:14</div>
            </div>
            <div class="item-subtitle">子标题</div>
            <div class="item-text">此处是文本内容...</div>
          </div>
        </a>
      </li>
    </ul>
  </div>
  <div class="content-block-title">简单列表</div>
  <div class="list-block media-list">
    <ul>
      <li>
        <div class="item-content">
          <div class="item-media"><img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" style='width: 2.2rem;'></div>
          <div class="item-inner">
            <div class="item-title-row">
              <div class="item-title">标题</div>
            </div>
            <div class="item-subtitle">子标题</div>
          </div>
        </div>
      </li>
    </ul>
  </div>
  <div class="content-block-title">嵌入式</div>
  <div class="list-block media-list inset">
    <ul>
      <li>
        <a href="#" class="item-link item-content">
          <div class="item-media"><img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" style='width: 2.2rem;'></div>
          <div class="item-inner">
            <div class="item-title-row">
              <div class="item-title">标题</div>
            </div>
            <div class="item-subtitle">子标题</div>
          </div>
        </a>
      </li>
    </ul>
  </div>
</div>

<ul>
  <li>
    <label class="label-checkbox item-content">
      <input type="radio" name="my-radio">
      <div class="item-media"><i class="icon icon-form-checkbox"></i></div>
      <div class="item-inner">
        <div class="item-title-row">
          <div class="item-title">石头</div>
          <div class="item-after">17:14</div>
        </div>
        <div class="item-subtitle">New messages from John Doe</div>
        <div class="item-text">Lorem ipsum dolor sit amet...</div>
      </div>
    </label>
  </li>
  <li>
    <label class="label-checkbox item-content">
      <input type="radio" name="my-radio">
      <div class="item-media"><i class="icon icon-form-checkbox"></i></div>
      <div class="item-inner">
        <div class="item-title-row">
          <div class="item-title">剪刀</div>
          <div class="item-after">17:14</div>
        </div>
        <div class="item-subtitle">New messages from John Doe</div>
        <div class="item-text">Lorem ipsum dolor sit amet...</div>
      </div>
    </label>
  </li>
</ul>

  <header class="bar bar-nav">
    <h1 class="title">列表卡片</h1>
  </header>
  <div class="content">
    <div class="list-block cards-list">
      <ul>
        <li class="card">
          <div class="card-header">卡头</div>
          <div class="card-content">
            <div class="card-content-inner">卡内容</div>
          </div>
          <div class="card-footer">卡脚</div>
        </li>
        <li class="card">
          <div class="card-header">卡头</div>
          <div class="card-content">
            <div class="card-content-inner">卡内容</div>
          </div>
          <div class="card-footer">卡脚</div>
        </li>
        <li class="card">
          <div class="card-header">卡头</div>
          <div class="card-content">
            <div class="card-content-inner">卡内容</div>
          </div>
          <div class="card-footer">卡脚</div>
        </li>
      </ul>
    </div>
  </div>
  

    <header class="bar bar-nav">
        <h1 class="title">滚动条</h1>
    </header>
    <div class="content">
        <div class="card">
            <div class="card-header">滚动方式</div>
            <div class="card-content">
                <div class="card-content-inner">
                    <h3>滚动具有三种模式：</h3>
                    <ul>
                        <li>1. auto模式: scroller.js 根据系统版本号来决定什么时候使用js的滚动（默认）</li>
                        <li>2. js模式: 总是使用js滚动（即IScroll）</li>
                        <li>3. native模式： 总是使用原生滚动条</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-header">滚动方式</div>
            <div class="card-content">
                <div class="card-content-inner">
                    <h3>滚动具有三种模式：</h3>
                    <ul>
                        <li>1. auto模式: scroller.js 根据系统版本号来决定什么时候使用js的滚动（默认）</li>
                        <li>2. js模式: 使用js滚动</li>
                        <li>3. native模式： 总是使用原生滚动条</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-header">滚动方式</div>
            <div class="card-content">
                <div class="card-content-inner">
                    <h3>滚动具有三种模式：</h3>
                    <ul>
                        <li>1. auto模式: scroller.js 根据系统版本号来决定什么时候使用js的滚动（默认）</li>
                        <li>2. js模式: 使用js滚动</li>
                        <li>3. native模式：总是使用原生滚动条</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    

 
$(function() {
    $(".content").scroller({
        type: 'js'
    });
});   
    

 
$(function() {
    $(".content").scroller('refresh');
});   
    

 
$(function() {
    $.refreshScroller();
});   
    

 
$(function() {
    $('.content').scrollTop(); //==> number
    $('.content').scrollTop(number); // ==>self
    $('.content').scrollLeft(); //==> number
    $('.content').scrollLeft(number); // ==>self
});   
    

 
$(function() {
    $(".content").on('scrollStart',function(){
     //dosomething
    });
});   
    

<header class="bar bar-nav">
    <h1 class='title'>下拉刷新</h1>
</header>
<!-- content应该拥有"pull-to-refresh-content"类,表示启用下拉刷新 -->
<div class="content pull-to-refresh-content" data-ptr-distance="55">
    <!-- 默认的下拉刷新层 -->
    <div class="pull-to-refresh-layer">
        <div class="preloader"></div>
        <div class="pull-to-refresh-arrow"></div>
    </div>
    <!-- 下面是正文 -->
    <div class="card-container">
        <div class="card">
            <div class="card-header">card</div>
            <div class="card-content">
                <div class="card-content-inner">
                    这里是第1个card，下拉刷新会出现第2个card。
                </div>
            </div>
        </div>
    </div>
</div>

// 添加'refresh'监听器
$(document).on('refresh', '.pull-to-refresh-content',function(e) {
    // 模拟2s的加载过程
    setTimeout(function() {
        var cardNumber = $(e.target).find('.card').length + 1;
        var cardHTML = '<div class="card">' +
                          '<div class="card-header">card'+cardNumber+'</div>' +
                          '<div class="card-content">' +
                            '<div class="card-content-inner">' +
                                '这里是第' + cardNumber + '个card，下拉刷新会出现第' + (cardNumber + 1) + '个card。' +
                            '</div>' +
                          '</div>' +
                      '</div>';

        $(e.target).find('.card-container').prepend(cardHTML);
        // 加载完毕需要重置
        $.pullToRefreshDone('.pull-to-refresh-content');
    }, 2000);
});

$.pullToRefreshDone(ptrContent) // 重置特定的下拉刷新界面

//ptrContent  我们想要重置的下拉刷新页面的HTML元素或CSS选择器

$.pullToRefreshTrigger(ptrContent) //触发特定界面的下拉刷新

ptrContent //我们想要触发的下拉刷新页面的HTML元素或CSS选择器

$.destroyPullToRefresh(ptrContent) //销毁/禁用 下拉刷新

ptrContent // HTMLElement or string (CSS 选择器) 我们需要销毁/禁用的下拉刷新

$.initPullToRefresh(ptrContent) - 初始化/启用下拉刷新

ptrContent - HTMLElement or string (with CSS Selector) 需要启用的下拉刷新

      <style type="text/css">
      .infinite-scroll-preloader {
        margin-top:-20px;
      }
      </style>

      <header class="bar bar-nav">
          <h1 class="title">底部无限滚动</h1>
      </header>
      <!-- 添加 class infinite-scroll 和 data-distance  向下无限滚动可不加infinite-scroll-bottom类，这里加上是为了和下面的向上无限滚动区分-->
      <div class="content infinite-scroll infinite-scroll-bottom" data-distance="100">
          <div class="list-block">
              <ul class="list-container">
              </ul>
          </div>
          <!-- 加载提示符 -->
          <div class="infinite-scroll-preloader">
              <div class="preloader"></div>
          </div>
      </div>
    

      // 加载flag
      var loading = false;
      // 最多可加载的条目
      var maxItems = 100;

      // 每次加载添加多少条目
      var itemsPerLoad = 20;

      function addItems(number, lastIndex) {
              // 生成新条目的HTML
              var html = '';
              for (var i = lastIndex + 1; i <= lastIndex + number; i++) {
                  html += '<li class="item-content"><div class="item-inner"><div class="item-title">Item ' + i + '</div></div></li>';
              }
              // 添加新条目
              $('.infinite-scroll-bottom .list-container').append(html);

          }
          //预先加载20条
      addItems(itemsPerLoad, 0);

      // 上次加载的序号

      var lastIndex = 20;

      // 注册'infinite'事件处理函数
      $(document).on('infinite', '.infinite-scroll-bottom',function() {

          // 如果正在加载，则退出
          if (loading) return;

          // 设置flag
          loading = true;

          // 模拟1s的加载过程
          setTimeout(function() {
              // 重置加载flag
              loading = false;

              if (lastIndex >= maxItems) {
                  // 加载完毕，则注销无限加载事件，以防不必要的加载
                  $.detachInfiniteScroll($('.infinite-scroll'));
                  // 删除加载提示符
                  $('.infinite-scroll-preloader').remove();
                  return;
              }

              // 添加新条目
              addItems(itemsPerLoad, lastIndex);
              // 更新最后加载的序号
              lastIndex = $('.list-container li').length;
              //容器发生改变,如果是js滚动，需要刷新滚动
              $.refreshScroller();
          }, 1000);
      });