jQuery plugins


baigoTag

这是一个 Tag 管理插件,用于 blog、cms 等需要用到 Tag 标签的后台。

本插件需要 typeahead.js 0.11.* 配合,主要用到 Bloodhound 功能,请使用者注意!


目录结构

  1. baigoTag.js 提交插件
  2. baigoTag.min.js 提交插件压缩版
  3. baigoTag.css CSS 样式文件

基本使用

载入文件

<!-- jQuery 库 -->
<script src="jquery.min.js" type="text/javascript"></script>

<!-- typeahead -->
<link href="typeahead.css" type="text/css" rel="stylesheet">
<script src="typeahead.bundle.min.js" type="text/javascript"></script>

<!-- 插件 -->
<link href="baigoTag.css" type="text/css" rel="stylesheet">
<script src="baigoTag.min.js" type="text/javascript"></script>

下载 jQuery

下载 typeahead.js

表单 HTML

<form name="article_form" id="article_form" action="article.php">
    <input type="text" name="article_tag" id="article_tag">
</form>

初始化并提交,如:

<script type="text/javascript">
var opts_tag = {
    remote: {
        url: 'tag.php?key=%KEY'
    }
};

$(document).ready(function(){
    // 初始化 baigoTag
    var obj_tag = $('#article_tag').baigoTag(opts_tag);
});
</script>

远程查询

远程查询必须在初始化时指定 remote.url 对象,可以用通配符,通配符的名称由 remote.wildcard 对象指定,默认为 %KEY,上述例子中的 %KEY 会由 article_tag 表单值填充,也可以自行定义通配符的名称,如:

var opts_tag = {
    remote: {
        url: 'tag.php?key=%SEARCH',
        wildcard: '%SEARCH'
    }
};

$(document).ready(function(){
    // 初始化 baigoTag
    var obj_tag = $('#article_tag').baigoTag(opts_tag);
});

插件接受 json 对象的返回,如:

[
    '年代', '分类', '北京'
]

表单提交

插件会自动根据 Tag 输入框的 nameid 属性生成一个 id="{:id}_hidden" 形式的隐藏字段,其值为逗号 , 分隔的 Tag 列表,如:

<form name="article_form" id="article_form" action="article.php">
    <input type="hidden" name="article_tag_hidden" id="article_tag_hidden" value="年代,分类,北京">
    <input type="text" name="article_tag" id="article_tag">
</form>