拓展组件 · light7

Swiper

You must include these to file after light7.js and light7.css to use Swiper:

<link rel="stylesheet" href="css/light7-swiper.min.css">
<script type='text/javascript' src='0.4.3/js/light7-swiper.min.js' charset='utf-8'></script>

The swiper will auto be init when $.init is called. If you create a Swiper after that, call $(".swiper-container").swiper(config) to init.

<div class="swiper-container" data-space-between='10' data-pagination='.swiper-pagination' data-autoplay="1000">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="//gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i1/TB1n3rZHFXXXXX9XFXXXXXXXXXX_!!0-item_pic.jpg_320x320q60.jpg" alt=""></div>
    <div class="swiper-slide"><img src="//gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i4/TB10rkPGVXXXXXGapXXXXXXXXXX_!!0-item_pic.jpg_320x320q60.jpg" alt=""></div>
    <div class="swiper-slide"><img src="//gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i1/TB1kQI3HpXXXXbSXFXXXXXXXXXX_!!0-item_pic.jpg_320x320q60.jpg" alt=""></div>
  </div>
</div>

Config

You can add data-xxx on .swiper-container to config it, also, you can pass a config object in $().swiper(config), For more config See Swiper

图片浏览器

使用图片浏览器，你需要在 light7.js 和 light7.css 之后额外引入如下两个文件:

<link rel="stylesheet" href="css/light7-swiper.min.css">
<script type='text/javascript' src='js/light7-swiper.min.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();
  });
})

City picker

To use city picker，you should import this js file after light7.js 和 light7.css:

There is only chinese cities now...

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

city picker is a customed Picker. So it's API is some to 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">OK</button>\
    <h1 class="title">choose address</h1>\
    </header>'
  });
</script>

You can use input's value Attr to set default selected value:

<input type="text" id='city-picker' value="浙江 杭州 拱墅区" />

Swipeout

Note! Swipeout is not complete tested in Android, and there is a known bug in some Android: Swipeout element may flicker when page scroll.

You must include these to file after light7.js and light7.css to use Swipeout:

<link rel="stylesheet" href="css/light7-swipeout.min.css">
<script type='text/javascript' src='0.4.3/js/light7-swipeout.min.js' charset='utf-8'></script>

Swipeout is an extension of list view that allows you to swipe over list elements to reveal hidden menu with available actions, like swipe-to-delete.

Let's look on layout structure of swipeout element in your list views:

<div class="list-block">
  <ul>
    <!-- Additional "swipeout" class on li -->
    <li class="swipeout">
      <!-- Usual list element wrapped with "swipeout-content" -->
      <div class="swipeout-content">
        <!-- Your list element here -->
        <div class="item-content">
          <div class="item-media">...</div>
          <div class="item-inner">...</div>
        </div>
      </div>
      <!-- Swipeout actions left -->
      <div class="swipeout-actions-left">
        <!-- Swipeout actions links/buttons -->
        <a href="#">Action 1</a>
        <a href="#">Action 2</a>
      </div>
      <!-- Swipeout actions right -->
      <div class="swipeout-actions-right">
        <!-- Swipeout actions links/buttons -->
        <a href="#">Action 1</a>
        <a class="swipeout-close" href="#">Action 2</a>
      </div>
    </li>
    ...
  </ul>
</div>

Where:

swipeout-content - wrapper for your list element. This container will move during swipe over the list item
swipeout-actions-left - container with left swipeout action buttons/links
swipeout-actions-right - container with right swipeout action buttons/links
swipeout-close - additional class on swipeout link that will close swipeout element when you click this link

Close And Delete

Add .swipeout-close to action link to close swipeout.

Add .swipeout-delete to action link to close swipeout. You can also add data-confirm="confirm message" and data-confirm-title="confirm title" to show a confirm dialog when user click the delete button.

<li class="swipeout">
  <div class="swipeout-content">
    <div class="item-content">
      <div class="item-inner">
        <div class="item-title">Swipe me left!</div>
        <div class="item-after">666</div>
      </div>
    </div>
  </div>
  <div class="swipeout-actions-right">
    <a class="bg-success">Action 1</a>
    <!-- close -->
    <a class="swipeout-close" href="#">Close</a>
  </div>
</li>
<li class="swipeout">
  <div class="swipeout-content">
    <div class="item-content">
      <div class="item-inner">
        <div class="item-title">Remove me after confirm!</div>
      </div>
    </div>
  </div>
  <div class="swipeout-actions-right">
    <!-- delete with confirm -->
    <a class="bg-danger swipeout-delete" href="#" data-confirm="Are you sure want to delete me?" data-confirm-title="Confirm Delete">Delete</a>
    <a href="#">Action 2</a>
  </div>
</li>

JavaScript

Swipeouts also has rich JavaScript API that allows you to control swipeout elements. Let's look on appropriate App's properties and methods:

$.swipeoutOpen(el, direction, callback) - reveal swipeout actions on specified element

el - HTMLElement or string (with CSS Selector) of list (<li>) element with "swipeout" class. Required
direction - string (could be "left" or "right") swipeout actions to open. Should be specified if item has both left and right swipeout actions. Optional
callback - function - callback function will be executed after swipeout element completes its opening animation

$.swipeoutClose(el, callback) - close swipeout actions on specified element

el - HTMLElement or string (with CSS Selector) of list (<li>) element with "swipeout" class. Required
callback - function - callback function will be executed after swipeout element completes its closing animation

$.swipeoutDelete(el, callback) - delete specified swipeout element

el - HTMLElement or string (with CSS Selector) of list (<li>) element with "swipeout" class. Required
callback - function - callback function will be executed after swipeout element completes its delete animation right before it will be removed from DOM

Swipeout Events

Swipeout elements have the following events:

Event	Target	Description
swipeout	Swipeout Element<li class="swipeout">	Event will be triggered while you move swipeout element. event.detail.progress contains current opened progress percentage
open	Swipeout Element<li class="swipeout">	Event will be triggered when swipeout element starts its opening animation
opened	Swipeout Element<li class="swipeout">	Event will be triggered after swipeout element completes its opening animation
close	Swipeout Element<li class="swipeout">	Event will be triggered when swipeout element starts its closing animation
closed	Swipeout Element<li class="swipeout">	Event will be triggered after swipeout element completes its closing animation
delete	Swipeout Element<li class="swipeout">	Event will be triggered after swipeout element starts its delete animation
deleted	Swipeout Element<li class="swipeout">	Event will be triggered after swipeout element completes its delete animation right before it will be removed from DOM

$('.swipeout').on('swipeout', function (e) {
  console.log('Item opened on: ' + e.detail.progress + '%');
});

i18n

English is the default language of Light7. You can include i18n/cn.js after light7.js to change the language to Chinese:

<script src='js/i18n/cn.js'></script>

Right click the demo on right side to see how it's writen;

Note! The i18n only change the language of Light7's components. It can't change the language of your entire site.