[译]App Framework 2.1 (1)之 Quickstart
最近有移动App项目,选择了 Hybrid 的框架Cordova 和 App Framework 框架开发。
本来应该从配置循序渐进开始写的,但由于上班时间太忙,这段时间抽不出空来,只能根据心情和兴趣,想到哪写到哪,前面的部分以后慢慢补上。
App Framework 前生是是叫 jqMobi 注意大家不要和 jQuery Mobile 混淆了,它们是两个不同的框架,一开始我还真混淆了0.01秒。
这里我先翻译一下Quickstart 部分,一是自己工作上用的上,二是也想顺便练练英文,最关键的是记忆力这段时间下降太多,每次看完不久又得重看一遍,写下来好歹看的顺溜一点。
英文原文在这里:http://app-framework-software.intel.com/documentation.php
Intro -> Quickstart ( 简介-> 快速入门 )
使用 App Framework 的时候,你只能使用W3C 制定的有效选择器。要查看所有的有效选择器列表,请点击 W3C。App Framework 不支持 jQuery 自己实现的自定义伪类(按:伪类应该是pseudo,官方写成了psuedo ,老外也有错别字啊 )选择器(按:看这里)。接下来的一些例子,可以帮助开发者加快开发。
首先,把App Framework 插入进页面
<script src="//cdn.app-framework-software.intel.com/2.1/appframework.min.js" type="text/javascript"></script>
App Framework 运行是通过把元素加入到一个“容器”(bucket)。所有容器内元素可以使用 App Framework api函数,这些函数能帮助加快开发。
使用 App Framework,你首先要学会用调用带参数的$()函数,那些参数可以是如下之一。
String - 可以是一个元素的id "#id", 类 ".foo", 组合 “#id .foo”, 或者一个HTML 字符串"<div id='foo'></div>"
Element - 这会创建一个新的App Framework对象,并把这个Element元素加入到容器。
Array/Object 这会创建一个新的App Framework对象,并把那些数组的所有项加入到容器。
Function - 这会执行这个function函数当DOMContentLoaded 事件触发的时候,或者 在实例产生后立即执行。
你也能通过一个额外(additional又被官方笔误成了addtional ,好歹也是全世界的人看,就不能仔细点吗)的参数,允许你在一个“上下文”的内部去搜索/过滤它。
$("#foo"); //找到 id="foo" 的元素;
$("div"); //找到页面中所有的 div;
$(".foo"); //找到 classname ="foo" 的所有元素;
$("#foo span"); //找到 id="foo 中所有的span"
接下来,我们会找到所有列表想(<li>)并且把 foo类加入进去。
$("li").addClass("foo");
未完待续... 2012.10.12 晚
------------------------------------华丽的分割线,接上文------------------------------------------------
这里我们也可以通过ID去隐藏一个元素
$("#foo").hide();
这里我们可以找到class名为“removeme”的所有元素,并且从DOM中移除它们
$(".removeme").remove();
让我们看看一些更高级的用法。接下来,我们创建一个div,并追加它到body里面,同时注册一个lclick事件
var div=$("<div id="\"myNewDiv\""">This is some content</div>");
$(document.body).append(div);
div.bind("click",function(){
alert("I was clicked");
});
[译]App Framework 2.1 (1)之 Quickstart的更多相关文章
- [译]App Framework 2.1 (2)之 About
英文原文在此:http://app-framework-software.intel.com/documentation.php#App Framework/af_about App Framewor ...
- [译]App Framework 2.1 (2)之 Get Involved
App Framework API 第二篇 原文在此:http://app-framework-software.intel.com/documentation.php#intro/involved ...
- [AFUI]App Framework Quickstart
---------------------------------------------------------------------------------------------------- ...
- [译]Intel App Framework 3.0的变化
App Framework 3.0 原文 IAN M. (Intel) 发布于 2015-02-11 05:24 我们高兴地宣布App Framework 的新版本3.0发布了.你可以获得最新的代码 ...
- [AFUI]App Framework Plugins
---------------------------------------------------------------------------------------------------- ...
- [Learn AF3]第一章 如何使用App Framework 3.0 构造应用程序
af3的变化非常大.参见[译]Intel App Framework 3.0的变化 一.应用需要引用的js脚本: af3中不在自己实现dom选择器,而是选择基于jquey或兼容jquery的库如zep ...
- App Framework $.ui.loadContent 参数解释
在使用 app Framework 的 $.ui.loadContent(target,newTab,goBack,transition);时 对 newTab goback两个参数一直不得其解.通过 ...
- [AFUI]App Framework
---------------------------------------------------------------------------------------------------- ...
- 【App FrameWork】页面之间的参数传递
若应用中有多个页面,这时2个页面之间可能需要进行参数传递.那么如何来实现呢? 首先想到的就是URL参数传递的方式,如:在panel里设置属性 data-defer="Pages/Shake. ...
随机推荐
- gen_server port 调用receive_match 问题
问题由来 前些天对系统做了一个优化,将原来从queue 轮询刷出数据后每条消息一个 spawn 进程单独处理,修改为批量刷出.一条一条刷轮询刷 queue 存在问题:刷queue 进程太多时,占用CP ...
- raspbian调整键盘设置
参考 http://www.jianshu.com/p/8c474339a238 树莓派(raspberry pi)是英国产品,默认键盘布局是英国(GB),我们用的键盘布局一般是美国(US)的(104 ...
- DIR 按文件名中数字大小进行排序
@echo off set arg=%1 if "%arg%" == "" set arg=* if "%arg%" == "-h ...
- CodeIgniter 3 源码学习笔记《一》
CodeIgniter 是一套给 PHP 网站开发者使用的应用程序开发框架和工具包. 它的目标是让你能够更快速的开发,它提供了日常任务中所需的大量类库, 以及简单的接口和逻辑结构.通过减少代码量,Co ...
- iOS self
如果self在对象方法中 那么self就代表调用当前对象方法的那个对象 如果self在类方法中 那么self就代表调用当前类方法的那个类 总结:self的使用只需关注self在哪个方法中 如果在类方法 ...
- SQL表值函数(上月添加1-28)
ALTER function [dbo].[fn_getdate3] ( ) ) RETURNS @Table_Var TABLE ( LastTime datetime ) as begin Dec ...
- ajaxFileupload多文件上传
最近有个功能模块需要上传图片,为了和之前的伙伴们保持一致我也使用了ajaxFileupload, 但是源码只支持单文件上传,所以百般斟酌之下决定修改源码,废话不多说直接上代码 HTML上传代码段: & ...
- 【python】nuitka封装python
官网:http://nuitka.net/doc/user-manual.html python打包工具对比:http://blog.csdn.net/qwemicheal/article/detai ...
- CentOS7 cacti 安装
首先centos7 web环境的安装这里就不说了.安装cacti,首先得web环境配置好 其次添加两个用户,一个是cacti用于操作mysql的 cactimysql 一个是cacti操作Linux ...
- 女生学Web前端优势往往很明显
学Web前端的女生不算少数,女生学习的成果也往往不比男生差,前端偏向设计.交互和产品方向,需要更加贴合用户,女生心思细腻,对页面细节把控更好,更具美感,对用户心理把握更准,这样的优势往往是男生所不具备 ...