入手 Kindle 后开始自己做 ePub,之前一直用原生系统,使用的弹出注释代码如下:

<p class="P_Footnote" id="ref_footnotebookmark_end_9_1"><span style=" font-size: 0.75em; vertical-align: super;"><a href="#ref_footnotebookmark_start_9_1">①</a></span>注释的内容</p>

  逐渐由于制作 ePub 的需要,我开始使用多看系统,这时候原生系统弹出注释代码失效,这样就造成极大的不便——我必须制作两个不同的 ePub 来适应系统切换。多看弹出注释代码如下:

<ol class="duokan-footnote-content">
<li class="duokan-footnote-item" id="a_1_1"><a href="#c_1_1">这里是注释</li>
</ol>

  于是我开始寻求一种方法,使得弹窗注释能支持原生和多看。上面的两处代码中可以发现,原生系统的弹窗注释基于标签<p>,而多看系统的弹窗注释依赖于<ol>,于是我有一个思路,如果将两个标签嵌套使用,是否就能实现双系统的弹窗呢?

  一开始我将<p>嵌套在<li>中,将<p>嵌套在<a>中,代码如下:

 <ol class="duokan-footnote-content">
<li class="duokan-footnote-item" id="a_1_1">
<p><a href="#c_1_1">这里是注释</a></p>
</li>
</ol>
<!--<p>嵌套在<li>-->
 <ol class="duokan-footnote-content">
<li class="duokan-footnote-item" id="a_1_1">
<a href="#c_1_1"><p>这里是注释</p></a>
</li>
</ol>
<!--<p>嵌套在<a>-->

  然而这两种方法在实际测试中都失效。不过在论坛坛友的指点下,找到了这么一种方法,代码如下:

 <ol class="duokan-footnote-content">
<li class="duokan-footnote-item" id="ref_footnotebookmark_end_1_1">
<p class="f"><a href="#ref_footnotebookmark_start_1_1">这里是注释</a>​​​​​​​​​</p>
</li>
</ol>

P.S. "​"这个字串是 Zero-width space ( 零宽度非换行空格 )

P.S.想要批量修改可以使用通配符,如下:

Search:<li class="duokan-footnote-item" id="(.*?)"><a href="#(.*?)">(.*?)</li>

Replace:<li class="duokan-footnote-item" id="\1"><p class="f"><a href="#\2">\3</a>​​​​​​​​​​</p>

实现 kindle 原生系统、多看系弹出注释的通用写法的更多相关文章

  1. 原生Js封装的弹出框-弹出窗口-页面居中-多状态可选

    原生Js封装的弹出框-弹出窗口-页面居中-多状态可选   实现了一下功能: 1.title可自定义 可拖拽 2.width height可以自定义 3.背景遮罩和透明度可以自定义 4.可以自己编辑弹出 ...

  2. PHPCMS系统使用的弹出窗口插件artDialog

    来源: http://aui.github.io/artDialog/doc/index.html  (官方) http://lab.seaning.com/ http://www.mb5u.com/ ...

  3. (三)原生JS实现 - 插件 - 弹出层

    创建遮罩层 _createCover: function() { var newMask = document.createElement("div"); newMask.id = ...

  4. html、css和js原生写一个模态弹出框,顺便解决父元素半透明子元素不透明效果

    模态框: html部分: <!-- 按钮 --> <button id="box" onclick="pop_box()">弹出框< ...

  5. 四种常见的提示弹出框(success,warning,error,loading)原生JavaScript和jQuery分别实现

    原文:四种常见的提示弹出框(success,warning,error,loading)原生JavaScript和jQuery分别实现 虽然说现在官方的自带插件已经有很多了,但是有时候往往不能满足我们 ...

  6. wpf Popup Win8.0 bug HorizontalOffset 弹出位置偏移

    问题描述参考 wpf 客户端[JDAgent桌面助手]开发详解(四) popup控件的win8.0的bug 当开发完程序后,我们在多操作系统测试时候发现:win8.0  系统中 popup 弹出的位置 ...

  7. 禁用 WebView 放大镜及拷贝粘贴弹出框

    文/KyXu(简书作者)原文链接:http://www.jianshu.com/p/40048d9c979a著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. 背景:当你的App中有 We ...

  8. html点击按钮 弹出 多选择窗口级联下拉复选

    参考代码 代码示例1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...

  9. ASP.NET查询页面设置form的action属性只弹出一个页面,并且每次将页面设置到最前

    原文:ASP.NET查询页面设置form的action属性只弹出一个页面,并且每次将页面设置到最前 背景 当数据量大.查询条件复杂,多样多的时候,我们可能需要单独做一个查询界面,当用户选择设置了相关的 ...

随机推荐

  1. log4net配置的两种方式

    ----------文件配置:------------------- <?xml version="1.0" encoding="utf-8" ?> ...

  2. Ruby学习资源汇总

    from:http://segmentfault.com/a/1190000000362058 Ruby 语言 Try Ruby: 无需在你的系统中安装.Ruby,只要通过浏览器便可立即体验 Ruby ...

  3. 高性能的JavaScript -- 读书笔记

    高性能的JavaScript 一.      加载和运行 将脚本放在底部 脚本下载解析执行时,页面已经加载完成并显示在用户面前 成组脚本 减少外部脚本文件数量,整合成一个文件 延迟脚本 动态脚本元素 ...

  4. Xcode快捷键整理

    下面是Xcode比较常用的快捷键,特别是红色标注的,很常用.用熟了开发编辑代码的的时候就很方便,希望对大家有用~1. 文件CMD + N: 新文件CMD + SHIFT + N: 新项目CMD + O ...

  5. 利用FlashPaper实现类似百度文库功能

    最近需要实现一个类似百度文库的功能,在Google上淘了一段时间,发现FlashPaper还算能够不错的实现此需求. 首先讲下思路: 1>安装FlashPaper: 2>利用java代码将 ...

  6. MVC网站发布常见问题

    直接发布的时候生成的bin会漏掉一些文件,从而导致网站无法访问: 解决方法:发布之后,再在本地运行一下网站,然后将运行后生成的bin文件夹下的文件拷贝到发布的文件夹目录下进行覆盖,就可以了

  7. FluorineFx 播放FLV 时堆棧溢出解决 FluorineFx NetStream.play 并发时,无法全部连接成功的解决办法

    http://25swf.blogbus.com/tag/FluorineFx/ http://www.doc88.com/p-7002019966618.html  基于Red5的视频监控系统的研究 ...

  8. android之多媒体篇(一)

    Android 4.0.3(Api Level 15)支持的多媒体格式. 注意:有些设备可能支持其他的文件格式. 1.Audio AAC LC/LTP.HE-AACv1(AAC+).AMR-NB.AM ...

  9. iOS开发——高级UI—OC篇&退出键盘

    退出键盘 iOS开发中键盘的退出方法用很多中我们应该在合适的地方使用合适的方法才能更好的提高开发的效率和应用的性能 下面给大家介绍几种最常用的键盘退出方法,基本上iOS开发中的键盘退出方法都是这几种中 ...

  10. php调试小技巧

    /** * 用来调试输出结果 * @param type $data * @return type */ function shionyu_debug($data) { ob_start(); var ...