Gist 2910053

100%

✓ Published0🌍 Public

Last edited Jun 11, 2012

Created on Jun 11, 2012

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.

AI-generated description

Similar vizzes

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

70% 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

67% match

Loading thumbnail…

Gist 3041892

This example shows a minimal Spine.js application that fetches and manages a list of assets from a remote JSON endpoint. The page loads asset records via `Asset.fetch()`, which uses Spine’s AJAX module to retrieve data from the GitHub-hosted gist URL, and binds the model to the `Asset` class. The HTML body is empty, so the visualization itself is not rendered; the code demonstrates the data-loading and model-setup pattern rather than presenting any visual output. It relies on jQuery for AJAX requests and Spine’s `Model.setup` and `Model.Ajax` extensions.

Aabernier

66% match

Loading thumbnail…

Gist b5b1465342d4885de179

This animated visualization demonstrates a carousel interface built with Backbone.js, where items cycle through views with smooth transitions. The code uses a Backbone View to manage carousel behavior, including previous/next navigation controls and automatic item rotation. The animation renders the carousel's items dynamically, updating the active element as users interact with the controls. The visualization relies on jQuery for DOM manipulation and Underscore for utility functions, with the Backbone framework providing the structural foundation for the view logic.

Aabernier

63% match

Loading thumbnail…

Basic jQuery Plugin Anatomy

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.

Aamoradi

63% 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

62% match

Loading thumbnail…

Gist 83eee1cf3c019a0fa43d

This example demonstrates a minimal carousel component built with Backbone.View, jQuery, and Lodash. The view manages a list of items, tracking the active and previous indexes while allowing navigation via prev/next buttons or direct method calls like `go(2)` and `next(3)`. It applies CSS classes such as `active`, `previous`, `forward`, and `backward` to reflect state changes, and triggers a `carouselchange` event whenever the current item changes. The code supports optional looping, configurable step sizes, and explicit selection of item and navigation elements via the `el`, `items`, `prev`, and `next` options.

Aabernier

62% match

Loading thumbnail…

Gist 364813

This example implements a custom jQuery autocomplete widget with animated show-and-hide behavior. It uses `jQuery` methods such as `fadeTo`, `stop`, and `show` to control the visibility of a suggestion box, while handling keyboard navigation for arrow keys, tab, and enter. The code fetches suggestions via JSONP requests, renders them as list items, and tracks the selected index with `data`. Stippling effects—fade-in and fade-out—are applied through custom functions, though the code notes issues with animation state confusion. The source is a JavaScript file from a gist.

XXXX

62% match