Skip to content

Commit

Permalink
update doc
Browse files Browse the repository at this point in the history
1. 文档标题前添加空格
2. 更新api,添加对 loop属性说明
3. 更新api,添加对start stop方法说明
  • Loading branch information
yanhaijing committed Mar 26, 2015
1 parent 1f5e7f2 commit 8a39625
Show file tree
Hide file tree
Showing 3 changed files with 44 additions and 31 deletions.
2 changes: 1 addition & 1 deletion CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
#0.1.0
# 0.1.0
- 单页滚动功能
- 自定义功能
- 丰富的回调函数
Expand Down
32 changes: 16 additions & 16 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,16 @@ zepto.fullpage [![release](https://img.shields.io/badge/release-v0.1.0-orange.sv

专注于移动端的fullPage.js,依赖Zepto。

##功能概述
## 功能概述
可实现移动端的单页滚动效果,可自定义参数,提供回调接口,和公开接口。

##兼容性
## 兼容性

- Ios4+
- Andriod2.3+(未全部覆盖)

##快速上手
###HTML
## 快速上手
### HTML

<div class="wp">
<div class="wp-inner">
Expand All @@ -23,14 +23,14 @@ zepto.fullpage [![release](https://img.shields.io/badge/release-v0.1.0-orange.sv
</div>
</div>

###CSS
### CSS
父容器需是固定高度,并且溢出为隐藏,fullpage会使用父元素的宽度和高度。

.wp{
overflow: hidden;
}

##js
## js
一行代码即可完成,如此简单:

$('.wp-inner').fullpage();
Expand All @@ -39,47 +39,47 @@ zepto.fullpage [![release](https://img.shields.io/badge/release-v0.1.0-orange.sv

更多例子,请移步[这里](demo)

##文档
## 文档

[API](doc/api.md)

##贡献指南
## 贡献指南

如果你想为zepto.fullpage贡献代码,请采用fork + pull request 方式,并在发起pr前先将master上超前的代码rebase到自己的分支上。

###发布Bower
### 发布Bower

$ bower register zepto.fullpage git://github.com/yanhaijing/zepto.fullpage.git

##报告问题
## 报告问题

- [Issues](https://github.com/yanhaijing/zepto.fullpage/issues "报告问题")

##作者
## 作者

**yanhaijing**

- [Weibo](http://weibo.com/yanhaijing1234 "yanhaijing's Weibo")
- [Email](mailto:[email protected] "yanhaijing's Email")
- [Blog](http://yanhaijing.com "yanhaijing's Blog")

##为什么会有这个项目
## 为什么会有这个项目
最近单页滚动的效果非常流行,这种效果的视觉冲击感很强烈,特别是对于活动页面,因为需求的迫切,在pc端诞生了 fullPage.js和onepage-scroll这样的库,在移动的浪潮下,我们自然需要把这种效果搬到移动设备上,但当我在想实现类似效果时,却找不到一个这样的库(fullpage.js对于移动端来说太大了,还要依赖jquery),所以我就开发了一个,先是用于自己项目中,后来抽了出来,就有了这个项目。

##更新日志
## 更新日志

[更新日志](CHANGELOG.md)

##TODO
## TODO
- 循环滚动
- 横向滚屏

##谁在使用
## 谁在使用
**注:如果您也在使用,欢迎反馈给我**

- [百度知道](http://zhidao.baidu.com/s/5_0-page/index.html)

##相关链接
## 相关链接
- [fullPage.js](https://github.com/alvarotrigo/fullPage.js)
- [onepage-scroll](https://github.com/peachananr/onepage-scroll)
- [parallax.js](https://github.com/hahnzhu/parallax.js)
41 changes: 27 additions & 14 deletions doc/api.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
#zepto.fullpage文档
# zepto.fullpage文档
专注于移动端的fullPage.js。fullPage主张将动画交给css或js去做,主动权交给作者。

##参数
## 参数
fullPage支持无参数的调用,每个参数都会有默认值,如果想实现自定义的功能,可以使用自定义参数。一个典型的自定义参数如下:

$('*').fullpage({
Expand All @@ -18,59 +18,72 @@ fullPage支持无参数的调用,每个参数都会有默认值,如果想实
- [属性例子](../demo/param.html)
- [事件例子](../demo/event.html)

###page
### page
每屏的选择符,默认是 `.page`

###start
### start
从第几屏开始,默认是第一屏。

###duration
### duration
每屏动画切换的时间,这段时间内,不能重复切换,默认是500ms,这里只是js限制,css动画时间需要更改css文件。

###drag
### drag
是否开启拖动功能,默认关闭。

###change/beforeChange/afterChange
## loop
是否开启循环滚动,默认false。

### change/beforeChange/afterChange
当切换屏幕时会触发的事件。剩下两个顾名思义吗。

- e {Object} 事件的参数

e包含两个属性next和cur,表示切换到的屏幕和当前屏幕。

###orientationchange
### orientationchange
当屏幕发生旋转时的回调。

- dir {String} 当前屏幕的方向 portrait 竖屏 landscape 横屏。

##方法
## 方法
通过方法,可以改变fullPage内部的状态,fullPage的方法列表如下:

- update
- moveTo
- movePrev
- moveNext
- start
- stop

典型调用方法的例子如下:

$.fn.fullpage.update();

[更多例子](../demo/method.html)

###update
### update
此方法会重新计算和渲染每屏的高度,当你发现如果每屏的高度有问题时,手动调用下此方法就可以了。

###moveTo
### moveTo
切换到指定屏,如果指定的屏数大于屏总数或小于0,都会做修正处理。

- next {Number} 必须 要切换到的屏索引
- anim {Bollean} 可省略 是否有动画 默认为没有动画效果

###movePrev
### movePrev
向前一屏,是对moveTo的封装

-anim {Bollean} 可省略 是否有动画 默认为没有动画效果

###moveNext
### moveNext
向后一屏,是对moveTo的封装

-anim {Bollean} 可省略 是否有动画 默认为没有动画效果
-anim {Bollean} 可省略 是否有动画 默认为没有动画效果

### start
开启切换功能,和stop配合使用。

丰富页面功能,比如到了某页需要点击某个元素后才能到下一页的时候 这个就有用了~~

### stop
关闭切换功能,和start配合使用

0 comments on commit 8a39625

Please sign in to comment.