App-Folders：一个模拟 iOS 文件夹效果的 jQuery 插件

App-Folders 介绍

App-Folders 是一个可以模拟 iOS 文件夹操作的 jQuery 插件，点击文件夹，将周围的元素虚化（通过加深透明度实现），然后显示文件夹中的内容，并且这个插件可以同时在桌面和移动设备上浏览器上工作，适配性非常好。

App-Folders 的文件夹元素中可以包含任何 HTML 元素，包括图片，文本，视频等等，并且每个文件夹都可以有自己的 URL 实现直接点击。

虽然 App-Folders 的官网演示和 iOS 系统上文件夹效果基本是一样的，但是 App-Folder 支持通过样式化制作出更加有创意的布局和特效。如下面这个演示：

演示地址：http://redfoxmedia.net.au/toolbox

使用 App-Folders

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