jsp 类似于空间评论回复框的效果 10

类似于qq空间评论回复框的效果具体效果是：1.没有点击回复框的时候，只显示一个回复框，2.当点击回复框之后，回复框获得焦点，然后显示回复框下面的表情啊，“回复”按钮等，3... 类似于qq空间评论回复框的效果
具体效果是：
1. 没有点击回复框的时候，只显示一个回复框，
2. 当点击回复框之后，回复框获得焦点，然后显示回复框下面的表情啊，“回复”按钮等，
3. 点击页面任意地方(除了回复框部分)，包括页面空白或者其他元素。回复框又恢复为最初的状态。
4. 点回复按钮只能出来一个文本框
这个谁知道怎么弄？？展开

 我来答

2个回答

#热议# 应届生在签三方时要注意什么？

匿名用户
2012-12-28

展开全部

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>RunJS</title>
<script id="jquery_172" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.7.2.min.js"></script>
</head>
<body>
<a style='font-size:15pt;' href='javascript:void(0)' onclick='openDialog("reply");'>评论</a>
<div>
<span class="close"></span>
<span id="reply">评论"某某"的答案</span>
<span class="tip">请输入内容：</span>
<textarea></textarea>
<button>发表评论</button>
<a href="javascript:void(0)" class='cancel'>取消</a>
</div>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------
(function($){
function getParent(obj,cnt){
for(var i=0;i<cnt;i++){
obj = obj.parent();
}
return obj;
}

$.fn.TDragDrop = function(set){
var defaults = {
parent:0, // 拖动对象，向上n父节点，parent为0时，拖动本身
opacity:0.3 // 拖动时节点透明度，默认为0.3
};
var setting = $.extend(defaults, set);

this.each(function(){
var ele = getParent($(this),setting.parent);
ele.css('position','absolute')
.css('top',ele.offset().top)
.css('left',ele.offset().left);
$(this).bind('mousedown',function(event){
event = event || window.event;
var self = getParent($(this),setting.parent);
self.attr('flag',true)
.attr('oldZIndex',self.css('z-index'))
.attr('startX',event.clientX - self.offset().left)
.attr('startY',event.clientY - self.offset().top);

self.css('cursor','move')
.css('z-index',99999)
.css('opacity',setting.opacity);
document.onselectstart=function(){return false};
}).bind('mouseup mouseout',function(){
var self = getParent($(this),setting.parent);
self.css('cursor','auto')
.css('z-index',self.attr('oldZIndex'))
.css('opacity','1');
self.attr('flag',false);
document.onselectstart=function(){return true};
}).bind('mousemove',function(event){
event = event || window.event;
var self = getParent($(this),setting.parent);
if(self.attr('flag') === 'true'){
self.offset({'left':event.clientX - self.attr('startX'),
'top':event.clientY - self.attr('startY')});
if(self.offset().left < 0){
self.offset({'left':0});
}else if(self.offset().left > $(window).width() - self.width() - 2){
self.offset({'left':$(window).width() - self.width() - 2});
}
if(self.offset().top < 0){
self.offset({'top':0});
}else if(self.offset().top > $(window).height() - self.height() - 2){
self.offset({'top':$(window).height() - self.height() - 2});
}

}
});

});
}
})(jQuery);

$(function(){
// 调用
var obj = $("#reply");
obj.TDragDrop({'parent':1});

$('.close,.cancel').click(function(){
$(this).parent().fadeOut('normal');
})

openDialog('reply');
});

function openDialog(id){
// 居中
var box = $("#"+id).parent();
box.fadeIn('normal');
box.offset({'top':($(window).height()-box.height())/2,
'left':($(window).width()-box.width())/2});
$("textarea").val('');
}

-----------------------------------------------------------------------------------------------------------
*{
padding:0;
margin:0;
font-size:11pt;
font-family:Verdana,sans-serif,'宋体';
}
div{
border:1px solid #eee;
background-color:#fff;
width:410px;
border-radius:4px;
padding:8px;
padding-bottom:20px;
-webkit-box-shadow:0px 0px 15px 3px #515151;
-moz-box-shadow:0px 0px 15px 3px #515151;
}
textarea{
width:100%;
height:80px;
margin-bottom:20px;
background：none repeat scroll 0 0 #FFFFDD;
background-color:#FFFFDD;
border:1px solid #ccc;
resize:none;
}
button{
padding:2px;
font-size:10pt
}
a{
font-size:9pt;
color:#4466BB;
}
#reply{
background-color:#40AA53;
display:block;
font-size:13px;
height:18px;
line-height:18px;
padding:5px 15px;
color:#fff;
font-weight:bold;
}
.tip{
display:block;
margin-top:10px;
margin-bottom:5px;
font-size:10pt;
}
.close{
background:url("http://www.oschina.net/js/2011/fancybox/fancybox.png") repeat scroll -40px 0 transparent;
display:block;
width:30px;
height:30px;
position:absolute;
top:-17px;
right:-17px;
z-index:9999999;
}

追问

大神，能不能加qq聊一下，你写的不是很明白！！
qq:  2664941751

追答

直接套进去用呢 自己看着改下, HTML-javaScript-CSS

已赞过 已踩过<

评论收起

麦麦走了
2012-12-28 · TA获得超过100个赞

知道答主

回答量：62

采纳率：0%

帮助的人：38.5万

我也去答题访问个人页

关注

展开全部

javascript获取焦点,触发事件发生。

追问

这个我知道，现在是点回复，只能出来一个回复框，类似于qq空间里面的说说评论一样，不过要很多人评论的那种，我可以回复好友的评论，这个点回复，只能出来一个回复框，这个怎么实现？？？

已赞过 已踩过<

评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

jsp 类似于空间评论回复框的效果 10

其他类似问题

为你推荐：