Skip to main content
100%

Basic jQuery Plugin Anatomy

✓ Published0🌍 Public
Aamoradi
Last edited Oct 7, 2014
Created on Oct 7, 2014

This example demonstrates a basic jQuery plugin that locates every anchor element within a selected collection and appends its href attribute in parentheses to the link text. The code defines the custom method `showLinkLocation` on `$.fn`, using an immediately invoked function expression to pass the jQuery object and maintain the `$` alias. It filters the collection for `a` elements, iterates with `.each()`, and appends the attribute using jQuery’s `append()` and `attr()` methods. The plugin returns `this` to preserve chaining. No external data source is used; the behavior operates entirely on the provided DOM selection.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 2910053

This example demonstrates a small jQuery plugin that links rendered DOM elements back to their underlying data items. The plugin defines a `spine` method with two commands: `item`, which retrieves the data object associated with an element (using jQuery’s `.data()` or a template’s `tmplItem()`), and `forItem`, which filters a set of elements to find those matching a given data object via an `eql` comparison. The code uses jQuery templates and the `$.fn.spine` API, showing how to build reusable, chainable data-binding utilities for interactive visualizations.

Aabernier
63% match
Loading thumbnail…

Gist 305339

This example demonstrates a reusable jQuery plugin pattern for encapsulating a custom visualization or interaction, applying it to selected DOM elements with configurable defaults. The code defines a `PluginClass` that initializes on plugin call, using `$.fn.extend` and `$.extend` to merge user options with defaults. It shows the structural scaffolding for a visualization module, though it contains no actual rendering logic or data-binding calls. The implementation relies on jQuery’s event and DOM utilities, with the plugin returning `this` to support method chaining, a common convention for jQuery-based visual components. The source is a single JavaScript file from a gist, focusing on code organization rather than visual output.

DDylanFM
61% match
Loading thumbnail…

Link anatomy

This interactive HTML page dissects a URL into its semantic components—protocol, host, port, pathname, search, and hash—by displaying each part as a clickable span. Hovering over a component highlights it with a tooltip label, while clicking sets the page’s hash to that component’s ID, updating the browser location. The implementation uses jQuery for click handling and CSS pseudo-elements for tooltips, with a fixed example URL hardcoded in the markup.

Aabernier
60% match
Loading thumbnail…

Gist 46260

This example shows a set of hoverable links that reveal hidden text spans when the mouse enters or leaves each link. The code uses jQuery’s `.hover()` method to toggle the visibility of the corresponding `.hoverable span` elements, with the text initially hidden via `.hide()`. The data is embedded directly in the HTML structure, and the interaction is driven by standard jQuery event handlers rather than any visualization library. The rendering approach relies on simple DOM manipulation, with no canvas, SVG, or external data sources involved.

Aamundo
59% match
Loading thumbnail…

Crude javascript create link

This example implements a JavaScript function that converts plain text into HTML links by identifying URL-like patterns. It relies on a regular expression stored in `expression` and instantiated with the `RegExp` constructor to match domains and paths. The `makeLink` function scans the input string, strips any leading `http://` or `https://` protocol, then uses jQuery’s `$()` and `.each()` method to iterate over matched substrings and replace each occurrence with an anchor tag that points to the matched URL. The rendered output is intended for inline display in a web page.

TTBD
59% match
Loading thumbnail…

Simple mechanism to link citation references with citation notes.

This interactive example links citation references to their corresponding notes using standard HTML anchor tags and jQuery. Clicking a citation reference or note highlights the associated parent element by adding a `highlight` class, while hovering over a reference displays the citation text in a popover. The code uses jQuery selectors to identify elements with `name` attributes containing `cite_` and applies the Bootstrap popover API with a hover trigger to show the citation content. Citations are stored as plain text within the page’s `#content` element, with links using `href` fragments to match references and notes.

HHypercubed
59% match
Loading thumbnail…

How good your JS?

This example demonstrates a common JavaScript closure pitfall inside a loop. The code defines an `addLinks` function that creates five anchor elements, each intended to alert its index when clicked. However, because the loop variable `i` is captured by reference in the click handler, every link alerts the final value, 5, instead of its own index. The visualization relies on the browser’s DOM API, including `document.createElement` and `element.onclick`, with the result shown when `window.onload` triggers the function. It highlights the difference between expected and actual behavior in event handling.

TTipTopCoder
57% match
Loading thumbnail…

Gist 637706

This example shows a jQuery plugin modification that preserves the original parent containers of filtered list items during activation and deactivation. The code explicitly handles cases where filtered items are not siblings by storing each item’s parent in its `data` object, then uses a `putBack` function to restore items to their correct parents. It relies on jQuery selectors like `tbody > tr` and methods such as `detach()`, `appendTo()`, and `data()`. The diff adds a `siblings` option to toggle between appending items together under a single parent or individually under their original parents.

DDylanFM
56% match