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

标签: 开源程序 iPhone jQuery | 发表时间:2012-12-26 15:10 | 作者:Denis
出处:http://fairyfish.net

App-Folders 介绍

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

App-Folders

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

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

App-Folders 演示
演示地址: 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

>>> 继续阅读全文 ...


欢迎关注我们关于 WordPress 技巧的微博: WordPress JAM 新浪微博 新浪微博       WordPress JAM 腾讯微博 腾讯微博

© 我爱水煮鱼 / 收藏本文 / 0条评论 / RSS 订阅 / 长期承接 WordPress 项目 / 主机域名优惠码 / 新浪微博

相关日志

相关 [app folders 模拟] 推荐:

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

- - 我爱水煮鱼
App-Folders 介绍. App-Folders 是一个可以模拟 iOS 文件夹操作的 jQuery 插件,点击文件夹,将周围的元素虚化(通过加深透明度实现),然后显示文件夹中的内容,并且这个插件可以同时在桌面和移动设备上浏览器上工作,适配性非常好. App-Folders 的文件夹元素中可以包含任何 HTML 元素,包括图片,文本,视频等等,并且每个文件夹都可以有自己的 URL 实现直接点击.

Disguise Folders - 將資料夾偽裝成各種系統功能(Windows 7)

- 沒有暱稱 - 0與1的邂逅
Disguise Folders 這個小程式可以將資料夾偽裝成各種 Windows 系統功能,像是桌面上常見的資源回收筒,或是 Windows Update、媒體櫃、系統、使用者帳戶等等… 而偽裝出來的功能都是真實可用的,不知情的人完全無法查覺原來是一個資料夾. 閱讀完整內容:Disguise Folders - 將資料夾偽裝成各種系統功能(Windows 7).

App 和 iCloud

- 笑炊 - 爱范儿 · Beats of Bits
iCloud 的技术细节还在 NDA 的保护下. 但是大家的好奇心不能等到 NDA 失效再满足. 本文基于对 iCloud 的猜测写成,靠谱与否,等待时间检验. 打开浏览器,嗯,今天用 Safari , Chrome , IE 或者 Firefox. 输入 Twiter.com ,啊,不对,是 Twitter.com.

App Internet 革命

- Cary - Mr. Jamie 看網路與創投
Apple 公布最新一季的財報,3 個月賣出了破紀錄的 3,500 萬台 iDevices (iPhone, iPad & iPods). Google 公布最新數字,全球有 1.9 億支 Android 已經被啟用. 大家很興奮「智慧型手機」、「行動裝置」革命終於來到,我卻隱隱感覺到另一件更重大的事情正在發生,我們所熟知的「網路」,即將經歷另一次大幅度的轉變.

浅析App Engine

- - 搜索研发部官方博客
在国内外,云计算正在大步的走向商业化的道路,也得到了越来越多公司的重视. 其中平台即服务(Platform-as-a-Service  PaaS)已经称为业界探讨云计算的热点方式之一,采用PaaS模式来构建应用运行平台App Engine是一种重要的实现方式. 本文主要是对App Engine的背景、特点、需求等进行分析整理,并据此对业界主要的App Engine进行了调研分析.

Mobile App 将死?!

- - Tech2IPO
日前,Mozilla 产品副总监 Jay Sullivan 称移动应用不久即将成为历史,未来将是移动 Web 应用的天下. 光盘好歹还能当杯垫,可怜 Mobile App,难道就这样一下跌落进历史的垃圾堆. Mozilla 的产品副总监杰 • 沙利文 (Jay Sullivan, 上图) 日前表示,移动终端应用(Mobile App)没有未来,真正有前途的是移动 Web 应用(Mobile Web App).

APP已死?

- - 商业不靠谱
APP目前面临的几大窘境将促使搜索引擎由Search向Service、Getting 转变以适应用户在APP时代养成的简洁、高效等习惯. 《未来移动终端应用 C/S Vs B/S 架构》 许永硕——物联网智库. 参照PC软件的发展历程,B/S架构或许是破解APP难题的出路,目前,微信开放平台、手机QQ等在尝试扮演Browser(http://open.weixin.qq.com).

欺诈 app 追杀 — 给 App Store 的信

- Webto - Wangling
感谢 @apple4us 的建议. 我深知如果等着别人相助,此事大概会不了了之,届时只徒留一篇愤概文章. 所谓“追杀”,敌未死,我未停,正如给“动车追尾”事件的受害人追讨公道,公道未到,追讨不止. 于是,我刚给 App Store 发了信,如下:. 每人干掉一个坏蛋…,坏蛋没那么多;每一百个人、每一千个人、甚至每一万个人干掉一个坏蛋,世界都会美好许多.

Web App和Native App 谁将是未来

- - 互联网旁观者
未来是Web App的天下,还是Native App的天下. 作为设计师,我们是应该努力把客户端的体验提升到最优,还是在网页应用层面上做更多的设计. 那么,我们首先应该立体的认识一下Web App和Native App. Web 无需安装,对设备碎片化的适应能力优于App,它只需要通过XHTML、CSS和JavaScript就可以在任意移动浏览器中执行.

Blogger也有App了!

- 幻幽 or A書 - Jas9 Taipei.
感覺上,彷彿自從Google+推出之後,所有Google的既有產品服務都積極活動了起來. 繼上週Blogger的新後台從Draft轉到正式版更新上線之後,Google終於也推出期待多時的官方版本Blogger App.