一个帮助你生成iOS文件夹效果的jQuery插件 AppFolders java程序员

日期：2012-12-22  来源：GBin1.com

如果你是iOS的狂热分子的话，对于iOS风格app目录肯定非常熟悉，今天这里我们介绍一个实现iOS app风格目录的jQuery插件：App-Folders

相关阅读：

使用jQuery开发iOS风格的页面导航菜单

这个插件同时支持桌面和Mobile应用，所以你可以创建俩种不同的样式，如下：

或者是移动设备的效果，如下：

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