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

2014年12月31日 星期三

掀起你的蓋頭來:resizable div:easy jQuery UI


可以隨意調整大小,拉出大小的文本區塊!

123


Resizable

這一行以下是DIV
這是內容文字。
這是內容


↖從這裡拉!
456


請將下列CSS及jQuery程式碼放到<body>之後:

<link rel="stylesheet"
href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

<script>
$(function() {
$( "#resizable" ).resizable();
});
</script>

<style>
#resizable { width: 150px; height: 150px; padding: 0.5em; overflow: hidden; }
#resizable h3 { text-align: center; margin: 0; }
</style>

說明:
一、紅色字是一開始要出現的div的大小。


請將下列html放到欲編輯處:

<div style="border: 1px solid transparent; width: 170px; height: 170px;">
<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">Resizable</h3>
這一行以下是DIV<br>
<div style="width: 352px; height: 282px;">
這是內容文字<br>

這是內容<br>
<img style="width: 320px; height: 213px;" alt=""
src="https://lh4.googleusercontent.com/-Mp2uik-j_ug/VJVr1eeGcoI/AAAAAAAAZNo/wtTc-csrTm8/w759-h506-no/IMG_2083.JPG">
</div>
<br>
</div>
</div>



說明:
一、綠色者字,為固定版型用的,其大小是比一開始出現的多加上20px。
二、橘色字體者是裡面內容的div。可以自由的做內容。裡面的藍色字體是div的大小,請自行設定。



影音教學:







沒有留言:

張貼留言