[AFUI]App Framework Quickstart
---------------------------------------------------------------------------------------------------------
当使用App Framework,你只能使用W3C可用的选择器。可以去W3C查看完整的列表。不支持如jQuery中创建的自定义伪选择器。下面是一些App Framework能帮助你加速开发的例子。
第一步,引入App Framework到你的页面。
<script src="//cdn.app-framework-software.intel.com/2.1/appframework.min.js" type="text/javascript"></script>
App Framework通过添加元素到一个“存储桶”来工作。所有在“存储桶”的元素可以利用特别的App Framework api方法来帮助加速你的开发。
使用App Framework,你首先调用包含一个参数的$()方法。这个参数可以是下面的一个。
- 字符串 - 这可以是一个id元素"#id",类名".foo",一个联合体"#id .foo",或一个用来创建对象的HTML字符串"<div id='foo'></div>"
- 元素 - 这将创建一个新的App Framework对象和添加元素到“存储桶”。
- 数组/对象 - 这将创建一个新的App Framework对象和添加选项到“存储桶”。
- 方法 - 当DOMContentLoaded触发时 或 紧接着在此之后,它将执行一个方法。
你可以同样传递一个附加参数"Context"来允许你搜索/过滤。
下面是一些查找元素的基础样本。
$("#foo"); //find the element with id="foo"; $("div"); //Find all the divs on the page; $(".foo"); //Find all elements that have the classname ="foo"; $("#foo span"); //Find all span's that exist inside the element with id="foo"
下面,我们找所有的列表元素(<li>)并添加一个"foo"类 给它们。
$("li").addClass("foo");
这儿我们通过id找一个"foo"元素并隐藏它。
$("#foo").hide();
这儿我们找所有类名为"removeme"的DOM并移除它。
$(".removeme").remove();
让我们看一些能做的更高级的东西。下面,我们将创建一个div,把它追加到body中并注册一个点击事件。
var div=$("<div id="\"myNewDiv\""">This is some content</div>");
$(document.body).append(div);
div.bind("click",function(){
alert("I was clicked");
});
@黑眼诗人 <www.farwish.com>
译自:http://app-framework-software.intel.com/documentation.php#intro/quickstart
[AFUI]App Framework Quickstart的更多相关文章
- [AFUI]App Framework Plugins
---------------------------------------------------------------------------------------------------- ...
- [AFUI]App Framework
---------------------------------------------------------------------------------------------------- ...
- [译]App Framework 2.1 (1)之 Quickstart
最近有移动App项目,选择了 Hybrid 的框架Cordova 和 App Framework 框架开发. 本来应该从配置循序渐进开始写的,但由于上班时间太忙,这段时间抽不出空来,只能根据心情和 ...
- [Learn AF3]第三章 App Framework 3组件之Panel:afui的核心
Panel,afui的核心组件 组件名称:Panel 使用说明:按照官方的说法,panel组件是af3的“核心(heart of the ui)”,panel用于构造应用中独立的内容展示区域, ...
- [译]Intel App Framework 3.0的变化
App Framework 3.0 原文 IAN M. (Intel) 发布于 2015-02-11 05:24 我们高兴地宣布App Framework 的新版本3.0发布了.你可以获得最新的代码 ...
- 【App FrameWork】页面之间的参数传递
若应用中有多个页面,这时2个页面之间可能需要进行参数传递.那么如何来实现呢? 首先想到的就是URL参数传递的方式,如:在panel里设置属性 data-defer="Pages/Shake. ...
- 【App FrameWork】框架的页面布局
之前主要用JqueryMobile+PhoneGap的模式开发移动应用,但JQueryMobile自身存在的硬伤太多,如加载速度缓慢,页面转场白屏.闪烁,头尾部导航浮动问题,页面滚动等等,用户体验效果 ...
- [Learn AF3]第七章 App framework组件之Popup
AF3的弹出对话框Popup 组件名称:Popup 是否js控件:是,$.afui.popup 说明:af3中的popup和af2中相比变化不大,依然是通过插件popup来实现的 方法 ...
- [Learn AF3]第四章 App framework组件之Button
Button 组件名称:Button 是否js控件:否 使用说明:如果说panel组件是af3的“核心(heart of the ui)”,那么Button就是af中的五虎上将之 ...
随机推荐
- Python 数据排序和列表迭代和列表推导应用
1.In-place sorting 原地排序 data=[6,4,5,2,3,1] print ('before sort', data) data.sort() print ('after sor ...
- Env:Winmanager插件使用
转自:http://www.cnblogs.com/feichexia/archive/2012/11/06/vim_WinManager.html 1.准备winmanger插件,从下面网址下即可: ...
- makefile中的shell语法
在Makefile中写shell代码有点诡异,和不同的shell语法不太一样,如果不了解,看Makefile会莫名其妙.下面总结了一些. 1:尽在Makefile文件的目标项冒号后的另起一行的代码才是 ...
- Android二-.9.png
1.1px*1px,用于拉伸,应用于背景展示 2.一个复杂图片,拉伸纯色部分(上,左),不可拉伸部分,存放内容(下,右)
- *.hbm.xml讲解
<!-- package声明pojo类所在的包,如果不写 那么在class中需要指明pojo类所在的包 schema指数据库模式 一个模式下可以有多张表 --> <hibernate ...
- sparkStreaming与Kafka整合
createStream那几个参数折腾了我好久..网上都是一带而过,最终才搞懂..关于sparkStreaming的还是太少,最终尝试成功... 首先启动zookeeper ./bin/zookeep ...
- set_union的几个例子
获得两个集合的并集.两个输入序列须保证已排好序. 数组用的时候 // set_union example #include <iostream> #include <algorith ...
- 实现从sql server存取二进制图片
转:http://www.cnblogs.com/jeffwongishandsome/archive/2009/08/27/1554440.html 1.存取图片(1).将图片文件转换为二进制并直接 ...
- Centos 7 修改SSH端口号
注意!这里的Centos版本是7 step1 修改/etc/ssh/sshd_config vi /etc/ssh/sshd_config #Port 22 //这行去掉#号 Po ...
- js上移、下移、置顶、置底功能实现
实现页面上列表内容上移.下移.置顶.置底 功能,主要实现思路是节点操作,比如说:上移,直接把点击项移动到前一个节点,以此类推,当然实际代码实现还要加些判断,如当前点击操作项是否已经是置底或置底了,如果 ...