jQuery/jQuery Mobile 技術文件 》（持續新增中…）
jQuery 支援HTML元素的動態屬性調整，假設有一個標籤如下：
以下為存取此標籤 src 屬性所需的語法：
第一行取得 <img /> 標籤的參照並調用 attr() 方法，設定其 src 屬性指定所要呈現的圖片檔案，第二行取得 src 屬性。考慮以下的範例畫面：
這個畫面可以顯示兩張不同的圖片，當網頁載入完成，會自動顯示第一張圖片，使用者可以點選下方的小型圖示選單，以切換所要呈現的圖片。
jQuery 支援HTML元素的動態屬性調整，假設有一個標籤如下：
<img id="cimg" />
以下為存取此標籤 src 屬性所需的語法：
$('#cimg').attr('src','images/myimg.jpg'); //設定 src 屬性
var imgsrc = $('#cimg').attr('src'); // 取得 src 屬性
第一行取得 <img /> 標籤的參照並調用 attr() 方法，設定其 src 屬性指定所要呈現的圖片檔案，第二行取得 src 屬性。考慮以下的範例畫面：
首先於網頁配置如下的內容：
這是一個空白的 <img /> 標籤，識別 id 為 cimg ，現在於<script>區段中，配置以下的程式碼：
其中於網頁載入完成時，調用 attr() 以設定 <img> 標籤的圖片來源與呈現寬度。回到網頁配置畫面下方的導覽列：
其中註冊 click 事件處理程序，以回應使用者點擊圖片的動作。以下是 click_handler()函式的內容：
其中取得目前圖片的 src 屬性，將其重設至 cimg ，以達到大圖的切換效果。
jQuery/jQuery Mobile 技術文件 》（持續新增中…）
<body style="background-color:black;">
<div>
<img id="cimg" />
</div>
</body>
這是一個空白的 <img /> 標籤，識別 id 為 cimg ，現在於<script>區段中，配置以下的程式碼：
$(document).ready(
function () {
$('#cimg').attr('src', 'images/IMGP0811_l.jpg');
$('#cimg').attr('width', '460')
}
);
其中於網頁載入完成時，調用 attr() 以設定 <img> 標籤的圖片來源與呈現寬度。回到網頁配置畫面下方的導覽列：
<div>
<img style="margin:2px;cursor:pointer;"
src="images/IMGP0811_l.jpg"
width="100" onclick ="click_handler(this)" />
<img style="margin:2px;cursor:pointer;"
src="images/IMGP0818_l.jpg"
width="100" onclick ="click_handler(this)" />
</div>
其中註冊 click 事件處理程序，以回應使用者點擊圖片的動作。以下是 click_handler()函式的內容：
function click_handler(o) {
var s = $(o).attr('src');
$('#cimg').attr('src',s);
}
其中取得目前圖片的 src 屬性，將其重設至 cimg ，以達到大圖的切換效果。
jQuery/jQuery Mobile 技術文件 》（持續新增中…）
沒有留言:
張貼留言