Unobtrusive custom elements.

When you need to write javascript, create a plugin. Do not write your own code in global namespace your own js code should be unobtrusive. This plugin helps doing theese two steps.

Usage and examples

$(document).ready(function() {

Basic usage

Add jquery_drapper.js to the project. Mark DOM elements that you want to change with data-decorate attribute and initiate the plugin.

$.drappers = $.extend($.drappers, {
  mydrapper: function() {
    console.log("The special code, writing for html elements with drapper type 'myDrapper'");

    if(this.config.specialTactics) {
        border: '1px solid black'
    $(this).click(function() {

Writing own drappers

Drappers should be added in $.drappers object. Use jQuery.extend for adding a new drapper. Here is an example.

See it in action

Here you could put a live example if your project happens to be something to do with web development, or maybe you could insert some images.

Slider from input
Checkboxes or radiogroup from select (depends on multiple attribute)
Drapper 'sortable'. Applied for form, but needs separate list of draggable elements.
  • element 1
  • element 2
  • element 3
  • element 4
  • element 5
  • element 6
Facebook like autoselect from select[mulitiplie="mulitiplie"].
Change select to set of buttons.