3

我正在从事一些个人项目，它就像聊天的前端。所以我有我的用户，我有一个带有在线和离线用户列表的 JSON。当网站首次加载时，我还加载用于自定义滚动的插件并使用 jquery ui 使元素可拖动。我想知道的是，是否有一种方法可以使添加到正文（聊天窗口）的新元素自动滚动，并且每次添加它们时都有这个自定义滚动条。到目前为止，我所做的是：

$(document).on("ready", functions);
function functions() {
    $("#contacts-container").slimScroll({
    height: '220',
    size: '10px',
    position: 'right',
    color: '#535a61',
    alwaysVisible: false,
    distance: '0',
    railVisible: true,
    railColor: '#222',
    railOpacity: 0.3,
    wheelStep: 10,
    disableFadeOut: false
});

$(".messages-container").slimScroll({
    height: '200',
    size: '10px',
    position: 'right',
    color: '#535a61',
    alwaysVisible: false,
    distance: '0',
    railVisible: true,
    railColor: '#222',
    railOpacity: 0.3,
    wheelStep: 10,
    disableFadeOut: false,
    start: "bottom"     
});
$("#online .user-name").on("click", checkUser);

};

function checkUser(){
console.log("clicked");
var user = $(this).html();
$.getJSON("js/options.json", function(json){
    var itemsLength = json.chat.OnlineContacts.length;
    for ( var i = 0; i < itemsLength; i++) {
        var jsonUserName = json.chat.OnlineContacts[i].name;
        var jsonUserStatus = json.chat.OnlineContacts[i].status;
        var jsonUserAvatar = json.chat.OnlineContacts[i].picture;
        if(user == jsonUserName){
            displayChatWindow(jsonUserName, jsonUserStatus, jsonUserAvatar);
        }
    };
});
}

function displayChatWindow(user, status, avatar){
console.log(avatar);
var template = _.template($("#windowTemplate").html(), {userName: user, userStatus: status, userAvatar: avatar});
$("body").prepend(template);
$(".messages-container").slimScroll({
    height: '200',
    size: '10px',
    position: 'right',
    color: '#535a61',
    alwaysVisible: false,
    distance: '0',
    railVisible: true,
    railColor: '#222',
    railOpacity: 0.3,
    wheelStep: 10,
    disableFadeOut: false,
    start: "bottom"     
});
$(".friend-window").draggable({handler: ".header"});
}

在 DisplayChatWindow 上，我附加了代表聊天窗口的 div 模板，但我还必须重新添加 slimScroll 函数和 draggabla 函数，但我希望它们在我附加后自动拥有它，我正在学习 Java Script所以我不知道是否使用一个对象我可以实现这一点，或者是否有其他方法，基本上我在这里所做的到目前为止我最知道如何做，如果你们能帮助我，我将不胜感激:)

4

1 回答 1

0

我相信这应该有效。

$(document).on("ready", function() {
    functions();
    $(document).bind('DOMNodeInserted', function() {
        $(".messages-container").slimScroll({
            height: '200',
            size: '10px',
            position: 'right',
            color: '#535a61',
            alwaysVisible: false,
            distance: '0',
            railVisible: true,
            railColor: '#222',
            railOpacity: 0.3,
            wheelStep: 10,
            disableFadeOut: false,
            start: "bottom"     
        });
   }); 
});
于 2013-06-22T05:34:08.793 回答