App-Folders:一个模拟 iOS 文件夹效果的 jQuery 插件
2023-06-13 09:18:32 时间
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
相关文章
- Aiseesoft Mac FoneTrans :iOS文件传输和管理器
- 2022最新iOS证书(.p12)、描述文件(.mobileprovision)申请和HBuider打包及注意注意事项
- IOS APP开发:苹果app从开发到上架教程详解
- 2022超详细流程ios APP最新打包上线教程,保证一看就会!
- 2018最新苹果APP上架App Store流程(超详细)
- Application Loader及Transporter App上传ipa外、可以在Windows上架iOS APP工具
- ios发布证书用于上架app_腾讯新闻
- ios APP最新打包上线教程
- 《简化iOS APP上架流程,App Uploader助你搞定!》
- iOS获取汉字首字母详解手机开发
- 根据Date获取x分钟前/x小时前/昨天/x天前/x个月前/x年前的iOS代码详解手机开发
- iOS判断手机方向改变详解手机开发
- iOS—-青花瓷运用->下载历史版本App详解手机开发
- Linux与iOS:越来越亲密的合作伙伴(linux与ios)
- 在iOS上安装Linux系统的挑战(ios上安装linux)
- 苹果推出iOS 14.7 Beta版修复连接特定WiFi热点时导致的网络禁用问题
- 国外网友对iOS 14.5跑分发现性能严重下降 现在苹果已经承认这种情况
- 把 Linux 安装到 iOS 设备上的步骤(ios安装linux)
- 开启一个崭新世界:Linux与iOS系统(linux系统ios)
- 开发Redis在APP开发中的应用(redis进行app)
- 升级苹果 iOS 14.7.1 正式版后,部分 iPhone 11/8/7/6s 用户抱怨出现信号“无服务”错误