freejs首页

jquery 添加/删除tag

Example 2: Keep it Simple

Using the tagtacular_basic style and the default configuration. Edit and view modes, starting in edit, with Add and Switch Mode buttons. Enter or comma add a new tag, as does the Add button.

Example 3: Limit to Existing Tags

Similar to the last example, but always in edit mode (no mode switch button). No add button or add delimiters, so we restrict the user to adding from a predefined list of tags.

Example 4: Custom Validator and Commit Functions

Using the tagtacular_basic.blue style. Here we change validation behavior and run code to commit changes to the backend (simulated by sending a success message two seconds later). This instance is also configured to start in view mode. This is also a good example of how you can call any callback defined in your settings object from any other callback that gets a settings object.

Example 5: Custom Tags

Using getTagHtml setting to define custom tag html. Here we make each tag a link to a Wikipedia search. You could apply this general method to make each tag link to a search that returned all entities with that tag in your web app. We're also applying a filter on the tag names themselves using formatTagName and configFormatTagNamesOnInit. The first letter of each word is capitalized and the rest is converted to lower case.

Example 6: Edit Bar On Top

Moving the edit tray to before the tag tray with the configEditTrayFirst setting. More layout customization would have been possible with the getLayoutHtml callback setting. Also, we're giving the buttons some custom text. We're also disabling add tag on switch mode and setting some placeholder text.

Example 7: Limit to Existing Tags, Use a Select Box

Let's use a select box! Also, disable edit/view mode switching by setting configShowSwitchButton to false.