Qt與HTML，jQuery交互實現類似QQ聊天界面

作爲一個前端的小白，在jQuery和HTML上真的是頭疼不已，而項目開發正好需要用到HTML和jQuery做一個類似QQ聊天界面的消息記錄框，查找了很多資料並自己動手終於將基本功能全部搞定了。接下來將詳細談一下：
先上效果圖，畢竟有圖有真相。

1. 氣泡效果
http://blog.csdn.net/tax10240809163com/article/details/50610637
2. 右鍵菜單

下面來看看代碼：

/*div右鍵菜單，添加了兩個子選項*/
 $("div").contextPopup({
         items: [
         { label:'Copy', action:function()
         { 
                Copy( divId );
         }
         },
        { label:'Delete', action:function()
          {
                Delete( divId );
           }
        },
        ]
  });

接下來就是兩個子選項的JScript代碼，調用Qt的函數，實現Qt和jQuery的交互。其中MainWindow是在Qt代碼裏面定義添加的,代碼見下。

/******************在HTML裏創建Qt的對象*************************/
void chatdemo::addObjectToJs()
{
    m_ui.webView->page()->mainFrame()->addToJavaScriptWindowObject( "MainWindow", this );
}


/******************複製和刪除的jQuery代碼*************************/
 /*複製消息*/
function Copy( id )
{
    MainWindow.JavascriptCallQtCopy( divId );
}
/*刪除*/
function Delete( id )
{
    MainWindow.JavascriptCallQtDelete( divId );
    document.body.removeChild( document.getElementById( divId ) );
}

/******************Qt工程中的代碼*************************/
//在網頁中右鍵複製
void NiceTalk::JavascriptCallQtCopy( QString strId )
{
    //查詢數據庫，將返回的消息內容寫入系統剪貼板
    //QString str = ...
    QApplication::clipboard()->setText( str );
}

//在網頁中右鍵刪除
void NiceTalk::JavascriptCallQtDelete( QString strId )
{
    ;//查詢數據庫，將該條記錄刪除
}

//Js回調Qt獲取即將寫入的新消息
QString NiceTalk::JavascriptCallQtGetNewMessage()
{
    ;
    QString strNew = //要寫進HTML文件的代碼.
    return strNew;
}

1. 雙擊看圖

/******************實現雙擊看圖的代碼*************************/
/*獲取id*/
$("div").dblclick(function()
{
    divId = $(this).attr("id");
    MainWindow.JavascriptCallQtDbclick( divId );
});

//在網頁中雙擊
void NiceTalk::JavascriptCallQtDbclick( QString strId )
{
    ;//strId 是消息的ID,根據stride讀取數據庫獲取圖片在本地的絕對路徑並顯示
}`

1. 滾動條自動滾動
   滾動條的自動滾動的設置，以前一直以爲是設置一下scrollTop的值就可以了，後來才發現，這樣設置後必須要有人爲的操作才能實現結果。要想實現頁面加載完成後滾動條自動滾動到底就是講要顯示的是scrollTop的值設定就可以了。

$(document).ready(function()
{
    //獲取body的ID
    var div = document.getElementById('content');
    //將scrollTop的值設爲可以顯示的最大值
    div.scrollTop = div.scrollHeight;
})

如果想要每次添加一條消息後滾動條也始終保持在最底部，在添加消息的代碼裏面將這些添加進去就可以了。

var div = document.getElementById( "content" );

var nodeDiv = document.createElement( "div" );
//從Qt裏面獲取要寫進HTML文件的代碼
nodeDiv.innerHTML = MainWindow.JavascriptCallQtGetNewMessage();
//將這一條消息添加到界面上去
document.body.appendChild( nodeDiv );

div.scrollTop = div.scrollHeight;