input-vademecum

v0.1.0

Published

2 years ago

smart handler for visualise a guide related to a specific input field

Downloads

0High
0Medium
0Low

3zone

jquery-plugin jquery form input vademecum

Input Vademecum

smart handler for visualise a guide related to a specific input field [jQuery plugin]

Description

Imagine you have a form and you want to teach people all details about every single input. Okay, you can also use placeholder attribute or hint texts, but if you need to write a detailed (long) instructions those seem not the right solution.

With Input Vademecum plugin you can attach in every (or some as you choiced) input an useful handler to open the complete guide description about that input (or every other html tags) in an appropriate panel (via AJAX).

Features

all input types (and also other tags).
open the content via AJAX.
minimum setup required

Usage

Download into your javascript and css app directory the minimised files you seen under /lib
Add the meta tag for input-vademecum.css and the script src to input-vademecum.js like this:

  <head>
    <link href="/your-css-directory/input-vademecum.min.jquery.css" rel="stylesheet" />
    <script src="/your-js-directory/jquery.min.js"></script>
    <script src="/your-js-directory/input-vademecum.min.jquery.js"></script>
  </head>

Select form (or another container tag like fieldset or div) which contain the input interested to be explained with the guide like this:

  <script>
    $( document ).ready(function() {
      $('form').vademecum();
    });
  </script>

insert the URI or URL of your guide (that you have already made) with attribute data-vademecum-href for every input (or any other tag) you want to add the guide like this:

  <form action="#">
    <input type="text" name="name" data-vademecum-href="/guide/contact-name.txt">
    <input type="text" name="surname" data-vademecum-href="/guide/contact-surname.txt">
    <textarea type="textarea" name="notes" data-vademecum-href="/guide/generic-notes.txt"></textarea>
  </form>

Examples

coming soon ...

Configuration

You can provide a configuration of some parts, using an object literal inside the parenthesis:

Key | Descrription | Type | Default --- | --- | --- | --- prefix | the scope name used to name the parts generated dynamically by the plugin | string | vademecum data_suffix | the data attribute name used to specify the href in every input | string | vademecum-href handler_text | text displayed in the handler link | string | ? loading_text | text displayed in the panel during loading content | string | loading... close_text | text displayed in the top right corner panel to close itself | string | x

Browser compatibility

coming soon ...

Testing

For testing ajax requests we need to use an http web server, if you don't have one installed in your host you can simply install one running with Node.js:

Install connect and serve-static with NPM

$ npm install connect serve-static

Create server.js file with this content:

var connect = require('connect');
var serveStatic = require('serve-static');
connect().use(serveStatic(__dirname)).listen(8080, function(){
    console.log('Server running on 8080...');
});

Run with Node.js

$ node server.js

License

Released under the MIT License.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme