建議參看2017年編寫最新教案 click!
按一下，
互動的跳出說明小視窗
使用程序
(1). 將下列 jQuery 程式寫入<head>xxx</head>間或是<body>之後：
使用 jQuery 套裝語法來進行特定互動形式寫作，就必須要將特定程式碼載入到網頁讀取資料的過程中。這是必要的程序，也是數位寫作要有的數位技能概念。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
- 紅色部分的 jquery 程式是和 jQuery 相關套裝程式都要用到的「主程式」。如已有使用其他互動套裝語法而載入了這條程式碼，請不要再寫入。注意：不要重覆使用這條程式。
(2). 將互動視窗內所要載入的資料，寫入於 Div 內：
Div 要記得設上識別代碼 id="xxx"，如此才能用 html 語法指定這一識別代碼，把已寫好的特定內容正確無誤互動地叫出來。
<div title="分析報導" id="anly001" style="padding: 0.5em; font-family: 新細明體; font-size: 1.17em; line-height: 1.5em; letter-spacing: 0.1em; display: block; text-align: justify; display: none;">
這是先寫入Div的內容；可以是純文字，也可以加入圖像、影音以及互動功能等等。反正一般編頁寫作／編輯在 Div 內可以呈現出來的內容、形式，都可以使用。在此其實就是當做一般網頁寫作使用。<br> </div>
這是先寫入Div的內容；可以是純文字，也可以加入圖像、影音以及互動功能等等。反正一般編頁寫作／編輯在 Div 內可以呈現出來的內容、形式，都可以使用。在此其實就是當做一般網頁寫作使用。<br> </div>
- 請先設定識別代碼 id="xxx" 以利互動程式使用，此例為 id="anly001"。
- 因為內容是互動後才要呈現，所以要先隱藏起來，style="display: none;" 。
- title="xxx" xxx是在互動說明視窗上的標題。
- 其餘的是這個 Div 的 CSS 設定。除了寬度之外，其他的設定都會作用。寬度要留給叫出互動視窗的 Html 語法來使用。
- padding: 0.5em，字和 Div 邊框的距離。font-family: 新細明體，字體的設定。font-size: 1.17em，字的大小。line-height: 1.5em，行高。letter-spacing: 0.1em，字和字的間距。text-align: justify，文字排列左右對齊。
(3). 設置 Html 互動語法給要按下去的編輯物件：
Html 互動語法可設置給文字、圖片、Div 等編輯物件。此例為文字，按下文字後，說明視窗就互動地跑出來。【按這裡看說明視窗】。
<a href="javascript: $('#anly001').dialog({autoOpen: true, show:{effect:'drop', direction:'right', duration: 1500}, width: '640', height: 'auto', resizable: false});">【按這裡看說明視窗】</a>
- '#anly001' 是要互動 Div 的指定代碼（id="xxx"），亦即代碼是 #anly001 的 Div，將會被載入於互動視窗內。記得要在代碼前面加上 # 。
- width: '640'，這是設定互動視窗的寬度，很重要，不要忘了。高度則是自動就可以，height: 'auto'。
- effect: 'drop' 是 drop 這種展開的方式， 還有更多的展開方式，例如 effect: 'slide' ，effect: 'explode'，effect: 'drop'。duration: 2000 是指展開過程的時間，可以自行調整數字，例如改成 1500 ，改變視窗跑出的速度。direction: 'right'，是指視窗從右邊跑出來，drop 之外的其他展開方式就可以不要設這個指令。
老師我想請問一下互動視窗的樣式像是顏色之類的，可以做更變嗎 ?
回覆刪除