(4)事件处理——(8)一个简单的风格切换器(A simple style switcher)
2013-10-16 12:01
369 查看
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()函数也可以和平相处。
这并不是实现这一目标的最优雅或者最有效的方法。在我们进行整章的时候,我们将扩展改善我们的代码,让他成为我们骄傲的存在。
为了研究一些事件处理技术,假定我们希望让一个网页由用户输入的来决定不同的渲染样式。我们将让用户点击按钮来让网页在三个样式中切换:一个正常视图,一个文本的行间距变窄的视图,一个文本区域是大号字体的视图。
渐进增强
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)
- 一个简单的记事本-----熟悉JFrame、j组件、事件处理机制(监听机制)、BufferedReader/BufferedWriter 、文件选择器组件JFileChooser
- 一个简单的自定义控件的事件处理示例 [IPostBackEventHandler]
- 一个简单的c++/cli中委托与事件的处理模型
- 使用事件处理创建一个简单的绘图实例程序 python
- 一个很酷的事件处理简单模型
- iOS开发UI篇—事件处理(实现一个简单的涂鸦板)
- 一个简单的事件处理程序
- C#事件演示程序1)——一个最简单的C#事件处理程序
- Kibo是一个简单的用于处理键盘事件的Javascript工具库。
- iOS开发UI篇―事件处理(实现一个简单的涂鸦板)
- 简单的js网页应用(事件与事件处理的响应)
- iphone 开发周记2 触摸事件处理与简单绘图。
- simple-spa 一个简单的单页应用实例
- ASP.NET Core Web API下事件驱动型架构的实现(一):一个简单的实现
- UIView上添加了一个按钮和一个单击手势的事件相应,互相不影响的处理方法。。
- 一个简单的四则运算程序C语言实现--实现处理括号
- 在自己的WSASOCKET服务端/客户端中做了一个简单的解包程序处理粘包的问题
- c#学习笔记之九 事件(event)的使用,一个简单的例子揭示其设计理念
- javascript中一些简单事件的处理