李明哲老師多媒體互動寫作教學: 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
});

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

<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都呈現背景色（淡黃）。

李明哲老師多媒體互動寫作教學

2017年9月2日星期六

jQuery UI Dialog Box 互動的對話框

1 則留言:

2017年9月2日 星期六

jQuery UI Dialog Box 互動的對話框

1 則留言:

2017年9月2日星期六