<!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>&lt;!DOCTYPE html&gt; &lt;html manifest="manifest.appcache"&gt; &lt;head&gt; &lt;meta http-equiv="Content-type" content="text/html; charset=utf-8"&gt; &lt;meta name="viewport" content="width=device-width" /&gt; &lt;!-- required meta tags/information --&gt; &lt;title&gt;Application Title&lt;/title&gt; &lt;meta name="description" content="Application Description"/&gt; &lt;meta name="keywords" content="Category_1, Category_2"&gt; &lt;meta name="author" content="John Doe|johndoe@internetl.com"/&gt; &lt;!-- CSS --&gt; &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/git/jquery.mobile-git.css"&gt; &lt;!-- Custom Stylesheets --&gt; &lt;link rel="stylesheet" href="path/to/stylesheet_a"&gt; &lt;!-- JQUERY/JQUERY MOBILE --&gt; &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="http://code.jquery.com/mobile/git/jquery.mobile-git.js"&gt;&lt;/script&gt; &lt;!-- JIO --&gt; &lt;script type="text/javascript" src="path/to/sha256.amd.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="path/to/rsvp-custom.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="path/to/jio.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="path/to/complex_queries.js"&gt;&lt;/script&gt; &lt;!-- JIO storages, for example --&gt; &lt;script type="text/javascript" src="path/to/localstorage.js"&gt;&lt;/script&gt; &lt;!-- RenderJS --&gt; &lt;script type="text/javascript" src="path/to/renderjs.js"&gt;&lt;/script&gt; &lt;!-- 3rd Party Plugins/Custom Scripts --&gt; &lt;script type="text/javascript" src="path/to/plugin_a.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="path/to/plugin_b.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;!-- Content of application --&gt; &lt;/body&gt; &lt;/html&gt; </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>你可以在此提交你的应用: &nbsp; <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>