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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGIm_nG48lEN7LiosOSGVlmqN_UWQeeROnQM-UD_ZRV22rHRNLFypa99MwojHquM0OgiXlzz9Jv-gXuOyDLb4bfPtR_JbcLkh8_kjnQN4v8DwzmpKD82bp0-i52opE4-1HToqGxKBoBC8/w759-h506-no/IMG_2083.JPG">
</div>
<br>
</div>
</div>



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



影音教學：







沒有留言:

張貼留言