使用 jQuery UI 项目 -3 互动-Interactions
|
- UID
- 1066743
|
使用 jQuery UI 项目 -3 互动-Interactions
互动-Interactions最后，我将介绍比页面爆炸更令人兴奋的东西。Interactions 非常强大，您可以通过它决定拖动一个元素越过另一个元素会发生什么，将一个元素置于另一个元素之上会发生什么，以及使用两个 HTML 元素可以实现的其他有趣的事情。
通过 dragging/dropping 支持交互是 Web 应用程序设计的新领域。因为大部分用户都习惯于静态页面和静态页面元素，所以支持拖放交互的 Web 应用程序非常少。甚至支持这种独特交互的桌面应用程序也不多。但是这样的 Web 应用程序还是存在的，其中一个例子就是：Yahoo Fantasy Sports 页面几乎完美地利用了 drag/drop 模型，使用它们可以刷新队员、在挑选之前对运动员进行排序，并将运动员移动到裁员列表。即使您没有使用过 Fantasy Sports，我还是鼓励您试用它，看看它们的独特用户界面设计。这是我见过的在 Web 上使用 drag/drop 模型的最佳典范。
Interactions 模块包含 5 种类型的交互。前 3 种是：
- Resizable 让页面上的元素可以调整大小，从而允许用户改变它们的形状并调整页面上的其他元素。如果您正在创建带有多个 portlet 的Web 应用程序，那么这个交互是很有用的，它允许用户设计自己的 Web 页面。MyYahoo 和 iGoogle 都允许您定制自己的页面，但它们使用的定制方式是自的。您仅能以特定的方式定义一定数量的专栏。为什么不让用户 完全定义自己的页面？
- Selectable 允许对页面上的元素进行分组，然后让用户在每组中选择这些元素的子集。这种类型的交互对于创建定制列表或选择小部件十分有用。
- Sortable 界面。它允许页面元素以某种顺序吸附到指定位置。假如您有一个包含 5 行的表。通过利用 Sortable 交互，您可以将第四行拖动到第二行的位置，而剩余的行将自动进行排序。我鼓励大家仔细看看这 3 个交互，因为它们为开发人员创建小部件和 Web 应用程序交互提供一些新方式。
在这个小节中，我主要关注两个我认为对未来的 Web 应用程序比较有用的交互：
在接下来的例子中，我将同时使用它们，尽管这不是必须的。
在这个示例 Web 应用程序中，我将改变人们在线购物的方式。这里不是通过按下一个按钮来将商品放到购物车中，我希望通过 Draggable/Droppable 模拟人们购物时的动作，即将商品放到购物车中。用户将把需要购买的商品拖放到购物车中。当商品进入购物车之后，将自动更新购物车中的商品数量和总价。
图 2. 购物车示例 我们看看完成这个交互所需的少量代码。（本文的末尾包含完整的样例代码）。
清单 3. 购物车1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
| // First, set up the shopping cart
// Give the cart an ID that we can reference in the jQuery code
// Give each span an ID so we can easily update the text in it
<img src="cart.jpg" id=cart>
<p><span id=numItems>0</span> items in your cart.
<p>Your total is $<span id=totalPrice>0</span>.
// Each product has code that looks like this. The entire product
// is wrapped in a DIV with a class of "product" and given a
// unique ID. It also has a span that defines the price of the object.
<p><div class=product id=ban><img src="banana.jpg" align=left> Bananas
<p>$<span class=price>1.99</span></div><br><br>
// define each DIV that has a "product" as "draggable"
// The draggable function has many options that define how the object
// will look and feel when dragged. There are many options, most not
// covered here, but I put a sampling in to whet your appetite.
$(".product").draggable({
'opacity': 0.3, // make the object semi-transparent when dragged
'revert': "valid", // snap the object back after it's been dropped
'delay': 200, // delay 200 ms before starting to drag it
'distance':4, // wait till it's been dragged 4 pixels before starting
'helper':"clone" // keep the object where it is and use a helper to show dragging
});
// just like the draggable has many options, the droppable has many
// options as well. These options provide a variety of ways
// to offer reinforcement to the user about how the draggable/droppable
// relationship is to work
$("#cart").droppable({
'accept':".product", // define which elements will trigger a 'drop'
'activeClass':"border", // what class to add to the droppable while dragging
'drop': function(e,ui){ // this function gets called when something is dropped
// update the number of items in the cart
$("#numItems").text(new Number($("#numItems").text())+1);
var ID = $(ui.draggable).attr("id");
// get the price from the object just placed in the cart
var price = new Number($("#"+ID + " .price").text());
// update the total price in the cart
$("#totalPrice").text(new Number($("#totalPrice").text())+price);
}
});
|
这就是所需的代码。创建这个示例非常轻松，我自己都感到惊奇。毫无疑问，由于使用这种交互创建用户界面非常简单直观，所以它将流行起来。这个小节提到的其他交互也同样很简单，并且您可以在 Web 应用程序中利用它们各自的特点。 |
|
|
|
|
|
