拓展组件

拓展组件是一些不常用的组件,使用这里的组件,你需要额外引入JS和CSS,具体请参见每一个组件的说明。

示例

幻灯片

使用幻灯片组件,你需要在 sm.jssm.css 之后额外引入如下两个文件:

<link rel="stylesheet" href="./dist/css/sm-extend.min.css">
<script type='text/javascript' src='./dist/js/sm-extend.js' charset='utf-8'></script>

幻灯片会在你页面入口执行$.init()后自动初始化。否则,或者你的幻灯片是页面加载后异步加载的,那么需要手动初始化:$(".swiper-container").swiper(config)

幻灯片

<div class="content">
  <!-- Slider -->
  <div class="swiper-container" data-space-between='10'>
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="//assets/outsite/TB1n3rZHFXXXXX9XFXXXXXXXXXX_!!0-item_pic.jpg_320x320q60.jpg" alt=""></div>
      <div class="swiper-slide"><img src="//assets/outsite/TB10rkPGVXXXXXGapXXXXXXXXXX_!!0-item_pic.jpg_320x320q60.jpg" alt=""></div>
      <div class="swiper-slide"><img src="//assets/outsite/TB1kQI3HpXXXXbSXFXXXXXXXXXX_!!0-item_pic.jpg_320x320q60.jpg" alt=""></div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
</div>

手动初始化幻灯片的详细配置

$(function() {
  $(".swiper-container").swiper(config);
});

可以在 .swiper-container 容器上通过 data-xxx 的形式配置,也可以在初始化的时候传入一个JS对象来配置。
可用配置项和暴露的方法请参考这里: swiper 官方文档

额外的,提供一个方法$.reinitSwiper(pageid).重新更新幻灯片

图片浏览器

使用图片浏览器,你需要在 sm.jssm.css 之后额外引入如下两个文件:

<link rel="stylesheet" href="./dist/css/sm-extend.min.css">
<script type='text/javascript' src='./dist/js/sm-extend.js' charset='utf-8'></script>
<header class="bar bar-nav">
  <h1 class="title">图片浏览器</h1>
</header>
<div class="content">
  <div class="content-block row">
    <div class="col-50"><a href="#" class="button pb-standalone">Standalone</a></div>
    <div class="col-50"><a href="#" class="button pb-popup">Popup</a></div>
  </div>
  <div class="content-block"><a href="#" class="button pb-standalone-captions">With Captions</a></div>
  <div class="content-block"><a href="#" class="button pb-standalone-video">With Video</a></div>
</div>
/*=== 默认为 standalone ===*/
$(function(){
  /*=== 默认为 standalone ===*/
  var myPhotoBrowserStandalone = $.photoBrowser({
      photos : [
          '//img.alicdn.com/tps/i3/TB1kt4wHVXXXXb_XVXX0HY8HXXX-1024-1024.jpeg',
          '//img.alicdn.com/tps/i1/TB1SKhUHVXXXXb7XXXX0HY8HXXX-1024-1024.jpeg',
          '//img.alicdn.com/tps/i4/TB1AdxNHVXXXXasXpXX0HY8HXXX-1024-1024.jpeg',
      ]
  });
  //点击时打开图片浏览器
  $(document).on('click','.pb-standalone',function () {
    myPhotoBrowserStandalone.open();
  });
   
  /*=== Popup ===*/
  var myPhotoBrowserPopup = $.photoBrowser({
      photos : [
          '//img.alicdn.com/tps/i3/TB1kt4wHVXXXXb_XVXX0HY8HXXX-1024-1024.jpeg',
          '//img.alicdn.com/tps/i1/TB1SKhUHVXXXXb7XXXX0HY8HXXX-1024-1024.jpeg',
          '//img.alicdn.com/tps/i4/TB1AdxNHVXXXXasXpXX0HY8HXXX-1024-1024.jpeg',
      ],
      type: 'popup'
  });
  $(document).on('click','.pb-popup',function () {
    myPhotoBrowserPopup.open();
  });

  /*=== 有标题 ===*/
  var myPhotoBrowserCaptions = $.photoBrowser({
      photos : [
          {
              url: '//img.alicdn.com/tps/i3/TB1kt4wHVXXXXb_XVXX0HY8HXXX-1024-1024.jpeg',
              caption: 'Caption 1 Text'
          },
          {
              url: '//img.alicdn.com/tps/i1/TB1SKhUHVXXXXb7XXXX0HY8HXXX-1024-1024.jpeg',
              caption: 'Second Caption Text'
          },
          // 这个没有标题
          {
              url: '//img.alicdn.com/tps/i4/TB1AdxNHVXXXXasXpXX0HY8HXXX-1024-1024.jpeg',
          },
      ],
      theme: 'dark',
      type: 'standalone'
  });
  $(document).on('click','.pb-standalone-captions',function () {
    myPhotoBrowserCaptions.open();
  });
   
  /*=== 有视频 ===*/
  var myPhotoBrowserVideo = $.photoBrowser({
      photos : [
          {
              html: '<iframe src="//www.youtube.com/embed/lmc21V-zBq0?list=PLpj0FBQgLGEr3mtZ5BTwtmSwF1dkPrPRM" frameborder="0" allowfullscreen></iframe>',
              caption: 'Woodkid - Run Boy Run (Official HD Video)'
          },
          {
              url: 'http://lorempixel.com/1024/1024/sports/2/',
              caption: 'Second Caption Text'
          },
          {
              url: 'http://lorempixel.com/1024/1024/sports/3/',
          },
      ],
      theme: 'dark',
      type: 'standalone'
  });
  $(document).on('click','.pb-standalone-video',function () {
    myPhotoBrowserVideo.open();
  });
})

省市区选择器

使用省市区选择器,你需要在 sm.jssm.css 之后额外引入如下JS文件:

<script type="text/javascript" src="./dist/js/sm-city-picker.js" charset="utf-8"></script>

省市区选择器也是一个定制的picker,因此他的用法和picker完全一致,请参阅 picker文档

同样,在使用省市区组件的时候你不能定制 onChangecols 参数。

<input type="text" id='city-picker'/>
<script>
  $("#city-picker").cityPicker({
    toolbarTemplate: '<header class="bar bar-nav">\
    <button class="button button-link pull-right close-picker">确定</button>\
    <h1 class="title">选择收货地址</h1>\
    </header>'
  });
</script>

如果你需要设置默认值,直接通过 input 的 value 属性来设置:

<input type="text" id='city-picker' value="广东省 广州市 海珠区" />

如果你不想写js,可以通过以下方式来自动初始化:

<input type="text" data-toggle="city" value="广东省 广州市 海珠区" />