mootools_MooTools 1.2 OpenLinks插件

mootools

I often incorporate tools into my customers' websites that allow them to have some control over the content on their website. When doing so, I offer some tips to my clients to help them keep their website in good shape. One of the tips I tell my customer is "whenever you create links to PDFs, Excel XLS', Word DOCs, or JPG/GIF/PNG images, make the link open in a new window." Unfortunately, my customers don't always follow this guideline.

我经常将工具整合到客户的网站中，从而使他们可以控制其网站上的内容。 这样做时，我会向客户提供一些提示，以帮助他们保持网站的良好状态。 我告诉客户的提示之一是“每当您创建指向PDF，Excel XLS'，Word DOC或JPG / GIF / PNG图像的链接时，请在新窗口中打开该链接。” 不幸的是，我的客户并不总是遵循此准则。

In an effort to correct their mistakes, I've created a MooTools class that analyzes links on the page and adds a target attribute when necessary.

为了纠正他们的错误，我创建了一个MooTools类，该类分析页面上的链接并在必要时添加target属性。

用法 (The Usage)

window.addEvent('domready', function() {
var olinks = new OpenLinks(['doc','pdf','xls','jpg','gif','png'],1,'_that_window','no-target');
});

The class takes four arguments:

该类有四个参数：

• file_extensions: an array of file extensions you would like to open in a new/specified window. Add file extensions without the '.' and lower-cased.

  file_extensions ：您要在新的/指定的窗口中打开的文件扩展名数组。 添加不带“。”的文件扩展名。 和小写。

• override_targets: boolean, representing whether you want an anchor's "target" attribute to be overidden

  override_targets ：布尔值，表示是否要覆盖锚点的“ target”属性

• target: string, defaults to "_blank" if none provided

  target ：字符串，如果未提供，则默认为“ _blank”

• no_class: if you don't want a link's target attribute set, add your custom class to those links.

  no_class ：如果您不想设置链接的target属性，则将自定义类添加到这些链接中。

As you can see in the code example above, I want the following file extensions to open in a window named "_that_window": Word DOCs, PDFs, XLS files, JPGs, GIFs, and PNGs. Links with the class no-target are not modified, even if the file extension is a match.

如您在上面的代码示例中所看到的，我希望在名为“ _that_window”的窗口中打开以下文件扩展名：Word DOC，PDF，XLS文件，JPG，GIF和PNG。 即使文件扩展名匹配，带有no-target类的链接也不会被修改。

Moo JavaScript (The Moo JavaScript)

var OpenLinks = new Class({
//initialization
initialize: function(file_extensions,override_targets,target,no_class) {

//analyze all anchors
$$('a').each(function(el) {

//check each href for case-insensitive file extensions
var str = el.get('href');
var ext = str.substring(str.lastIndexOf('.') + 1,str.length)
if(file_extensions.contains(ext.toLowerCase()) && ((override_targets || !el.get('target')) && !el.hasClass(no_class + '')))
{
el.setProperty('target',target ? target : '_blank');
}
});
}
});

流 (The Flow)

For every link in the document, I extract the file extension. If the link's file extension is in the array of marked file extensions...and the link's target can be overridden or the link doesn't have a target set...and the link doesn't have the specified class...the link is then modified. It's that simple!

对于文档中的每个链接，我都提取文件扩展名。 如果链接的文件扩展名位于标记的文件扩展名的数组中...并且链接的目标可以被覆盖或链接没有目标集...并且链接没有指定的类...则链接然后被修改。 就这么简单！

Click here to view an example of the class in use.

单击此处查看正在使用的类的示例。

Click here to download the class in an external .js file.

单击此处 ，将类下载到外部.js文件中。

注意 (Note)

I'd initially built the class to use more specific CSS selectors:

我最初构建该类以使用更多特定CSS选择器：

a[href$='.pdf'], a[href$='.jpg'], a[href$='.doc']//...

The problem with doing this is that the above method doesn't allow for case-insensitiveness. For example, "pdf" would match but "PDF" would not.

这样做的问题是上述方法不允许区分大小写。 例如，“ pdf”将匹配，但“ PDF”将不匹配。

更新资料 (Update)

MooTools dev digitarald caught wind of my class and coded the following JavaScript to make the class' code a bit shorter:

MooTools开发人员digitarald吸引了我的班级，并对以下JavaScript进行了编码，以使班级的代码更短：

// a lovely fast case-insensitive regexp build from file extensions
var rex = new RegExp('\\.(?:' + file_extensions.join('|') + ')$', 'i');
 
// href und target sind native properties for links, no get() needed
// no_class is now a required parameter
target = target || '_blank';
 
$$('a[href]:not(.' + no_class + ')').each(function(el) {
  if ((force || !el.target) && rex.test(el.href)) el.target = target;
});

Thank you dig'!

谢谢你挖'！

翻译自: https://davidwalsh.name/mootools-open-links-plugin

mootools