JavaScript故事的书签

Question

我正在研究ePen，这是一个可以创建HTML导出的小说编辑。为了让读者更容易理解故事，我想到了支持页面上可见的书签（这样你就可以标记文本的一部分或将图像拖到粘贴的地方）。这些信息应保存在cookie中，并在读者返回时重新加载，以便他们可以快速跳转到页面并放置在他们离开的位置。

我有什么选择？这样的事情已经存在吗？你见过类似的东西吗？

Answer 1

我已经实施了解决方案in my Haul story。有关JavaScript的信息，请参阅bookmarks.js，您需要DIV（请参阅页面源代码中的bookmarkContainer）以及bookmark.css和jQuery中的几个脚本（jquery-1.4.2.js, jquery-ui-1.8rc2.custom.min.js, jquery.cookie.js, jquery.url_toolbox.js, jquery.timers-1.2.js）。

页面中的嵌入式脚本（bookmark.js之前）定义书签信息的cookie名称（全局变量BOOKMARK_COOKIE）。

Answer 2

您可以使用javascript滚动到页面的一部分。因此，如果你有一个可以拖动的元素，你可以采用它的坐标并保存它。当有人想要转到书签时，您可以滚动到已保存的坐标。

window.scrollTo(left, top)是滚动到页面一部分的功能。

使用jQuery等框架可以轻松添加拖动行为。如果你然后获得偏移量并将其保存在某个地方，那么恢复它并不会那么难。