如何創建一個從數據庫中抽取數據的ajax pop？

有人能告訴我如何創建一個像AJAX彈出一個不錯的小工具提示？的情況是這樣的，我從DB拉動$按行>標題，然後我提出它作爲這樣如何創建一個從數據庫中抽取數據的ajax pop？

<?php foreach($task->result() as $row): ?> 
    <tr> 
    <td><a href=#><?php echo $row->title; ?></a></td> 
    </tr> 
    <?php endforeach; ?>

當隨機用戶點擊該鏈接

一個鏈接，我希望它產生一個小的彈出窗口或工具提示，如東西，其中包含標題描述$ row-> description，當用戶從中移動鼠標時，它將關閉。我知道它是可能的，但我不知道該怎麼做。

來源

2010-02-11 sasori

你需要jQuery。將樣式表添加到<頭部> < /頭部>和javascript到頁面中的任何位置。

樣本樣式：

<style type="text/css"> 
    .description { 
    visible: hidden; 
    position: absolute; 
    left: 0px; 
    top: 0px; 

    /* View */ 
    font-family: Arial,Tahoma,Verdana; 
    font-size: 8pt; 
    color: #bbb; 
    background-color: #444; 
    padding: 5px 7px; 
    border: 1px solid #222; 
    } 
</style>

的Javascript：

<script type="text/javascript" src="path/to/jquery.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    // Add listener to links 
    $(".some_class").click(function(e) { 
    var description = $('<div class="description">'+ $(this).attr("description") +'</div>'); 
    $(this).append(description); 
    description.css("left", e.pageX-4); 
    description.css("top", e.pageY-4); 
    description.animate({ opacity: 'toggle' }, 400, 'linear'); 
    // Remove description, if user moved the mouse cursor out description 
    description.mouseout(function() { 
     $(this).remove(); 
    }); 
    return false; 
    }); 
}); 
</script>

更改代碼：

<?php foreach($task->result() as $row): ?> 
    <tr> 
    <td><a href="#" class="some_class" description="<?php echo $row->description; ?>"><?php echo $row->title; ?></a></td> 
    </tr> 
<?php endforeach; ?>

但更好的方法是檢查出一些不錯的jQuery插件..

來源

2010-02-15 08:01:06 Vladimir

但描述不能包含html標籤秒。 – Vladimir 2010-02-15 12:29:49

看看這個jQuery插件：http://www.w3avenue.com/2010/01/11/coda-bubble-jquery-plugin/

來源

2010-02-11 18:51:30

像下面這樣的東西？

AJAX來獲取描述，當你收到的響應創建描述的「盒子」

var tipel = document.createElement('div'); 
tipel.innerHTML = descr;`

把它添加到頁面

var bodyel = document.getElementsByTagName('body').item(0); 
bodyel.appendChild(tipel);`

，並將其定位，如：

tipel.style.position = "absolute"; 
tipel.style.top = newfntogetabsolutecoord_top(document.getElementById("mytitleelement")); 
tipel.style.left = newfntogetabsolutecoord_left(document.getElementById("mytitleelement"));`

獲得元素的絕對座標可能會很棘手，請在網上尋找fn。

關閉的提示，建議將放置tipel只是在鼠標指針下（你已經知道這是在鏈路"mytitleelement"，只是轉移尖端上面的線一點），然後添加一個onmouseout事件功能tipel是：

tipel.style.display = "none"; //hides or 
tipel.parentNode.removeChild(tipel); //removes it from the page

（你也許可以僥倖逃脫那些2線使用this代替tipel）

來源

2010-02-12 08:54:05

如何創建一個從數據庫中抽取數據的ajax pop？

回答

相關問題