Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/mrcgrtz/jquery-externalize

Externalize is a JavaScript solution (read: jQuery plugin) which unobtrusively adds external window creation to a bunch of links.
https://github.com/mrcgrtz/jquery-externalize

jquery jquery-plugin links target-blank window

Last synced: 13 days ago
JSON representation

Externalize is a JavaScript solution (read: jQuery plugin) which unobtrusively adds external window creation to a bunch of links.

Awesome Lists containing this project

README

        

# Externalize

> Externalize is a jQuery plugin which unobtrusively adds external window creation to a bunch of links. It’s ridiculously small (< 1kB g’zipped).

[![Test](https://github.com/mrcgrtz/jquery-externalize/actions/workflows/test.yml/badge.svg)](https://github.com/mrcgrtz/jquery-externalize/actions/workflows/test.yml)
[![Coverage Status](https://coveralls.io/repos/github/mrcgrtz/jquery-externalize/badge.svg?branch=main)](https://coveralls.io/github/mrcgrtz/jquery-externalize?branch=main)
[![MIT license](https://img.shields.io/github/license/mrcgrtz/jquery-externalize.svg)](https://github.com/mrcgrtz/jquery-externalize/blob/main/LICENSE.md)

## Why?

In the past I used XHTML 1.0 Strict which prohibited the `target` attribute. Whenever I had a client who wanted to open some links in a new window, I told them this, and I really did not want to switch to ugly Transitional doctypes. But most of the time they insisted on new windows, so I created a solution written in JavaScript which eventually became the one in this repository.

Now everybody uses HTML5 which is fine. You may go and use `target` again.

I for myself use this as a _playground_ for writing and maintaining jQuery plugins. :-)

## Install

Using [npm](https://www.npmjs.com/get-npm):

```bash
npm install jquery-externalize
```

Using [yarn](https://yarnpkg.com/):

```bash
yarn add jquery-externalize
```

## Usage

Externalize is chainable and highly customizable (well, as customizable as it can get by now) by using these options:

* `name`, sets the external window’s name (string, default: `"external"`)
* `target`, determines wether to use the `target` HTML attribute to support Firefox’s tab handling and Safari’s status bar info or not (boolean, default: `true`)
* `classes`, applies CSS classes to an external link (string, default: `""`)
* `relation`, applies a relationship to an external link (string, default: `"external"`)
* `title`, sets the text added as or appended to the `title` attribute to inform the user about an upcoming new window (string, default: `"Opens in a new window"`)

## Examples

The most common use case would be:

```html

Go to example site

$('a[href*="//"]').externalize();

```

As a result we get a link that makes use of HTML5’s `external` relationship attribute and which features a descriptive `title` attribute in English and a plain old `target` attribute to open up a new window:

```html

Go to example site


```

Another use case: Opening PDF files in a new window.

```html

Download PDF

$('a[href$=".pdf"]').externalize({
target: false
});

```

This becomes a link with an `onClick` event to open a new window:

```html

Download PDF


```

## License

MIT © [Marc Görtz](https://marcgoertz.de/)