天生我才必有用

delicious的标签实现(JQuery)

Posted in Javascript    作者:Ray    2008年一月18日

是不是非常喜欢del.icio.us那种风格的标签?其实实现这个功能非常的简单:JQuery + JTagging (Plugin)即可。范例可参见:http://www.alcoholwang.cn/jquery/jTaggingDemo.htm

1. 示例1

最简单的例子,

Javascript:

$(document).ready(function(){
     $("#tags").jTagging("#tag_list", " ");
}

其中输入input的Id是tags,候选内容id为tag_list

2. 示例2

$(document).ready(function(){
    var tag_list = new Array($("#tags_candidate1"), $("#tags_candidate2"));
    var normalClass = { padding : "2px 1px 0 1px", textDecoration : "underline", color : "#f00", backgroundColor : "" };
    var selectedClass = { padding : "2px 1px 0 1px", textDecoration : "underline", color : "#fff", backgroundColor : "#f00"};
    var normalHoverClass = { padding : "2px 1px 0 1px", textDecoration : "none", color : "#fff", backgroundColor : "#00f"};
    $("#tags").jTagging(tag_list, " ", normalClass, selectedClass, normalHoverClass);
}

其中tag_list为多个候选标签的id数组,normalClass, Select Class, normaHoverClass为自定义的CSS风格

标签: ,

Leave a Reply