日期:2012-12-22 来源:GBin1.com
![一个帮助你生成iOS文件夹效果的jQuery插件 - App-Folders](http://www.gbin1.com/technology/jquerynews/20121222-ios-style-app-folder/title.jpg)
如果你是iOS的狂热分子的话,对于iOS风格app目录肯定非常熟悉,今天这里我们介绍一个实现iOS
app风格目录的jQuery插件:App-Folders
相关阅读:
使用jQuery开发iOS风格的页面导航菜单
这个插件同时支持桌面和Mobile应用,所以你可以创建俩种不同的样式,如下:
![一个帮助你生成iOS文件夹效果的jQuery插件 - App-Folders](http://www.gbin1.com/technology/jquerynews/20121222-ios-style-app-folder/1.jpg)
或者是移动设备的效果,如下:
![一个帮助你生成iOS文件夹效果的jQuery插件 - App-Folders](http://www.gbin1.com/technology/jquerynews/20121222-ios-style-app-folder/2.jpg)
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-container jaf-row">
<!--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="uno folderContent">
<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-->
Javascript代码
$(function() {
$('.app-folders-container').appFolders();
});
实现是不是非常简单,如果你希望使用这种超酷的展示目录的方式,赶快下载吧!
来源:一个帮助你生成iOS文件夹效果的jQuery插件 - App-Folders