November 2012
Intermediate to advanced
248 pages
4h 31m
Chinese
Content preview from JQUERY UI使用者介面設計
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.
拖放
|
155
$("div#books img").draggable()
會把每張圖片變成可以拖動，購物車則是以
$("div#shopping img.basket").droppable()
宣告為放置對象。
revert
選項設為
"invalid"
會使沒有放進購物車的可移動項目（書本）回到原始位置。
drop()
方法讓我們能在書放進購物車的時候進行處理。被拖動的圖片（
ui.draggable
）
會被放在購物車最後面（使用
append()
）。
css()
指令會把書本從原始位置移走，放在
籃子右邊的新位置。
draggable("disable")
指令會防止使用者再度移動圖片，並把它的
不透明度設為 1（因為
draggable("disable")
會自動降低元素的不透明度）。
為放進購物車的動作顯示特效
在書本拖到購物車的時候，沒有任何視覺效果顯示書本放在那邊會發生什麼事。
讓我們修改程式碼，讓購物車在書本移入的時候有些反應，比如說，顯示紅色邊框（圖
10-9）。
<script src = jquery.js></script>
<script src = jqueryui/js/jquery-ui-1.8.16.custom.min.js></script>
<link rel=stylesheet type=text/css
href=jqueryui/css/smoothness/jquery-ui-1.8.16.custom.css />
<style type=text/css>
.basket ...
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Read now
Unlock full access
More than 5,000 organizations count on O’Reilly
O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.Julian F.
I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.Addison B.
I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.Amir M.
I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.