A repository of over 1000 quality jQuery plugins

jQuery jquery-widget

jquery-widget is a jQuery Standalone / Widgets plugin.

Created by viclm

jQuery widget with JSX

Not what you're looking for? Click here to view more Standalone / Widgets jQuery plugins

jQuery Widget

Build Status

jQuery Widget Factory is a small framework for building UI components, really gorgeous.

From now it can be used as an independent view component as React with the support of JSX and virtual dom, this makes it more adaptable than before.

It's easy to integrate it with flux/redux workflow, checkout the examples of todomvc.

Difference to the original implementation

  • The option() is also used to manage the component state
  • The render() is added to render the component, the original constructor argument called element isn't needed
  • Support JSX and virtual dom, the createWidget() is used to create virtual dom tree
  • Make the widget class local, remove the namespace and the global reference such as jQuery.ui
  • Remove the feature of class redefining

Example from flux-todomvc

var Footer = require('./Footer');
var Header = require('./Header');
var MainSection = require('./MainSection');
var createWidget = require('jquery-widget');
var TodoStore = require('../stores/TodoStore');

/**
 * Retrieve the current TODO data from the TodoStore
 */
function getTodoState() {
  return {
    allTodos: TodoStore.getAll(),
    areAllComplete: TodoStore.areAllComplete()
  };
}

var TodoApp = createWidget('TodoApp', {

  _getCreateOptions: getTodoState,

  _create: function() {
    this._on(TodoStore, {
        'change': '_onChange'
    });
  },

  /**
   * @return {object}
   */
  render: function() {
    return (
      <div>
        <Header />
        <MainSection
          allTodos={this.options.allTodos}
          areAllComplete={this.options.areAllComplete}
        />
        <Footer allTodos={this.options.allTodos} />
      </div>
    );
  },

  /**
   * Event handler for 'change' events coming from the TodoStore
   */
  _onChange: function() {
    this.option(getTodoState());
  }

});

module.exports = TodoApp;

Installation with npm

npm install --save jquery-widget

Reference

License

Copyright (c) 2016 viclm

Licensed under the MIT license.



You might also like these other Standalone / Widgets jQuery Plugins

  • zoomooz

    An easy-to-use jQuery plugin for making zooming web pages.

  • Clipboard js

    A modern approach to copy text to clipboard

  • Medium Editor

    Medium.com WYSIWYG editor clone. Uses contenteditable API to implement a rich text solution

License:

The MIT License (MIT)