Skip to content

A jQuery plugin for textarea to add and remove wildcards from text

License

Notifications You must be signed in to change notification settings

raafacachoeira/jquery-text-wildcard-area

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

textWildCardArea.js

A jQuery plugin for textarea to add and remove wildcards from text

Basic Usage

Declare a textarea and declare a list of tags to use with UL LI

 <textarea id="MyTextWildCardArea"></textarea>
 <nav>
    <ul data-toggle="tag" data-target="#MyTextWildCardArea">
        <li class="nav-item"><a class="tag tag--available" data-tag="[ExampleTag]" role="button">[ExampleTag]</a></li>
        <li class="nav-item"><a class="tag tag--available" data-tag="[Email]" role="button">[Email]</a></li>
    </ul>
</nav>
$('#MyTextWildCardArea').textWildCardArea();

It is also possible to instantiate with many text areas.

 <textarea id="TextAreaExample" class="my-textarea"></textarea>
 <nav>
    <ul data-toggle="tag" data-target="#MyTextWildCardArea">
        <li class="nav-item"><a class="tag tag--available" data-tag="[ExampleTag]" role="button">[ExampleTag]</a></li>
        <li class="nav-item"><a class="tag tag--available" data-tag="[Email]" role="button">[Email]</a></li>
    </ul>
</nav>


<textarea id="AnotherTextArea" class="my-textarea"></textarea>
 <nav>
    <ul data-toggle="tag" data-target="#MyTextWildCardArea">
        <li class="nav-item"><a class="tag tag--available" data-tag="[ExampleTag]" role="button">[ExampleTag]</a></li>
        <li class="nav-item"><a class="tag tag--available" data-tag="[Email]" role="button">[Email]</a></li>
    </ul>
</nav>
$('.my-textarea').textWildCardArea();

data attributes

  • data-toggle="tag": Required: define the type tag for a element
  • data-target="#elementId": Required: define the target textarea to observer

classes

  • tag tag-available: the plugin uses this class to control a toggle state.
  • tag tag-unavailable: the plugin uses this class to control a toggle state.
    At least one class is required

The plugin doesn't have css styles, but this css can be useful for a basic style

     .tag.tag--available {
        cursor: pointer;
        font-weight: 700;
    }

    .tag.tag--unavailable {
        cursor: pointer;
        font-weight: normal;
        font-style: italic;
        text-decoration: line-through;
    }

Usability

  • Click once for add wildcard to the textarea
  • Click once for remove all wildcards from the textarea
  • If a textarea already has data coming from the server, the plugin must observe and apply the toggle state on the tags

Image of Example

About

A jQuery plugin for textarea to add and remove wildcards from text

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published