Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Create some widget from 'input' source. Unobtrusive

branch: master

Fetching latest commit…

Octocat-spinner-32-eaf2f5

Cannot retrieve the latest commit at this time

Octocat-spinner-32 lib
Octocat-spinner-32 vendor
Octocat-spinner-32 .gitignore
Octocat-spinner-32 .jshintrc
Octocat-spinner-32 Gemfile
Octocat-spinner-32 MIT-LICENSE
Octocat-spinner-32 README.markdown
Octocat-spinner-32 Rakefile
Octocat-spinner-32 jquery_drapper.gemspec
README.markdown

jquery_drapper plugin

  • 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.

Installation

This plugin requires jquery.

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

  $(document).ready(function() {
    $(this).drapper();
  })

Installation jquery.drapper with rails

Just wrapper for jquery.drapper plugin for rails 3.1 application.

This plugin requires jquery and jquery.drapper Detailed description see in jquery.drapper

Just add to Gemfile:

  gem 'rails-jquery-drapper'

writing own drappers

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

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

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

After requiring that, you will be able to write the following:

<html>
  <head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jquery_drapper.js"></script>
    <script type="text/javascript" src="jquery_drappers.myDrapper.js"></script>
    <script type="text/javascript">
      $('body').drapper();
    </script>
  </head>
  <body>

    <div data-drapper="myDrapper: {specialTactics: true}"></div>

  <body>
</html>

Copyright

Copyright (C) 2011 by Alexey Osipenko. License see in file MIT-LICENSE

Something went wrong with that request. Please try again.