在页面上创建叠加的书签

Question

我一直在寻找一种方法,使用书签在页面的右上角显示一个简单的红色div,但似乎无法在网上找到任何教程.任何人都可以快速了解我如何创建这样的书签？

Answer 1

要创建一个书签一般或只是如何使用JavaScript显示框？

将您的东西添加到右上角的身体

让我们从后一部分开始 - 你标记了jquery,所以让我们去吧(虽然对于书签来说可能有点重):

// create the element:
var $e = $('<div id="yourelement"></div>');

// append it to the body:
$('body').append($e);

// style it:
$e.css({
    position: 'absolute',
    top: '10px',
    right: '10px',
    width: '200px',
    height: '90px',
    backgroundColor: 'red'
});

这就是你所需要的......

创建书签的最简单方法,包括jquery

我们需要做什么:

1. 将上面的代码保存到服务器上托管的javascript文件中.
2. 创建一段javascript代码,将jquery和新托管的javascript文件添加到当前页面的正文中
3. 将javascript代码放在<a>标记内.

这是执行此操作的代码:

javascript:var i,s,ss=['http://yourdomain.com/path-to-your-script','http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js'];for(i=0;i!=ss.length;i++){s=document.createElement('script');s.src=ss[i];document.body.appendChild(s);}void(0);

它只是循环遍历一个数组并将<script>标记附加到它的主体,并将两个javascript文件的路径作为src.

至于创建bookmarklet本身,你只需将所有代码放在<a>tag中,就像这样(注意双引号):

<a href="javascript:javascript:var i,s,ss=['http://yourdomain.com/path-to-your-script','http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js'];for(i=0;i!=ss.length;i++){s=document.createElement('script');s.src=ss[i];document.body.appendChild(s);}void(0);">Drag me to your toolbar</a>

就是这样.

请注意,bookmarklet实际上覆盖了网站上使用的jquery版本,如果有的话......可能会破坏一些网站......

有关创建bookmarklet的更多信息:

http://betterexplained.com/articles/how-to-make-a-bookmarklet-for-your-web-application/