[译]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");

  

  未完待续...

时间: 2024-07-30 10:13:34

[译]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 Framework 是一个为移动设备从头构建的快速查询选择器库.认识到之前存在的框架如:jQuery 和 ZeptoJS设计的基础.我们确定了仅仅只需要实现必要的API,以便提升性能的方式.我们目前为App Framework 支持超过60多个与jQuery兼容的语法.完整的列表,点击这里

[译]App Framework 2.1 (2)之 Get Involved

App Framework  API 第二篇 原文在此:http://app-framework-software.intel.com/documentation.php#intro/involved Intro -> Get Involved( 简介-> 参与 ) 首先,前往 Github 并且复制一份代码.你可以开始使用他的核心,分解它,解决问题,并改进它.当你准备好了的话,你提交一份请求并附上如下内容: 提交的概述 解决的bug/增加的特性 上述的测试用例 所做的这些改动会影响当前的安装

(译)JavaScript 中的正则表达式(RegEx)实操——快速掌握正则表达式,伴有随手可练的例子————(翻译未完待续)

(原文:https://blog.bitsrc.io/a-beginners-guide-to-regular-expressions-regex-in-javascript-9c58feb27eb4) 当你第一次看到正则,它们就像随意堆放的字符,看起来毫无意义.不过尽管他们看起来很棘手(因为复杂的语法规则),他们却极其有用. 事实是,正确地理解了正则表达式,能让你成为一个更加高明的程序员.为了完全了解正则表达式的世界,你需要先学习一些基本概念,在此基础上才能有所作为. 废话不多说,让我们开始吧

[App]App Framework Quickstart

--------------------------------------------------------------------------------------------------------- 当使用App Framework,你只能使用W3C可用的选择器.可以去W3C查看完整的列表.不支持如jQuery中创建的自定义伪选择器.下面是一些App Framework能帮助你加速开发的例子. 第一步,引入App Framework到你的页面. <script src="//c

[App]App Framework Plugins

------------------------------------------------------------------------------------------------------------ App Framework - 查询选择器库 App Framework 是一个异常快速的查询选择器库,从一开始就是针对移动设备而建.识别早期已经存在的像jQuery*和ZeptoJS*框架制定的基础原理,我们确定了加速性能的方式,只实现必要的API.我们目前为含jQuery*兼容

[Learn AF3] App Framework 3.0中的内置矢量图标

AF3的内置矢量图标 介绍:要使用af3中的图标,必须首先引入icon.css,由于文件中已经内置了字体文件数据,因此不需要引入字体文件支持. <link rel="stylesheet" type="text/css" href="js/af3.0/icons.min.css" /> 使用:引入icon.css文件之后,我们就可以通过给需要显示图标的元素添加css类名来显示图标(实际上就是一个矢量字符),注意需要同时添加icon 和

app framework map及ajax方法

$(function () { $.ajax({ url: 'Ashx/GetProductList.ashx', contentType: "JSON", success: function (data) { alert(data); var jsonData = eval("(" + data + ")"); alert(jsonData); $.map(jsonData, function (k, v) { alert("ssss

[Learn AF3]第七章 App framework组件之Popup

AF3的弹出对话框Popup 组件名称:Popup 是否js控件:是,$.afui.popup     说明:af3中的popup和af2中相比变化不大,依然是通过插件popup来实现的     方法: show () 显示popup对话框 hide () 隐藏popup对话框 构造参数:构造popup的时候,可以简单的传递一个字符串,此时popup显示为一个alert对话框.也可以传递一个object对象,对象可以具有如下的属性设置: 1 id (string) popup 包裹DOM元素的I

[Learn AF3]第五章 App Framework 3组件之Drawer——Side Menu

Drawer——Side menu 组件名称:Drawer     说明:af3中的side menu和af2中有很大变化,af3中的side menu实际上是通过插件$.afui.drawer来实现的     方法: show (id, position, string) 显示side menu,参数中指定的是nav的 id, 要显示的位置:left.right,指定变换效果:cover,reveal,push hide (string,string) 隐藏Side Menu,参数为nav的i