❤
npm
Sign UpSign In

input-vademecum

0.1.0 • Public • Published

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

  1. Download into your javascript and css app directory the minimised files you seen under /lib
  2. 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>
  1. 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> 
  1. 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:

  1. Install connect and serve-static with NPM
$ npm install connect serve-static
  1. 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...');
});
  1. Run with Node.js
$ node server.js

License

Copyright (c) 2016 Mirco Frison

Released under the MIT License.

Readme

Keywords

Package Sidebar

Install

npm i input-vademecum

Repository

github.com/3zone/input-vademecum

Homepage

github.com/3zone/input-vademecum#readme

Weekly Downloads

1

Version

0.1.0

License

MIT

Last publish

Collaborators

  • 3zone
Try on RunKit
Report malware