App-Folders 是一个可以模拟 iOS 文件夹操作的 jQuery 插件，点击文件夹，将周围的元素虚化（通过加深透明度实现），然后显示文件夹中的内容，并且这个插件可以同时在桌面和移动设备上浏览器上工作，适配性非常好。
App-Folders 的文件夹元素中可以包含任何 HTML 元素，包括图片，文本，视频等等，并且每个文件夹都可以有自己的 URL 实现直接点击。
虽然 App-Folders 的官网演示和 iOS 系统上文件夹效果基本是一样的，但是 App-Folder 支持通过样式化制作出更加有创意的布局和特效。如下面这个演示：
演示地址： http://redfoxmedia.net.au/toolbox
1. 首先加载 jQuery 和 app-folder 的 JavaScript 库：
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="./js/jquery.app-folders.js"></script>
2. 然后加载下面的 JavaScript 代码：
$(function() {
$('.app-folders-container').appFolders();
});
3.使用类似如下的 HTML 布局和架构：
<!--This is what you call in the function above-->
<div class="app-folders-container">
<!-- jaf-row 1 (You can have as many rows as you like) -->
<div class="jaf-row jaf-container">
<!--You can have as many folders as you like-->
<!--Folder's ID must match Class of the item that it opens-->
<div class="folder" id="uno">
<!--Anything wrapped by this link can open the content on click.-->
<a href="#">
<p>Folder 1</p>
</a>
</div><!--End Folder-->
</div><!--End Row-->
<!--Now, include the content that you want to show for each Folder-->
<!-- CLASS must equal the ID of the item that calls it.-->
<div class="folderContent uno">
<div class="jaf-container">
<!--Add whatever HTML you want in this area-->
<p>Content for folder one.</p>
</div>
</div><!-- End folderContent uno-->
</div><!--End app-folders-container-->
更详细的使用说明和下载，请访问： App-Folders
>>> 继续阅读全文 ...
欢迎关注我们关于 WordPress 技巧的微博： 
新浪微博 
腾讯微博
© 我爱水煮鱼 / 收藏本文 / 0条评论 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博
