diff --git a/README.md b/README.md index 7d5e9d03..230c6978 100755 --- a/README.md +++ b/README.md @@ -1,8 +1,9 @@ -

iSlider,Smooth slider for webapps

+#iSlider,Smooth slider for webapps -

iSlider English Official Page

-

iSlider 中文官网

-

iSlider 中文README

+####[iSlider English Official Page](http://be-fe.github.io/iSlider/index_en.html) +####[iSlider 中文官网](http://be-fe.github.io/iSlider/index.html) +####[iSlider 中文README](https://github.com/BE-FE/iSlider/blob/master/README_Chinese.md) +####[iSlider Example](http://be-fe.github.io/iSlider/demo/) iSlider is a high performance,dependency free, mobile-platform javascript slider. It can handle any elements that need to be slide, like picture list or different dom elements. @@ -15,13 +16,13 @@ It features: * Support desktop gesture which is convenient for testing. * Support image preloader to improve user experience. -

iSlider Mobile Demo

+##iSlider Mobile Demo * Demo -

Getting Started

+##Getting Started The best way to learn the iSlider is by looking at the demos. In the archive you'll find a demo folder. Most of the script features are outlined there. *iSlider* is a class that needs to be initiated for each dom area. @@ -72,7 +73,7 @@ If you want to add more effects or options, you can follow the demo in demo/pict That's it. -

Configure the iSlider

+##Configure the iSlider Besides the basic ways you can do with iSlider, you can customized the features we provide. For example, if you prefers to put dom elements on the list, you can change the data array like this: ``` javascript @@ -104,7 +105,7 @@ If you hope to implement the effects mentioned in introduction part, you can: }); -

Understand The iSlider

+##Understand The iSlider Here provides a clear description of what options you are able to manipulate: @@ -197,7 +198,7 @@ Here provides a clear description of what options you are able to manipulate:
-

License (MIT)

+##License (MIT) Copyright (c) 2014 BE-FE diff --git a/README_Chinese.md b/README_Chinese.md index a659d511..c7254c66 100755 --- a/README_Chinese.md +++ b/README_Chinese.md @@ -1,9 +1,8 @@ -

iSlider

- -

iSlider English Official Page

-

iSlider English README

-

iSlider 中文官网

-

iSlider Example

+#iSlider +####[iSlider English Official Page](http://be-fe.github.io/iSlider/index_en.html) +####[iSlider English README](https://github.com/BE-FE/iSlider/blob/master/README.md) +####[iSlider 中文官网](http://be-fe.github.io/iSlider/index.html) +####[iSlider Example](http://be-fe.github.io/iSlider/demo/) iSlider是一个表现出众,无任何插件依赖的手机平台javascript滑动组件。它能够处理任何元素,例如图片或者DOM元素。它有如下特性: @@ -14,11 +13,11 @@ iSlider是一个表现出众,无任何插件依赖的手机平台javascript滑 * 支持桌面鼠标动作,方便测试 * 支持图片预加载,改善用户体验 -

iSlider移动端展示

+##iSlider移动端展示 -

开始部署iSlider

+##开始部署iSlider 部署iSlider最容易的办法是查阅我们提供的简易例子。大部份代码存放在demo文件夹的文件里面。*iSlider* 是必要新建的一个类。 在你开始之前,你需要为iSlider先新建好数据: @@ -87,7 +86,7 @@ var data = [{ 'content' : '

Page2

This is Page2

Page2 is pretty awsome

' }]; ``` -如果你想实现介绍部份提到的效果,你可以按以下格式设置: +如果想实现介绍部份提到的效果,可以按以下格式设置: -

深入了解iSlider

+##深入了解iSlider 这里提供对iSlider类选项最清楚的描述: @@ -194,7 +193,7 @@ var data = [{
-

License (MIT)

+##License (MIT) Copyright (c) 2014 BE-FE diff --git a/demo/public/js/islider.js b/demo/public/js/islider.js index b69fb0be..03501c21 100755 --- a/demo/public/js/islider.js +++ b/demo/public/js/islider.js @@ -316,7 +316,9 @@ iSlider.prototype._renderHTML = function () { } }; -// start loading image +/** + * preload img when slideChange + */ iSlider.prototype._preloadImg = function(index) { if (!this.data[index].loaded) { var preloadImg = new Image(); @@ -325,7 +327,9 @@ iSlider.prototype._preloadImg = function(index) { } }; -// pre load image +/** + * load extra imgs when renderHTML + */ iSlider.prototype._initLoadImg = function() { var data = this.data; var len = data.length; @@ -553,6 +557,12 @@ iSlider.prototype._bindHandler = function() { window.addEventListener('orientationchange', orientationchangeHandler); }; +/** +* simple event delegate method +* @param {String} evtType event name +* @param {String} selector the simple css selector like jQuery +* @param {function} callback event callback +*/ iSlider.prototype.bind = function(evtType, selector, callback) { function handle(e){ var evt = window.event ? window.event : e; @@ -564,6 +574,9 @@ iSlider.prototype.bind = function(evtType, selector, callback) { this.outer.addEventListener(evtType, handle, false); } +/** +* reset & rerender +*/ iSlider.prototype.reset = function() { this.pause(); this._setting(); @@ -604,4 +617,3 @@ iSlider.prototype.extend = function(plugin, main) { Object.defineProperty(main, property, Object.getOwnPropertyDescriptor(plugin, property)); }); }; - diff --git a/src/islider.js b/src/islider.js index b69fb0be..03501c21 100755 --- a/src/islider.js +++ b/src/islider.js @@ -316,7 +316,9 @@ iSlider.prototype._renderHTML = function () { } }; -// start loading image +/** + * preload img when slideChange + */ iSlider.prototype._preloadImg = function(index) { if (!this.data[index].loaded) { var preloadImg = new Image(); @@ -325,7 +327,9 @@ iSlider.prototype._preloadImg = function(index) { } }; -// pre load image +/** + * load extra imgs when renderHTML + */ iSlider.prototype._initLoadImg = function() { var data = this.data; var len = data.length; @@ -553,6 +557,12 @@ iSlider.prototype._bindHandler = function() { window.addEventListener('orientationchange', orientationchangeHandler); }; +/** +* simple event delegate method +* @param {String} evtType event name +* @param {String} selector the simple css selector like jQuery +* @param {function} callback event callback +*/ iSlider.prototype.bind = function(evtType, selector, callback) { function handle(e){ var evt = window.event ? window.event : e; @@ -564,6 +574,9 @@ iSlider.prototype.bind = function(evtType, selector, callback) { this.outer.addEventListener(evtType, handle, false); } +/** +* reset & rerender +*/ iSlider.prototype.reset = function() { this.pause(); this._setting(); @@ -604,4 +617,3 @@ iSlider.prototype.extend = function(plugin, main) { Object.defineProperty(main, property, Object.getOwnPropertyDescriptor(plugin, property)); }); }; -