article:
Mockup: Responsive Design Mockup Pack
article:
Elements Design & UI: Dark UI Music Player Design

JS Plugin: Annotator

Advertisement

"
Annotator is a web annotation system. Loaded into a webpage, it provides the user with tools to annotate text (and other elements) in the page.

The Annotator project also has a simple but powerful plugin architecture. While the core annotator code does the bare minimum, it is easily extended with plugins that perform such tasks as:

- serialization: the Store plugin saves all your annotations to a REST API backend (see Storage wiki page for more and a link to a reference implementation)
- authentication and authorization: the Auth and Permissions plugins allow you to decouple the storage of your annotations from the website on which the annotation happens. In practice, this means that users could edit pages across the web, with all their annotations being saved to one server.
- prettification: the Markdown plugin renders all annotation text as Markdown
- tagging: the Tags plugin allows you to tag individual annotations
"


Plugin: Annotator


Usage
Step 1
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js'></script>
<script src='annotator.min.js'></script>
<link rel='stylesheet' href='annotator.min.css'>

Step 2
<script>
  $(document.body).annotator()
</script>

javascript plugin
Annotator.Plugin.HelloWorld = (function() {
  function HelloWorld(element, options) {
    this.element = element;
    this.options = options;
    console.log("Hello World!");
  }
  HelloWorld.prototype.pluginInit = function() {
    console.log("Initialized with annotator: ", this.annotator);
  };
  return HelloWorld;
})();

add
$(document.body).annotator()
                .annotator('addPlugin', 'HelloWorld')


Screenshots

Plugin: Annotator

Plugin: Annotator

Plugin: Annotator



source
demo
download

Advertisement
Tags: plugin, jquery, develop, website, web, annotate

Leave a Comment

No Comment

© Creative3x Ltd.