(4)事件处理——(8)一个简单的风格切换器(A simple style switcher)
2013-10-16 00:26
253 查看
To illustrate some event handling techniques, suppose we wish to have a single page rendered in several different styles based on user input. We will allow the user to click buttons to toggle between a normal view, a view in which the text is constrained
to a narrow column, and a view with large print for the content area.
为了研究一些事件处理技术,假定我们希望让一个网页由用户输入的来决定不同的渲染样式。我们将让用户点击按钮来让网页在三个样式中切换:一个正常视图,一个文本的行间距变窄的视图,一个文本区域是大号字体的视图。
渐进增强
Progressive enhancement
In a real-world example, a good web citizen will employ the principle of progressive enhancementhere. The style switcher should either be hidden when JavaScript is unavailable or, better yet, should still function through links to alternative versions of the
page. For the purposes of this tutorial, we'll assume that all users have JavaScript turned on.
渐进增强
在真实世界中,一个好的we b开发者将使用渐进增强的原则。在js不可用的时候风格切换器应该被隐藏,或者仍然可以通过链接到不同版本的网页来生效。为了这个教学的目的,我们假定所有用户的js功能都被开启了。
The HTML markup for the style switcher is as follows:
样式切换器的html标记如下:
Combined with the rest of the page's HTML markup and some basic CSS, we get a page that looks like the following screenshot:
将剩下网页的html标记和一些基本的css连接起来,我们将得到看起来像下面这样的网页:
To begin, we'll make the Large Printbutton operate. We need a bit of CSS to implement our alternative view of the page, as
shown in the following code snippet:body.large .chapter {font-size: 1.5em;}
开始,我们先让大号字体的按钮可用。我们需要一些css去实现我们的可选的网页视图,就像下面到代码片段一样:
body.large .chapter {font-size: 1.5em;}
Our
goal, then, is to apply the largeclass to the <body>tag. This will allow the stylesheet to reformat the page appropriately. Using what we learned in Chapter 2, Selecting Elements, the following is the statement needed to accomplish this:
$('body').addClass('large');
我们的目标是将large类添加到body标签上。这将会让样式表重新恰当的让网页重新格式化。使用我们在第二章选择元素中学到的,我们需要下面的表达式来实现这个目标:$('body').addClass('large');
However,
we want this to occur when the button is clicked, not when the page is loaded as we have seen so far. To do this, we'll introduce the .bind()method. This method allows us to specify any DOM event, and to attach a behavior to it. In this case, the event is
called click, and the behavior is a function consisting of our preceding one-liner:
然而,我们想要这个在按钮被点击的时候发生,而不是像我们现在看到的那样在网页被加载的时候发生。为了做到这点,我们引入了.bind()函数。这个方法允许我们特殊化DOM事件,然后在上面绑定行为。在这种场景下,事件应该是click,行为应该是由我们之前的一行代码组成的函数:
Now when the button gets clicked, our code runs, and the text is enlarged, as shown in the following screenshot:
现在,当按钮被点击的时候,我们的代码将会运行,文字将会变大,正如下 main的截图展示的那样:
That's all there is to binding a behavior to an event. The advantages we discussed with the .ready()method
apply here, as well. Multiple calls to .bind()coexist nicely, appending additional behaviors to the same event as necessary.
This is not necessarily the most elegant or efficient way to accomplish this task. As we proceed through this chapter, we will extend and refine this code into something we can be proud of.
这就是为事件绑定行为的所有内容。我们讨论.ready()方法的优点在这里也适用。如果需要追加新的行为到相同的事件时,多次调用.bind()函数也可以和平相处。
这并不是实现这一目标的最优雅或者最有效的方法。在我们进行整章的时候,我们将扩展改善我们的代码,让他成为我们骄傲的存在。
to a narrow column, and a view with large print for the content area.
为了研究一些事件处理技术,假定我们希望让一个网页由用户输入的来决定不同的渲染样式。我们将让用户点击按钮来让网页在三个样式中切换:一个正常视图,一个文本的行间距变窄的视图,一个文本区域是大号字体的视图。
渐进增强
Progressive enhancement
In a real-world example, a good web citizen will employ the principle of progressive enhancementhere. The style switcher should either be hidden when JavaScript is unavailable or, better yet, should still function through links to alternative versions of the
page. For the purposes of this tutorial, we'll assume that all users have JavaScript turned on.
渐进增强
在真实世界中,一个好的we b开发者将使用渐进增强的原则。在js不可用的时候风格切换器应该被隐藏,或者仍然可以通过链接到不同版本的网页来生效。为了这个教学的目的,我们假定所有用户的js功能都被开启了。
The HTML markup for the style switcher is as follows:
<div id="switcher" class="switcher"> <h3>Style Switcher</h3> <button id="switcher-default"> Default </button> <button id="switcher-narrow"> Narrow Column </button> <button id="switcher-large"> Large Print </button> </div>
样式切换器的html标记如下:
<div id="switcher" class="switcher"> <h3>Style Switcher</h3> <button id="switcher-default"> Default </button> <button id="switcher-narrow"> Narrow Column </button> <button id="switcher-large"> Large Print </button> </div>
Combined with the rest of the page's HTML markup and some basic CSS, we get a page that looks like the following screenshot:
将剩下网页的html标记和一些基本的css连接起来,我们将得到看起来像下面这样的网页:
To begin, we'll make the Large Printbutton operate. We need a bit of CSS to implement our alternative view of the page, as
shown in the following code snippet:body.large .chapter {font-size: 1.5em;}
开始,我们先让大号字体的按钮可用。我们需要一些css去实现我们的可选的网页视图,就像下面到代码片段一样:
body.large .chapter {font-size: 1.5em;}
Our
goal, then, is to apply the largeclass to the <body>tag. This will allow the stylesheet to reformat the page appropriately. Using what we learned in Chapter 2, Selecting Elements, the following is the statement needed to accomplish this:
$('body').addClass('large');
我们的目标是将large类添加到body标签上。这将会让样式表重新恰当的让网页重新格式化。使用我们在第二章选择元素中学到的,我们需要下面的表达式来实现这个目标:$('body').addClass('large');
However,
we want this to occur when the button is clicked, not when the page is loaded as we have seen so far. To do this, we'll introduce the .bind()method. This method allows us to specify any DOM event, and to attach a behavior to it. In this case, the event is
called click, and the behavior is a function consisting of our preceding one-liner:
$(document).ready(function() { $('#switcher-large').bind('click', function() { $('body').addClass('large'); }); });
然而,我们想要这个在按钮被点击的时候发生,而不是像我们现在看到的那样在网页被加载的时候发生。为了做到这点,我们引入了.bind()函数。这个方法允许我们特殊化DOM事件,然后在上面绑定行为。在这种场景下,事件应该是click,行为应该是由我们之前的一行代码组成的函数:
$(document).ready(function() { $('#switcher-large').bind('click', function() { $('body').addClass('large'); }); });
Now when the button gets clicked, our code runs, and the text is enlarged, as shown in the following screenshot:
现在,当按钮被点击的时候,我们的代码将会运行,文字将会变大,正如下 main的截图展示的那样:
That's all there is to binding a behavior to an event. The advantages we discussed with the .ready()method
apply here, as well. Multiple calls to .bind()coexist nicely, appending additional behaviors to the same event as necessary.
This is not necessarily the most elegant or efficient way to accomplish this task. As we proceed through this chapter, we will extend and refine this code into something we can be proud of.
这就是为事件绑定行为的所有内容。我们讨论.ready()方法的优点在这里也适用。如果需要追加新的行为到相同的事件时,多次调用.bind()函数也可以和平相处。
这并不是实现这一目标的最优雅或者最有效的方法。在我们进行整章的时候,我们将扩展改善我们的代码,让他成为我们骄傲的存在。
相关文章推荐
- (4)事件处理——(8)一个简单的风格切换器(A simple style switcher)
- 使用事件处理创建一个简单的绘图实例程序 python
- 一个简单的c++/cli中委托与事件的处理模型
- 一个很酷的事件处理简单模型
- iOS开发UI篇—事件处理(实现一个简单的涂鸦板)
- 一个简单的事件处理程序
- C#事件演示程序1)——一个最简单的C#事件处理程序
- Kibo是一个简单的用于处理键盘事件的Javascript工具库。
- iOS开发UI篇―事件处理(实现一个简单的涂鸦板)
- 一个简单的自定义控件的事件处理示例 [IPostBackEventHandler]
- 一个简单的记事本-----熟悉JFrame、j组件、事件处理机制(监听机制)、BufferedReader/BufferedWriter 、文件选择器组件JFileChooser
- js事件处理相关-实现一个div的拖拽
- Spring MVC 使用SimpleUrlHandlerMapping做映射处理的简单用例
- Prototype功能预览七:一个注解分离日志及事件的发送于处理逻辑
- 【DFB】IDirectFBInputDevice 方式处理事件 --键盘移动一个图片显示
- ObjectList的自动分页要处理一个什么事件才使下一页,上一页有效?
- ffmpeg+sdl教程----编写一个简单的播放器7(处理快进快退命令)
- jQuery 1.7 正式版已经可以下载使用。jQuery是一个JavaScript库,它简化了HTML文档遍历,事件处理,动画和为网络快速发展的Ajax交互。jQuery 1.7 版本加入了新的事件API .on() 和 .off(),提
- jquery delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数
- Java 组件及事件处理实训 实训2:编写一个窗体程序,用于计算一元二次方程