人人IT網

人人IT網

當前位置: 主頁 > JAVA編程 > JAVA >

利用bootstrap實現懸浮窗口的效果

時間:2016-11-30 19:33來源:Internet 作者:Internet 點擊:
大概是2015年最後一篇博客……   【轉載請注明出處:http://raising.iteye.com/admin/blogs/2267492   靴靴~~】   經常玩社群網站的想必對這样一種場景

大概是2015年最後一篇博客……

 

【轉載請注明出處:http://go.rritw.com/raising.iteye.com/admin/blogs/2267492   靴靴~~】

 

經常玩社群網站的想必對這样一種場景很常見,如圖:



 

 

鼠標停在某個超鏈接上,然後會出現一個懸浮框,內容時該账號的一些信息。

 

剛好最近在做一些前端的東東,涉及到類似的需求。——鼠標懸停,出現一個懸浮框,懸浮框描述一些具體信息。之前其實参考了網上的一篇文章,但覺得有點兒過於复雜。。而發現:神奇的 bootstrap就自帶了這個功能。所以就用bootstrap的popover插件做了,效果還不錯。雖然挺簡單的,但還是紀念一下……

 

定義一個超鏈接,同時需注意相應頁面的必要的css和js必須引入:

 

<link href="css/bootstrap.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>

<a href="http://raising.iteye.com/#" class="bind_hover_card" data-toggle="popover" data-placement="bottom" data-trigger="hover"><img class="commentAvatarImage" src="img/social_dribbble.png" /></a>

 

 

data-toggle="popover"屬性則为該超鏈接绑定彈窗效果,data-placement="bottom"指定彈窗相對於超鏈接顯示的位置,data-trigger="hover"則是關鍵,指定懸浮時觸發彈窗顯示。。

關於bootstrap之popover插件的一些常見屬性如下:

選項名稱 類型/默認值 Data 屬性名稱 描述
animation boolean
默認值:true
data-animation 向彈出框應用 CSS 褪色過渡效果。
html boolean
默認值:false
data-html 向彈出框插入 HTML。如果为 false,jQuery 的 text 方法將被用於向 dom 插入內容。如果您擔心 XSS 攻擊,請使用 text。
placement string|function
默認值:top
data-placement 規定如何定位彈出框(即 top|bottom|left|right|auto)。
當指定为 auto 時,會動態調整彈出框。例如,如果 placement 是 "auto left",彈出框將會盡可能顯示在左邊,在情況不允許的情況下它才會顯示在右邊。
selector string
默認值:false
data-selector 如果提供了一個選擇器,彈出框對象將被委派到指定的目標。
title string | function
默認值:''
data-title 如果未指定 title 屬性,則 title 選項是默認的 title 值。
trigger string
默認值:'hover focus'
data-trigger 定義如何觸發彈出框: click| hover | focus | manual。您可以傳遞多個觸發器,每個觸發器之間用空格分隔。
delay number | object
默認值:0
data-delay 延遲顯示和隱藏彈出框的毫秒數 - 對 manual 手動觸發類型不适用。如果提供的是一個數字,那麼延遲將會應用於顯示和隱藏。如果提供的是對象,結構如下所示:
delay:{ show:500, hide:100}
container string | false
默認值:false
data-container 向指定元素追加彈出框。
實例: container: 'body'

 

常見方法:

方法描述實例Options: .popover(options)向元素集合附加彈出框句柄。

$().popover(options)

Toggle: .popover('toggle')切換顯示/隱藏元素的彈出框。

$('#element').popover('toggle')

Show: .popover('show')顯示元素的彈出框。

$('#element').popover('show')

Hide: .popover('hide')隱藏元素的彈出框。

$('#element').popover('hide')

Destroy: .popover('destroy')隱藏並銷毀元素的彈出框。

$('#element').popover('destroy')

 

好了,下面重點是Js部分。

$(function() {
    $("[data-toggle='popover']").popover({
        html : true,  
        title: title(),  
        delay:{show:500, hide:1000},
        content: function() {
          return content();  
        } 
    });
});

 而我們來模擬下動態加載懸浮框的標題和內容:

//模擬動態加載標題(真實情況可能會跟後台進行ajax交互)
function title() {
    return '田喜碧Hebe(節制的人生)';
}

//模擬動態加載內容(真實情況可能會跟後台進行ajax交互)
function content() {
    var data = $("<form><ul><li><span aria-hidden='true' class='icon_globe'></span>&nbsp;<font>粉絲數:</font>7389223</li>" +
             "<li><span aria-hidden='true' class='icon_piechart'></span>&nbsp;<font>關注:</font>265</li>" +
             "<li><span aria-hidden='true' class='icon_search_alt'></span>&nbsp;<font>微博:</font>645</li>" +
             "<li><span aria-hidden='true' class='icon_pens_alt'></span>&nbsp;<font>所在地:</font>台灣</li>" +
             "<input id='btn' type='button' value='關注' onclick='test()'/></form>");
    
    return data;
}
//模擬懸浮框裏面的按鈕點擊操作
function test() {
    alert('關注成功');
}

 

查看效果:



 

簡便又好用。不得不感叹bootstrap之強大!


From:ITEYE
頂一下
(0)
0%
踩一下
(0)
0%
------分隔線----------------------------
發表評論
請自覺遵守互聯網相關的政策法規,嚴禁發布色情、暴力、反動的言論。
評價:
表情:
驗證碼:點擊我更換圖片
欄目列表
推薦內容