<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js"><!--<![endif]--><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>OfficeJS 初步说明</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800&subset=latin,cyrillic-ext' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/normalize.min.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<!--<link href="dev_files/css.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="dev_files/normalize.css">
<link rel="stylesheet" href="dev_files/main.css">
<script src="dev_files/modernizr-2.html"></script>-->
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->
<div class="main-container">
<div class="main wrapper clearfix">
<article>
<h1 class="page_title">OfficeJS 初步说明 </h1>
<p>Version: 001 - 2013-11-19</p>
<p>这篇文章详述了OfficeJS离线HTML5应用的初步说明。
</p>
<h2>耦合性</h2>
<p>OfficeJS 应用依赖于以下的库:</p>
<ul>
<li><a href="http://jquerymobile.com/">jQuery 移动</a>: 独立平台用户界面控件(<a href="http://jquerymobile.com/gbs/"> 被至少30种网络浏览器支持</a>)</li>
<li><a href="http://j-io.org/">J-IO</a>: 独立后端的持久数据管理(离线, 在线, 复制,ryption等)</li>
<li><a href="http://renderjs.org/">RenderJS</a>: 可重复使用的组件系统 (可选的)</li>
</ul>
<p>提交给OfficeJS HTML5应用商店的应用必须依照以下规则为这些库提供支持:</p>
<p>
</p><table align="center" border="1">
<tbody><tr>
<th></th>
<th>jQuery Mobile</th>
<th>JIO</th>
<th>RenderJS</th>
</tr>
<tr>
<td>无可持续性数据的应用</td>
<td>推荐</td>
<td>可选</td>
<td>可选</td>
</tr>
<tr>
<td>有可持续性数据的应用</td>
<td>推荐</td>
<td>必选</td>
<td>可选</td>
</tr>
<tr>
<td>应用数据可被嵌入另一应用程序中</td>
<td>推荐</td>
<td>必选</td>
<td>必选</td>
</tr>
</tbody></table>
<p></p>
<h2>结构</h2>
<p>一个OfficeJS应用程序就是一个定义了元数据和耦合性(CSS,JS)的HTML5文档。你可以从使用以下的OfficeJS
应用程序模板开始。</p>
<code></code><pre style="font-size:80%"><code><!DOCTYPE html>
<html manifest="manifest.appcache">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width" />
<!-- required meta tags/information -->
<title>Application Title</title>
<meta name="description" content="Application Description"/>
<meta name="keywords" content="Category_1, Category_2">
<meta name="author" content="John Doe|johndoe@internetl.com"/>
<!-- CSS -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/git/jquery.mobile-git.css">
<!-- Custom Stylesheets -->
<link rel="stylesheet" href="path/to/stylesheet_a">
<!-- JQUERY/JQUERY MOBILE -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/git/jquery.mobile-git.js"></script>
<!-- JIO -->
<script type="text/javascript" src="path/to/sha256.amd.js"></script>
<script type="text/javascript" src="path/to/rsvp-custom.js"></script>
<script type="text/javascript" src="path/to/jio.js"></script>
<script type="text/javascript" src="path/to/complex_queries.js"></script>
<!-- JIO storages, for example -->
<script type="text/javascript" src="path/to/localstorage.js"></script>
<!-- RenderJS -->
<script type="text/javascript" src="path/to/renderjs.js"></script>
<!-- 3rd Party Plugins/Custom Scripts -->
<script type="text/javascript" src="path/to/plugin_a.js"></script>
<script type="text/javascript" src="path/to/plugin_b.js"></script>
</head>
<body>
<!-- Content of application -->
</body>
</html>
</code></pre>
<p>
<b>请注意:</b>
</p><ul>
<li>应用程序都应该有一个manifest资源配置文件明确指出被贮藏的文件。</li>
<li>自定义脚本和添加的插件可以被容易的添加到HTML5文档内容的后面。容易融入的插件例子包括有:
<ul>
<li>表单验证 - <a href="http://validval.frebsite.nl/">Validval</a></li>
<li>i18n 支持 - <a href="http://jamuhl.github.io/i18next/">i18next</a></li>
</ul>
</li>
<li>在开发HTML5应用程序时注意 <a href="http://view.jquerymobile.com/master/demos/navigation/">jQuery Mobile Ajax 基础
导航</a>。</li>
</ul>
<p></p>
<h2>应用案例</h2>
<ul>
<li><a href="http://www.officejs.com/app/task_manager/">任务管理</a> 提供了一个基于JIO技术的简明的关于持续应用的 JQuery Mobile 案例。</li></ul>
<br>
<h2>提交你的应用程序</h2>
<p>你可以在此提交你的应用: <a href="http://officejs.com/#apps">到 officejs.com上提交应用</a></p><a href="http://officejs.com/#apps">
</a></article><a href="http://officejs.com/#apps">
</a></div><a href="http://officejs.com/#apps"> <!-- #main -->
</a></div><a href="http://officejs.com/#apps">
</a></body></html>