目录
摘 要 1
1 绪论 1
1.1 项目研究背景 1
1.2 项目研究意义 3
- 迎合市场需求，创造更加便捷的幻灯片使用环境 3
- 定位大众 Web 应用，促进 Internet Web 系统的发展进程 4
- 升级服务器端系统，实现跨平台软件版本同步和环境的统一 4
1.3 论文的组织结构 4
2 开发技术 4
3、Axure RP[12] 6
参考文献 42
摘 要
进入新世纪以来，信息技术产业迅猛发展，已经逐渐深入到了日常生活的方方面面。通过幻灯片这类的演示文稿软件，能更好、更直观的表达出演讲者所要表达的主题和主要内容，使演讲者有了它在演讲的时候能实现更有秩序和更完美的演讲，提高沟通交流的效率。目前，不论是在科学教育、商业展示、产品说明、比赛演讲等各个方面，都是依赖幻灯片类软件，以实现有效的表达。
HTML5 作为 Web 时代的新星，拥有更高的可用性和更好的体验效果，并且对 HTML 标签和一些属性进行了良好的扩展，使得前端拥有更加丰富的功能。特别是在多媒体方面，HTML5 给出了更简便稳定的实现方案，可以很好的代替 FLASH 和 Silverlight。 HTML5 被设计出来，致力于打造一个无缝的网络环境，不管是在 PC 端，还是移动端，都能完美兼容，使得基于它的应用能够有较好的移植性。
基于 HTML5 的在线幻灯片系统，利用 Sublime Text 编辑器和 Fierfox Developer Edition 工具，实现了在线幻灯片系统的编辑模块、保存模块和播放模块。它拥有简洁清爽的界面，自然流畅的体验和全面实用的功能，利用 RequireJS 实现面向模块的架构，有良好的兼容性和扩展性。基于 HTML5 的在线幻灯片系统，仅仅通过浏览器实现幻灯片的编辑、保存、演示，让你摆脱用 U 盘携带存储和系统软件环境的限制。
关键词： HTML5； Sublime Text； RequireJS； 在线幻灯片
1绪论
1.1 项目研究背景
- HTML5
2014 年 10 月 29 日，万维网联盟泪流满面地宣布，经过几乎 8 年的艰辛努力，HTML5 标准规范终于最终制定完成了，并已公开发布。[8]
在此之前的几年时间里，已经有很多开发者陆续使用了 HTML5 的部分技术，Firefox、Google Chrome、Opera、Safari 4+、 Internet Explorer 9+ 都已支持 HTML5。[8]
HTML5 将会取代 1999 年制定的 HTML 4.01、XHTML 1.0 标准，以期能在互联网应用迅速发展的时候，使网络标准达到符合当代的网络需求，为桌面和移动平台带来无缝衔接的丰富内容。[8]
W3C CEO Jeff Jaffe 博士表示：“HTML5 将推动 Web 进入新的时代。不久以前，Web 还只是上网看一些基础文档，而如今，Web是一个极大丰富的平台。我们已经进入一个稳定阶段，每个人都可以按照标准行事，本文转载自http://www.biyezuopin.vip/onews.asp?id=15130并且可用于所有浏览器。如果我们不能携起手来，就不会有统一的 Web。” [8]
HTML5 还有望成为梦想中的“开放 Web 平台”(Open Web Platform) 的基石，如能实现可进一步推动更深入的跨平台 Web 应用。
[8]
HTML5 赋予网页更好的意义和结构。更加丰富的标签将随着对 RDFa 的，微数据与微格式等方面的支持，构建对程序、对用户都更有价值的数据驱动的 Web。
基于 HTML5 开发的网页 APP 拥有更短的启动时间，更快的联网速度，这些全得益于 HTML5 APP Cache，以及本地存储功能。 Indexed DB（html5 本地存储最重要的技术之一）和 API 说明文档。[8]
HTML5 将会最终代替多媒体框架，如 Flash，但是短期看来还不是时候，因为将现有应用 Flash 的网络开发完全转向 HTML5 还需要一段时间。尽管 HTML5 提出了许多优点，但是还可能有某些应用更适合于更灵活的框架。一些主流的大公司都逐步转向使用HTML5，谷歌于 2015 年 2 月 26 日开始自动将 Flash 广告转换为 HTML5 格式，这可能会加速 HTML5 替代 Flash 的进程，但是这个转变的过程也不是一蹴而就的。[8]
<!doctype html>
<html>
<!-- manifest="appcache.manifest" -->
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
<title>在线幻灯片</title>
<link rel="stylesheet" href="lib/css/bootstrap.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/adjust.css">
<link rel="stylesheet" href="lib/css/codeStyles/my-style.css">
</head>
<body>
<div id="editor" class="window">
<div id="topbar" class="navbar margin-bottom-0">
<div class="navbar-inner">
<a class="brand" href="#">HTML5幻灯片系统</a>
<ul class="nav" id="title-label-wrapper" data-bind="visible: !editingTitle()">
<li>
<a href="#" id="label-title" data-bind="text: titleDisplay, click: editTitle"></a>
</li>
</ul>
<form class="navbar-form pull-left" id="title-editor-wrapper" data-bind="visible: editingTitle" onsubmit="return false;">
<input type="text" class="span2" id="input-title" placeholder="请输入PPT标题..." data-bind="value: title, hasfocus: editingTitle">
</form>
<ul class="nav pull-right">
<li><a href="#theme-manager" data-toggle="modal"><i class="icon-briefcase"></i> 主题和动作</a></li>
<li><a href="#reset-confirm" data-toggle="modal"><i class="icon-repeat"></i> 全部重做</a></li>
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="icon-file"></i> 打开幻灯片<b class="caret"></b>
</a>
<ul id="import" class="dropdown-menu">
<li><a href="#online-dialog" data-toggle="modal" id="open-online-btn">打开在线幻灯片</a></li>
<li><a href="#import-dialog" data-toggle="modal">导入（text格式）</a></li>
</ul>
</li>
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="icon-ok"></i> 保存幻灯片<b class="caret"></b>
</a>
<ul id="export" class="dropdown-menu">
<li><a href="#" id="">存入数据库</a></li>
<li><a href="#" id="save-text-btn">导出为text</a></li>
<li><a href="#" id="save-html-btn">导出为html</a></li>
</ul>
</li>
<li><a href="#" id="remove-btn"><i class="icon-remove"></i>移除</a></li>
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="icon-play"></i> 预览 <b class="caret"></b>
</a>
<ul class="dropdown-menu pull-right">
<li><a href="#" id="preview-btn">从第一页开始</a></li>
<li><a href="#" id="preview-current-btn">从当前页开始</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div id="toolbar" class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="btn-group">
<a class="btn" data-role="undo" href="#">撤</i></a>
<a class="btn" data-role="redo" href="#"><i class="icon-repeat"></i></a>
</div>
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
字体
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#" data-role="FontName"><font face = "Arial">Arial</font></a></li>
<li><a href="#" data-role="FontName"><font face = "Verdana">Verdana</font></a></li>
<li><a href="#" data-role="FontName"><font face = "Tahoma">Tahoma</font></a></a></li>
<li><a href="#" data-role="FontName"><font face = "宋体">宋体</font></a></a></li>
</ul>
</div>
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
大小
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#" data-role="FontSize" style="line-height: 1.2;"><font size ="1" >1</font></a></li>
<li><a href="#" data-role="FontSize" style="line-height: 1.2;"><font size ="2" >2</font></a></li>
<li><a href="#" data-role="FontSize" style="line-height: 1.2;"><font size ="3" >3</font></a></li>
<li><a href="#" data-role="FontSize" style="line-height: 1.2;"><font size ="4" >4</font></a></li>
<li><a href="#" data-role="FontSize" style="line-height: 1.2;"><font size ="5" >5</font></a></li>
<li><a href="#" data-role="FontSize" style="line-height: 1.2;"><font size ="6" >6</font></a></li>
<li><a href="#" data-role="FontSize" style="line-height: 1.2;"><font size ="7" >7</font></a></li>
</ul>
</div>
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
颜色
<span class="caret"></span>
</a>
<div class="dropdown-menu" id="mycolorPicker">
<a href="#" data-role="ForeColor" data-color="Red" style="background-color: Red;"></a>
<a href="#" data-role="ForeColor" data-color="Blue" style="background-color: Blue;"></a>
<a href="#" data-role="ForeColor" data-color="Green" style="background-color: Green;"></a>
<a href="#" data-role="ForeColor" data-color="Yellow" style="background-color: Yellow;"></a>
<a href="#" data-role="ForeColor" data-color="Black" style="background-color: Black;"></a>
<a href="#" data-role="ForeColor" data-color="Gray" style="background-color: Gray;"></a>
<a href="#" data-role="ForeColor" data-color="White" style="background-color: White;"></a>
<img id="moreColors" src="images/others/colorpicker.png">
</div>
</div>
<div class="btn-group" data-toggle="buttons-checkbox">
<a class="btn" data-role='bold' href="#"><i class="icon-bold"></i></a>
<a class="btn" data-role='italic' href="#"><i class="icon-italic"></i></a>
<a class='btn' data-role='underline' href="#"><u><b>U</b></u></a>
<a class='btn' data-role='strikeThrough' href="#"><strike>abc</strike></a>
</div>
<div class="btn-group" data-toggle="buttons-radio">
<a class="btn" data-role="justifyLeft" href="#"><i class="icon-align-left"></i></a>
<a class="btn" data-role="justifyCenter" href="#"><i class="icon-align-center"></i>
</a>
<a class="btn" data-role="justifyRight" href="#"><i class="icon-align-right"></i></a>
<a class="btn" data-role="justifyFull" href="#"><i class="icon-align-justify"></i></a>
</div>
<div class="btn-group" data-toggle="buttons-radio">
<a class="btn" data-role="indent" href="#"><i class="icon-indent-right"></i></a>
<a class="btn" data-role="outdent" href="#"><i class="icon-indent-left"></i></a>
</div>
<div class="btn-group" data-toggle="buttons-radio">
<a class="btn" data-role="insertUnorderedList" href="#"><i class="icon-align-justify"></i></a>
<a class="btn" data-role="insertOrderedList" href="#"><i class="icon-list"></i></a>
</div>
<div class="btn-group">
<a class="btn" data-role="CreateLink" href="#">
<i class="icon-share"></i>
Link
</a>
<!-- <ul class="dropdown-menu">
<li><a href="#" data-key="CreateLink">URL</a></li>
<li><a href="#" data-key="link-slide">Slide</a></li>
<li class="disabled"><a href="#" data-key="link-remove">Remove</a></li>
</ul> -->
</div>
<div class="btn-group">
<button class="btn" data-key="picture"><i class="icon-picture"></i><span class="caret"></span></button>
</div>
<!-- <div class="btn-group pull-right">
<button class="btn" data-key="history-undo"><i class="icon-step-backward"></i></button>
<button class="btn" data-key="history-revert"><i class="icon-step-forward"></i></button>
</div> -->
<div class="show-layout-toggle pull-right">
<a onclick="mylayoutbarToggle()">展开布局模板<b class="caret"></b></a>
</div>
</div>
</div>
<div id="mylayoutbar" class="navbar navbar-fixed-top hide">
<ul id="layout-list" class="thumbnails" data-bind="foreach: layoutList">
<li class="span1" data-bind="css: {active: key == $root.currentLayout()}">
<a href="#" class="thumbnail" data-bind="click: $parent.clickLayout, attr: {title: title}">
<img data-bind="attr: {src: 'images/layout/' + key + '.png'}" />
</a>
</li>
</ul>
</div>
<div id="content">
<div id="sidebar" class="span3 margin-left-0 width-240">
<div id="page-nav">
<div id="mypagebar" class="clearfix">
<div class="btn-group">
<!-- data-bind="click:addPage.bind($data,currentLayout())" -->
<button class="btn" data-toggle="modal" data-target="#template-dialog"><i class="icon-plus"></i></button>
<button class="btn" data-bind="click: clonePage"><i class="icon-file"></i></button>
<button class="btn" data-bind="click: moveUpPage"><i class="icon-arrow-up"></i></button>
<button class="btn" data-bind="click: moveDownPage"><i class="icon-arrow-down"></i></button>
<button class="btn" data-bind="click: removePage"><i class="icon-trash"></i></button>
</div>
</div>
<div id="page-list-wrapper">
<ul id="page-list" class="nav nav-tabs nav-stacked" data-bind="foreach: pageList">
<li data-bind="css: {active: $index() == $root.currentPage()}, click: $parent.clickPage">
<div>
<img data-bind="attr: {src: 'images/layout/' + key + '.png'}" />
</div>
<a href="#" data-bind="text: ($index()+1) + '、' + (title || '新页面')"></a>
</li>
</ul>
</div>
</div>
</div>
<div class="vr"></div>
<div id="editor-stage" class="stage" data-bind="attr: {'data-design': currentDesign}">
<div id="editor-slide" class="slide" data-bind="attr: {'data-layout': currentLayout}">
<div id="slide-title" data-key="title">
<div class="output" data-bind="click: clickItem"></div>
</div>
<div id="slide-subtitle" data-key="subtitle">
<div class="output" data-bind="click: clickItem"></div>
</div>
<div id="slide-content" data-key="content">
<div class="output" data-bind="click: clickItem"></div>
</div>
<div id="slide-subtitle2" data-key="subtitle2">
<div class="output" data-bind="click: clickItem"></div>
</div>
<div id="slide-content2" data-key="content2">
<div class="output" data-bind="click: clickItem"></div>
</div>
<div id="item-editor-layer" class="layer"></div>
</div>
</div>
<ul class="dropdown-menu" id="myEditorMenu">
<li><a href="#" id="myEditorMenuAdd">插入新页面</a></li>
<li><a href="#" id="myEditorMenuLayout">选择布局模板</a></li>
<li><a class="hide" data-bind="click: moveUpPage" href="#" id="myPageMoveUp">上移页面</a></li>
<li><a class="hide" data-bind="click: moveDownPage" href="#" id="myPageMoveDown">下移页面</a></li>
<li><a class="hide" data-bind="click: removePage" href="#" id="myPageRemove">删除页面</a></li>
</ul>
</div>
</div>
<div id="player" class="window">
<div id="player-stage" class="stage">
<div id="player-slides-container">
<div class="slide next prev current">
<div data-key=""></div>
</div>
</div>
</div>
<div id="player-status">
<span id="player-page">1</span> / <span id="player-sum">1</span>
</div>
<div id="player-nav">
<div id="player-menu" class="btn-group">
<a href="#" id="player-btn-prev" class="btn">前一页</a>
<a href="#" id="player-btn-next" class="btn">下一页</a>
<a href="#" id="player-btn-goto" class="btn">跳转</a>
<a href="#" id="player-btn-exit" class="btn">退出</a>
</div>
</div>
<ul class="dropdown-menu" id="myPlayerMenu">
<li><a href="#" id="myPlayerMenuPrev">前一页</a></li>
<li><a href="#" id="myPlayerMenuNext">下一页</a></li>
<li><a href="#" id="myPlayerMenuGoto">跳转</a></li>
<li><a href="#" id="myPlayerMenu-player-nav-toggle">隐藏操作条</a></li>
<li><a href="#" id="myPlayerMenuExit">退出</a></li>
</ul>
</div>
<div id="modals" class="layer">
<div id="template-dialog" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>给页面添加一个模板</h3>
</div>
<div class="modal-body">
<div id="template-panel" class="span6">
<p>请从中选择模板创建一个新页面:</p>
<ul id="template-list" class="thumbnails" data-bind="foreach: tplList">
<li class="span2">
<a href="#" class="thumbnail" data-bind="click: $parent.addPage, attr: {title: title}" data-dismiss="modal">
<img data-bind="attr: {src: 'images/template/' + key + '.png'}" />
<span class="title" data-bind="text: title"></span>
</a>
</li>
</ul>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-dismiss="modal">关闭</button>
</div>
</div>
<div id="theme-manager" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>主题管理</h3>
</div>
<div class="modal-body">
<div class="span6">
<ul id="theme-manager-tabs" class="nav nav-tabs">
<li class="active"><a href="#design-panel" data-toggle="tab">设计</a></li>
<li><a href="#transition-panel" data-toggle="tab">切换动作</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="design-panel">
<ul class="thumbnails" id="design-list" data-bind="foreach: designList">
<li class="span2" data-bind="css: {active: key == $root.currentDesign()}">
<a href="#" class="thumbnail" data-bind="click: $parent.clickDesign">
<img data-bind="attr: {src: 'images/design/' + key + '.png'}">
<span class="title" data-bind="text: title"></span>
</a>
</li>
</ul>
</div>
<div class="tab-pane" id="transition-panel">
<div class="clearfix">
<ul id="transition-list" class="nav nav-pills nav-stacked pull-left" data-bind="foreach: transitionList">
<li data-bind="css: {active: key == $root.currentTransition()}">
<a href="#" data-bind="click: $parent.clickTransition, text: title"></a>
</li>
</ul>
<div id="transition-preview" class="pull-right">
<div id="transition-stage" data-bind="attr: {'data-transition': currentTransition}">
<div class="transition-slide">1</div>
<div class="transition-slide">2</div>
<div class="transition-slide">3</div>
<div class="transition-slide">4</div>
<div class="transition-slide">5</div>
<div class="transition-slide">6</div>
<div class="transition-slide">7</div>
<div class="transition-slide">8</div>
<div class="transition-slide">9</div>
<div class="transition-slide">0</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-dismiss="modal">确定</button>
<button class="btn" data-dismiss="modal">关闭</button>
</div>
</div>
<div id="reset-confirm" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>重新制作</h3>
</div>
<div class="modal-body">
你确定要删除所有信息重做吗?
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal">不要</button>
<button class="btn btn-primary" data-dismiss="modal" data-bind="click: resetData">是的</button>
</div>
</div>
<div id="img-manager" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>图片添加</h3>
</div>
<div class="modal-body">
<div class="span6">
<ul id="img-manager-tabs" class="nav nav-tabs">
<li class="active" data-key="list"><a href="#my-img-panel" data-toggle="tab">我的图片</a></li>
<li data-key="local"><a href="#img-local-panel" data-toggle="tab">本地</a></li>
<li data-key="url"><a href="#img-url-panel" data-toggle="tab">在线</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="my-img-panel">
<ul class="thumbnails" id="my-img-list">
<li class="span2">
<a href="#" class="thumbnail"><img></a>
<p class="clearfix">
<button class="btn pull-left" data-action="choose">选择</button>
<button class="btn btn-danger pull-right" data-action="remove"><i class="icon-trash"></i></button>
</p>
</li>
</ul>
<div id="my-img-list-holder">
<h4>没有收藏的图片</h4>
<p>
你可以<a href="#" data-key="local">上传</a>
或者输入<a href="#" data-key="url">在线图片URL</a> 来添加图片.
</p>
</div>
</div>
<div class="tab-pane" id="img-local-panel">
<p><input type="file"></p>
<div class="thumbnail"></div>
</div>
<div class="tab-pane" id="img-url-panel">
<p class="form-inline">
<input type="text" placeholder="在这里输入图片地址.">
<button class="btn btn-danger" id="img-url-remove"><i class="icon-trash"></i></button>
</p>
<div class="thumbnail"></div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-dismiss="modal" data-action="save">确定</button>
<button class="btn" data-dismiss="modal">取消</button>
</div>
</div>
<div id="video-dialog" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>视频编辑器</h3>
</div>
<div class="modal-body">
<div class="span6">
<h4>优酷视频URL:</h4>
<input id="video-url" type="text"><br>
<span class="label">比如:</span> http://v.youku.com/v_show/id_xxxxxxxxxx.html<br><br>
<div class="alert alert-info">
你可以访问 <a href="http://www.youku.com/" target="_blank">http://www.youku.com/</a>寻找视频，并将URL粘贴到这里.<br>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-dismiss="modal" data-action="save">确定</button>
<button class="btn" data-dismiss="modal">取消</button>
</div>
</div>
<div id="code-dialog" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>代码编写器</h3>
</div>
<div class="modal-body">
<div class="span6">
<ul id="code-manager-tabs" class="nav nav-tabs">
<li class="active"><a href="#code-panel" data-toggle="tab" data-key="code">输入代码串</a></li>
<li><a href="#demo-panel" data-toggle="tab" data-key="demo">代码模板</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="code-panel">
<textarea id="code-input" class="code" rows="8" style="width: 100%; box-sizing: border-box;"></textarea>
</div>
<div class="tab-pane" id="demo-panel">
<p class="form-inline">
<input type="text" id="demo-url-input" placeholder="输入代码模板URL.">
<button class="btn btn-danger" id="demo-url-remove"><i class="icon-trash"></i></button>
</p>
<p>你可以从这些网站寻址模板URL:</p>
<ul>
<li><a href="http://jsfiddle.net/" target="_blank">jsFiddle</a></li>
<li><a href="http://codepen.io/" target="_blank">CodePen</a></li>
<li><a href="http://jsbin.com/" target="_blank">JSBin</a></li>
<li><a href="http://dabblet.com/" target="_blank">Dabblet</a></li>
<li>或者其他你想展示的模板URL</li>
</ul>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-dismiss="modal" data-action="save">确认</button>
<button class="btn" data-dismiss="modal">取消</button>
</div>
</div>
<div id="goto-dialog" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>跳转到 ...</h3>
</div>
<div class="modal-body">
<div class="span6">
页码:
<input id="goto-number" type="number">
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-dismiss="modal" data-action="go">确认</button>
<button class="btn" data-dismiss="modal">取消</button>
</div>
</div>
<div id="import-dialog" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 id="import-dialog-title">选择文件</h3>
</div>
<div class="modal-body" id="confirm-dialog-body">
<div id="import-file-panel">
<p><input type="file"></p>
<div class="thumbnail file-info code"></div>
</div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" data-action="no">取消</button>
<button class="btn btn-primary" data-dismiss="modal" id="open-text-btn">确认</button>
</div>
</div>
<div id="online-dialog" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 id="online-dialog-title">我的文件</h3>
</div>
<div class="modal-body" id="confirm-dialog-body">
<div id="online-file-panel">
</div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" data-action="no">取消</button>
</div>
</div>
<div id="confirm-dialog" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 id="confirm-dialog-title"></h3>
</div>
<div class="modal-body" id="confirm-dialog-body"></div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" data-action="no">取消</button>
<button class="btn btn-primary" data-dismiss="modal" data-action="yes">确认</button>
</div>
</div>
</div>
<script id="ctrl-template" type="text/template">
<div class="ctrl">
<a href="#" class="ctrl-start"></a>
<ul class="ctrl-menu">
<li><a href="#" data-action="clear">清除</a></li>
<li><a href="#" data-action="edit">编辑</a></li>
<li class="ctrl-menu-more"><a href="#">...</a></li>
</ul>
</div>
</script>
<script src="lib/js/jquery.js"></script>
<script src="lib/js/bootstrap.js"></script>
<script src="lib/js/knockout-2.2.1.js"></script>
<script src="lib/js/highlight.min.js"></script>
<script src="js/jquery.colorpicker.js"></script>
<script src="js/savefile/FileSaver.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src="js/adjust.js"></script>
<script data-main="js/main" src="js/require.js"></script>
</body>
</html>
