开发学院网页设计JavaScript 基于jQuery打造智能的人员选择输入框 阅读

基于jQuery打造智能的人员选择输入框

 2009-10-29 00:00:00 来源:WEB开发网   
核心提示: 本例中只有使用一个图片.第二 开始编写Javascript还是老规矩,先来个完整代码,基于jQuery打造智能的人员选择输入框(3),非常简单只有不到70行代码01.;(function($){02.if(!$.Autocompleter){03.alert("请先引用jquery.a

本例中只有使用一个图片.

第二 开始编写Javascript

还是老规矩,先来个完整代码,非常简单只有不到70行代码

01.; (function($) {
02.    if (!$.Autocompleter) {
03.        alert("请先引用jquery.autocomplete.js");
04.        return;
05.    }
06.    $.fn.usbox = function(o) {
07.        var def = {
08.            urlOrData: "ResponseAutoComplete.ashx",
09.            width: "90%", //宽度
10.            addItem: false,
11.            removeItem: false,
12.            clickItem: function() { },
13.            completeOp: {}
14.        };
15.        $.extend(def, o);
16.        var co = $.extend({ scroll: false, formatItem: function(row, i, max) { return row[0] + "[" + row[1] + "]"; } }, def.completeOp);
17. 
18.        var temp = "<div class='bbit-usbox-item'><a href='javascript:void(0);'><span>${text}</span><input type='hidden' value='${value}'/><img src='../Themes/Shared/images/s.gif' alt='点击删除' class='bbit-usbox-del'/></a></div>";
19. 
20.        return this.each(function(e) {
21.            var me = $(this);
22.            var id = me.attr("id");
23.            if (id == null || id == "") {
24.                id = "usbox_" + new Date().getTime();
25.            }
26.            var inc = $("<div class='bbit-usbox-boxc'/>");
27.            var input = $("<input type='text' id='" + id + "_inbox' class='bbit-usbox-box' />").appendTo(inc);
28.            me.addClass("bbit-usbox").width(def.width).append(inc);
29.            input.autocomplete(def.urlOrData, co).result(function(event, data, formatted) {
30.                $(this).val("");
31.                additem(this, data);
32.            });
33.            me.bind("addboxitem", function(e,data) { additem(input,data); });
34.            function additem(inc, data) {
35.                var tp = $(temp.replace(/\$\{([\w]+)\}/g, function(s1, s2) {
36.                    if (s2 == "text") {
37.                        return data[0];
38.                    }
39.                    else if (s2 == "value") {
40.                        return data.join("|");
41.                    }
42.                    else {
43.                        return s1;
44.                    }
45.                }));
46.                tp.click(def.clickItem).find("img.bbit-usbox-del").click(removeitem);
47.                $(inc).parent().before(tp);
48.                if (def.addItem) {
49.                    def.addItem(data);
50.                }
51.            }
52.            function removeitem() {
53.                var p = $(this).prev()
54.                var v = p.val();
55.                var arr = v.split("|");
56.                if (def.removeItem) {
57.                    def.removeItem(arr);
58.                }
59.                $(this).parent().parent().remove();
60.            }
61.            return me;
62.        });
63.    };
64.    $.fn.addboxitem = function(op) {
65.        $(this).trigger("addboxitem", [op]);
66.    };
67.})(jQuery)

上一页  1 2 3 4 5 6 7  下一页

Tags:基于 jQuery 打造

编辑录入:爽爽 [复制链接] [打 印]
[]
  • 好
  • 好的评价 如果觉得好,就请您
      0%(0)
  • 差
  • 差的评价 如果觉得差,就请您
      0%(0)
赞助商链接