Question

首先，我不是很擅长设计，但在一些帮助下我能够实现这个代码

我的主要问题是当用户打开一个div时它会成为目标div，所以如果我同时打开五个div，那么我输入的内容并不重要，因为文本被附加到最后打开的div 。我也可以打开无限量的相同div，这不应该发生。

我遇到的一个小问题是我无法关闭div并将其最小化（就像我们点击聊天框时fb最小化）。 Fiddle

HTML

<div id="contact">
    <header>Users</header>
    <main>
        <ul>
            <li id="Prashant"><a href="#">Prashant</a></li>
            <li id="Katrina"><a href="#">Katrina</a></li>
            <li id="Priyanka"><a href="#">Priyanka</a></li>
            <li id="Kareena"><a href="#">Kareena</a></li>
            <li id="Anushka"><a href="#">Anushka</a></li>
        </ul>
    </main>
</div>
<div id="chat"></div>

CSS

* {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}
body{margin:0;padding:0;}
#contact {
    height: auto;
    background: #ececec;
    position:absolute;
    right:0;
    bottom:0;
    width:100px;
}
#contact header {
    padding: 10px;
    background: #333;
    color: #FFF;
}
#contact main {
    padding: 10px
}
#chat {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 100px;
    height: auto;
}
#chat .user {
    border: 1px solid #333;
    background: #fff;
    width: 200px;
    height: 100%;
    float: left;
    margin-right: 5px;
}
.user header {
    position: relative;
    background: #4b67a8;
    border: 1px solid #2e4588;
}
.user header .status {
    position: absolute;
    top: 36%;
    left: 10px;
    width: 8px;
    height: 8px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background: green;
}
.user header .header-text {
    color: #fff;
    font-weight: bold;
    padding: 8px;
    margin: 0 0 0 15px;
    font-size: 12px;
    text-shadow: 0 -1px rgba(0, 0, 0, .25);
}
.user header .close {
    position: absolute;
    right: 5px;
    top: 7px;
    color: #fff;
}
.message-area {
    background: #fff;
    height: 120px;
    padding: 5px;
    color: #333;
    overflow: scroll;
}
.user .input-area {
    border-top: 1px solid #333;
    padding: 3px;
}
.user .input-area input {
    padding: 5px;
    width: 100%;
    font-size: 12px;
    border: none;
    outline: none;
}

的Javascript

var username = 'user201';
$(document).ready(function() {
    $('a').click(function(e) {
        e.preventDefault();
        var targetUser = ($(this).html());
        $(document).data('chat.targetUser', targetUser);
        var user = '<div class="user open" id="' + targetUser + '"><header><div class="status"></div><div class="header-text">' + targetUser + '</div><div class="close">&times;</div></header><div class="message-area"></div><div class="input-area"><input type="text" id="input" /></div></div>';
        $('#chat').append(user);
    });

    $('#chat').on('keydown', '#input', function(event) {
        if (event.keyCode == 13) {
            var targetUser = $(document).data('chat.targetUser');
            var txt = $(this).val();
            $('#' + targetUser + ' .message-area').append(username + ': ' + txt + '<br/>');
            $(this).val('');
        }
    });
});

Answer 1

我编辑了div.close并添加了一个div.mini，如

<div class="mini" title="MINIMIZE">-</div>
<div class="close" title="CLOSE">&times;</div>

Css for .mini

.user header .mini { 
  position: absolute;
  right: 25px;
  top: 7px;
  color: #fff;
  cursor:pointer;
}

JS代码让他们工作

$(document).on("click", "div.close", function(){
  $(this).parent().parent().remove();
});

$(document).on("click", "div.mini", function(){
  var elem = $(this).parent().parent().children().not("header");
  elem.slideToggle();
});

还添加了这个js代码，以防止在已经打开的情况下添加div并将其附加到聊天的最后一部分

if ($("div#" + targetUser).length > 0) {
   $("div#" + targetUser).appendTo("#chat");
   return false;
}

FIDDLE

修改

编辑div.mini点击功能 - / +最小化/最大化

$(document).on("click", "div.mini", function(){ var elem = $(this).parent().parent().children().not("header"); elem.slideToggle(); $(this).text($(this).text() == "-" ? "+" : "-"); $(this).attr("title", $(this).attr("title") == "MINIMIZE" ? "MAXIMIZE" : "MINIMIZE"); });

UPDATED FIDDLE

Answer 2

您输入的文字将显示在上次打开的div中，因为每次点击其中一个用户时都会更改var targetUser。我认为解决此问题的最佳方法是找到input字段的父级并搜索之前的.message-area。

像这样：

$('#chat').on('keydown', '#input', function(event) {
    if (event.keyCode == 13) {
        var txt = $(this).val();
        $(this).parent().prev(".message-area").append(username + ': ' + txt + '<br/>');
        $(this).val('');
    }
});

Working JSFiddle

Answer 3

以下是代码的修复：

http://jsfiddle.net/afzaal_ahmad_zeeshan/36pcu/14/

我已经更新了你的小提琴中的代码，我添加了一个修复程序，以便div不会打开两次。

我刚刚在用户的链接中添加了一个类，以显示该用户现在处于活动状态。这是代码

if($(this).attr('class') != 'active') {

var targetUser = ($(this).html());
$(document).data('chat.targetUser', targetUser);
var user = '<div class="user open" id="' + targetUser + '"><header><div class="status"></div><div class="header-text">' + targetUser + '</div><div class="close">&times;</div></header><div class="message-area"></div><div class="input-area"><input type="text" id="input" /></div></div>';
$('#chat').append(user);
}
$(this).attr('class', 'active');

然后使用此代码处理div事件：

if (event.keyCode == 13) {
    var txt = $(this).val();
    $(this).parent().prev(".message-area").append(username + ': ' + txt + '<br/>');
    $(this).val('');
}

这是您的代码的修复程序，现在可以正常运行。

Answer 4

根据你的陈述＆＃34; ...我也可以打开无限量的相同div，这不应该发生** ...＆＃34;如果您知道打开的方框是什么，可以防止这种情况

请查看Fiddle

var id = '#Box' + targetUser;
var existent = $('#chat').find(id)[0];
// This will ensure that you can only open one box at each time     
if(existent != null){
     alert('There is already one chat to user "' + targetUser + '" open');
}
else
{
     your code...
}

此外，speetje33提出的修复程序可以帮助您防止始终在最后一个框中写入。我已经在代码中添加了一些注释，以便您更好地理解。

无法在特定div中打印输出？

4 个答案: