幻灯片
使用幻灯片组件，你需要在 sm.js 和 sm.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.js 和 sm.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.js 和 sm.css 之后额外引入如下JS文件:
<script type="text/javascript" src="./dist/js/sm-city-picker.js" charset="utf-8"></script>
省市区选择器也是一个定制的picker，因此他的用法和picker完全一致，请参阅 picker文档。
同样，在使用省市区组件的时候你不能定制 onChange 和 cols 参数。
<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="广东省 广州市 海珠区" />
