235 lines
6.6 KiB
Markdown
235 lines
6.6 KiB
Markdown
![]() |
# Zepto.js – a minimalist JavaScript library
|
|||
|
|
|||
|
Zepto is a minimalist JavaScript library for modern browsers with a
|
|||
|
largely jQuery-compatible API. If you use jQuery, you already know how to use Zepto.
|
|||
|
|
|||
|
See [zeptojs.com][] for an extended introduction, downloads
|
|||
|
and documentation.
|
|||
|
|
|||
|
Zepto.js is licensed under the terms of the MIT License.
|
|||
|
|
|||
|
Want to give us money or a tip? Don't.
|
|||
|
Instead please donate to [charity: water](http://charitywater.org/).
|
|||
|
|
|||
|
## Building
|
|||
|
|
|||
|
[](http://travis-ci.org/madrobby/zepto)
|
|||
|
|
|||
|
The official site offers a download of the default distribution of Zepto. This
|
|||
|
is good for starting out. However, at some point you might want to add some
|
|||
|
optional modules and remove some of the default ones you don't need, to keep the
|
|||
|
size at a minimum. That's when you need to check out Zepto's source code and use
|
|||
|
the build commands. Alternatively you can use the web based [Zepto Builder](http://github.e-sites.nl/zeptobuilder/).
|
|||
|
|
|||
|
You will need Node.js installed on your system.
|
|||
|
|
|||
|
~~~ sh
|
|||
|
$ npm install
|
|||
|
$ npm run-script dist
|
|||
|
|
|||
|
# do a custom build
|
|||
|
$ MODULES="zepto event data" npm run-script dist
|
|||
|
|
|||
|
# on Windows
|
|||
|
c:\zepto> SET MODULES=zepto event data
|
|||
|
c:\zepto> npm run-script dist
|
|||
|
~~~
|
|||
|
|
|||
|
The resulting files are:
|
|||
|
|
|||
|
1. `dist/zepto.js`
|
|||
|
2. `dist/zepto.min.js`
|
|||
|
|
|||
|
If you install CoffeeScript globally, you can run `make` directly:
|
|||
|
|
|||
|
~~~ sh
|
|||
|
# one-time operation
|
|||
|
$ npm install coffee-script --global
|
|||
|
|
|||
|
$ coffee make dist
|
|||
|
$ MODULES="zepto event data ..." ./make dist
|
|||
|
|
|||
|
# on Windows
|
|||
|
c:\zepto> SET MODULES=zepto event data
|
|||
|
c:\zepto> coffee make dist
|
|||
|
~~~
|
|||
|
|
|||
|
## Zepto modules
|
|||
|
|
|||
|
Zepto modules are individual files in the "src/" directory.
|
|||
|
|
|||
|
<table>
|
|||
|
<thead><tr>
|
|||
|
<th>module</th> <th>default</th> <th>description</th>
|
|||
|
</tr></thead>
|
|||
|
<tbody>
|
|||
|
<tr>
|
|||
|
<th><a href="src/zepto.js#files">zepto</a></th>
|
|||
|
<td>✔</td>
|
|||
|
<td>Core module; contains most methods</td>
|
|||
|
</tr>
|
|||
|
<tr>
|
|||
|
<th><a href="src/event.js#files">event</a></th>
|
|||
|
<td>✔</td>
|
|||
|
<td>Event handling via <code>on()</code> & <code>off()</code></td>
|
|||
|
</tr>
|
|||
|
<tr>
|
|||
|
<th><a href="src/ajax.js#files">ajax</a></th>
|
|||
|
<td>✔</td>
|
|||
|
<td>XMLHttpRequest and JSONP functionality</td>
|
|||
|
</tr>
|
|||
|
<tr>
|
|||
|
<th><a href="src/form.js#files">form</a></th>
|
|||
|
<td>✔</td>
|
|||
|
<td>Serialize & submit web forms</td>
|
|||
|
</tr>
|
|||
|
<tr>
|
|||
|
<th><a href="src/ie.js#files">ie</a></th>
|
|||
|
<td>✔</td>
|
|||
|
<td>Support for Internet Explorer 10+ on the desktop and Windows Phone 8</td>
|
|||
|
</tr>
|
|||
|
<tr>
|
|||
|
<th><a href="src/detect.js#files">detect</a></th>
|
|||
|
<td></td>
|
|||
|
<td>Provides <code>$.os</code> and <code>$.browser</code> information</td>
|
|||
|
</tr>
|
|||
|
<tr>
|
|||
|
<th><a href="src/fx.js#files">fx</a></th>
|
|||
|
<td></td>
|
|||
|
<td>The <code>animate()</code> method</td>
|
|||
|
</tr>
|
|||
|
<tr>
|
|||
|
<th><a href="src/fx_methods.js#files">fx_methods</a></th>
|
|||
|
<td></td>
|
|||
|
<td>
|
|||
|
Animated <code>show</code>, <code>hide</code>, <code>toggle</code>,
|
|||
|
and <code>fade*()</code> methods.
|
|||
|
</td>
|
|||
|
</tr>
|
|||
|
<tr>
|
|||
|
<th><a href="src/assets.js#files">assets</a></th>
|
|||
|
<td></td>
|
|||
|
<td>
|
|||
|
Experimental support for cleaning up iOS memory after removing
|
|||
|
image elements from the DOM.
|
|||
|
</td>
|
|||
|
</tr>
|
|||
|
<tr>
|
|||
|
<th><a href="src/data.js#files">data</a></th>
|
|||
|
<td></td>
|
|||
|
<td>
|
|||
|
A full-blown <code>data()</code> method, capable of storing arbitrary
|
|||
|
objects in memory.
|
|||
|
</td>
|
|||
|
</tr>
|
|||
|
<tr>
|
|||
|
<th><a href="src/deferred.js#files">deferred</a></th>
|
|||
|
<td></td>
|
|||
|
<td>
|
|||
|
Provides <code>$.Deferred</code> promises API.
|
|||
|
Depends on the "callbacks" module.
|
|||
|
</td>
|
|||
|
</tr>
|
|||
|
<tr>
|
|||
|
<th><a href="src/callbacks.js#files">callbacks</a></th>
|
|||
|
<td></td>
|
|||
|
<td>
|
|||
|
Provides <code>$.Callbacks</code> for use in "deferred" module.
|
|||
|
</td>
|
|||
|
</tr>
|
|||
|
<tr>
|
|||
|
<th><a href="src/selector.js#files">selector</a></th>
|
|||
|
<td></td>
|
|||
|
<td>
|
|||
|
Experimental <a href="http://api.jquery.com/category/selectors/jquery-selector-extensions/">jQuery
|
|||
|
CSS extensions</a> support for functionality such as <code>$('div:first')</code> and
|
|||
|
<code>el.is(':visible')</code>.
|
|||
|
</td>
|
|||
|
</tr>
|
|||
|
<tr>
|
|||
|
<th><a href="src/touch.js#files">touch</a></th>
|
|||
|
<td></td>
|
|||
|
<td>
|
|||
|
Fires tap– and swipe–related events on touch devices. This works with both
|
|||
|
`touch` (iOS, Android) and `pointer` events (Windows Phone).
|
|||
|
</td>
|
|||
|
</tr>
|
|||
|
<tr>
|
|||
|
<th><a href="src/gesture.js#files">gesture</a></th>
|
|||
|
<td></td>
|
|||
|
<td>Fires pinch gesture events on touch devices</td>
|
|||
|
</tr>
|
|||
|
<tr>
|
|||
|
<th><a href="src/stack.js#files">stack</a></th>
|
|||
|
<td></td>
|
|||
|
<td>Provides <code>andSelf</code> & <code>end()</code> chaining methods</td>
|
|||
|
</tr>
|
|||
|
<tr>
|
|||
|
<th><a href="src/ios3.js#files">ios3</a></th>
|
|||
|
<td></td>
|
|||
|
<td>
|
|||
|
String.prototype.trim and Array.prototype.reduce methods
|
|||
|
(if they are missing) for compatibility with iOS 3.x.
|
|||
|
</td>
|
|||
|
</tr>
|
|||
|
</tbody>
|
|||
|
</table>
|
|||
|
|
|||
|
## Contributing
|
|||
|
|
|||
|
Please read our [contribution guidelines](https://github.com/madrobby/zepto/blob/master/CONTRIBUTING.md)
|
|||
|
for information on how to contribute.
|
|||
|
|
|||
|
Get in touch:
|
|||
|
|
|||
|
* @[zeptojs](http://twitter.com/zeptojs)
|
|||
|
|
|||
|
### Write documentation
|
|||
|
|
|||
|
Zepto docs are written in Markdown and live in the ["gh-pages" branch][docs].
|
|||
|
They are published on [zeptojs.com][].
|
|||
|
|
|||
|
You can use GitHub's web interface to make quick changes to documentation for
|
|||
|
specific Zepto features
|
|||
|
([example: ajaxSettings](https://github.com/madrobby/zepto/blob/gh-pages/ajax/_posts/1900-01-01-Z-ajaxSettings.md)).
|
|||
|
This will submit a pull request to us that we can review.
|
|||
|
|
|||
|
### Report a bug
|
|||
|
|
|||
|
1. Check if the bug is already fixed in the master branch since the last release.
|
|||
|
2. Check [existing issues][issues]. Open a new one, including exact browser &
|
|||
|
platform information. For better formatting of your report, see
|
|||
|
[GitHub-flavored Markdown][mkd].
|
|||
|
|
|||
|
### Running tests
|
|||
|
|
|||
|
You will need to install [PhantomJS][]. On OS X, that's easy:
|
|||
|
|
|||
|
~~~ sh
|
|||
|
$ brew install phantomjs
|
|||
|
~~~
|
|||
|
|
|||
|
To run the automated tests:
|
|||
|
|
|||
|
~~~ sh
|
|||
|
$ npm test
|
|||
|
~~~
|
|||
|
|
|||
|
To run a test server, which you can hit with your browsers and devices:
|
|||
|
|
|||
|
~~~ sh
|
|||
|
$ npm start
|
|||
|
~~~
|
|||
|
|
|||
|
Go to `http://your-ip-address:3000/` on your browser and follow the
|
|||
|
instructions. For your convenience test failures and exceptions will be
|
|||
|
reported to the the console you started the test server in (as well as
|
|||
|
the browser console if available).
|
|||
|
|
|||
|
[zeptojs.com]: http://zeptojs.com
|
|||
|
[issues]: https://github.com/madrobby/zepto/issues
|
|||
|
[docs]: https://github.com/madrobby/zepto/tree/gh-pages#readme
|
|||
|
[mkd]: https://help.github.com/articles/creating-and-highlighting-code-blocks/
|
|||
|
[evidence.js]: https://github.com/tobie/Evidence
|
|||
|
[phantomjs]: http://phantomjs.org/download.html
|