HTML标准教程-胡艳洁编著

4.3基底网址标记
4.4基底文字标记
4.5元信息标记
4.5.1标记
4.5.2定义编辑工具
4.5.3设定关键字
4.5.4设定描述
4.5.5设定作者
4.5.6设定字符集
4.5.7设定自动刷新
4.5.8设定自动跳转
4.5.9设定转场效果
4.5.10设定禁用缓存
4.5.11设定有效期限
4.5.12设定建立网站的日期
4.5.13说明版权
4.5.14记载联系人的邮箱
4.5.15限制搜索方式
习题
第5章页面的主体标记
5.1HTML主体标记
5.2文字颜色属性TEXT
5.3背景颜色属性BGCOLOR
5.4背景图像属性BACKGROUND
5.5背景图像固定属性BGPROPERTIES
5.6链接文字颜色属性LINK
5.7激活链接文字颜色属性ALINK
5.8访问后链接文字颜色属性VLINK
5.9上边距属性TOPMARGIN
5.10左边距属性LEFTMARGIN
习题
第6章文字与段落
6.1文字的内容
6.1.1输入普通文字
6.1.2输入空格符号
6.1.3输入特殊符号
6.1.4注释语句,
6.2标题字标记
6.2.1标题字标记
6.2.2标题字的对齐属性ALIGN
6.3文字的修饰标记
6.3.1粗体标记,
6.3.2斜体标记,,
6.3.3上标标记^{6.3.4下标标记_{6.3.5大字号标记

6.3.6小字号标记

6.3.7下划线标记

6.3.8删除线标记,

6.3.9地址文字标记

6.3.10打字机标记

6.3.11等宽文字标记,

6.3.12键盘输入文字标记

6.3.13声明变量标记

6.4字体标记

6.4.1字体属性FACE

6.4.2字号属性SIZE

6.4.3颜色属性COLOR

6.4.4基字标记

6.5段落标记

6.5.1段落标记

6.5.2段落标记的对齐属性ALIGN

6.5.3换行标记

6.5.4不换行标记

6.5.5在标记中强制换行标记

6.5.6预格式化标记

6.5.7居中标记

6.5.8缩排标记

6.6水平线标记

6.6.1插入水平线

6.6.2水平线宽度属性WIDTH

6.6.3水平线高度属性SIZE

6.6.4水平线去掉阴影属性NOSHADE

6.6.5水平线颜色属性COLOR

6.6.6水平线排列属性ALIGN

6.7其他文字标记

6.7.1忽视HTML标签标记<br />
6.7.2忽视HTML标签标记<XMP><br />
6.7.3在文字上方标注说明标记<RT>,<RUBY><br />
习题<br />
第7章建立列表<br />
7.1列表的标记<br />
7.2有序列表<br />
7.2.1有序列表标记<OL><br />
7.2.2有序列表的类型属性TYPE<br />
7.2.3有序列表的起始属性START<br />
7.3无序列表<br />
7.3.1无序列表标记<UL><br />
7.3.2目录列表标记<DIR><br />
7.3.3定义列表标记<DL><br />
7.3.4菜单列表标记<MENU><br />
7.3.5无序列表的类型属性TYPE<br />
7.4列表的嵌套<br />
7.4.1定义列表的嵌套<br />
7.4.2无序列表和有序列表的嵌套<br />
习题<br />
第8章建立超链接<br />
8.1超链接的概念<br />
8.2链接标记<A><br />
8.2.1链接标记的属性<br />
8.2.2关于路径<br />
8.3内部链接<br />
8.3.1制作内部链接<br />
8.3.2设定链接的目标窗口<br />
8.4书签链接<br />
8.4.1建立书签<br />
8.4.2链接同一页面中的书签<br />
8.4.3链接到其他页面中的书签<br />
8.5外部链接<br />
8.5.1链接到外部网站<br />
8.5.2发送E-mail<br />
8.5.3链接FTP<br />
8.5.4链接Telnet<br />
8.5.5链接到Gopher<br />
8.5.6链接到News新闻组<br />
8.5.7下载文件<br />
8.6其他链接<br />
8.6.1脚本链接<br />
8.6.2空链接<br />
习题<br />
第9章插入图片<br />
9.1图片的基本格式<br />
9.2插入图片<br />
9.2.1插入图片标记<IMG><br />
9.2.2图像的源文件属性SRC<br />
9.2.3图像的低分辨率源文件属性LOWSRC<br />
9.2.4图像的提示文字属性ALT<br />
9.2.5图像的宽度和高度属性WIDTH,HEIGHT<br />
9.2.6图像的边框属性BORDER<br />
9.2.7图像的垂直间距属性VSPACE<br />
9.2.8图像的水平间距属性HSPACE<br />
9.2.9图像的排列属性ALIGN<br />
9.3利用<IMG>标记插入AVI文件<br />
9.3.1AVI的源文件属性DYNSRC<br />
9.3.2设定AVI文件循环次数属性LOOP<br />
9.3.3设定AVI文件循环延迟属性LOOPDELAY<br />
9.3.4设定AVI文件播放方式属性START<br />
9.4图片的超链接<br />
9.5图像映射<br />
9.5.1图像链接地址的创建<br />
9.5.2制作图像映射<br />
9.5.3图像映射的标记说明<br />
习题<br />
第10章使用表格<br />
10.1制作表格<br />
10.1.1制作表格<br />
10.1.2表格的边框属性BORDER<br />
10.1.3表格的宽度和高度属性WIDTH,HEIGHT<br />
10.1.4表格的边框色属性BORDERCOLOR<br />
10.1.5表格的亮边框色属性BORDERCOLORLIGHT<br />
10.1.6表格的暗边框色属性BORDERCOLORDARK<br />
10.1.7表格的背景颜色属性BGCOLOR<br />
10.1.8表格的背景图像属性BACKGROUND<br />
10.1.9单元格间距属性CELLSPACING<br />
10.1.10单元格边距属性CELLPADDING<br />
10.1.11表格的水平对齐属性ALIGN<br />
10.1.12表格的边框样式属性FRAME<br />
10.1.13表格的内部边框样式属性RULES<br />
10.2表格的标题与表头<br />
10.2.1表格标题<CAPTION><br />
10.2.2表格标题的水平对齐属性ALIGN<br />
10.2.3表格标题的垂直对齐属性VALIGN<br />
10.2.4表格的表头<TH><br />
10.3行标记<TR>属性<br />
10.3.1行的背景色属性BGCOLOR<br />
10.3.2行的边框色属性BORDERCOLOR<br />
10.3.3行的亮边框色属性BORDERCOLORLIGHT<br />
10.3.4行的暗边框色属性BORDERCOLORDARK<br />
10.3.5行的水平对齐属性ALIGN<br />
10.3.6行的垂直对齐属性VALIGN<br />
10.4单元格标记<TD>属性<br />
10.4.1单元格的背景色属性BGCOLOR<br />
10.4.2单元格的背景图像属性BACKGROUND<br />
10.4.3单元格的边框色属性BORDERCOLOR<br />
10.4.4单元格的亮边框色属性BORDERCOLORLIGHT<br />
10.4.5单元格的暗边框色属性BORDERCOLORDARK<br />
10.4.6单元格的宽度和高度属性WIDTH,HEIGHT<br />
10.4.7单元格的水平对齐属性ALIGN<br />
10.4.8单元格的垂直对齐属性VALIGN<br />
10.4.9跨行属性ROWSPAN<br />
10.4.10跨列属性COLSPAN<br />
10.5表头标记<TH>属性<br />
10.5.1表头的背景色属性BGCOLOR<br />
10.5.2表头的背景图像属性BACKGROUND<br />
10.5.3表头的边框色属性BORDERCOLOR<br />
10.5.4表头的亮边框色属性BORDERCOLORLIGHT<br />
10.5.5表头的暗边框色属性BORDERCOLORDARK<br />
10.5.6表头的宽度和高度属性WIDTH,HEIGHT<br />
10.5.7表头的水平对齐属性ALIGN<br />
10.5.8表头的垂直对齐属性VALIGN<br />
10.5.9跨行属性ROWSPAN<br />
10.5.10跨列属性COLSPAN<br />
10.6表格的结构标记<br />
10.6.1表格的表首标记<THEAD><br />
10.6.2表格的表主体标记<TBODY><br />
10.6.3表格的表尾标记<TFOOT><br />
10.7表格嵌套<br />
习题<br />
第11章建立表单页面<br />
11.1什么是表单<br />
11.2表单标记<FORM><br />
11.2.1<FORM>标记的NAME属性<br />
11.2.2<FORM>标记的ACTION属性<br />
11.2.3<FORM>标记的METHOD属性<br />
11.2.4<FORM>标记的ENCTYPE属性<br />
11.2.5<FORM>标记的TARGET属性<br />
11.3输入标记<INPUT><br />
11.3.1文字域TEXT<br />
11.3.2密码域PASSWORD<br />
11.3.3文件域FILE<br />
11.3.4复选框CHECKBOX<br />
11.3.5单选框RADIO<br />
11.3.6普通按钮BUTTON<br />
11.3.7提交按钮SUBMIT<br />
11.3.8重置按钮RESET<br />
11.3.9图像域IMAGE<br />
11.3.10隐藏域HIDDEN<br />
11.4菜单和列表标记<SELECT>,<OPTION><br />
11.5文字域标记<TEXTAREA><br />
习题<br />
第12章使用框架结构<br />
12.1什么是框架<br />
12.2框架集标记<FRAMESET><br />
12.2.1左右分割窗口属性COLS<br />
12.2.2上下分割窗口属性ROWS<br />
12.2.3嵌套分割窗口<br />
12.2.4框架集边框宽度属性FRAMESPACING<br />
12.2.5框架集边框颜色属性BORDERCOLOR<br />
12.3框架标记<FRAME><br />
12.3.1框架页面源文件属性SRC<br />
12.3.2框架名称属性NAME<br />
12.3.3框架边框显示属性<br />
12.3.4框架滚动条显示属性SCROLLING<br />
12.3.5框架尺寸调整属性NORESIZE<br />
12.3.6框架边缘宽度属性MARGINWIDTH<br />
12.3.7框架边缘高度属性MARGINHEIGHT<br />
12.4不支持框架标记<NOFRAMES><br />
12.5浮动框架<IFRAME><br />
12.5.1浮动框架的SRC属性<br />
12.5.2浮动框架的WIDTH,HEIGHT属性<br />
12.5.3浮动框架名称属性NAME<br />
12.5.4浮动框架边框显示属性FRAMEBORDER<br />
12.5.5浮动框架滚动条显示属性SCROLLING<br />
12.5.6浮动框架边缘宽度属性MARGINWIDTH<br />
12.5.7浮动框架边缘高度属性MARGINHEIGHT<br />
12.5.8浮动框架对齐属性ALIGN<br />
12.6框架与链接<br />
12.6.1普通框架与链接<br />
12.6.2浮动框架与链接<br />
习题<br />
第13章多媒体页面<br />
13.1滚动文字<br />
13.1.1滚动文字标记<MARQUEE><br />
13.1.2滚动方向属性DIRECTION<br />
13.1.3滚动方式属性BEHAVIOR<br />
13.1.4滚动速度属性SCROLLAMOUNT<br />
13.1.5滚动延迟属性SCROLLDELAY<br />
13.1.6滚动循环属性LOOP<br />
13.1.7滚动范围属性WIDTH,HEIGHT<br />
13.1.8滚动背景颜色属性BGCOLOR<br />
13.1.9滚动空间属性HSPACE,VSPACE<br />
13.2嵌入多媒体内容<br />
13.2.1嵌入Flash动画<br />
13.2.2嵌入MP3音乐<br />
13.2.3嵌入MPG电影<br />
13.2.4嵌入AVI视频<br />
13.3背景音乐<br />
13.3.1背景音乐标记<BGSOUND><br />
13.3.2背景音乐循环次数属性LOOP<br />
13.4嵌入JAVAAppLET<br />
习题<br />
第14章CSS层叠样式表<br />
14.1什么是层叠样式表<br />
14.1.1层叠样式表的基本概念<br />
14.1.2层叠样式表的特点<br />
14.2层叠样式表的类型与基本写法<br />
14.2.1层叠样式表的类型<br />
14.2.2层叠样式表的基本写法<br />
14.2.3层叠样式表的冲突<br />
14.3层叠样式表的属性和值<br />
14.3.1字体属性<br />
14.3.2文本属性<br />
14.3.3颜色和背景属性<br />
14.3.4边框属性<br />
14.3.5鼠标光标属性<br />
14.3.6定位属性<br />
14.3.7区块属性<br />
14.3.8列表属性<br />
14.3.9滤镜属性<br />
习题<br />
第15章JavaScript脚本编程<br />
15.1DHTML与JavaScript概念<br />
15.1.1JavaScript概念<br />
15.1.2JavaScript特点<br />
15.2编写第一个JavaScript脚本<br />
15.3JavaScript基本语法<br />
15.3.1常量和变量<br />
15.3.2表达式和运算符<br />
15.3.3基本程序语句<br />
15.3.4函数<br />
15.4JavaScript的事件<br />
15.4.1onClick事件<br />
15.4.2onChange事件<br />
15.4.3onSelect事件<br />
15.4.4onFocus事件<br />
15.4.5onLoad事件<br />
15.4.6onUnLoad事件<br />
15.4.7onBlur事件<br />
15.4.8onMouseOver事件<br />
15.4.9onMouseOut事件<br />
15.4.10onDblClick事件<br />
15.4.11其他常用事件<br />
15.5JavaScript的对象<br />
15.5.1浏览器对象<br />
15.5.2JavaScript内置对象<br />
15.5.3自定义对象<br />
习题<br />
</div>
</div>
<button class="js-book-brief-accordion book-detail-brief__accordion" type="button"
style="display: none;">更多
</button>
</div>

<div class="tab-pane book-detail-check" id="tab_default_7">

<div style="height: 30px;">
<h4 class="pull-left">已确认勘误</h4>
<form class="form-inline pull-right">
<h5 style="margin-top: -5px;">
第<input type="number" class="form-control" id="duration" name="duration" value="1">次印刷
<a onClick="revise();" class="btn btn-sm btn-primary" type="button"
aria-label="Next">
<span aria-hidden="true">筛选</span>
</a>
</h5>
</form>
</div>
<hr>

<div id="tab_default7">
<div id="errorTag"></div>
<table id="example1" class="table table-hover hide">
<thead>
<tr>
<th>页码</th>
<th style="width: 58%;">勘误内容</th>
<th style="width: 20%;">提交人</th>
<th>修订印次</th>
</tr>
</thead>
<tbody id="data_td">
</tbody>
</table>
</div>
<hr>

<div>
<a id="postErrata" href="javascript:void(0);" onclick="noPermission();"
class="btn btn-primary pull-right">
<i class="fa fa-check-square-o">我要提交勘误建议</i>
</a>
</div>
</div>

<div class="tab-pane active "
id="tab_default_9"
style="min-height: 400px;">
<div class="row">
<div id="loginErrorMsg" class="alert alert-danger hide" role="alert"></div>
</div>

<div class="pbd row">

<div class="js-folder-catalog folder-catalog col-xs-3">

<div style="padding: .5em 0 0 2em; display: none ">
<select class="js-disc-chosed" style="height: 28px; width: 120px;">

<option value="https://disc.yuntu.io/disc/list/7703042065981.json">光盘 1</option>

</select>
</div>

<section class="folders-accordion">
<div class="folders-origin clearfix">
<i class="js-folders-origin-angle folders-origin-angle is-open"></i>
<span class="js-folder-origin-txt folder-origin-txt is-open">HTML标准教程</span>
</div>
<ul class="js-folders-subitems-second folders-subitems is-show"></ul>
</section>
</div>

<div class="col-xs-9 folder-details">

<div class="folder-search">
<div style="display:none;">
<input class="folder-search-input" type="search" placeholder="搜索整盘"
disabled="disabled">
<i class="folder-search-ico"></i>
</div>
<i class="js-folder-column-switch folder-status-switch__column"></i>
<i class="js-folder-row-switch folder-status-switch__row is-active"></i>
</div>

<div class="js-folder-files-list folder-files-list clearfix">
<ul class="folder-files-list__captions clearfix">
<li class="folder-column-caption">名称</li>
<li class="folder-column-caption">类型</li>
<li class="folder-column-caption">大小</li>
</ul>
<section class="folder-column-lists">
<ul class="js-folder-column-lists">

</ul>
</section>
</div>
<div class="js-folder-files-rows folder-files is-active clearfix"></div>
</div>
</div>

<div class="modal fade" id="myModal1" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">提示</h4>
</div>

<div class="modal-body">
请登陆，再下载
</div>
<div class="modal-footer">
<a href="javascript:void(0);" onclick="showLoginByCORS();" type="button"
class="btn btn-primary">登陆</a>
<button type="button" class="btn btn-default" data-dismiss="modal">关闭
</button>
</div>

</div>
</div>
</div>

<div class="modal fade" id="myModal2" tabindex="-1" role="dialog"
aria-labelledby="myModa2Label">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModa2Label">提示</h4>
</div>
<div id="message" class="modal-body">

</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭
</button>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane change-color" id="tab_default_10" style="min-height: 400px;"></div>
</div>

<div class="co-xs-12 book-info-feedback ">

<div class="col-sm-2 pull-right" style="padding-top: 12px;height: 60px;">
<a id="feedback_href" class="btn btn-warning btn-block text-center" href="" target="_blank">用户反馈</a>
</div>
<div class="col-sm-2 pull-right" style="padding-top: 12px;height: 60px;letter-spacing: 5px;">
<a class="btn btn-info text-center btn-block" href="/faq">FAQ</a>
</div>

<div class="col-sm-2" style="margin-top: 14px;">

<a style="font-size: 17px;" href="javascript:void(0);"
class="showZhengPan btn btn-success"
data-name="7703042065981"><i class="fa fa-cloud-download" aria-hidden="true"></i>整盘下载</a>

<br/>
</div>
</div>
<div>
<p style="background: #f6f6f6;margin-bottom: 0;padding-left: 15px;">光盘服务联系方式: 020-38250260    客服QQ：4006604884</p>
</div>
</div>

<div class="clearfix" style="margin-top:0px;">
<div class="pull-left comment-list">
<div id="commentSection"></div>
</div>
</div>

<section class="js-disk-questions-dialogue disk-questions-dialogue clearfix">
<div class="dialogue-title-bar">
<p class="dialogue-title">意见反馈</p>
<p class="dialogue-time">14:15</p>
<p class="js-dialogue-close-btn dialogue-close-btn">关闭</p>
</div>
<div class="js-dialogue-details dialogue-details">
<div class="dialogue-auto-response">
<p class="dialogue-auto-response-host">云图客服：</p>
<div class="dialogue-auto-response-content">
<i class="dialogue-auto-response-angle"></i>
<p>尊敬的用户，您好！您有任何提议或者建议都可以在此提出来，我们会谦虚地接受任何意见。</p>
<p class="dialogue-auto-response-tips">或者您是想咨询：</p>
<div>
<a class="dialogue-auto-response-list">1.光盘下载后一定要刻录吗？</a>
<a class="dialogue-auto-response-list">2.下载下来的光盘文件类型，不是镜像文件。</a>
</div>
</div>
</div>
<div class="dialogue-client-question">
<i class="dialogue-client-question-angle"></i>
<p class="dialogue-client-question-content">
用户发送的提问，这种方式就需要有位在线客服来回答用户的问题，这种
就属于对话式的,问题是这种提问是否需要用户登录才能提问</p>
</div>
</div>
<div class="dialogue-msg-trigger">
<textarea class="js-dialogue-msg-input dialogue-msg-input" name="" id=""
placeholder="请输入您的意见"></textarea>
<a class="js-dialogue-msg-send dialogue-msg-send">发送</a>
</div>
</section>


<section class="js-DD-video-wrapper DD-video-wrapper animated">
<div class="js-video-handle DD-video-info clearfix">
<div class="DD-video-title">Video Player</div>
<div class="js-DD-video-close DD-video-close">×</div>
</div>

</section>


<section class="js-DD-audio-wrapper DD-audio-wrapper animated">
<div class="js-audio-handle DD-audio-info clearfix">
<div class="DD-audio-title">Audio Player</div>
<div class="js-DD-audio-close DD-video-close">×</div>
</div>
<div id="aplayer" class="aplayer"></div>
</section>

<section class="js-DD-pdf-wrapper DD-pdf-wrapper">
<div class="js-pdf-handler DD-pdf-info clearfix">
<div class="DD-pdf-title">pdf Player</div>
<div class="js-DD-pdf-close DD-pdf-close">×</div>
</div>
<main tabindex="1" class="loadingInProgress">
<div id="outerContainer">
<div id="sidebarContainer">
<div id="toolbarSidebar">
<div class="splitToolbarButton toggled">
<button id="viewThumbnail" class="toolbarButton group toggled" title="Show Thumbnails"
tabindex="2"
data-l10n-id="thumbs">
<span data-l10n-id="thumbs_label">Thumbnails</span>
</button>
<button id="viewOutline" class="toolbarButton group"
title="Show Document Outline (double-click to expand/collapse all items)"
tabindex="3"
data-l10n-id="document_outline">
<span data-l10n-id="document_outline_label">Document Outline</span>
</button>
<button id="viewAttachments" class="toolbarButton group" title="Show Attachments"
tabindex="4"
data-l10n-id="attachments">
<span data-l10n-id="attachments_label">Attachments</span>
</button>
</div>
</div>
<div id="sidebarContent">
<div id="thumbnailView">
</div>
<div id="outlineView" class="hidden">
</div>
<div id="attachmentsView" class="hidden">
</div>
</div>
</div> 

<div id="mainContainer">
<div class="findbar hidden doorHanger hiddenSmallView" id="findbar">
<label for="findInput" class="toolbarLabel" data-l10n-id="find_label">Find:</label>
<input id="findInput" class="toolbarField" tabindex="91">
<div class="splitToolbarButton">
<button class="toolbarButton findPrevious" title="" id="findPrevious" tabindex="92"
data-l10n-id="find_previous">
<span data-l10n-id="find_previous_label">Previous</span>
</button>
<div class="splitToolbarButtonSeparator"></div>
<button class="toolbarButton findNext" title="" id="findNext" tabindex="93"
data-l10n-id="find_next">
<span data-l10n-id="find_next_label">Next</span>
</button>
</div>
<input type="checkbox" id="findHighlightAll" class="toolbarField" tabindex="94">
<label for="findHighlightAll" class="toolbarLabel" data-l10n-id="find_highlight">Highlight
all</label>
<input type="checkbox" id="findMatchCase" class="toolbarField" tabindex="95">
<label for="findMatchCase" class="toolbarLabel" data-l10n-id="find_match_case_label">Match
case</label>
<span id="findResultsCount" class="toolbarLabel hidden"></span>
<span id="findMsg" class="toolbarLabel"></span>
</div> 

<div id="secondaryToolbar" class="secondaryToolbar hidden doorHangerRight">
<div id="secondaryToolbarButtonContainer">
<button id="secondaryPresentationMode"
class="secondaryToolbarButton presentationMode visibleLargeView"
title="Switch to Presentation Mode" tabindex="51"
data-l10n-id="presentation_mode">
<span data-l10n-id="presentation_mode_label">Presentation Mode</span>
</button>

<button id="secondaryOpenFile" class="secondaryToolbarButton openFile visibleLargeView"
title="Open File" tabindex="52" data-l10n-id="open_file">
<span data-l10n-id="open_file_label">Open</span>
</button>

<button id="secondaryPrint" class="secondaryToolbarButton print visibleMediumView"
title="Print"
tabindex="53" data-l10n-id="print">
<span data-l10n-id="print_label">Print</span>
</button>

<button id="secondaryDownload" class="secondaryToolbarButton download visibleMediumView"
title="Download" tabindex="54" data-l10n-id="download">
<span data-l10n-id="download_label">Download</span>
</button>

<a href="#" id="secondaryViewBookmark"
class="secondaryToolbarButton bookmark visibleSmallView"
title="Current view (copy or open in new window)" tabindex="55"
data-l10n-id="bookmark">
<span data-l10n-id="bookmark_label">Current View</span>
</a>

<div class="horizontalToolbarSeparator visibleLargeView"></div>

<button id="firstPage" class="secondaryToolbarButton firstPage" title="Go to First Page"
tabindex="56"
data-l10n-id="first_page">
<span data-l10n-id="first_page_label">Go to First Page</span>
</button>
<button id="lastPage" class="secondaryToolbarButton lastPage" title="Go to Last Page"
tabindex="57"
data-l10n-id="last_page">
<span data-l10n-id="last_page_label">Go to Last Page</span>
</button>

<div class="horizontalToolbarSeparator"></div>

<button id="pageRotateCw" class="secondaryToolbarButton rotateCw"
title="Rotate Clockwise" tabindex="58"
data-l10n-id="page_rotate_cw">
<span data-l10n-id="page_rotate_cw_label">Rotate Clockwise</span>
</button>
<button id="pageRotateCcw" class="secondaryToolbarButton rotateCcw"
title="Rotate Counterclockwise"
tabindex="59" data-l10n-id="page_rotate_ccw">
<span data-l10n-id="page_rotate_ccw_label">Rotate Counterclockwise</span>
</button>

<div class="horizontalToolbarSeparator"></div>

<button id="toggleHandTool" class="secondaryToolbarButton handTool"
title="Enable hand tool"
tabindex="60" data-l10n-id="hand_tool_enable">
<span data-l10n-id="hand_tool_enable_label">Enable hand tool</span>
</button>

<div class="horizontalToolbarSeparator"></div>

<button id="documentProperties" class="secondaryToolbarButton documentProperties"
title="Document Properties…" tabindex="61" data-l10n-id="document_properties">
<span data-l10n-id="document_properties_label">Document Properties…</span>
</button>
</div>
</div> 

<div class="toolbar">
<div id="toolbarContainer">
<div id="toolbarViewer">
<div id="toolbarViewerLeft">
<button id="sidebarToggle" class="toolbarButton" title="Toggle Sidebar"
tabindex="11"
data-l10n-id="toggle_sidebar">
<span data-l10n-id="toggle_sidebar_label">Toggle Sidebar</span>
</button>
<div class="toolbarButtonSpacer"></div>
<button id="viewFind" class="toolbarButton group hiddenSmallView"
title="Find in Document"
tabindex="12" data-l10n-id="findbar">
<span data-l10n-id="findbar_label">Find</span>
</button>
<div class="splitToolbarButton">
<button class="toolbarButton pageUp" title="Previous Page" id="previous"
tabindex="13"
data-l10n-id="previous">
<span data-l10n-id="previous_label">Previous</span>
</button>
<div class="splitToolbarButtonSeparator"></div>
<button class="toolbarButton pageDown" title="Next Page" id="next"
tabindex="14"
data-l10n-id="next">
<span data-l10n-id="next_label">Next</span>
</button>
</div>
<input type="number" id="pageNumber" class="toolbarField pageNumber"
title="Page" value="1" size="4"
min="1" tabindex="15" data-l10n-id="page">
<span id="numPages" class="toolbarLabel"></span>
</div>
<div id="toolbarViewerRight">
<button id="presentationMode"
class="toolbarButton presentationMode hiddenLargeView"
title="Switch to Presentation Mode" tabindex="31"
data-l10n-id="presentation_mode">
<span data-l10n-id="presentation_mode_label">Presentation Mode</span>
</button>

<button id="openFile" class="toolbarButton openFile hiddenLargeView"
title="Open File" tabindex="32"
data-l10n-id="open_file">
<span data-l10n-id="open_file_label">Open</span>
</button>

<button id="print" class="toolbarButton print hiddenMediumView" title="Print"
tabindex="33"
data-l10n-id="print">
<span data-l10n-id="print_label">Print</span>
</button>

<button id="download" class="toolbarButton download hiddenMediumView"
title="Download" tabindex="34"
data-l10n-id="download">
<span data-l10n-id="download_label">Download</span>
</button>
<a href="#" id="viewBookmark" class="toolbarButton bookmark hiddenSmallView"
title="Current view (copy or open in new window)" tabindex="35"
data-l10n-id="bookmark">
<span data-l10n-id="bookmark_label">Current View</span>
</a>

<div class="verticalToolbarSeparator hiddenSmallView"></div>

<button id="secondaryToolbarToggle" class="toolbarButton" title="Tools"
tabindex="36"
data-l10n-id="tools">
<span data-l10n-id="tools_label">Tools</span>
</button>
</div>
<div id="toolbarViewerMiddle">
<div class="splitToolbarButton">
<button id="zoomOut" class="toolbarButton zoomOut" title="Zoom Out"
tabindex="21"
data-l10n-id="zoom_out">
<span data-l10n-id="zoom_out_label">Zoom Out</span>
</button>
<div class="splitToolbarButtonSeparator"></div>
<button id="zoomIn" class="toolbarButton zoomIn" title="Zoom In"
tabindex="22"
data-l10n-id="zoom_in">
<span data-l10n-id="zoom_in_label">Zoom In</span>
</button>
</div>
<span id="scaleSelectContainer" class="dropdownToolbarButton">
<select id="scaleSelect" title="Zoom" tabindex="23" data-l10n-id="zoom">
<option id="pageAutoOption" title="" value="auto" selected="selected"
data-l10n-id="page_scale_auto">Automatic Zoom</option>
<option id="pageActualOption" title="" value="page-actual" data-l10n-id="page_scale_actual">Actual Size</option>
<option id="pageFitOption" title="" value="page-fit" data-l10n-id="page_scale_fit">Fit Page</option>
<option id="pageWidthOption" title="" value="page-width"
data-l10n-id="page_scale_width">Full Width</option>
<option id="customScaleOption" title="" value="custom" disabled="disabled" hidden="true"></option>
<option title="" value="0.5" data-l10n-id="page_scale_percent"
data-l10n-args='{ "scale": 50 }'>50%</option>
<option title="" value="0.75" data-l10n-id="page_scale_percent"
data-l10n-args='{ "scale": 75 }'>75%</option>
<option title="" value="1" data-l10n-id="page_scale_percent"
data-l10n-args='{ "scale": 100 }'>100%</option>
<option title="" value="1.25" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 125 }'>125%</option>
<option title="" value="1.5" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 150 }'>150%</option>
<option title="" value="2" data-l10n-id="page_scale_percent"
data-l10n-args='{ "scale": 200 }'>200%</option>
<option title="" value="3" data-l10n-id="page_scale_percent"
data-l10n-args='{ "scale": 300 }'>300%</option>
<option title="" value="4" data-l10n-id="page_scale_percent"
data-l10n-args='{ "scale": 400 }'>400%</option>
</select>
</span>
</div>
</div>
<div id="loadingBar">
<div class="progress">
<div class="glimmer">
</div>
</div>
</div>
</div>
</div>

<menu type="context" id="viewerContextMenu">
<menuitem id="contextFirstPage" label="First Page"
data-l10n-id="first_page"></menuitem>
<menuitem id="contextLastPage" label="Last Page"
data-l10n-id="last_page"></menuitem>
<menuitem id="contextPageRotateCw" label="Rotate Clockwise"
data-l10n-id="page_rotate_cw"></menuitem>
<menuitem id="contextPageRotateCcw" label="Rotate Counter-Clockwise"
data-l10n-id="page_rotate_ccw"></menuitem>
</menu>

<div id="viewerContainer" tabindex="0">
<div id="viewer" class="pdfViewer"></div>
</div>

<div id="errorWrapper" hidden='true'>
<div id="errorMessageLeft">
<span id="errorMessage"></span>
<button id="errorShowMore" data-l10n-id="error_more_info">
More Information
</button>
<button id="errorShowLess" data-l10n-id="error_less_info" hidden='true'>
Less Information
</button>
</div>
<div id="errorMessageRight">
<button id="errorClose" data-l10n-id="error_close">
Close
</button>
</div>
<div class="clearBoth"></div>
<textarea id="errorMoreInfo" hidden='true' readonly="readonly"></textarea>
</div>
</div> 

<div id="overlayContainer" class="hidden">
<div id="passwordOverlay" class="container hidden">
<div class="dialog">
<div class="row">
<p id="passwordText" data-l10n-id="password_label">Enter the password to open this
PDF file:</p>
</div>
<div class="row">

<input id="password" class="toolbarField">
</div>
<div class="buttonRow">
<button id="passwordCancel" class="overlayButton"><span
data-l10n-id="password_cancel">Cancel</span>
</button>
<button id="passwordSubmit" class="overlayButton"><span data-l10n-id="password_ok">OK</span>
</button>
</div>
</div>
</div>
<div id="documentPropertiesOverlay" class="container hidden">
<div class="dialog">
<div class="row">
<span data-l10n-id="document_properties_file_name">File name:</span>
<p id="fileNameField">-</p>
</div>
<div class="row">
<span data-l10n-id="document_properties_file_size">File size:</span>
<p id="fileSizeField">-</p>
</div>
<div class="separator"></div>
<div class="row">
<span data-l10n-id="document_properties_title">Title:</span>
<p id="titleField">-</p>
</div>
<div class="row">
<span data-l10n-id="document_properties_author">Author:</span>
<p id="authorField">-</p>
</div>
<div class="row">
<span data-l10n-id="document_properties_subject">Subject:</span>
<p id="subjectField">-</p>
</div>
<div class="row">
<span data-l10n-id="document_properties_keywords">Keywords:</span>
<p id="keywordsField">-</p>
</div>
<div class="row">
<span data-l10n-id="document_properties_creation_date">Creation Date:</span>
<p id="creationDateField">-</p>
</div>
<div class="row">
<span data-l10n-id="document_properties_modification_date">Modification Date:</span>
<p id="modificationDateField">-</p>
</div>
<div class="row">
<span data-l10n-id="document_properties_creator">Creator:</span>
<p id="creatorField">-</p>
</div>
<div class="separator"></div>
<div class="row">
<span data-l10n-id="document_properties_producer">PDF Producer:</span>
<p id="producerField">-</p>
</div>
<div class="row">
<span data-l10n-id="document_properties_version">PDF Version:</span>
<p id="versionField">-</p>
</div>
<div class="row">
<span data-l10n-id="document_properties_page_count">Page Count:</span>
<p id="pageCountField">-</p>
</div>
<div class="buttonRow">
<button id="documentPropertiesClose" class="overlayButton"><span
data-l10n-id="document_properties_close">Close</span></button>
</div>
</div>
</div>
<div id="printServiceOverlay" class="container hidden">
<div class="dialog">
<div class="row">
<span data-l10n-id="print_progress_message">Preparing document for printing…</span>
</div>
<div class="row">
<progress value="0" max="100"></progress>
<span data-l10n-id="print_progress_percent" data-l10n-args='{ "progress": 0 }'
class="relative-progress">0%</span>
</div>
<div class="buttonRow">
<button id="printCancel" class="overlayButton"><span
data-l10n-id="print_progress_close">Cancel</span>
</button>
</div>
</div>
</div>
</div> 

</div> 
<div id="printContainer"></div>
</main>
<div class="DD-pdf-footer"></div>
</section>

</main>

<div class="modal fade" id="verificationCodeModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabelVC"
aria-hidden="true">
<form class="form-horizontal" role="form" method="post" id='formva' action=''>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<div style="text-align: center;">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabelVC">请输入验证码</h4>
</div>
</div>
<div class="modal-body">
<div class="form-group row" style="text-align: center;">
<div class="col-sm-4 col-sm-offset-2">
<input type="text" class="form-control" id="checkCode"
oninvalid="setCustomValidity('请输入验证码')" oninput="setCustomValidity('')"
name="checkCode" required placeholder="输入验证码" autocomplete="off">
</div>
<div class="col-sm-4">
<img src="/book/verificationCode" id="verificationCodeImg" onclick="changeImg();"
alt="看不清？换一张">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" onclick="saveAppInfo()">马上下载</button>
</div>
</div>
</div>
</form>
</div>

<div style="background: #fefefe; display: none;">
<div class="container">

<section class="DD-swiper">
<p class="DD-swiper__title">看过该图书的还喜欢</p>

<div class="js-wrapper-swiper-container wrapper-swiper-container clearfix">
<div class="js-swiper-prev-button swiper-prev-button">
<i class="fa fa-angle-left"></i>
</div>
<div class="swiper-container lf">

<div class="swiper-wrapper">

<div class="swiper-slide">
<div class="swiper-pic-box">
<img class="swiper-pic imgExtend" src="" alt="some pictures">
</div>
<p class="oneline">解忧杂货店</p>
<p class="oneline">东野圭吾 (作者), 李盈春 (译者)</p>
</div>
</div>
</div>
<div class="js-swiper-next-button swiper-next-button">
<i class="fa fa-angle-right"></i>
</div>
</div>
</section>
<div class="row" style="display: none;">
<section class="col-xs-9">

</section>

<section class="col-xs-3">
<aside class="DD-moreRec">
<h2 class="DD-moreRec__title">更多推荐:</h2>
<div class="DD-moreRec-content">
<a class="DD-moreRec-content__item clearfix">
<div class="DD-moreRec-content__pics">
<img class="DD-moreRec-content__pic" src="" alt="a man">
</div>
<p class="oneline">解忧杂货店</p>
<p class="oneline">东野圭吾 (作者), 李盈春 (译者)</p>
</a>
</div>
</aside>
</section>
</div>
</div>
</div>

<div class="modal fade" id="setCoverModal" tabindex="1" role="dialog" aria-labelledby="setCoverModalLabel">
<div class="modal-dialog_2 modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title_2" id="setCoverModalLabel">收录到我的主题</h2>
</div>
<div class="modal-body" style="height: 400px;overflow-y: scroll;overflow-x: hidden">
<section class="changeImg">
<dl>
<dd class="thumb">

</dl>
</section>
</div>
<div class="modal-footer">
<div class="pull-left">
<a class="pull-right modal-include-footer__create" target="_blank"
href='/subject/create'>创建新主题</a>
</div>
<button id="cancel" type="button" class="btn btn-default_2" data-dismiss="modal">取消</button>
<button onclick="include()" id="submitList" class="btn btn-primary_2 btn-submit">确认</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var ids = [];

function include() {
$.ajax({
url: '/subject/include.json?sids=' + ids + '&type=5&resourcesId=9787500642039',
type: 'GET',
success: function () {
window.location.reload();
}
});
}

$(function () {
$('#setCoverModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
var id = button.data('id');
var modal = $(this);
modal.find('.modal-body dt').attr("id", id);
modal.find('dd img').click(function () {
if ($(this).parent().find(".yes_pic").css("display") == "none") {
$(this).parent().css("opacity", "0.6").find(".yes_pic").show();
ids.push($(this).attr("name"));
} else {
$(this).parent().css("opacity", "1").find(".yes_pic").hide();
ids.splice($.inArray($(this).attr("name"), ids), 1);
}
});
});
})
</script>

<div class="js-DD-goToTop DD-goToTop"></div>


<div class="js-DD-show-tips DD-show-tips is-show">
<div>
<p class="DD-show-tips-txt">
<i class="DD-show-tips-bulb"></i>
<span>亲爱的云图用户，<br>光盘内的文件都可以直接点击浏览哦</span>
</p>
<p class="DD-show-tips-txtLine">无需下载，在线查阅资料！</p>
</div>
<span class="js-DD-show-tips-pic DD-show-tips-pic"></span>
<i class="js-DD-show-tips-close DD-show-tips-close is-show"></i>
<i class="js-DD-show-tips-click DD-show-tips-click"></i>
</div>

</div>


<div class="js-pswp-veil pswp-veil__custom animated zoomIn">
<img class="js-pswp-veil__loading pswp-veil__loading" src="/img/book/loading_solarSystem.gif" alt="loading icon">
</div>
<div class="pswp animated zoomIn" tabindex="-1" role="dialog" aria-hidden="true">


<div class="pswp__bg"></div>


<div class="pswp__scroll-wrap">


<div class="pswp__container">
<div class="pswp__item"></div>
<div class="pswp__item"></div>
<div class="pswp__item"></div>
</div>


<div class="pswp__ui pswp__ui--hidden">

<div class="pswp__top-bar">



<div class="pswp__counter"></div>

<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>

<button class="pswp__button pswp__button--share" title="Share"></button>

<button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>

<button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>



<div class="pswp__preloader">
<div class="pswp__preloader__icn">
<div class="pswp__preloader__cut">
<div class="pswp__preloader__donut"></div>
</div>
</div>
</div>
</div>

<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
<div class="pswp__share-tooltip"></div>
</div>

<button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
</button>

<button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
</button>
<div class="pswp__caption">
<div class="pswp__caption__center"></div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="/js/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
<script>
$('.js-disc-chosed').change(function () {
var discFileNameTemp = $(this).children('option:selected').val();
discFileNameTemp = discFileNameTemp.substring(discFileNameTemp.lastIndexOf('/') + 1, discFileNameTemp.lastIndexOf('.'));
disc.discFileName = discFileNameTemp;
disc.init();
});
$('#qrcode').qrcode({width: 200, height: 200, text: "http://preview.libtop.com/disc/detail/7703042065981"});
</script>

<script>
$('body').click(function () {
$(this).find('.js-file-download-btn').fadeOut();
});

function downloadFiles(e) {
$('body').find('.js-file-download-btn').remove();
console.log(e);
if (!$(e.target).hasClass('folder')) {
e.preventDefault();
if(true) {
$(e.target).parent().append('<a class="js-file-download-btn btn btn-sm btn-default" style="position: absolute; left:' + e.offsetX + 'px; top:' + e.offsetY + 'px"' +
' href="https://disc.yuntu.io/file/download/' + $(e.target).parent().attr('data-name') + '/' + $(e.target).parent().attr('data-id') + '.' + disc.getFileExtension($(e.target).text()) + '">下载</a>');
}else{
$(e.target).parent().append('<a class="js-file-download-btn btn btn-sm btn-default" style="position: absolute; left:' + e.offsetX + 'px; top:' + e.offsetY + 'px"' +
' onclick="showLoginByCORS();">下载</a>');
}
}
}

/* 定时器 */
// 小女孩提示区
var timer_tip = setTimeout(function () {
$('.js-DD-show-tips').removeClass('is-show');
$('.js-DD-show-tips-close').removeClass('is-show');
$('.js-DD-show-tips-click').addClass('is-show');
}, 2500);

/* 光盘功能 */
function getDiscFileName() {
var discFileNameTemp = $('.js-disc-chosed option:selected').val();
$('.js-disc-chosed').change(function () {
discFileNameTemp = $(this).children('option:selected').val();
});
discFileNameTemp = discFileNameTemp.substring(discFileNameTemp.lastIndexOf('/') + 1, discFileNameTemp.lastIndexOf('.'));
return discFileNameTemp;
}

var disc = {
xhrJSON: [],
//初始化变量
originalUrl: $('.js-disc-chosed option:selected').val(),
discFileName: '',
// 初始化函数
init: function () {
var ap = null,
me = this;
// 留住this
// 生成第一层树
this.buildOriginalData(this.originalUrl);
/* 绑定事件 */
// 点击根目录回到初始化状态
$('.js-folder-origin-txt').click(function () {
me.backOriginalStatus();
});
// 点击目录树箭头开合文件夹
$('.js-folder-catalog').on('click', '.js-DD-subfolder-angle', function () {
me.folderStatusToggle(this);
});
// 点击目录树文字开合文件夹
$('.js-folder-catalog').on('click', '.js-disc-tree-item.folder', function () {
me.folderStatusToggle(this);
});
// 单击进入文件夹 -- 列表与大图缩略图
$('.js-folder-files-rows').on('click', '.folder-file__txt.folder', function (event) {
event.stopPropagation();
var text = $(this).text();
var folders = $('.js-folders-subitems-second').find('span.js-disc-tree-item.folder');
folders.each(function (index, value) {
if ($(value).text() == text) {
$(value).click();

}
})
});
$('.js-folder-files-list').on('click', '.folder-column-list-fileName.folder', function (event) {
event.stopPropagation();
var text = $(this).text();
var folders = $('.js-folders-subitems-second').find('span.js-disc-tree-item.folder');
folders.each(function (index, value) {
if ($(value).text() == text) {
$(value).click();

}
})
});
// 点击目录树 hover状态切换
$('.js-folder-catalog').on('click', '.subitem', function (event) {
event.stopPropagation();
$('.js-folder-catalog').find('.subitem').removeClass('is-active');
$(this).attr('data-type') != 0 && $(this).addClass('is-active');
});
// 大图缩略图 hover状态切换 -- 显示浮动文字
$('.js-folder-files-rows').on('mouseenter', '.folder-file', function () {
$(this).find('.js-folder-file__float').addClass('is-hover');
});
$('.js-folder-files-rows').on('mouseleave', '.folder-file', function () {
$(this).find('.js-folder-file__float').removeClass('is-hover');
});
// 列表与大图缩略图显示切换
$('.js-folder-row-switch').on('click', function () {
if (!$(this).hasClass('is-active')) {
$(this).addClass('is-active').prev().removeClass('is-active');
$('.js-folder-files-rows').addClass('is-active').prev().removeClass('is-active');
}
});
$('.js-folder-column-switch').on('click', function () {
if (!$(this).hasClass('is-active')) {
$(this).addClass('is-active').next().removeClass('is-active');
$('.js-folder-files-list').addClass('is-active').next().removeClass('is-active');
}
});
// 点击大图缩略图 active状态切换
$('.js-folder-files-rows').on('click', '.folder-file', function (event) {
event.stopPropagation();
$(this).toggleClass('is-active').siblings().removeClass('is-active');
});
// 点击列表缩略图 active状态切换
$('.js-folder-files-list').on('click', '.folder-column-list', function (event) {
event.stopPropagation();
$(this).toggleClass('is-active').siblings().removeClass('is-active');
});
// 打开PDF浏览窗口
$('.js-folder-catalog').on('click', '.js-disc-tree-item.PDF', function () {
me.openPDF(this);
});
$('.js-folder-files-rows').on('click', '.folder-file__txt.PDF', function () {
me.openPDF(this);
});
$('.js-folder-files-list').on('click', '.folder-column-list-fileName.PDF', function () {
me.openPDF(this);
});

// 关闭PDF浏览窗口
$('.js-DD-pdf-close').click(function () {
$('.js-DD-pdf-wrapper').removeClass('is-show');
});
// 打开图片浏览窗口
$('.js-folder-catalog').on('click', '.js-disc-tree-item.png', function () {
me.openImage(this);
});
$('.js-folder-files-rows').on('click', '.folder-file__txt.png', function () {
me.openImage(this);
});
$('.js-folder-files-list').on('click', '.folder-column-list-fileName.png', function () {
me.openImage(this);
});
// 打开音乐播放窗口
$('.js-folder-catalog').on('click', '.js-disc-tree-item.mp3', function () {
me.openAudio(this);
});
$('.js-folder-files-rows').on('click', '.folder-file__txt.mp3', function () {
me.openAudio(this);
});
$('.js-folder-files-list').on('click', '.folder-column-list-fileName.mp3', function () {
me.openAudio(this);
});
// 关闭音乐播放窗口
$('.js-DD-audio-close').click(function () {
$('.js-DD-audio-wrapper').removeClass('flipInX').addClass('flipOutX');
me.ap.pause();
// 监听音乐播放窗口过渡效果
$('.js-DD-audio-wrapper').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
$(this).hasClass('flipOutX') && $(this).removeClass('is-show flipOutX');
});
});
// 打开视频播放窗口
$('.js-folder-catalog').on('click', '.js-disc-tree-item.mp4', function () {
me.openVideo(this);
});
$('.js-folder-files-rows').on('click', '.folder-file__txt.mp4', function () {
me.openVideo(this);
});
$('.js-folder-files-list').on('click', '.folder-column-list-fileName.mp4', function () {
me.openVideo(this);
});
// 关闭视频播放窗口
$('.js-DD-video-wrapper').on('click', '.js-DD-video-close', function () {
$(this).parent().parent().removeClass('fadeInDown').addClass('flipOutX');
// 监听视频播放窗口过渡效果
$('.js-DD-video-wrapper').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
$(this).hasClass('flipOutX') && $(this).removeClass('is-show flipOutX').children().last().remove();
});
});
// 选择多个光盘
$('.js-disc-chosed').change(function () {
me.buildOriginalData($('.js-disc-chosed option:selected').val());
})
},
// 获取图片的真实扩展名
getImgExtension: function (str) {
var fileExtension = '';
str.replace(/\.([a-zA-z1-9]+$)/g, function (index, group1) {
fileExtension = group1.toLowerCase();
});
return fileExtension;
},
// 获取文件的后续扩展名
getFileExtension: function (str) {
var fileExtension = '';
str.replace(/\.([a-zA-z1-9]+$)/g, function (index, group1) {
fileExtension = group1.toLowerCase();
});
switch (fileExtension) {
case '':
return 'folder';
case 'mp4':
case 'swf':
case 'webm':
case 'mkv':
case 'avi':
case 'flv':
case 'vob':
case 'ogg':
case 'ogv':
case 'gifv':
case 'mng':
case 'mov':
case 'qt':
case 'wmv':
case 'yuv':
case 'rm':
case 'rmvb':
case 'amv':
case 'm4v':
case '3gp':
case '3g2':
case 'mxf':
return 'mp4';
case 'doc':
return 'doc PDF';
case 'ppt':
return 'ppt PDF';
case 'lsx':
case 'xlsx':
return 'lsx PDF';
case 'jpg':
case 'jpeg':
case 'png':
case 'gif':
return 'png';
case 'txt':
return 'txt PDF';
case 'pdf':
return 'pdf PDF';
case 'mp3':
return 'mp3';
case 'rar':
case 'zip':
return 'rar';
default:
return 'other';
}
},
// 公用函数 -- 文件的后续扩展名不同返回不同类型文件名称
produceFileType: function (str) {
var fileExtension = '';
str.replace(/\.([a-zA-z1-9]+$)/g, function (index, group1) {
fileExtension = group1.toLowerCase();
});
switch (fileExtension) {
case '':
return '文件夹';
case 'mp4':
return 'MP4视频';
case 'webm':
return 'WEBM视频';
case 'mkv':
return 'MKV视频';
case 'avi':
return 'AVI视频';
case 'flv':
return 'FIV视频';
case 'vob':
case 'ogg':
case 'ogv':
return 'OGG视频';
case 'gifv':
case 'mng':
case 'mov':
return 'MOV视频';
case 'qt':
case 'wmv':
return 'WMV视频';
case 'yuv':
case 'rm':
return 'RM视频';
case 'rmvb':
return 'RMVB视频';
case 'amv':
return 'AMV视频';
case 'm4v':
case '3gp':
case '3g2':
case 'mxf':
return 'MP4视频';
case 'doc':
return 'DOC文档';
case 'ppt':
return 'PPT演示文档';
case 'lsx':
case 'xlsx':
return 'LSX表格';
case 'jpg':
return 'JPG图像';
case 'jpeg':
return 'JPEG图像';
case 'png':
return 'PNG图像';
case 'gif':
return 'GIF图像';
case 'txt':
return 'TXT文本';
case 'pdf':
return 'PDF文件';
case 'mp3':
return 'MP3音频';
case 'rar':
return 'RAR压缩包';
case 'zip':
return 'ZIP压缩包';
default:
return '文件';
}
},
// 加载原始数据
buildOriginalData: function (url) {
var me = this;
$('.js-folders-subitems-second').html('<p class="loading-status">加载中...</p>');
$('.js-folder-files-rows').html('<p class="loading-status">加载中...</p>');
$('.js-folder-column-lists').html('<p class="loading-status">加载中...</p>');
//var fileName = url.substr(url.lastIndexOf('/') + 1, url.lastIndexOf('.'));
console.log('me.discFileName', me.discFileName);
$.get(url, function (data) {
$('.js-folders-subitems-second').html('');
$('.js-folder-files-rows').html('');
$('.js-folder-column-lists').html('');
$.each(data, function (index, value) {
var str = '';
str += (value.type ? '' : '<i class="js-DD-subfolder-angle DD-subfolder-angle"></i>');
str += '<span class="js-disc-tree-item DD-subfolder-txt ' + (value.type ? me.getFileExtension(value.name) + ' no-arrow' : 'folder') + '">' + value.name + '</span>';
str = '<li class="subitem" data-id="' + value.id + '" data-type="' + value.type + '">' + str + (value.type ? '' : '<ul class="js-folders-subitems folders-subitems"></ul>') + '</li>';
$('.js-folders-subitems-second').append(str);

var strRow = '';
strRow += '<p oncontextmenu="downloadFiles(event)" class="folder-file__txt ' + (value.type ? me.getFileExtension(value.name) : "folder") + ' oneLine">' + value.name + '</p>';
// 加载浮动文字
value.name.length >= 8 && (strRow += '<p class="js-folder-file__float folder-file__float">' + value.name + '</p>');
// 文件夹不加载拖到事件
strRow = '<a class="folder-file" data-id="' + value.id + '" data-name="' + me.discFileName + '">' + strRow + '</a>';
$('.js-folder-files-rows').append(strRow);

var strList = '';
strList += '<span oncontextmenu="downloadFiles(event)" class="folder-column-list-fileName ' + (value.type ? me.getFileExtension(value.name) : "folder") + ' oneLine">' + value.name + '</span>';
strList += '<span class="folder-column-list-type">' + me.produceFileType(value.name) + '</span>';
strList += '<span class="folder-column-list-size">' + (value.size ? value.size : "") + '</span>';
strList = '<li class="folder-column-list clearfix" data-id="' + value.id + '" data-type="' + value.type + '" data-name="' + me.discFileName + '">' + strList + '</li>';
$('.js-folder-column-lists').append(strList);
})
})
},
// 目录树回到初始化状态
backOriginalStatus: function () {
var me = this;
$('.js-folder-files-rows').html('<p class="loading-status">加载中...</p>');
$('.js-folder-column-lists').html('<p class="loading-status">加载中...</p>');
$.get(this.originalUrl, function (data) {
$('.js-folder-files-rows').html('');
$('.js-folder-column-lists').html('');
$.each(data, function (index, value) {
var strRow = '';
strRow += '<p oncontextmenu="downloadFiles(event)" class="folder-file__txt ' + (value.type ? me.getFileExtension(value.name) : "folder") + ' oneLine">' + value.name + '</p>';
// 加载浮动文字
value.name.length >= 8 && (strRow += '<p class="js-folder-file__float folder-file__float">' + value.name + '</p>');
// 文件夹不加载拖到事件
strRow = '<a class="folder-file" data-id="' + value.id + '" data-name="' + me.discFileName + '">' + strRow + '</a>';
$('.js-folder-files-rows').append(strRow);

var strList = '';
strList += '<span oncontextmenu="downloadFiles(event)" class="folder-column-list-fileName ' + (value.type ? me.getFileExtension(value.name) : "folder") + ' oneLine">' + value.name + '</span>';
strList += '<span class="folder-column-list-type">' + me.produceFileType(value.name) + '</span>';
strList += '<span class="folder-column-list-size">' + (value.size ? value.size : "") + '</span>';
strList = '<li class="folder-column-list clearfix" data-id="' + value.id + '" data-type="' + value.type + '" data-name="' + me.discFileName + '">' + strList + '</li>';
$('.js-folder-column-lists').append(strList);
})
});
$('.js-folders-subitems-second').find('i.is-open').removeClass('is-open');
$('.js-folders-subitems-second').find('span.is-open').removeClass('is-open');
$('.js-folders-subitems-second').find('.js-folders-subitems.is-show').removeClass('is-show');
},
// 目录树箭头点击手收合文件夹
folderStatusToggle: function (elem) {
// 已经有数据不再发起异步请求
// if(!$(elem).parent().children().last().text()){
var me = this;
var id = $(elem).parent().attr('data-id');
var url = $('.js-disc-chosed option:selected').val() + '?id=' + id;
var target = $(elem).parent().children().last();

target.html('<p class="loading-status">加载中...</p>');
$('.js-folder-files-rows').html('<p class="loading-status">加载中...</p>');
$('.js-folder-column-lists').html('<p class="loading-status">加载中...</p>');
$.get(url, function (data) {
target.html('');
me.xhrJSON[id] = data;
$('.js-folder-files-rows').html('');
$('.js-folder-column-lists').html('');
$.each(data, function (index, value) {
var str = '';
str += (value.type ? '' : '<i class="js-DD-subfolder-angle DD-subfolder-angle"></i>');
str += '<span class="js-disc-tree-item DD-subfolder-txt ' + (value.type ? me.getFileExtension(value.name) + ' no-arrow' : 'folder') + '">' + value.name + '</span>';
str = '<li class="subitem" data-id="' + value.id + '" data-type="' + value.type + '">' + str + (value.type ? '' : '<ul class="js-folders-subitems folders-subitems"></ul>') + '</li>';
target.append(str);

var strRow = '';
strRow += '<p oncontextmenu="downloadFiles(event)" class="folder-file__txt ' + (value.type ? me.getFileExtension(value.name) : "folder") + ' oneLine">' + value.name + '</p>';
// 加载浮动文字
value.name.length >= 8 && (strRow += '<p class="js-folder-file__float folder-file__float">' + value.name + '</p>');
// 文件夹不加载拖到事件
strRow = '<a class="folder-file" data-id="' + value.id + '" data-name="' + me.discFileName + '">' + strRow + '</a>';
$('.js-folder-files-rows').append(strRow);

var strList = '';
strList += '<span oncontextmenu="downloadFiles(event)" class="folder-column-list-fileName ' + (value.type ? me.getFileExtension(value.name) : "folder") + ' oneLine">' + value.name + '</span>';
strList += '<span class="folder-column-list-type">' + me.produceFileType(value.name) + '</span>';
strList += '<span class="folder-column-list-size">' + (value.size ? value.size : "") + '</span>';
strList = '<li class="folder-column-list clearfix" data-id="' + value.id + '" data-type="' + value.type + '" data-name="' + me.discFileName + '">' + strList + '</li>';
$('.js-folder-column-lists').append(strList);
})
});
// }
$(elem).toggleClass('is-open').parent().children().last().toggleClass('is-show');
elem.nodeName == 'I' && $(elem).next().toggleClass('is-open');
elem.nodeName == 'SPAN' && $(elem).prev().toggleClass('is-open');
},
openPDF: function (elem) {
if(true){
$('.js-DD-pdf-wrapper').addClass('is-show').css('top', pageYOffset + 'px');
$('.DD-pdf-title').text($(elem).text());
PDFViewerApplication.open('https://disc.yuntu.io/file/play/7703042065981/' + $(elem).parent().attr('data-id') + '.pdf')
}else{
showLoginByCORS();
}

},
// 打开图片浏览窗口
openImage: function (elem) {
if(true){
$('.js-pswp-veil').addClass('is-show');
$('.js-pswp-veil__loading').css({
'position': 'relative',
'top': window.innerHeight / 2 - ($('.js-pswp-veil__loading').height() / 2)
});
var self = this;
var items = [], imgCounter = 0;
var parents = $(elem).parent().siblings().andSelf().children('.png');
var edge = parents.length;
var curIndex = parents.parent().index($(elem).parent());
parents.each(function (index, elem) {
var myImage = new Image();
myImage.src = 'http://disc.yuntu.io/file/play/7703042065981/' + $(elem).parent().attr("data-id") + '.' + self.getImgExtension($(elem).text());
myImage.addEventListener('load', function () {
var item = {
src: myImage.src,
w: this.naturalWidth,
h: this.naturalHeight,
title: $(elem).text()
};
imgCounter++;
items.push(item);
if (imgCounter >= edge) {
var pswpElement = document.querySelectorAll('.pswp')[0];
var options = {
index: curIndex,
preload: [1, 1],
history: false,
focus: false,
showAnimationDuration: 400,
hideAnimationDuration: 400,
shareButtons: [
{
id: 'shareQQ',
label: '分享到腾讯',
url: "http://connect.qq.com/widget/shareqq/index.html?url=" + window.location.href +
"&title=" + $(elem).text() +
"&desc=" + "我在联图公司的云图网站下载了 HTML标准教程美丽图片，小伙伴也来看看，赶紧下载~！" +
"&pics=" + myImage.src +
"&summary=" + ""
},
{
id: 'shareDouban',
label: '分享到豆瓣',
url: "https://www.douban.com/share/service?href=" + window.location.href +
"&text=" + $(elem).text() +
"&name=" + "美图推荐之 -- " + $(elem).text() + "（来自广州联图：云图网站）" +
"&image=" + myImage.src
},
{
id: 'pinterest',
label: '打印',
url: 'http://www.pinterest.com/pin/create/button/?url={{url}}&media={{image_url}}&description={{text}}'
},
{id: 'download', label: '下载图片', url: myImage.src, download: true}
],
};
var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
gallery.init();
gallery.listen('close', function () {
$('.js-pswp-veil').removeClass('is-show');
$(pswpElement).addClass('animated zoomOut');
});
}
}, false)
})
}else{
showLoginByCORS();
}
},
// 打开音乐播放窗口
openAudio: function (elem) {
if(true){
var me = this;
$('.js-DD-audio-wrapper').addClass('is-show flipInX');
var parents = $(elem).parent().siblings().andSelf().children('.mp3');
var curIndex = parents.parent().index($(elem).parent());
var items = [], item = null;
parents.each(function (index, elem) {
item = {
title: $(elem).text(),
author: '胡艳洁编著' == '' ? '未知' : '胡艳洁编著',
url: "http://disc.yuntu.io/file/play/" + me.discFileName + "/" + $(elem).parent().attr('data-id') + ".mp3",
pic: "http://cover.yuntu.io/73/41/9787500642039.jpg"
};
items.push(item);
});
this.ap = new APlayer({
element: document.getElementById('aplayer'),
narrow: false,
autoplay: false,
showlrc: false,
mutex: true,
theme: '#2dbe60',
mode: 'order',
music: items
});
this.ap.setMusic(curIndex);
}else{
showLoginByCORS();
}
},
// 打开视频播放窗口
openVideo: function (elem) {
if(true){
var me = this;
$('.DD-video-title').text($(elem).text());
var wrapper = $('.js-DD-video-wrapper');
wrapper.hasClass('is-show') ? wrapper.children().last().remove()
: wrapper.addClass('fadeInDown is-show');
wrapper.append('<video class="DD-video-window" controls preload autoplay><source src="http://disc.yuntu.io/file/play/' + me.discFileName + '/'
+ $(elem).parent().attr('data-id') + '.mp4" type="video/mp4"></source></video>');
}else{
showLoginByCORS();
}
}
};

/* 定义公共函数 */
//鼠标右击事件更改
window.onclick = hideContextMenu;
window.onkeypress = escapePress;

function showContextMenu(event) {
$('body> .menuContext').remove();
event.preventDefault();
if(true){
$('body').append('<a href="https://disc.yuntu.io/file/download/7703042065981/' + $(event.target).parent().parent().attr("data-id")
+ '.' + fileExtension($(event.target).text()) + '" class="menuContext">下载</a>');
}else{
$('body').append('<a onclick="showLoginByCORS();" class="menuContext">下载</a>');
}
$('.menuContext').css({
display: 'block',
left: window.event.pageX + 'px',
top: window.event.pageY + 'px'
});
}

function showContextMenu2(event) {
$('body> .menuContext').remove();
event.preventDefault();
if(true){
$('body').append('<a href="https://disc.yuntu.io/file/download/7703042065981/' + $(event.target).parent().attr("data-id")
+ '.' + fileExtension($(event.target).next().text()) + '" class="menuContext">下载</a>');
}else{
$('body').append('<a onclick="showLoginByCORS();" class="menuContext">下载</a>');
}
$('.menuContext').css({
display: 'block',
left: window.event.pageX + 'px',
top: window.event.pageY + 'px'
});
}

function hideContextMenu() {

$('.menuContext').css('display', 'none');
}

function escapePress(event) {
event.keyCode == 27 && hideContextMenu();
}

// 添加收藏
function favoriteSave() {

loginBook();

}

// 删除收藏
function favoriteDelete() {
$.ajax({
url: '/favorite/delete.json?tid=54523d02984ec331335e7e3f&type=5',
type: 'GET',
success: function (data) {
$('#favoriteBtn').html('收藏').parent().attr('href', 'javascript:favoriteSave();').removeClass('is-favour');
$('#favoriteNum').html(data.message);
}
});
}

// 简介长短收展
function briefLengthToggle(selector, length, RegExp) {
var elem = document.querySelectorAll(selector)[0];
var output = elem.textContent || elem.innerText;
var str = output.substring(0, length);
var resultStr = '';
str.replace(RegExp, function (match, p1) {
resultStr += match;
});
var button = document.createElement('button');
button.className = 'book-detail-brief__more';
button.innerHTML = '查看更多';
elem.innerHTML = resultStr;
elem.parentNode.appendChild(button);
button.addEventListener('click', function () {
if (this.innerHTML == '查看更多') {
this.innerHTML = '收起内容';
elem.innerHTML = output;
} else {
this.innerHTML = '查看更多';
elem.innerHTML = resultStr;
window.scrollTo(0, 350);
}
}, false)
}

// 目录长短收展
function catalogLengthToggle() {
if ($(".js-book-brief").height() >= 375) {
$('.js-book-brief-accordion').css('display', 'block');
$(".js-book-brief").css("height", 375 + "px");
}
}

// 出版社和出版年分割分别放到相应的DOM节点
function splitPublicationData() {
'use strict';
var str = "中国青年出版社,2004",
arr = null,
publicationDate = '',
press = '';
str.search(",") != -1 && (arr = str.split(","));
str.search(" ") != -1 && (arr = str.split(" "));
$(".js-book-overview-press").html('出版社：<a href="' + (arr == null ? "javascript:void(0)" : "/book/listByPublisher?keyword=" + arr[0]) + '">' + (arr == null ? '暂无数据' : arr[0]) + '</a>');

$(".js-book-overview-birthday").html('出版年：<a href="javascript:void(0)">' + (arr == null ? '暂无数据' : arr[1]) + '</a>');
}

// 分享功能
function shareLink(url, obj) {
'use strict';
var str = '',
arr = [],
urlStr = '';
for (var key in obj) {
str = (key + '=' + obj[key]);
arr.push(str);
}
urlStr = (url + arr.join('&'));
window.open(urlStr)
}

// 初始化drag drog 事件
var dragElem = null;

function drag_drop(event) {
var albumName = $(dragElem).text();
ap && ap.pause();
ap = new APlayer({
element: document.getElementById('player3'),
narrow: false,
autoplay: true,
showlrc: 1,
mutex: true,
theme: '#2dbe60',
mode: 'circulation',
music: {
title: albumName,
author: ('胡艳洁编著' == '' ? '未知' : '胡艳洁编著'),
url: "http://disc.yuntu.io/file/play/7703042065981/" + $(dragElem).attr('data-id') + ".mp3",
pic: "",
lrc: '[00:00.00]lrc here\n[01:01.00]Support By APlayer.js!'
}
});
dragElem = null;
}

function drag_start(event) {
dragElem = event.target;
}

$(function () {
/* 初始化各种函数 */
// 目录过长，添加控制按钮
catalogLengthToggle();
// 出版社和出版年分割
splitPublicationData();

/* 事件绑定 */
// 简介过长，添加控制按钮
$('.js-book-brief-content').text().length > 600 && briefLengthToggle('.js-book-brief-content', 600, /(\n?.+。)/g);
// 简介目录收起与加载更多按钮
$('.js-book-brief-accordion').click(function () {
if ($(this).text() == '更多') {
$(".js-book-brief").css("height", "auto");
$(this).text("收回");
} else {
$(".js-book-brief").css("height", 375 + "px");
$(this).text("更多");
window.scrollTo(0, 450 + $('.js-book-brief-content').height());
}
});
// 分享功能显示与隐藏
$('.js-DD-interactions__itemShare').hover(function () {
$(this).find('.js-DD-interactions-share').toggleClass('is-show');
});
// 对window的滚动条高度监听
$(window).scroll(function () {
document.body.scrollTop > (window.innerHeight * 0.5) ? $('.js-DD-goToTop').addClass('is-show')
: $('.js-DD-goToTop').removeClass('is-show');
});
// 回到顶部按钮
$('.js-DD-goToTop').click(function () {
window.scrollTo(0, 0);
});
// 小女孩提示区 - 显示提示内容
$('.js-DD-show-tips-pic').click(function () {
$('.js-DD-show-tips').addClass('is-show');
$('.js-DD-show-tips-close').addClass('is-show');
$('.js-DD-show-tips-click').removeClass('is-show');
});
// 小女孩提示区 - 隐藏提示内容
$('.js-DD-show-tips-close').click(function () {
$('.js-DD-show-tips').removeClass('is-show');
$(this).removeClass('is-show');
$('.js-DD-show-tips-click').addClass('is-show');
});
// 分享模块
$(".js-share-link-blog").click(function (event) {
event.preventDefault();
shareLink("http://service.weibo.com/share/share.php?", {
url: window.location.href,
title: "一篇好书推荐之 -- HTML标准教程（来自广州联图：云图网站）",
pic: "http://cover.yuntu.io/73/41/9787500642039.jpg",
appkey: ""
});
});
$(".js-share-link-renren").click(function (event) {
event.preventDefault();
shareLink("http://widget.renren.com/dialog/share?", {
resourceUrl: window.location.href,
srcUrl: window.location.href,
title: "一篇好书推荐之 -- HTML标准教程（来自广州联图：云图网站）",
pic: "http://cover.yuntu.io/73/41/9787500642039.jpg",
description: "胡艳洁编著中国青年出版社,2004"
});
});
$(".js-share-link-qq").click(function (event) {
event.preventDefault();
shareLink("http://connect.qq.com/widget/shareqq/index.html?", {
url: window.location.href,
title: "HTML标准教程",
desc: "一篇好书推荐之 -- HTML标准教程（来自广州联图：云图网站）",
pics: "http://cover.yuntu.io/73/41/9787500642039.jpg",
summary: "胡艳洁编著中国青年出版社,2004"
});
});
$(".js-share-link-douban").click(function () {
event.preventDefault();
shareLink("https://www.douban.com/share/service?", {
href: window.location.href,
text: "胡艳洁编著中国青年出版社,2004",
name: "一篇好书推荐之 -- HTML标准教程（来自广州联图：云图网站）",
image: "http://cover.yuntu.io/73/41/9787500642039.jpg"
});
});
disc.discFileName = getDiscFileName();
// 光盘初始化函数
disc.init();

/* Swiper plugin */
// Swiper plugin -- control recommend favorite part
var mySwiper = new Swiper('.swiper-container', {
slidesPerView: 6,
speed: 400,
spaceBetween: 38,
prevButton: '.swiper-prev-button',
nextButton: '.swiper-next-button',
autoplay: 3000,
keyboardControl: true,
preloadImages: false,
lazyLoading: true
});
// Swiper -- hover status
$('.js-wrapper-swiper-container').hover(function () {
$('.js-swiper-prev-button').toggleClass('is-show');
$('.js-swiper-next-button').toggleClass('is-show');
});

})
</script>
<script>
var currentFileName;

function verificationCodeModal() {
changeImg();
$('#verificationCodeModal').modal('show');
}

$('.showZhengPan').bind('click', function () {
currentFileName = $(this).attr('data-name');
verificationCodeModal();
});

function changeImg() {
$('#verificationCodeImg').attr('src', '/book/verificationCode?t=' + new Date().getTime());
// 清空验证码
$('#checkCode').val('');
}

function saveAppInfo() {
var text = $.trim($('#checkCode').val());
$.post('/disc/checkCaptcha.json', {
captcha: text,
encryptedIsbn: '7703042065981',
fileName: currentFileName
}, function (data) {
if (data.code === '1') {
window.location.href = data.downloadUrl;
$('#verificationCodeModal').modal('hide');
// $('#verificationCodeModal').on('hidden.bs.modal', function () {
// // 可以下载了
// console.log('下载地址----------', data.downloadUrl);
// // 首先，只有原生的dom才可以直接点击
// // 其次，jquery需要点击只能是a包含的元素
// // 点击事件.click(function(){})
// $('.showZhengPan').attr('href', data.downloadUrl).get(0).click();
// $('.showZhengPan').attr('href', data.downloadUrl).get(0).click().end();
// })
} else {
changeImg();
}
});
$('#checkCode').val('');
}
</script>
<script>
$(function () {

$(function () {
$("#commentSection").load("/comment/list?tid=54523d02984ec331335e7e3f&type=5");
});
/* 书本简介信息 - 标签及意见反馈 */
// Dialogue display toggle
$('.js-response-question').on('click', function () {
$('.js-disk-questions-dialogue').toggleClass('is-show');
});
// Dialogue Button closure
$('.js-dialogue-close-btn').on('click', function () {
$('.js-disk-questions-dialogue').removeClass('is-show');
});
// Dialog -- auto response questions
$('.dialogue-auto-response-list').click(function (event) {
console.log(event, '1');
var str = '<div class="dialogue-auto-response"> <p class="dialogue-auto-response-host">云图客服：</p> <div class="dialogue-auto-response-content">' +
'<i class="dialogue-auto-response-angle"></i> <p>1.光盘下载后一定要刻录吗？</p> <p class="dialogue-auto-response-tips">' +
'回答：尊敬的用户，您好。。。用户发送的提问，这种方式就需要有位在线客服来回答用户的问题，这种就属于对话式的,问题是这种提问是否需要用户登录才能提问</p> </div> </div>';
$(this).parents('.js-disk-questions-dialogue').find('.js-dialogue-details').append(str).scrollTop(5000);
});
// Dialog -- message send
$('.js-dialogue-msg-send').click(function () {
var txt = $(this).prev().val().trim();
if (txt) {
var str = '<div class="dialogue-client-question"> <i class="dialogue-client-question-angle"></i>' +
'<p class="dialogue-client-question-content"> ' + txt + '</p> </div>';
$('.js-dialogue-details').append(str).delay(50).scrollTop(5000);
$('.js-dialogue-msg-input').val('').next().removeClass('active');
}
});
$('.js-dialogue-msg-input').keyup(function () {
if ($(this).val()) {
$(this).next().addClass('active');
} else {
$(this).next().removeClass('active');
}
});
})
</script>

</div>

<!DOCTYPE html>
<style type="text/css">
/*===== footer =======*/
.footer-wrap {
width: 100%;
height: 210px;
margin-top: 20px;
background: #EFF3F5;
line-height: 20px;
border-top: 1px solid #D8DBE5;
}

.footer {
position: relative;
width: 1200px;
padding: 40px 0 0 0;
margin: 0 auto;
text-align: left;
/*color: #666;*/
}

.footer-statements {
line-height: 4em;
}

.footer-statement-link {
padding-left: 40px;
color: #bdc3c7;
}

.footer-copyright {
line-height: 7em;
}

.footer-copyright-link {
padding-left: 40px;
color: #bdc3c7;
}

.footer-wechet {
position: absolute;
top: 20px;
right: 0;
}

.footer-copyright-libtop {
position: relative;
top: -5px;
}

.footer-wechet-app, .footer-wechet-public {
margin-top: 15px;
}

.footer-wechet-public {
position: absolute;
top: 0;
right: 150px;
}

.footer-wechet-picture {
background: #FFF;
padding: 4px;
border-radius: 2px;
}

.footer-wechet-txt {
line-height: 32px;
margin: 0;
font-size: 15px;
text-align: center;
color: #bdc3c7;
}
</style>
<div class="container footer-wrap" id="footer_container" style="background-color: #2c3e50;color: #bdc3c7">
<footer class="footer clearfix" >
<div class="footer-about-us">
<div class="footer-statements">
<a class="footer-statement-link" href="/temp/aboutUs">关于我们</a>
<a class="footer-statement-link" href="/temp/copyright">版权声明</a>
<a class="footer-statement-link" href="/temp/antiLeech">反盗链声明</a>
<a class="footer-statement-link" href="/suggestion/index">用户反馈</a>
</div>
<div class="footer-copyright">
<a href="/">
<img class="footer-copyright-libtop" src="/img/index/libtop_logo.png" alt="">
</a>
<span class="footer-copyright-link">Copyright © 2012-2024 联图云.光盘v1.0.<a href="http://beian.miit.gov.cn/">粤ICP备09162136号</a></span>
<a class="footer-copyright-link" href="/temp/aboutUs">广州联图电子科技有限公司</a>
</div>

</div>
<div class="footer-wechet">
<div class="footer-wechet-app">
<img class="footer-wechet-picture" src="/img/weitu/weitu-logo-new.png" width="120" alt="微图书馆 APP 下载">
<p class="footer-wechet-txt">微图书馆 APP 下载</p>
</div>
<div class="footer-wechet-public">
<img class="footer-wechet-picture" src="/img/weitu/weitu-weixin-new.png" width="120" alt="微图书馆公众号">
<p class="footer-wechet-txt">微图书馆公众号</p>
</div>
</div>

<script>
$("a").each(function () {
$(this).click(
$(this).attr('href',encodeURI($(this).attr('href')))
);

})
</script>
</footer>

<script>
var _hmt = _hmt || [];
(function () {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?703adfe6f565754028f7850563b9c9a3";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>

</div>



</body>
</html>}}