BS3 Popovers
簡介
這篇解說如何用 Javascript 直接建立 BS3 的 popover。用法很簡單，就如同在 jQuery 中建立一個元件的方式一樣，建立元件時，傳入的參數必須是一個 Javascript 的物件，物件中包含所有要設定的參數及其值，請參考文章下方的 Javascript 程式碼。
以下為各參數及其允許值，以下大多數的參數亦可以用 data-* 的自訂屬性在 HTML 程式碼中設定，只有少數幾個屬性，當其值為 Javascript 物件時，受限於 HTML5 對自訂屬性的限制，是不能在 data-* 中設定的。popover 的屬性個數比 tooltip 的屬性要略多一些。
- animation
- Boolean 值, 設定為 true 時，popover 顯示時有動畫效果，反之則無。
- delay
- 允許值為一 Javascript 物件，如
{show: 500, hide:300}設定顯示及取消時的歷時，單位為 ms。允許值亦可為一數值，為數值時，顯示及取消歷時都同樣設定為此數值。 - html
- Boolean 值，設定為 true 時，允許在 title 參數中置入 html 程式碼並顯示，反之則只能使用一般文字。
- placement
- 值可為字串或函式。若為字串，允許值為 "top", "right", "bottom", "left" 及 "auto"，若為函式，則由函式運算後傳回代表位置的字串值。
- selector
- 允許值為 CSS3 篩選器的字串值，用以委任 (delegate) 要顯示 popover 的元件；這個屬性值只用在顯示 popover 的元件為動態加入 DOM 文件中的時候才有意義。
- title
- 允許值為 html 字串或純文字。其值做為 popover 的標題。如果在 HTML 程式碼中已設定
title屬性的值，則優先以其設定值為 popover 標題的內容，如果不曾設定，才會以此處的設定值做為 popover 的標題內容。 - content
- 允許值為 html 字串或純文字。其值做為 popover 的內容。
- trigger
- 允許值為字串，設定顯示 popover 的條件。允許值為 "hover"（預設), "click", "focus" 及 "manual"。
- container
- 允許值為 CSS3 的篩選字串。將 popover 的 DOM 元件指派給特定的元件。使用這個屬性設定時，螢幕上是看不出任何變化的，必須打開「開發者工具」檢視元件 (element) 頁面才能看出有何不同，popover 的 DOM 元件會出現在 container 指定的內容中。
- template
- 允許值為字串，popover 的 html 範本，預設為
''。可依需要修改範本內容。 - viewport
- 允許值為一個 Javascript 物件。用來規範 popover 顯示時的位置，這個屬性的使用時的行為模式比較複雜，最好寫個程式好好測一下。Javascript 物件中的屬性有二：
- selector
- 允許值為 CSS3 籂選器的字串值，限制 popover 所顯示的範圍為篩選元件所佔據的空間；預設值為 body。
- padding
- 允許值只能為正整數值，單位為 px。設定 popover 內容的偏移量，當 placement 為 "top" 及 "bottom" 時，popover 的內容向左偏移；當 placement 為 "left" 及 "right" 時，popover 的內容向下偏移。這樣，可以有限度的調整箭頭和 popover 外框的相對位置。偏移量則由 viewport 中的 selector 屬性中篩選的元件作為基準。
範例
範例串建立了兩個具有 popover 的按鈕，第一個（上方）以 data-* 自訂屬性設定其樣式及內容。第二個 （下方）以 Javascript 設定其樣式和內容，冋時在 template 屬性中增加 style 屬性的設定更改了 popover 標題的底色。trigger 屬性設定為 "hover"，在游標移到按鈕上方時，會顯示 popover，游標移出按鈕時取消 popover。
CSS
<style>
html {
width:100%;
height:100%;
}
body {
margin: 0 auto;
max-width: 900px;
padding: 20px;
}
</style>
CSS 中沒有特別設定其它的樣式。
HTML
<body>
</body>
第 3~7 行以 HTML 屬性及 data-* 自訂屬性建立第一個按鈕，多數的屬性都採取預設值。
第 9 行建立一個單純的按鈕，其 popover 的樣式及內容在以下的 Javascript 中以程式的方法設定。
Script
<script>
$(function(){
$(document).ready(function(){
$("#pop1").popover();
// only modifies one popover element
var opts ={
animation: true,
delay: {
show: 2000,
hide: 1000
},
html: true,
template: '',
title: "POPOVER",
content: "Here is some content.
",
trigger: "hover",
placement: "bottom",
viewport:{
selector: "#demo",
padding: 0
}
};
$('#pop2').popover(opts);
});
});
</script>
第 4 行啟動第一個按鈕的 popover 功能。
第 6~22 行設定 popover 的各項屬性值。
第 23 行啟動第二個按鈕的 popover 功能。
沒有留言:
張貼留言