/**
* 仿腾讯发表微博的效果
* 1.目前没有发ajax请求 后台没有记录 所以刷新页面 会清掉
* 2. 时间是用的是客户端时间 假如客户端时间错误的话 那么时间也会受影响。
* 目前就这样交互 具体的思路不太复杂 如果项目中用到这样的 可以根据具体的需求更改
* @constructor Microblog
* @date 2013-12-23
* @author tugenhua
* @email 879083421@qq.com
*/
function Microblog(options) {
this.config = {
maxNum : 140, // 最大的字符数
targetElem : '.f-text', // 输入框 或者文本域的class名
maxNumElem : '.maxNum', // 还能输入多少字容器
sendBtn : '#sendBtn', // 广播按钮
face : '#face', // 表情容器
activeCls : 'active', // 鼠标点击输入框add类
currentCls : 'current', // 鼠标点击face头像时 增加的类名
inputID : '#userName', // 输入框ID
textareaId : '#conBox', // 文本域ID
list : '#list-msg', // 大家在说的容器
callback : null // 动态广播完后的回调函数
};
this.cache = {};
this.init(options);
}
Microblog.prototype = {
constructor: Microblog,
init: function(options) {
this.config = $.extend(this.config,options || {});
var self = this,
_config = self.config,
_cache = self.cache;
// 点击输入框input 文本域 textarea 边框的变化
$(_config.targetElem).each(function(index,item){
$(item).unbind('focus');
$(item).bind('focus',function(e){
!$(this).hasClass(_config.activeCls) && $(this).addClass(_config.activeCls);
});
$(item).unbind('blur');
$(item).bind('blur',function(e){
$(this).hasClass(_config.activeCls) && $(this).removeClass(_config.activeCls);
});
});
// 点击face头像 add(增加)类名
var faceImg = $('img',$(_config.face));
$(faceImg).each(function(index,item){
$(item).unbind('click');
$(item).bind('click',function(e){
$(this).addClass(_config.currentCls).siblings().removeClass(_config.currentCls);
});
});
// 廣播按鈕hover事件
$(_config.sendBtn).hover(function(){
!$(this).hasClass('hover') && $(this).addClass('hover ');
},function(){
$(this).hasClass('hover') & (this).removeClass(hover); > // 綁定事件
self._bindEnv();
},
/*
* @ return 字串的長度
*/
_countCharacters: function(str) {
{
var c = str.charCodeAt(i);
if ((c >= 0x0001 && c } else {
,talCount =2;
return totalCount;
},
/*
* 所有的綁定事件
* 所有的綁定事件
_bindEnv: function() {
var self = this,
🎜>
// 文字域keyup事件
self._keyUp ();
// 點選廣播按鈕事件
self._clickBtn(); */
_keyUp: function() {
var self = this,
;
$(_config.textareaId).unbind('keyup');
$(_config.textareaId).bind('keyup',function(){
html;
if(_config .maxNum * 1 >= len * 1) {
html = _config.maxNum * 1 - len * html = _config.maxNum * 1 - len * 1;
}
$(_config.maxNumElem).html(html);
});
},
/*
* 点击广播按钮事件
*/
_clickBtn: function() {
var self = this,
_config = self.config,
_cache = self.cache;
var reg = /^\s*$/g;
$(_config.sendBtn).unbind('click');
$(_config.sendBtn).bind('click',function(){
var inputVal = $(_config.inputID).val(),
textVal = $(_config.textareaId).val(),
maxNum = $(_config.maxNumElem).attr('data-html');
if(reg.test(inputVal)) {
alert('请输入你的姓名');
return;
}else if(reg.test(textVal)) {
alert("随便说点什么吧!");
return;
}
if(maxNum * 1 < 0) {
alert('字符超过限制 请缩减字');
return;
}
// 本来是要发ajax请求的 但是这边没有后台处理 所以目前只是客户端渲染页面
self._renderHTML(inputVal,textVal);
});
},
/*
* 把html结构渲染出来
*/
_renderHTML: function(inputVal,textVal) {
var self = this,
_config = self.config,
_cache = self.cache;
var oLi = document.createElement("li"),
oDate = new Date();
oLi.innerHTML = '
' +
'
+')
'+
'
' +
'
' +
'
' +
'
'+textVal+'
' +
'
'+
'
'+self._format(oDate.getMonth() + 1) + "\u6708" + self._format(oDate.getDate()) + "\u65e5 " + self._format(oDate.getHours()) + ":" + self._format(oDate.getMinutes())+''+
'
删除'+
'
' +
'
';
// 插入元素
if($(_config.list + " li").length > 0) {
$(oLi).insertBefore($(_config.list + " li")[0]);
self._animate(oLi);
}else {
$(_config.list).append(oLi);
self._animate(oLi);
}
_config.callback && $.isFunction(_config.callback) && _config.callback();
// 清空输入框 文本域的值
self._clearVal();
// hover事件
self._hover();
},
/*
* 格式化时间, 如果为一位数时补0
*/
_format: function(str){
return str.toString().replace(/^(\d)$/,"0$1");
},
/*
* 获取ing src
* @return src
*/
_getSrc: function() {
var self = this,
_config = self.config,
_cache = self.cache;
var faceImg = $('img',$(_config.face));
for(var i = 0; i < faceImg.length; i++) {
if($(faceImg[i]).hasClass(_config.currentCls)) {
return $(faceImg[i]).attr('src');
break;
}
}
},
/*
* 清空值
*/
_clearVal: function() {
var self = this,
_config = self.config,
_cache = self.cache;
$(_config.inputID) && $(_config.inputID).val('');
$(_config.textareaId) && $(_config.textareaId).val('');
},
/*
* hover事件
*/
_hover: function() {
var self = this,
_config = self.config,
_cache = self.cache;
$(_config.list + ' li').hover(function(){
!$(this).hasClass('hover') && $(this).addClass('hover').siblings().removeClass('hover');
$('.del',$(this)).hasClass('hidden') && $('.del',$(this)).removeClass('hidden');
var $that = $(this);
// 刪除事件
$('.del',$that). 'click',function( ){
$($that).animate({
},500,function(){
} );
});
},function(){
🎜> !$ ( '.del',$(this)).hasClass('hidden') && $('.del',$(this)).addClass('hidden');
});
},
/*
* 高度
*/
_animate: function(oLi) {
_animate: var iHeight = $(oLi).height() ,
alpah = 0,
計時器化$(oLi).css({"opacity" : "0", "height" : "0"});
計時器 && clearInterval(計時器);
計時器 = setInterval(function (){: 計時器 = setInterval(function (夢" : "0 ", "高度" : (count = 8) "px"});
if (count > iHeight){
$(oLi).css({ "height" : iHeight "px "});
計時器= setInterval(function (){
阿爾法 > 100 && (clearInterval(timer), $(oLi).css({"opacity":1000);
},30);
🎜> }
};
// 初始化程式碼
$(function(){
new Microblog({});
});
原始碼下載：
http://xiazai.jb51.net//201312/yuanma/wb(jb51.net).rar
