添加到收藏夹按钮,用于添加收藏的html页面

时间:2014-04-25 23:58:25

标签: javascript jquery html favorite

我正在创建一个包含特定月份不同活动的移动网站。我想在每个活动页面上添加一个按钮,让用户添加不同的收藏夹'。我希望当用户点击添加到收藏夹按钮时,该事件应自动添加到html页面'收藏夹'

1 个答案:

答案 0 :(得分:0)

我会使用一个小的javascript,外部并调用事件页面(因为它会有很多实例)。这实际上是一个非常简单的过程。

  
      
  • 创建一个名为favorites.js
  • 的新javascript文件   
  • 使用以下代码保存:
  •   

已修改为支持Opera

    function bookmark(title,url){

    var sPath = window.location.pathname;

    var sPage = sPath.substring(sPath.lastIndexOf('/') + 1);

    url =url+sPage;

    if (window.sidebar) // firefox

    window.sidebar.addPanel(title, url, "");

    else if(window.opera && window.print){ // opera

    var elem = document.createElement('a');

    elem.setAttribute('href',url);

    elem.setAttribute('title',title);

    elem.setAttribute('rel','sidebar');

    elem.click();

    }

    else if(document.all)// ie

    window.external.AddFavorite(url, title);

}
  • 在您编写的每个HTML文档的头部,您需要调用此脚本(与调用CSS定义非常相似):

    <script src="**/dir/**favorites.js" charset="UTF-8" type="text/javascript" defer/></script>

延迟是可选的,但建议使用这样的脚本,这对于页面的运行并不重要。但是,如果您希望用户可以在加载页面的其余部分之前使用添加到书签功能,则可以将延迟更改为 async

现在你快到了。此时,为了节省一些挫败感,请确保在尝试使用链接之前加载页面时没有错误。这将确保您的javascript或现有代码没有错误。

  • 要使用添加到收藏夹按钮,就像使用锚点和链接一样简单。特别是使用此脚本的链接如下所示:

    <a href="javascript:bookmark()">bookmark me</a>

<a href="javascript:bookmark()"><img src="imgs/bookmarklogo.png" **other-img-definition-stuff**></a>

在过去,通常使用表单按钮,如下所示:

<input type="button" name="Bookmark this page" onclick="bookmark()" />

自从我真的困扰自己使用HTML / CSS以来,已经有好几年了,在那个时候,AddThis等选项已经出现。如果你觉得这个任务太难了,我会选择那样的东西。此外,我还建议您远离手动编码并转到某种CMS,例如DrupalWordpress。特别是如果你的时间紧迫。