Pull to refresh

TAG_ADD Plugin

Reading time 3 min
Views 1K
Привет, %username%
Как-то раз мне пришлось писать форму для добавления постов в блог. Помимо стандартных полей (название, дата, текст и.т.д.) необходимо было привинтить юзабельную форму добавления тегов.
Т.к. я кодю в jQuery, то и выбор был однозначным.
Вот необходимые задачи, которые я поставил перед собой:
  1. Легко в настройке
  2. Все теги храняться в одном файле (в кэше)
  3. Минимальная нагрузка на сервер и клиента
  4. Список тегов — подсказок открывается только для выбранного запроса на определенный тег.


Вдаваться в подробности плагина я не буду.

Подключение – стандартное:


  1. <head>
  2. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  3. <title>TAG_ADD. jQuery Plugin</title>
  4. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
  5. <script type="text/javascript" src="tag_add_js/tag_add.js"></script>
  6. <link rel="stylesheet" type="text/css" href="tag_add_css/tag_add.css">
  7. </head>
* This source code was highlighted with Source Code Highlighter.

Рисуем форму и вызываем плагин



<input type="text" name="tag_input" id="tag_input_id" >
<br>
<em>(введите теги через запятую)</em></p>

<script>
     jQuery(document).ready(function(){
      $("#tag_input_id").tag_add();
     })
</script>


* This source code was highlighted with Source Code Highlighter.


Можем его настроить


  1. <script>
  2.          jQuery(document).ready(function(){
  3.           $("#tag_input_id2").tag_add({
  4.     
  5.                                           maxitem:0, // макс. кол-во объектов
  6.                                           minlength:2, // мин. кол-во символов для запуска
  7.                                           maxlength:10, // макс. кол-во символов для запуска
  8.                                           loadinfo: 'loadtag.php', //файл содержащий все теги
  9.  
  10.                                           });
  11.          })
  12.          })
  13. </script>

* This source code was highlighted with Source Code Highlighter.
Вот и весь плагин, демо можно посмотреть тут
Пользуйтесь))
Tags:
Hubs:
+45
Comments 40
Comments Comments 40

Articles