jquery 添加/删除tag

jquery 添加/删除tag

 实时添加删除tag

jquery 添加/删除tag

 

 

XML/HTML Code
  1. <div class="main">  
  2.   
  3. <div class="tagtacular_textlike" id="tagtacular_1"></div>  
  4. <div class="codebox">  
  5.   
  6. </div>  
  7. <h3>Example 2: Keep it Simple</h3>  
  8. <p>  
  9. 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.  
  10. </p>  
  11. <div class="tagtacular_basic" id="tagtacular_2"></div>  
  12. <div class="codebox">  
  13.   
  14. </div>  
  15. <h3>Example 3: Limit to Existing Tags</h3>  
  16. <p>  
  17. 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.  
  18. </p>  
  19. <div class="tagtacular_basic red" id="tagtacular_3"></div>  
  20. <div class="codebox">  
  21.   
  22. </div>  
  23. <h3>Example 4: Custom Validator and Commit Functions</h3>  
  24. <p>  
  25. 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.  
  26. </p>  
  27. <div class="tagtacular_basic blue" id="tagtacular_4"></div>  
  28. <div class="codebox">  
  29.   
  30. </div>  
  31. <h3>Example 5: Custom Tags</h3>  
  32. <p>  
  33. 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.  
  34. </p>  
  35. <div class="tagtacular_basic yellow" id="tagtacular_5"></div>  
  36. <div class="codebox">  
  37.   
  38. </div>  
  39. </div>  
  40. <h3>Example 6: Edit Bar On Top</h3>  
  41. <p>  
  42. 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.  
  43. </p>  
  44. <div class="tagtacular_basic orange" id="tagtacular_6"></div>  
  45. <div class="codebox">  
  46.   
  47. </div>  
  48. <h3>Example 7: Limit to Existing Tags, Use a Select Box</h3>  
  49. <p>  
  50. Let's use a select box! Also, disable edit/view mode switching by setting configShowSwitchButton to false.  
  51. </p>  
  52. <div class="tagtacular_basic" id="tagtacular_7"></div>  
  53. <div class="codebox">  
  54.   
  55. </div>  
  56. </div>  
  57. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>  
  58. <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>  
  59. <!-- <script type="text/javascript" src="js/tagtacular.min.js"></script> -->  
  60. <script type="text/javascript" src="js/tagtacular.js?donotcache=20130703"></script>  
  61. <script type="text/javascript">  
  62.     var tags1 = $('#tagtacular_1').tagtacular({  
  63.         entityId: 101,  
  64.         entityTags: ['Boston', 'Chicago', 'New York City', 'Atlanta'],  
  65.         systemTags: ['Austin', 'Dallas', 'Raleigh', 'Richmond', 'Augusta', 'Portland', 'Durham', 'Memphis', 'Nashville', 'Seattle', 'Toronto', 'Boston'],  
  66.         configTagSeparator: ', ',  
  67.         configShowAddButton: false,  
  68.         configShowSwitchButton: false,  
  69.         configDeleteLastOnEmptyKeys: [8],  
  70.         configSortTags: false  
  71.     });  
  72.   
  73.     var tags2 = $('#tagtacular_2').tagtacular({  
  74.         entityId: 102,  
  75.         entityTags: ['Boston', 'Chicago', 'New York City', 'Atlanta'],  
  76.         systemTags: ['Austin', 'Dallas', 'Raleigh', 'Richmond', 'Augusta', 'Portland', 'Durham', 'Memphis', 'Nashville', 'Seattle', 'Toronto'],  
  77.     });  
  78.   
  79.     var tags3 = $('#tagtacular_3').tagtacular({  
  80.         entityId: 103,  
  81.         entityTags: ['Alpha', 'Beta', 'Epsilon'],  
  82.         systemTags: ['Alpha', 'Beta', 'Gamma', 'Delta', 'Epsilon', 'Zeta', 'Eta', 'Theta', 'Iota', 'Kappa',   
  83.                      'Lambda', 'Mu', 'Nu', 'Xi', 'Omicron', 'Pi', 'Rho', 'Sigma', 'Tau', 'Upsilon', 'Phi',  
  84.                      'Chi', 'Psi', 'Omega'],  
  85.         configShowAddButton: false,  
  86.         configDelimiters: []  
  87.     });  
  88.   
  89.     var tags4 = $('#tagtacular_4').tagtacular({  
  90.         entityId: 104,  
  91.         entityTags: ['Boston', 'Chicago', 'New York City', 'Atlanta'],  
  92.         systemTags: ['Austin', 'Dallas', 'Raleigh', 'Richmond', 'Augusta', 'Portland', 'Durham', 'Memphis', 'Nashville', 'Seattle', 'Toronto'],  
  93.         configMinimumTagLength: 2,  
  94.         configMaximumTagLength: 24,  
  95.         validationPattern: /^[0-9A-Za-z\.]+$/,  
  96.         messageTagNameInvalid: 'illegal characters: tag names can only include letters, numbers, and periods',  
  97.         commitAddTag: function(tag, entityId, settings) {  
  98.             setTimeout(function() {  
  99.                 settings.flashSuccess('saved add of ' + tag + ' to entity #' + entityId);  
  100.             }, 2000);  
  101.         },  
  102.         commitRemoveTag: function(tag, entityId, settings) {  
  103.             setTimeout(function() {  
  104.                 settings.flashSuccess('saved remove of ' + tag + ' from entity #' + entityId);  
  105.             }, 2000);  
  106.         },  
  107.         mode: 'view'  
  108.     });  
  109.   
  110.     var tags5 = $('#tagtacular_5').tagtacular({  
  111.         entityId: 105,  
  112.         entityTags: ['boston', 'chicago', 'new york city', 'atlanta'],  
  113.         systemTags: ['austin', 'dallas', 'raleigh', 'richmond', 'augusta', 'portland', 'durham', 'memphis', 'nashville', 'seattle', 'toronto'],  
  114.         getTagHtml: function(tag, mode, settings) {  
  115.             var encodedTag = tag.replace(' ', '+');  
  116.             encodedTagencodedTag = encodedTag.replace('-', '+');  
  117.             encodedTagencodedTag = encodedTag.replace('_', '+');  
  118.   
  119.             var url = 'http://en.wikipedia.org/wiki/Special:Search?search=' + encodedTag + '&go=Go';  
  120.   
  121.             if (mode=='edit') {  
  122.                 return '<span class="tagtacular_tag"><a href="'+url+'" target="_blank" ><span class="tagtacular_value">'+tag+'</span></a> <a class="tagtacular_delete" href="#">'+settings.configDeleteSymbol+'</a><span class="tagtacular_delim">'+settings.configTagSeparator+'</span></span>';  
  123.             } else if (mode=='view') {  
  124.                 return '<span class="tagtacular_tag"><a href="'+url+'" target="_blank" ><span class="tagtacular_value">'+tag+'</span></a><span class="tagtacular_delim">'+settings.configTagSeparator+'</span></span>';  
  125.             }  
  126.         },  
  127.         formatTagName: function(tag) {  
  128.             // capitalize first letter of each word and make the rest lower case  
  129.             tagtag = tag.toLowerCase();  
  130.             return tag.replace(/(^([a-zA-Z\p{M}]))|([ -_][a-zA-Z\p{M}])/g,  
  131.                 function($1){  
  132.                     return $1.toUpperCase();  
  133.                 });  
  134.         },  
  135.         configFormatTagNamesOnInit: true  
  136.     });  
  137.   
  138.     var tags6 = $('#tagtacular_6').tagtacular({  
  139.         entityId: 106,  
  140.         entityTags: ['Boston', 'Chicago', 'New York City', 'Atlanta'],  
  141.         systemTags: ['Austin', 'Dallas', 'Raleigh', 'Richmond', 'Augusta', 'Portland', 'Durham', 'Memphis', 'Nashville', 'Seattle', 'Toronto'],  
  142.         configEditTrayFirst: true,  
  143.         configAddButtonText: 'Boom! Add it.',  
  144.         configSwitchButtonTextInEdit: 'No more change!',  
  145.         configSwitchButtonTextInView: 'It\'s time for a change!',  
  146.         configPlaceholderText: 'Wanna add a tag?',  
  147.         configAddOnSwitch: false  
  148.     })  
  149.   
  150.     var tags7 = $('#tagtacular_7').tagtacular({  
  151.         entityId: 107,  
  152.         entityTags: ['Alpha', 'Beta', 'Epsilon'],  
  153.         systemTags: ['Alpha', 'Beta', 'Gamma', 'Delta', 'Epsilon', 'Zeta', 'Eta', 'Theta', 'Iota', 'Kappa',   
  154.                      'Lambda', 'Mu', 'Nu', 'Xi', 'Omicron', 'Pi', 'Rho', 'Sigma', 'Tau', 'Upsilon', 'Phi',  
  155.                      'Chi', 'Psi', 'Omega'],  
  156.         configEditTrayFirst: true,  
  157.         configSelectBox: true,  
  158.         configShowSwitchButton: false  
  159.     })  
  160.   
  161.     // Here's how to use the hooks to manipulate an instance of tagtacular  
  162.     // tags1.addTag('Detroit');  
  163.     // tags1.removeTag('Chicago');  
  164.   
  165.     // console.log(tags1.getEntityTags());  
  166.     // console.log(tags1.getSystemTags());  
  167.     // console.log(tags1.getRemainingTags());  
  168.     // console.log(tags1.getState());  
  169.     // console.log(tags1.getEntityId());  
  170.   
  171. </script>  

 


原文地址:http://www.freejs.net/article_jquerywenzi_189.html

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值