보낸 메시지와 다르게 스타일 지정하기

들어오는 텍스트를 개별적으로 스타일링 할 수있는 방법이 있습니까?이 방법은 비교적 쉽지만, 며칠 동안 고민하고 있으므로 도움을받을 수 있습니다.보낸 메시지와 다르게 스타일 지정하기

다음은 사용자 메시지를받는 코드입니다. 여기

<textarea type='text' class='materialize-textarea' 
     name='user_message' id='user_message' placeholder='Type here...' 
     style='width: 70%;' 
</textarea>

은 JS 사용 푸셔 내 코드입니다

(function(window, Pusher, $) { 

    Pusher.log = function(msg) { 
    if(window.console && window.console.log) { 
     window.console.log(msg); 
    } 
    }; 

Pusher.channel_auth_endpoint = "auth.php"; 

    var pusher = new Pusher(CONFIG.PUSHER.APP_KEY); 
    pusher.connection.bind('state_change', function(change) { 
    var el = $('.connection-status'); 
    el.removeClass(change.previous); 
    el.addClass(change.current); 
    }); 

    var channel = pusher.subscribe(CONFIG.PUSHER.CHANNEL_NAME); 
    channel.bind('new_message', addMessage); 

    function addMessage(data) { 
    var li = $('<li class="ui-li ui-li-static ui-body-c"></li>'); 
    li.text(data.text); 
    li.hide(); 
    $('#messages').append(li); 
    li.slideDown(); 
    } 


    $(document).keypress(function(e) { 
    if(e.which == 13) { 
    var userMessageEl = $('#user_message'); 
    var message = $.trim(userMessageEl.val()); 
    if(message) { 
     $.ajax({ 
     url: 'new_message', 
     type: 'post', 
     data: { 
      text: message 
     }, 
     success: function() { 
      userMessageEl.val(''); 
     } 
     }); 
    } 


    return false; 
    } 
    }); 

})(window, window['Pusher'], jQuery);

내가 PHP를 사용하여 정보를 보낸 후 메시지를 표시하는 내 코드는,이 단지 내 데이터베이스와 사용자에 저장 작품입니다 페이지를 새로 고칩니다. 아마 당신은 무엇을 원하는

// Message sent by the user 
     if($row2[initiator] === $lgusername){ 
     echo ("<li class='text-right' 
     style='margin-top: 5px; margin-bottom: 5px; margin-left: 100px; padding: 10px; 
     background-color: #b2f2ec; border: 1px solid #ccc!important; 
     border-radius: 4px!important; text-color: #fff;'>" . $row2[msg] . "</li>"); 
     } 

     Received message 
     else { 
     echo ("<li class='text-left' 
     style='margin-top: 5px; margin-bottom: 5px; margin-right: 100px; padding: 10px; 
     background-color: #e4ffe1; border: 1px solid #ccc!important; 
     border-radius: 4px!important;'>" . $row2[msg] . "</li>"); 
     }

출처

2017-02-28 John

는 senderId에 태그 메시지이고, 메시지를 수신 할 때 당신은 그것을 다르게를 보낸 사람에 따라 포맷 할 수 있습니다. 당신이

{ 
    text: "message text" 
}

대신 데이터와 메시지를 트리거하는 순간에 그래서, 당신은 데이터

{ 
    text: "message text", 
    senderId: "someId" 
}

당신이 당신의 addMessage 기능에 메시지를 렌더링 할 때 다음, 당신은 data.senderId을 확인하실 수 있습니다으로 트리거 할 수 있습니다 값에 따라 li의 형식을 다르게 지정하십시오.

출처

2017-02-28 12:21:36

보낸 메시지와 다르게 스타일 지정하기

답변

관련 문제