使用jquerymobile web應用程序框架的聊天應用程序

我以前的問題我問過如何使用客戶端技術來實現聊天功能，特別是使用jQuery Mobile。我也在jquery移動論壇上提出了這個問題，但我感到失望。最後我能夠參照建立一個聊天功能我的本地機器上這個blog 使用jquerymobile web應用程序框架的聊天應用程序

我正在jsJac客戶端聊天，但現在我使用jQuery Mobile的框架工作實現同樣的事情，我一派，揣摩瞭解如何做，但找不到任何例子。如果有任何關於如何做和完成任務的建議和想法，請幫助實現。

謝謝。

來源

2011-09-06 Jeevan Dongre

的人在酒吧小塊好心納入我的代碼在進入樣品上的網站若跌破這麼想的工作代碼轉到http://www.pubnub.com/blog/easy-mobile-chat-html5-jquery-mobile

這個網站將直接開箱的瀏覽器（你不需要服務器 - 對移動web應用有用）

例如。在c：\ c：\ temp \ chat.html中創建一個帶有下面的html文件。然後將您的Chrome瀏覽器指向 file：/// C：/temp/chat.html。或者將html上傳到主機。然後將iphone或android或PC broswer指向該網址並讓其下降。手機 - 移動到PC聊天！這在js客戶端的你沒有需要你自己的服務器

注純粹運行，這是一個開放的演示聊天頻道，轉到酒吧小塊更多細節http://www.pubnub.com

享受

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Pub Nub Chat</title> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> 

    <script src=http://cdn.pubnub.com/pubnub-3.1.min.js></script> 



    <script> 
    chatName = ""; 
    $(document).ready(function(){ 

      PUBNUB.subscribe({ 
      channel : 'chat', 
      callback : function(text) { 
       $("#incomingMessages").append("<div class='message'><span class='username'>" + "></span> " + text + "</div>"); 
       $("#incomingMessages").scrollTop($("#incomingMessages")[0].scrollHeight); 

      } 

     }); 


     $("#chatNameButton").click(function(){ 
     chatName = $("#chatNameText").val(); 
     if(chatName.length <= 0) 
      chatName = "unknown"; 

     $(location).attr('href',"#chatPage"); 
     }); 

     $("#chatSendButton").click(function(){ 

     PUBNUB.publish({ 
       channel : "chat", 
       message : chatName + " : " + $("#messageText").val() 
      }) 
     $("#messageText").val(""); 
     }); 


    }); 

    </script> 

    <style> 
    .message 
    { 
     padding: 5px 5px 5px 5px; 
    } 
    .username 
    { 
     font-weight: strong; 
     color: #0f0; 
    } 
    .msgContainerDiv 
    { 
     overflow-y: scroll; 
     height: 250px; 
    } 
    </style> 
</head> 

<body> 

<div id=pubnub pub-key=demo sub-key=demo></div> 



    <div data-role="page" id="loginPage" data-role="page" data-theme="a"> 
     <div data-role="header"> 
      <h1>Pub Nub Chat</h1> 
     </div> 

     <div data-role="content"> 
     <div data-role="fieldcontain"> 
      <label for="chatNameText"><strong>Chat Name:</strong></label> 
      <input type="text" name="chatNameText" id="chatNameText" value="" /> 
      <button id="chatNameButton">Ok</button> 
     </div> 
     </div> 

     <div data-role="footer"> 
      <h4>Pub Nub Chat</h4> 
     </div> 
    </div> 

    <div data-role="page" id="chatPage" data-role="page" data-theme="a"> 

     <div data-role="header"> 
      <h1>Pub Nub Chat</h1> 
     </div> 

     <div data-role="content"> 
     <div id="incomingMessages" name="incomingMessages" class="msgContainerDiv" ></div> 
     <label for="messageText"><strong>Message:</strong></label> 
     <textarea name="messageText" id="messageText"></textarea> 

     <fieldset class="ui-grid-a"> 
      <div class="ui-block-a"><a href="#loginPage" id="goBackButton" data-role="button">Go Back</a></div> 
      <div class="ui-block-b"><button data-theme="a" id="chatSendButton" name="chatSendButton">Send</input> 
     </fieldset> 
     </div> 

     <div data-role="footer"> 
      <h4>Pub Nub Chat</h4> 
     </div> 
    </div> 

</body> 
</html>

來源

2012-02-02 12:55:22 ozmike

使用jquerymobile web應用程序框架的聊天應用程序

回答

相關問題