*YouTube 教學頻道* *影像布落格*
首頁
初學者技能教案專區
布落格寫作
數位影音專題寫作
西洋哲學史導讀
老子探義導讀
《論語》小談
flickr圖像集

2017年9月2日 星期六

jQuery UI Dialog Box 互動的對話框





jQuery UI Dialog Box
互動的對話框|自動跳出|按一下跳出
各式各樣的媒材,文字、照片和影音,都可放進對話框


互動的對話框,是最常見的能動文本寫作技巧之一。
數位文本的能動特色,使得在對文本寫作的構思上,產生了許多傳統靜態線性文本所沒有的「文本呈現形式」。只有掌握了這些新的形式的寫作技巧,才能讓數位文 本在意義表現上真正凸顯出與傳統文本的不同特色。
對作者而言,談數位文本,一個先決觀念是:技術先於意義!





自動跳出 dialog box


一、請將下列jquery程式碼及CSS複製到<head> </head>之間或<body>之後:

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet"
href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">



二、要跳出來的內容設置於DIV內,請加上ID,下例:

jQuery UI 的 Dialog Box

基本上是Dialog Box這種互動模態
的「原型」,
如果你有了使用的上手經驗,
如果你對運作流程有一定理解,
就可以「思考」出更不同的表現形式。





〔DIV語法〕:

<div style="display: none;">
<div id="uidia20170901a" style="width: 424px;">
<img style="width: 180px; height: 165px;"
alt=""
src="圖像網址"
align="left" hspace="5"><span
style="text-decoration: underline; font-weight: bold;">jQuery UI 的
Dialog Box</span><br>
<br>
基本上是Dialog Box這種互動模態<br>
的「原型」,<br>
如果你有了使用的上手經驗,<br>
如果你對運作流程有一定理解,<br>
就可以「思考」出更不同的表現形式。<br>
</div>
</div>

〔注意事項〕:
一、請留意所設置DIV的寬度,此例為424px。這樣DIV的版面才能至少和dialog box相同。但最好多加28px。
二、因為是要跳出來的內容,所以請在文件的最後進行編輯寫作,才不會影響正常版面布局。
三、最後再於其外層加上一個<div style="display: none;">xxx</div>,使其消失於版 面(但資料還在)。
四、按此看上例語法之示範。

【進階補充】電腦會把內文DIV,即灰色部分,以inline-block的結構抓到dialog box裡去。所以對內文DIV的變化,一般而言都會被保留下來。


 三、請寫入下列dialog box驅動程式於<head></head>之間或<body>之後:

 <script>
  $( function() {
    $( "#uidia20170901a" ).dialog(
{
  width: 424                                      //設定對話框寬度
});
  });
  </script>


〔說明〕:
一、紅字部分就是上面範例DIV的 ID。請一定要加入 #  字號。
二、要為dialog box 設置寬度,至少要和上範例的寬度相同。或稍微加大一 點也可以,例430px。跟據我的經驗值,多加上28px,會很不錯
這樣網頁一打開,dialog box就會跳出來,而內容正是上範例的DIV。
三、如果值設定的太小,會有捲軸跑出來。如果不想有,就加大寬度設定,建議值:請多加28px。




四、如果想要改變跳出來時的位置,請加人下列參數:

<script>
$( function() {
$( "#uidia20170901a" ).dialog(
{
width: 424,
position: { my: "center-50% center-80%", at: "center center", of: window }    //設定出現位置
});
});
</script>


按我看位置更動的效果   



〔說明〕:
一、預設值是:position: { my: "center center", at: "center center", of: window }
二、可翻譯為my 我的跳出對話框的中間center(左右)、中間center(上下),對準於 at  ,整個視窗(window)的 中間center(左右)中間center(上下)。
三、我們更動為:position: { my: "center-50% center-80%", at: "center center", of: window }
四、xx%是以dialog box的長寬來當作計算標準。可以是正、負,例center+50% center-30%。




按一下就跳出  Dialog Box




一、請copy下列 jquery 程式碼至<head></head>之間或<body>之後,如上例已有使用,就可省略:

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet"
href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">


二、用DIV做出要跳出的內容,如同上例,要設ID以及注意寬度數據:


這是div的內容。
ID 是 #diadiv02B。
寬度是    185px。



〔注意事項〕:
同樣的,
一、因為是要跳出來的內容,所以請在文件的最後進行編輯寫作,才不會影響正常版面布局。
二、最後再於其外層加上一個<div style="display: none;">xxx</div>,使其消失於版 面(但資料還在,讓程式來抓資料)。


三、在要按下去的媒材內設置驅動程式:

onclick="  $('#diadiv02B').dialog({width: 195});  "


互動範例文字,請按我


〔上例語法〕:
<span onclick="$('#diadiv02B').dialog({width: 195});"
style="text-decoration: underline;">互動範例文字,請按我</span>


〔說明〕:
一、寬度設定為195px。我們之前提過,寬度至少要和DIV同寬,或著為了版面美 觀,可以稍微多加一點。建議值:28px。
二、onclick可以放在任可編輯元素中,span, div, img, iframe等等。請看教學video。



四、想要設置對話框的跳出位置:


onclick="  $('#diadiv03A').dialog({width: 195, position: { my: 'center+100% center-100%', at: 'center center', of: window }});  "


Dialog Box互動範例,在DIV按下,請按我。


〔說明〕:
語法結構與「自動跳出」的前範例同。只是裡面的引號從  " (雙引號)改成  '  (單引號)。請看教學影音詳解。
 





進階參數補充


〔class〕:   //設定dialog box布局的class

$( ".selector" ).dialog({
  classes: {
    "ui-dialog": "highlight"
  }
});


Default:
{
  "ui-dialog": "ui-corner-all",
  "ui-dialog-titlebar": "ui-corner-all",
}



〔show & hide〕:   //出現、消失的動態方式

$( ".selector" ).dialog({
  show: { effect: "blind", duration: 800 }
});


$( ".selector" ).dialog({
  hide: { effect: "explode", duration: 1000 }
});



〔modal〕:     //產生遮罩

Default: false

$( ".selector" ).dialog({
  modal: true
});



〔多參數整合語法範 例〕:


jQuery UI 的 Dialog Box

基本上是Dialog Box這種互動模態
的「原型」,
如果你有了使用的上手經驗,
如果你對運作流程有一定理解,
就可以「思考」出更不同的表現形式。
這是div的內容。
ID 是 #diadiv02B。
寬度是    185px。


這是第二個div的內容。
ID 是 #diadiv03A。
寬度是    185px。

<script>
function diydiaboxa01() {

  $( function() {
    $( "#diymulti01" ).dialog(
{
  width: 588,
  show: { effect: "blind", duration: 800 },
  classes: {
  "ui-dialog": "ui-corner-all diydacl02"},
   modal: true                         
});
  });
 
};
</script>


click 物件,請按我!看影音:


onclick=" diydiaboxa01(); "



〔使用經驗值):
一、如果想變化「內文區」,即紅色框線內的變化,必須在id下參數。此例要設 #diymulti01 { }。
二、內文區有預設 padding 值,左右大約各有14px,所以共28px。因之,在設定dialog box 寬度時,宜在DIV寬度值再多加上28px 值,上文已提及。此例,560+28=588。
三、classes: { "ui-dialog": "ui-corner-all diydacl02" }, 所控制的,是「整個」dialog box的變化。例如 .diydacl02 {} 有設背景色,所以整個dialog box都呈現背景色(淡黃)。








輕輕走過,靜靜聽過,慢慢想過。安沈中有一種力量。





沒有留言:

張貼留言