jQuery實現微博發布框 好友出現列表功能

2022-07-08 18:18:12 字數 2723 閱讀 7612

先上圖演示下:

看完圖就直接上**吧,其中有幾處寫死的地方,我有提示,你們自己改下就是了。

//@顯示使用者列表

(function($)

obj = obj.parentnode;

}return false;

}$.fn.showatusers = function()

return this.each(function()else

t = settimeout(function(),300);

}});

$("body").on("click",function(e)

});//獲取游標

var getcursor = function(textarea) ;

textarea.focus();

if (textarea.setselectionrange) else if (document.selection)

}rangedata.start = i;

rangedata.end = rangedata.text.length + rangedata.start;

rangedata.text = textarea.value.substring(0,i);

}return rangedata;

},

//設定游標

setcursor = function(textarea, rangedata) else if (textarea.createtextrange) else

}},

//插入選擇的使用者名稱

add = function(txtdata,object)

if (textarea.setselectionrange) else if (textarea.createtextrange)

},//匹配@符

getat = function(textarea) $/g;//匹配@符後面0至20個字元

if(_value.indexof("@")>= 0 && _value.match(_reg)) ;//儲存輸入內容被擷取後的字段資訊

if(_ovalue==="@")else if(/^@[a-za-z0-9\u4e00-\u9fa5_-]+$/.test(_ovalue) && !/\s/.test(_ovalue)) else

} else

},

drawtextarea= function(textarea)

showtip = function(obj)

$.ajax(,

success: function(result)

})},

//建立tip,設定tip的位置

buidtip = function(html,obj)

$at_userslist.css().html('').find("li").eq(1).addclass("on");

tiplievent(obj);

$(obj.textarea).data("at",obj);

},hiddentip = function() ,

//鍵盤選擇列表操作

tipliselect = function(textarea,key)

li.removeclass("on").eq(li_index).addclass("on");

break;

case 38:

//向上鍵選擇

li_index--;

if(li_index<1)

li.removeclass("on").eq(li_index).addclass("on");

break;

case 13:

//enter鍵

var txtdata=li.filter(".on").text(),

obj = $(textarea).data("at");

add(txtdata,obj);

hiddentip();

break;

default:

};

},//新增列表繫結事件

tiplievent = function(obj) else

hiddentip();

return false;

}).not(":first").hover( function() , function() );

};});

}})(jquery);

//繫結@顯示使用者列表

$(「textarea」).showatusers();

附上json.html裡的格式:

選擇最近@的人或直接輸入

花蛤楠小樹

蒼井空盼逆邵年

波多野結衣

魔獸德羅巴

安安薔薇

json2.html的格式一樣,就文字不一樣而已,上面圖就是顯示不同情況。

再附上css:

/*發布框內 @好友列表提示 */

#at_userslist

#at_userslist ul

#at_userslist ul li

#at_userslist ul li.tit

#at_userslist ul li.on

#at_textarea

autojs微博 js實現微博發布小功能

微博發布功能,可發布可刪除。樣式沒設定忽略,主要知識點及注意點 1 動態新增節點標籤。2 內容為空時不能發布。3 新發布的內容要在上面。4 內容刪除要同時刪除掉節點。5 為保持樣式輸入框要設定為不可拖拽。document box border 1px solid 000 width 600px he...

jQuery實現微博字數統計

xhtml class clear id saywrap class saylist href src images user.gif alt class saytxt href demo 發布的內容.class date class clear xhtml是乙個表單,裡面有輸入框textarea,...

jquery實現新浪微博的表情外掛程式

b 特點 b list 一次性初始化 可以全域性控制 開啟,關閉 可以遠端調取表情資料 提供對表情代號的轉換 使用者靈活控制觸發dom list b 初始化 如 b expblock.initexp 包含textarea和表情觸發的exp holder holder exp holder exp h...