Skip to content
No description, website, or topics provided.
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
README.md
example.css
index.html
jquery.pstagger.css
jquery.pstagger.js
jquery.pstagger.min.js
package.json

README.md

jQuery pstagger Plugin

A simple jQuery plugin in order to create tags input bars, this is still a beta so play around with it but we do not recommend to use it in production at the moment.

Do not hesitate to make PR for improvement or bug fixes !

Get it from Github

Latest version: 0.2.1 (beta)

Why we developed this plugin ?

Most of the other tags bar plugins don't allow you to modify your tags once you've written them (you have to delete the tag and re-write it). Since we use this input bar as a search bar, we wanted to keep it fully editable and in the same time give a visual hint on how the search works.

Instructions

Add mandatory files

<script src="jquery.pstagger.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.pstagger.css" />

Once that done, create an input like you would do in any other case:

<input id="input-tags" />

Then, simply call the tagsInput function on any field that should be treated as a list of tags. Then, make a call to pstagger plugin on all desired input to be 'Tagified'

$('#input-tags').pstagger();

Options

$(selector).pstagger({
	/* CSS custom */
    wrapperClassAdditional: 'myClass',
    tagsWrapperClassAdditional: 'myClass',
    tagClassAdditional: 'myClass',
    closingCrossClassAdditionnal: 'myClass',
    clearAllIconClassAdditional: 'myClass',
    clearAllSpanClassAdditional: 'myClass',
    tagInputWrapperClassAdditional: 'myClass',
    tagInputClassAdditional: 'myClass',
    /* Global configuration */
    delimiter: ' ',
    inputPlaceholder: 'Add tag ...',
    closingCross: true,
    context: null,
    clearAllBtn: false,
    /* Callbacks */
    onTagsChanged: null,
    onResetTags: null,
});

API

<tr>
  <td>tagsWrapperClassAdditional</td>
 <td>String</td>
  <td>''</td>
  <td>Add custom CSS to the plugin</a>    </tr>

<tr>
  <td>tagClassAdditional</td>
  <td>String</td>
  <td>''</td>
  <td>Add custom CSS to the plugin</a>
</tr>

<tr>
  <td>closingCrossClassAdditionnal</td>
  <td>String</td>
  <td>''</td>
  <td>Add custom CSS to the plugin</a>
</tr>

<tr>
  <td> tagInputWrapperClassAdditional</td>
  <td>String</td>
  <td>''</td>
  <td>Add custom CSS to the plugin</a>
</tr>

<tr>
  <td>tagInputClassAdditional</td>
  <td>String</td>
  <td>''</td>
  <td>Add custom CSS to the plugin</a>
</tr>

<tr>
  <td>clearAllIconClassAdditional</td>
  <td>String</td>
  <td>''</td>
  <td>Add custom CSS to the plugin</a>    
</tr>

<tr>
  <td>delimiter</td>
  <td>String</td>
  <td>' '</td>
  <td>Determine on which character the plugin has to explode the full string</td>
</tr>

<tr>
  <td>inputPlaceholder</td>
  <td>String</td>
  <td>'Add a tag...'</td>
  <td>Simply replace input placeholder by the one you choose</td>
</tr>

<tr>
  <td>closingCross</td>
  <td>Boolean</td>
  <td>true</td>
  <td>Whether we have to display a "closing cross" on each tag generated in order to remove them</td>
</tr>

<tr>
  <td>context</td>
  <td>Object</td>
  <td>null</td>
  <td>You may want to specify a specific context on your callback, just give that context here (e.g: this)</td>
</tr>

<tr>
  <td>clearAllBtn</td>
  <td>Boolean</td>
  <td>false</td>
  <td>Determine if the global reset input button has to be displayed
  </td>
</tr>

<tr>
  <td>onTagsChanged</td>
  <td>Callback</td>
  <td>none</td>
  <td>Callback called everytime input tag has changed, it will receive an array representing each tag available in the input
  </td>
</tr>

<tr>
  <td>onResetTags</td>
  <td>Callback</td>
  <td>none</td>
  <td>Callback called whenever the reset button is clicked and input emptied
  </td>
</tr>
Name Type Default Note
wrapperClassAdditional String '' Add custom CSS to the plugin
You can’t perform that action at this time.