CSS 设计的终极 jQuery 插件

下载源代码 

引言

可以说，软件开发不仅仅是一种技能，而是无数相互关联的不同技能的集合。我们过去常说“一切都与代码有关”，而实际上，代码本身只是问题的一部分。我们常常忘记对用户需求的解释，例如。当规范不合理时，我们会回想起过去失败项目的一些糟糕经历，从而拒绝它并要求澄清。而且，根据软件打包方式的不同，有时我们可以预见到某些关键软件无法正确部署，然后我们会及时向同事报告问题以进行修复。在这些例子中，一个技术优秀的开发人员通过将常识应用于软件开发中与代码无关的方面，可以证明自己对公司更有价值。

同样，有些领域软件开发人员不需要深入了解。网页设计就是这种情况：这并不是说所有开发人员都是糟糕的网页设计师，但大多数人确实如此，即使是那些每天在网站后端工作的人。这就是为什么大多数公司都有全职网页开发人员，来创建专业外观的网页，这些网页还具有用户友好的功能和整个用户导航中一致的设计。

但有时，勇敢的开发人员敢于入侵这个网页设计领域……通常他们会陷入麻烦。问题是，HTML相对简单，软件开发人员会本能地倾向于使用HTML表格来设计网页。我的意思是，整个网页。这是因为软件开发人员通常通过将问题分解成小部分来解决问题，如果网页本身是一个大型HTML表格，那么它的各个部分将分为HTML表格行和列，甚至可能是内部HTML表格。当然，现在开发人员已经知道应用CSS是进行网页设计的正确方法，但在许多情况下，CSS是如此反直觉，以至于即使创建一个简单的网页，对于非网页设计师来说也可能需要数小时。这就是为什么开发人员喜欢基于表格的网页设计：因为它简单、易懂且有效。

网页设计中经常遇到的挑战之一就是所谓的 网页设计圣杯。圣杯有几种变体，但在一个特定的情况下，你有一个页面头部、一个页面底部、一个可调整大小的主内容区域（页面的中心列）以及主内容两侧的固定左右列。

现在，如果我们有一个简单的方法来创建 CSS 设计圣杯，这样即使是全职后端软件开发人员也能以极小的努力快速创建美观的网页，那会怎么样？这就是我们在这篇文章中试图实现的目标。

系统要求

本文包含运行一个网站所需的代码，除了 JavaScript 之外不依赖任何编程语言，因此无需引用程序集或 C# 代码，所以它不需要编译。只需下载代码并在网页浏览器中打开 HTML 文件即可。

jQuery 插件，它本身就是一个圣杯

如我们所见，解决方案相当简单。只需要少数几个文件，而且正如我们之前所说，无需编译代码。

创建 jQuery 插件的乐趣在于，你可以将大量 jQuery 代码封装起来，否则这些代码可能会散布在你的整个代码库中。通过建立一个 jQuery 插件，你可以将一组连贯的功能封装在一个自包含的组件中，然后在此组件上工作，使其对广泛的 Web 开发社区有用。

在圣杯插件代码中，我们首先在 JavaScript 代码中创建一个立即执行函数表达式（IIFE）。IIFE 是一种设计模式，它在插件范围内提供了私有函数变量和函数的自包含性，从而避免了 JavaScript 全局环境的污染。JavaScript 开发人员将很容易通过以下代码识别 IIFE 模式

            (function(){
              /* code */ 
            }());
        

在上面的代码中，最外层的一对括号将函数包裹在一个表达式中，并立即强制对其进行求值。代码最后一行的这对括号立即调用了该函数。

请注意，在 jQuery 插件开发中，将 **jQuery** 引用作为参数传递到我们的 IIFE 表达式中非常重要，这样在插件范围内就可以安全地使用美元符号 ($)，而不会有外部库覆盖美元符号的风险。

            (function($){
              /* Our Holy Grail jQuery Plugin code goes here. Notice the $ sign will never have a meaning other than the jQuery object. */ 
            }(jQuery));
        

接下来，我们创建将包含并执行我们整个圣杯插件功能的函数。请注意 `options` 参数，它将包含根据圣杯插件要求配置条形图所需的所有初始化设置。

            (function($){
              $.fn.holygrail = function (options) {
                    //as expected, our holy grail plugin code falls here.
                }
            }(jQuery));
        

在插件函数内部，上下文由 `this` JavaScript 关键字提供。大多数情况下，开发人员会倾向于通过使用美元符号（即 jQuery）函数来引用上下文：“`$(this)`”，而不是仅仅使用 `this`。这是一个常见的错误，因为 **this** 关键字已经引用了 jQuery 对象，而不是条形图正在其中创建的 DOM 元素。

            (function($){
              $.fn.barChart = function (options) {
                    var self = this;
                }
            }(jQuery));
        

在上述 JavaScript 代码中，我们将 `this` 对象的值存储在 `self` 引用中。这在 **函数** 内部特别需要，因为在函数中，`this` 关键字的行为是函数本身的上下文，而不是最外层插件函数的上下文。因此，`self` 将被用作条形图插件的上下文。

插件代码首先定义了一系列设置，这些设置将成为最常见配置的默认值。这将为我们的插件用户提供方便的标准值，这些值既可以配置（允许灵活的图表组件），也可以忽略（以便插件用户可以提供最少的启动配置）。

随着插件组件变得越来越复杂，通常提供一套更完整和全面的默认设置是一个好主意，以便为用户提供一个强大、灵活且不突兀的插件。

            $.fn.holygrail = function (options) {

                var self = this;

                // Create some defaults, extending them with any options that were provided
                var settings = $.extend({
                    headerContent: options.headerContent,
                    centerContent: options.centerContent,
                    leftContent: options.leftContent,
                    rightContent: options.rightContent,
                    footerContent: options.footerContent
                }, options);

        

以上代码片段展示了插件设置：页面的每个部分都有不同的插件配置：**headerContent、centerContent、leftContent、rightContent** 和 **footerContent**

		=========================
		|         header        |
		=========================
		|      |        |       |
		| left | center | right |
		|      |        |       |
		=========================
		|         footer        |
		=========================
		

插件代码本身就是收集内容元素并以一种使最终渲染符合上述布局的方式重新排列它们。

			/// 
			(function ($) {

				var HolyGrail = {};

				var raster;

				$.fn.holygrail = function (options) {

					var self = this;

					// Create some defaults, extending them with any options that were provided
					var settings = $.extend({
						headerContent: options.headerContent,
						centerContent: options.centerContent,
						leftContent: options.leftContent,
						rightContent: options.rightContent,
						footerContent: options.footerContent
					}, options);

					var body = $('body');
					var hgHeader = $('
').attr({ id: 'hg-header' });
					var hgContainer = $('
').attr({ id: 'hg-container' });
					var hgCenter = $('
').attr({ id: 'hg-center', 'class': 'hg-column' });
					var hgLeft = $('
').attr({ id: 'hg-left', 'class': 'hg-column' });
					var hgRight = $('
').attr({ id: 'hg-right', 'class': 'hg-column' });
					var hgFooter = $('
').attr({ id: 'hg-footer' });

					$(hgContainer).append(hgCenter);
					$(hgContainer).append(hgLeft);
					$(hgContainer).append(hgRight);
					$(body).append(hgHeader);
					$(body).append(hgContainer);
					$(body).append(hgFooter);

					$(this.headerContent).attr({ 'class': 'hg-pad' });
					$(this.centerContent).attr({ 'class': 'hg-pad' });
					$(this.leftContent).attr({ 'class': 'hg-pad' });
					$(this.rightContent).attr({ 'class': 'hg-pad' });
					$(this.footerContent).attr({ 'class': 'hg-pad' });

					$(hgHeader).append($(settings.headerContent));
					$(hgCenter).append($(settings.centerContent));
					$(hgLeft).append($(settings.leftContent));
					$(hgRight).append($(settings.rightContent));
					$(hgFooter).append($(settings.footerContent));
				}
			}(jQuery));
		

使用圣杯插件

使用圣杯插件非常简单。首先，您必须引用样式表文件……

			<link href="../css/default.css" rel="stylesheet" />
		

...然后是 JavaScript 文件（用于 jQuery 和 jQuery 插件）

			<script src="../js/jquery-1.9.1.min.js"></script>
			<script src="../js/jquery.holygrail.js"></script>	
		

接下来，你创建div元素将代表页面的每个部分。虽然我为这些div元素添加了显式 ID，但该插件足够灵活，你可以使用任何你想要的 ID，甚至可以使用 class 属性，或任何其他方式来识别这些元素，正如我们即将看到的。

		<div id="headerContent">
			<span><img src="../img/bob.gif" /></span>
			<span class="title">The Holy Grail of 3-Column CSS Design</span>
		</div>
		<div id="centerContent">
			<h1>This is the main content.</h1>
			<img src="../img/grail.png" style="float: left;" />
			<p>Lorem ipsum dolor sit amet, consectetuer...</p>
			<p>Lorem ipsum dolor sit amet,...</p>
			<img src="../img/monk.png" style="float: right;" />
			<p>Lorem ipsum dolor sit amet,...</p>
			<p>Lorem ipsum dolor sit amet,...</p>
		</div>
		
		<div id="leftContent">
			<h2>This is the left sidebar.</h2>
			<p>Lorem ipsum dolor sit amet,...</p>
		</div>

		<div id="rightContent">
			<h2>This is the right sidebar.</h2>
			<p>Lorem ipsum dolor sit amet, consectetuer...</p>
		</div>
		<div id="footerContent">
			<hr />
			<div>Holy Grail jQuery Plugin - ©2013 Marcelo Ricardo de Oliveira</div>
		</div>		
		

现在我们来看看页面是如何渲染的

请注意，此时我们只是堆叠 HTML 元素，没有任何布局考虑。这很棒，因为我们可以只关注网页的内容，而将繁重的工作留给插件。

在我们的网页中设置圣杯 jQuery 插件非常简单。只需几行 JavaScript 代码即可完成

			<script type="text/javascript">
				$('body').holygrail({
					headerContent: $('#headerContent'),
					centerContent: $('#centerContent'),
					leftContent: $('#leftContent'),
					rightContent: $('#rightContent'),
					footerContent: $('#footerContent')
				});
			</script>		
		

现在网页显示了完全相同的部分，但以我们一直追求的理想布局进行组织。

请注意，圣杯 jQuery 插件自动添加了内边距，以提高可读性并尊重布局的美观性。

一旦应用了插件代码，整个页面结构将发生巨大变化。

致谢

本文的灵感来源于 Matthew Levine 的精湛研究工作，他提供了一种非常全面的通过 CSS 实现圣杯的方法，Matthew 将其概括为具有以下特点：

• 拥有一个流动的中心区域，两侧是固定宽度的侧边栏，
• 允许中心列首先出现在源代码中，
• 允许任何列都是最高的，
• 只需要一个额外的 div 标记，并且
• 只需要非常简单的 CSS，只有最少的补丁。

最终思考

希望您喜欢这个插件和这篇文章。它确实很短很简单，但无论如何，感谢您的阅读。如果最终您能将其纳入您的蝙蝠侠工具腰带中，我将非常高兴。如果您对代码或文章有任何想法，请告诉我。

历史

• 2013-07-31: 初始版本。
• 2013-08-01: 修复了“等高列”问题。