适用于自适应 960网格系统的jQuery插件

分享于 

13分钟阅读

Web开发

  繁體 雙語

介绍

从我的观点来看,我一直都很喜欢 960. gs的工作,在我看来,在网页布局和设计中,它的简单方法可能会让别人感兴趣。

在最近几年中,我对jQuery的兴趣同样也与( 可能更多) 一样。 主要是因为我喜欢如何将JavaScript开发简化为可以重用库,这样我就不会混乱自己的开发。 所以最近我在 http://adapt.960.gs 遇到一些JavaScript代码,使网页适应不断变化的网页浏览器大小,自然,我开始寻找更简单的方法。

当然,我希望能够以 jQuery插件插件的形式完成,这将使我的日常开发更加轻松。

在本文中,我将介绍开发jQuery插件的细节,同时创建一些我们每日开发都可以使用的。

背景

对于所有jQuery开发人员来说,你可能知道你想要一个插件如何正确工作?

我一直在使用这些插件,你作为开发人员,使用它们写成一行代码,然后这些真的很酷。 你知道通常会花几or甚至更糟糕的几行代码写( 更别提时间了)。

不要错误,我喜欢复杂的问题,但一旦他们被我或者别人解决了,我的兴趣水平降低。 只有这么多的方法来改善我认为的轮子的设计。

我想要像下面这样的东西,整齐地适合网页上的脚本 block:

// variable to hold instance of my pluginvar plugin;
$(function() {
 plugin = new $.jQueryAdaptive960(window);
 // other code to be run on page load });

jQuery插件的基础知识

让我们通过展示一个简单的框架框架来浏览jQuery插件的快速基础。

;(function($) {
 $.jQueryAdaptive960 = function(element, options) {
 var defaultOptions = {
 }
 // save the elementvar pluginElement = el;
 var jQuery960 = this;
 var init = function() {
 if(options) {
 jQuery960.settings = 
 $.extend(defaultOptions, options);
 }
 else {
 jQuery960.settings = defaultOptions;
 }
 // other init stuff for you plugin goes here }
 // your own plugin development stuff goes here// always keep this at the end init();
 }
}) (jQuery); 

对让我再详细点。

插件的第一行和最后一行是如何使控件成为jQuery的一部分,同时确保我们仍然能够访问jQuery本身。 我们有这个很棒的框架,所以我们想确保在插件开发中我们仍然可以使用它。

进入我们的插件的条目从 $.jQueryAdaptive960 = function(element, options) 插件对象以及它将使用的接收对象的位置。

我们的jQuery插件,element 和大约 99%个例子中的第一个参数,你可以发现控件或者页面元素。 在这个插件中,我们将通过 window 来解释稍后要解释的原因。

第二个参数是页面开发人员和插件的用户可能希望通过的任何选项。 非常重要的是你理解传入插件的选项是可选的,因为有时开发人员只需要工作。 稍后我们将在 init 函数中看到我们如何处理这个场景。

现在让我们进入插件的更大部分。

插件设置

记住,我说了一定要了解一些开发人员永远不想将任何选项传递到插件中。 考虑到这一点,你需要确保插件具有一组默认的选项,这些选项可以使用。 我们通过创建一个包含我们的defaultOptions的对象来处理这个问题,我们将使用。

我不想使用JavaScript进行面向对象编程的细节,但以下是如何将 public 属性公开到外部世界:

// save the elementvar pluginElement = el;var jQuery960 = this;

对于面向对象的所有面向对象的( 是啊你知道自己是谁),请不要火焰一个对象如何不是面向对象的语言。

无论分配给 jQuery960的是什么,现在都将成为公开访问的属性,或者是使用该插件的函数。

最后,保存 pluginElement 中传递给我们的元素,我们可以在其他代码领域引用它。

插件初始化

再一步,你就会得到你的官方( 也许不是官方的) 徽章作为一个jQuery插件魔术师。 因为我们已经包含了jQuery框架,所以这个 final 步骤更为简化了。

var init = function() {
 if(options) {
 jQuery960.settings = $.extend(defaultOptions, options);
 }
 else {
 jQuery960.settings = defaultOptions;
 }
 // other init stuff for you plugin goes here}// your own plugin development stuff goes here// always keep this at the endinit();

记得我提到过,有时候开发者只想使用你的插件而不传递任何参数? 在初始化插件时,我们将通过检查是否传递了某些内容来处理这个场景。 我们将使用 jQuery $.extend() 函数调用更新缺省设置。

最后,在插件的最后,我们将调用 init() 函数,这将确保一切都被初始化。 作为个人重要性的注意,我喜欢使 init() 成为插件中的最后一行,确保所有内容都被加载。

使用代码

所以现在,插件的基本工作已经取得了注意,让我们来一个工作例子来说明如何使用它。

到现在为止,我假设你已经有机会查看 http://adapt.960.gs 插件,因为目标是将它的设置为jQuery插件。 记住目标是给我们插件的用户提供一些简单的东西来处理他们的一切。 我认为类似如下的内容将起作用:

// variable to hold instance of my pluginvar plugin;
$(function() {
 plugin = new $.jQueryAdaptive960(window);
 // other code to be run on page load });

默认设置

因这里,在保持简单的direction 中,我认为最好把所有需要的CSS文件包装到插件中。 同时,我希望尽可以能多地满足那些想要进一步进步的人。

以下内容应该足以支持开发人员及其各自的用户:

var defaultOptions = {
 ranges: ['0px to 760px = mobile.css',
 '760px to 980px = 720.css',
 '980px to 1280px = 960.css',
 '1280px to 1600px = 1200.css',
 '1600px to 1920px = 1560.css',
 '1940px to 2540px = 1920.css',
 '2540px = 2520.css'],
 path: 'jquery960/css/',
 onResize: function () { },
 onRotate: function () { }
}

为了让这个插件可以扩展,我将 rangespath 作为一个选项,可以替代开发人员。 然后我添加了两个回调函数,以便在浏览器调整大小以及旋转时可以通知开发人员。

如果你已经阅读过 http://adapt.960.gs 插件的代码,你将会注意到它们有一个变量来打开/关闭动态功能以更新页面。 首先,我可以配置这个选项,但是我想如果它们不是动态的,那么他们很可以能不需要插件。

插件初始化

现在让我们继续初始化插件的初始化。 我们的初始化步骤应该相当简单。 我们将在这个步骤中处理的大部分内容是订阅事件,通知插件当浏览器大小更改时。

var init = function () {
 if (options) {
 jQuery960.settings = $.extend(defaultOptions, options);
 }
 else {
 jQuery960.settings = options;
 }
 if (pluginElement.addEventListener) {
 pluginElement.addEventListener('resize', reactiveDisplay, false);
 if (pluginElement.onorientationchange) {
 pluginElement.addEventListener
 ('orientationchange', rotateDisplay, false);
 }
 setTimeout(checkDisplayOrientation, 1000);
 }
 elseif (pluginElement.attachEvent) {
 // old ie support and there is no support for orientation pluginElement.attachEvent('onresize', reactiveDisplay);
 }
 else {
 // definitely no orientation support pluginElement.onresize = reactiveDisplay;
 }
 adaptDisplay();
}

如前所述,基本上所做的事情是订阅事件。 这样插件就可以在运行的大部分浏览器中工作。 要注意的重要部分是对 adaptDisplay() 调用的最后一行。

活动屏幕调整

I adaptDisplay() 循环中的每一行代码,当它迭代 defaultOptions.ranges 搜索一个适合浏览器维度当前的范围时,while 循环中的细节就会出现。

var adaptDisplay = function () {
. . ..
 // get the width of the browservar width = pluginElement.innerWidth || 
 pluginElement.document.documentElement.clientWidth || 
 pluginElement.document.body.clientWidth || 0;
 // loop through each of the items inside of defaultOptions.rangeswhile (index--) {
 item = defaultOptions.ranges[index].split('=');
 range = item[0];
 cssFile = item[1]? item[1].replace(/s/g, '') : index;
 // check to see if a range has been specified is_range = range.match('to');
 // get the min and max values for the range val_1 = is_range? parseInt(range.split('to')[0], 10) : parseInt(range, 10);
 val_2 = is_range? parseInt(range.split('to')[1], 10) : undefined;
 // check to see if the width of the browser falls // within the range of the current range settingif ((!val_2 && index === (rangeLen - 1) && width> val_1) || 
 (width> val_1 && width <= val_2)) {
 url = defaultOptions.path + cssFile;
 break;
 }
 else {
 url = '';
 }
 }
. . ..
}

对于插件的默认设置,一个包含CSS文件的有效范围将总是在 MATCH 中找到。 你将注意到调整浏览器的大小时,将执行这里代码,如果查看页( 不是原始来源)的源,则会看到。

页面自身适应新大小是浏览器的内部工作,它与CSS文件通知了它们的呈现。

查看页面源重要说明

查看页源时,请确保查看活动文档。 如果在标题中看不到与下面类似的行。

<linkhref="jquery960/css/###.css"rel="stylesheet"/>

。那么你很可能不查看页面源的活动。

通知事件

在所有通知处理程序中需要注意的重要一点是它们如何使用插件将通知处理回开发人员。 记住最初的想法是允许开发者使用插件,只需要提供它将使用的window。 这个场景是通过给回调函数提供一个默认函数处理程序来处理的。

var defaultOptions = {
. . ..
 onResize: function () { },
 onRotate: function () { }
}

开发人员需要扩展这些插件并通知这些事件,他们只需要改变他们使用插件的方式。

下面是如何重写控件并在调整浏览器调整大小或者倾斜时通知的示例:

$(function () {
 var plugin = new $.jQueryAdaptive960(window, { onResize: function () { }, 
 onRotate: function () { } })
});

Points of Interest

查看 http://jquery.com/,了解关于这个神奇的JavaScript框架的更多信息。

有关 960网格系统的详细信息,请查看 http://960.gs/

历史记录

  • 第三 2011年10月: 初始日志

plugin  SYS  系统  GRID  jquery-plugin  ADA  
相关文章