From fe3ee95643778fefbe6915804fb122013d2fae5e Mon Sep 17 00:00:00 2001 From: Xue Fuqiao Date: Sun, 18 Jan 2015 15:53:39 +0800 Subject: [PATCH 001/107] javascript-101/types: update link to MDN Closes gh-619 --- page/javascript-101/types.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/page/javascript-101/types.md b/page/javascript-101/types.md index 892fbbd2..fb1ef1fd 100644 --- a/page/javascript-101/types.md +++ b/page/javascript-101/types.md @@ -66,7 +66,7 @@ var bar2; ## Objects -Everything else in JavaScript is considered an object. While there are [numerous built-in objects](https://developer.mozilla.org/en/JavaScript/Reference#Global_Objects, "MDN - Global Object Reference"), this chapter will cover: +Everything else in JavaScript is considered an object. While there are [numerous built-in objects](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects "MDN - Standard built-in objects"), this chapter will cover: * Object * Array From 7cfe83140b4af7893e9d7d8c1a4ceffe6581f567 Mon Sep 17 00:00:00 2001 From: Xue Fuqiao Date: Sun, 18 Jan 2015 11:10:45 +0800 Subject: [PATCH 002/107] javascript-101/running-code: lowercase attribute in example Closes gh-617 --- page/javascript-101/running-code.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/page/javascript-101/running-code.md b/page/javascript-101/running-code.md index c01b5e5b..160d71f2 100644 --- a/page/javascript-101/running-code.md +++ b/page/javascript-101/running-code.md @@ -31,7 +31,7 @@ The last option is to use the event handler attributes of HTML elements. This me ``` Click Me! -Click Me Too! +Click Me Too! ``` ### Placement From 7c3105ea33411d8b1ae318f7626a58cce60db667 Mon Sep 17 00:00:00 2001 From: Arthur Verschaeve Date: Thu, 8 Jan 2015 07:32:58 +0100 Subject: [PATCH 003/107] code-organization/concepts: add link to requireJS site Closes gh-609 Fixes gh-530 --- page/code-organization/concepts.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/page/code-organization/concepts.md b/page/code-organization/concepts.md index 11f6fc55..3029806d 100644 --- a/page/code-organization/concepts.md +++ b/page/code-organization/concepts.md @@ -5,7 +5,7 @@ "attribution": [ "jQuery Fundamentals" ] } -When you move beyond adding simple enhancements to your website with jQuery and start developing full-blown client-side applications, you need to consider how to organize your code. In this chapter, we'll take a look at various code organization patterns you can use in your jQuery application and explore the RequireJS dependency management and build system. +When you move beyond adding simple enhancements to your website with jQuery and start developing full-blown client-side applications, you need to consider how to organize your code. In this chapter, we'll take a look at various code organization patterns you can use in your jQuery application and explore the [RequireJS](http://requirejs.org/) dependency management and build system. ## Key Concepts From 3296aa2ca50bb031227449486550c503b0f1eaf8 Mon Sep 17 00:00:00 2001 From: Arthur Verschaeve Date: Wed, 14 Jan 2015 07:35:00 +0100 Subject: [PATCH 004/107] javascript-101/arrays: add info on second parameter of `.slice()` Fixes gh-611 Closes gh-612 --- page/javascript-101/arrays.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/page/javascript-101/arrays.md b/page/javascript-101/arrays.md index 8c995939..ebd77d43 100644 --- a/page/javascript-101/arrays.md +++ b/page/javascript-101/arrays.md @@ -172,6 +172,12 @@ console.log( myArray ); // [ 1, 2, 3, 4, 5, 6, 7, 8 ] console.log( newArray ); // [ 4, 5, 6, 7, 8 ] ``` +The `.slice()` method takes an optional second parameter, the end index. + +``` +console.log( [ 1, 2, 3, 4, 5, 6, 7, 8 ].slice( 2, 5 ) ); // [ 3, 4, 5 ] +``` + ### .splice() Removes a certain amount of elements and adds new ones at the given index. It takes at least three parameters: From 2b5b60981f555f05d91a4a326550778d8a815124 Mon Sep 17 00:00:00 2001 From: Arthur Verschaeve Date: Mon, 19 Jan 2015 19:08:27 +0100 Subject: [PATCH 005/107] 0.5.3 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index a41ab9d9..0e0db175 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "learn.jquery.com", "title": "jQuery Learning Site", "description": "jQuery Foundation site for learning jQuery and JavaScript", - "version": "0.5.2", + "version": "0.5.3", "homepage": "http://learn.jquery.com", "author": { "name": "jQuery Foundation and other contributors" From 8ea5be896125a6394b150a49b25a83c9a6bdd99e Mon Sep 17 00:00:00 2001 From: Jared Chua Date: Wed, 8 Oct 2014 20:54:47 -0700 Subject: [PATCH 006/107] Added missing 'within' in the last paragraph. Closes gh-562 --- page/plugins/finding-evaluating-plugins.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/page/plugins/finding-evaluating-plugins.md b/page/plugins/finding-evaluating-plugins.md index 7d93081e..abc48008 100644 --- a/page/plugins/finding-evaluating-plugins.md +++ b/page/plugins/finding-evaluating-plugins.md @@ -13,4 +13,4 @@ The easiest way to find plugins is to search Google or the [jQuery Plugins Regis When looking for a plugin to fill a need, do your homework. Ensure that the plugin is well-documented, and look for the author to provide lots of examples of its use. Be wary of plugins that do far more than you need; they can end up adding substantial overhead to your page. For more tips on spotting a sub-par plugin, read [Signs of a poorly written jQuery plugin](http://remysharp.com/2010/06/03/signs-of-a-poorly-written-jquery-plugin/) by Remy Sharp. -Once you choose a plugin, you'll need to add it to your page. Download the plugin, unzip it if necessary, place it your application's directory structure, then include the plugin in your page using a script tag (after you include jQuery). +Once you choose a plugin, you'll need to add it to your page. Download the plugin, unzip it if necessary, place it within your application's directory structure, then include the plugin in your page using a script tag (after you include jQuery). From 01d432dd15b5a0278c5d81493c654fa5a95499b1 Mon Sep 17 00:00:00 2001 From: Arthur Verschaeve Date: Mon, 29 Dec 2014 14:06:03 +0100 Subject: [PATCH 007/107] using-jquery-core/utility-methods: add type checking section Fixes gh-404 Closes gh-597 --- page/javascript-101/testing-type.md | 2 +- page/using-jquery-core/utility-methods.md | 33 +++++++++++++++++++++++ 2 files changed, 34 insertions(+), 1 deletion(-) diff --git a/page/javascript-101/testing-type.md b/page/javascript-101/testing-type.md index d1bcbe69..0da9f200 100644 --- a/page/javascript-101/testing-type.md +++ b/page/javascript-101/testing-type.md @@ -44,4 +44,4 @@ if ( Object.prototype.toString.call( myArray ) === "[object Array]" ) { } ``` -jQuery also offers utility methods to help determine the type of an arbitrary value. +jQuery also offers [utility methods](/using-jquery-core/utility-methods#testing-type) to help determine the type of an arbitrary value. diff --git a/page/using-jquery-core/utility-methods.md b/page/using-jquery-core/utility-methods.md index 87f802ec..ea4db3b5 100644 --- a/page/using-jquery-core/utility-methods.md +++ b/page/using-jquery-core/utility-methods.md @@ -103,3 +103,36 @@ var myObject = { $( "#foo" ).click( myObject.myFn ); // HTMLElement #foo $( "#foo" ).click( $.proxy( myObject, "myFn" ) ); // myObject ``` + +## Testing Type + +As seen in [the JavaScript 101 section](http://learn.jquery.com/javascript-101/testing-type/) the `typeof` operator can be inconsistent or confusing. So instead of using `typeof`, jQuery offers utility methods to help determine the type of a value. + +First of all, you have methods to test if a specific value is of a specific type. + +``` +$.isArray([]); // true +$.isFunction(function() {}); // true +$.isNumeric(3.14); // true +``` + +Additionally, there is `$.type()` which checks for the internal class used to create a value. You can see the method as a better alternative for the `typeof` operator. + +``` +$.type( true ); // "boolean" +$.type( 3 ); // "number" +$.type( "test" ); // "string" +$.type( function() {} ); // "function" + +$.type( new Boolean() ); // "boolean" +$.type( new Number(3) ); // "number" +$.type( new String('test') ); // "string" +$.type( new Function() ); // "function" + +$.type( [] ); // "array" +$.type( null ); // "null" +$.type( /test/ ); // "regexp" +$.type( new Date() ); // "date" +``` + +As always, you can check the [API docs](http://api.jquery.com/jQuery.type/) for a more in-depth explanation. From 41d35079ba43107c8c73ceb2215cf7698522f7ed Mon Sep 17 00:00:00 2001 From: Arthur Verschaeve Date: Tue, 20 Jan 2015 06:58:12 +0100 Subject: [PATCH 008/107] 0.5.4 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 0e0db175..028ef512 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "learn.jquery.com", "title": "jQuery Learning Site", "description": "jQuery Foundation site for learning jQuery and JavaScript", - "version": "0.5.3", + "version": "0.5.4", "homepage": "http://learn.jquery.com", "author": { "name": "jQuery Foundation and other contributors" From 3c3df412c6926fe723b3151e5c996023672f5581 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=CC=88rn=20Zaefferer?= Date: Thu, 15 Jan 2015 11:40:28 +0100 Subject: [PATCH 009/107] jquery-ui: Update theming related pages Drop the api page and link to the correct api.jqueryui.com page instead, delete the bad write-a-theme page, collapse the theming folder and fix the order of the widget-factory pages. Closes #614 --- order.json | 13 ++-- page/jquery-ui/{theming => }/themeroller.md | 17 +---- page/jquery-ui/theming.md | 12 ++-- page/jquery-ui/theming/api.md | 78 --------------------- page/jquery-ui/theming/write-a-theme.md | 54 -------------- 5 files changed, 13 insertions(+), 161 deletions(-) rename page/jquery-ui/{theming => }/themeroller.md (63%) delete mode 100644 page/jquery-ui/theming/api.md delete mode 100644 page/jquery-ui/theming/write-a-theme.md diff --git a/order.json b/order.json index 33678c5d..5a8527f8 100644 --- a/order.json +++ b/order.json @@ -129,17 +129,14 @@ "jquery-ui": [ "getting-started", "how-jquery-ui-works", - { - "theming": [ - "themeroller", - "api", - "write-a-theme" - ] - }, + "theming", + "themeroller", { "widget-factory": [ "why-use-the-widget-factory", - "how-to-use-the-widget-factory" + "how-to-use-the-widget-factory", + "widget-method-invocation", + "extending-widgets" ] }, { diff --git a/page/jquery-ui/theming/themeroller.md b/page/jquery-ui/themeroller.md similarity index 63% rename from page/jquery-ui/theming/themeroller.md rename to page/jquery-ui/themeroller.md index c16e9e2c..bae47368 100644 --- a/page/jquery-ui/theming/themeroller.md +++ b/page/jquery-ui/themeroller.md @@ -22,13 +22,11 @@ ThemeRoller themes can be viewed via permalink URLs, and it includes a gallery o ### Downloading Themes -When you're done designing a theme, you can download it for use in your projects. ThemeRoller has a "Download theme" button at the top which will generate a zip file containing all of the theme assets. Images included in your download will be generated to your specifications and saved as high-quality PNG files. - -Your theme will include images and CSS that make up a customized version of the jQuery UI CSS Framework including images and CSS for all of our plugins. +When you're done designing a theme, you can download it for use in your projects. ThemeRoller has a "Download theme" button at the top which will lead you to the download builder page. From there you can also pick the components to download with your theme. Finally the Download button at the bottom will generate a zip file containing the theme along with assets like images and any components you picked. Images included in your download will be generated to your specifications and saved as high-quality PNG files. ### Installing Downloaded Themes Into Your Project -Once the theme has been downloaded and unzipped, you will see a folder named `themes`. This folder contains the CSS and images needed for your theme. Copy the theme directory into your project and link to the `themes/all.css` file from your pages. +Once you've unzipped the package, you will see several `css` and `js` files, along with two folders. If you're only interested in the full theme, copy `jquery-ui.css` and the `images` folder into your project and link to the `jquery-ui.css` file from your pages. ### Building Custom "ThemeRoller-Ready" Components  @@ -36,13 +34,4 @@ Once the theme has been downloaded and unzipped, you will see a folder named `th ThemeRoller generates a customized version of the jQuery UI CSS Framework for developing your own ThemeRoller-ready jQuery components. The classes generated by this framework are designed to accommodate common user interface design situations and include states, icons, and various helper classes as well. -For information on developing with the jQuery UI CSS Framework, visit our [Theming API documentation](/jquery-ui/theming/api). - -### ThemeRoller Links -* [Tutorial: Develop Your Own jQuery "ThemeRoller-Ready" Components, Filament Group](http://www.filamentgroup.com/lab/developer_your_own_jquery_themeroller_ready_components/) -* [Introducing ThemeRoller: Design & Download Custom Themes for jQuery UI, Filament Group](http://www.filamentgroup.com/lab/introducing_themeroller_design_download_custom_themes_for_jquery_ui/) -* [Videos about Design & Download Custom Themes for jQuery UI, Filament Group](http://vimeo.com/1113981?pg=embed&sec=1113981) - -### Credits - -ThemeRoller was designed and developed for jQuery UI by [Filament Group, Inc](http://www.filamentgroup.com), of Boston, MA. +For information on developing with the jQuery UI CSS Framework, visit our [Theming API documentation](http://api.jqueryui.com/theming/css-framework/). diff --git a/page/jquery-ui/theming.md b/page/jquery-ui/theming.md index 25cd2b35..00456d23 100644 --- a/page/jquery-ui/theming.md +++ b/page/jquery-ui/theming.md @@ -3,13 +3,13 @@ "level": "intermediate" } -All jQuery UI plugins are designed to allow a developer to seamlessly integrate UI widgets into the look and feel of their site or application. Each plugin is styled with CSS and contains two layers of style information: standard [jQuery UI CSS Framework](/jquery-ui/theming/api/) styles and plugin-specific styles. +All jQuery UI plugins are designed to allow a developer to seamlessly integrate UI widgets into the look and feel of their site or application. Each plugin is styled with CSS and contains two layers of style information: standard [jQuery UI CSS Framework](http://api.jqueryui.com/theming/css-framework/) styles and plugin-specific styles. The jQuery UI CSS Framework provide semantic presentation classes to indicate the role of an element within a widget such as a header, content area, or clickable region. These are applied consistently across all widgets so a clickable tab, accordion, or button will all have the same `ui-state-default` class applied to indicate that it is clickable. When a user mouses over one of these elements, this class is changed to `ui-state-hover`, then `ui-state-active` when selected. This level of class consistency makes it easy to ensure that all elements with a similar role or interaction state will look the same across all widgets. -The CSS Framework styles are encapsulated in a single file called `ui.theme.css` and this is the file modified by the [ThemeRoller](/jquery-ui/theming/themeroller/) application. Framework styles only include attributes that affect the look and feel (primarily color, background images, and icons) so these are "safe" styles that will not affect functionality of individual plugins. This separation means that a developer can create a custom look and feel by modifying the colors and images in the `theme.css` file and know that as future plugins or bug fixes become available, these should work with the theme without modification. +The CSS Framework styles are encapsulated in a single file called `theme.css` and this is the file modified by the [ThemeRoller](/jquery-ui/theming/themeroller/) application. Framework styles only include attributes that affect the look and feel (primarily color, background images, and icons) so these are "safe" styles that will not affect functionality of individual plugins. This separation means that a developer can create a custom look and feel by modifying the colors and images in the `theme.css` file and know that as future plugins or bug fixes become available, these should work with the theme without modification. -Since the framework styles only cover look and feel, plugin specific stylesheets are included that contain all the additional structural style rules required to make the widget functional, such as dimensions, padding, margins, positioning, and floats. Stylesheets for each plugin are located in the `themes/base` folder of the download and are named to match the plugin such as "jquery.ui.accordion.css". These styles must be carefully edited because they work in conjunction with the scripting and provide overrides of framework styles as needed. +Since the framework styles only cover look and feel, plugin specific stylesheets are separated. These contain all the additional structural style rules required to make the widget functional, such as dimensions, padding, margins, positioning, and floats. When downloading jQuery UI, these can be found in `jquery-ui.structure.css`. We encourage all developers creating jQuery plugins to leverage the jQuery UI CSS Framework because it will make it much easier for end users to theme and use your plugin. @@ -17,8 +17,6 @@ We encourage all developers creating jQuery plugins to leverage the jQuery UI CS There are three general approaches to theming jQuery UI plugins: -* **Download a ThemeRoller theme**: The easiest way to build a theme is to use the [ThemeRoller](/jquery-ui/theming/themeroller/) to generate and download a theme. This app will create a new `ui.theme.css` file and an `images` directory containing all necessary background images and icon sprites which can simply be dropped into your project. This approach will be the easiest to create and maintain but limits customization to the options provided in ThemeRoller. -* **Modify the CSS files**: To get a bit more control over the look and feel, you may choose to start with the default theme (Smoothness) or a ThemeRoller-generated theme and then adjust the `ui.theme.css` file or any of the individual plugin stylesheets. For example, you could easily tweak the corner radius for all buttons to be different than the rest of the UI components or change the path for the icon sprite to use a custom set. With a bit of style scoping, you can even use multiple themes together in a single UI. To keep maintenance simple, restricting changes to just the `ui.theme.css` file and images is recommended. +* **Download a ThemeRoller theme**: The easiest way to build a theme is to use [ThemeRoller](/jquery-ui/theming/themeroller/) to generate and download a theme. This app will create a new `jquery-ui.theme.css` file and an `images` directory containing all necessary background images and icon sprites which can simply be dropped into your project. This approach will be the easiest to create and maintain but limits customization to the options provided in ThemeRoller. +* **Modify the CSS files**: To get a bit more control over the look and feel, you may choose to start with the default theme (Smoothness) or a ThemeRoller-generated theme and then adjust the `jquery-ui.theme.css` file or any of the individual plugin stylesheets. For example, you could easily tweak the corner radius for all buttons to be different than the rest of the UI components or change the path for the icon sprite to use a custom set. With a bit of style scoping, you can even use multiple themes together in a single UI. To keep maintenance simple, restricting changes to just the `jquery-ui.theme.css` file and images is recommended. * **Write completely custom CSS**: For the greatest amount of control, the CSS for each plugin can be written from scratch without using the framework classes or plugin-specific stylesheet. This may be necessary if the desired look and feel can't be achieved by modifying the CSS or if highly customized markup is used. This approach requires deep expertise in CSS and will require manual updates for future plugins. - -### Using ThemeRoller, the jQuery UI CSS Framework, and Writing Custom Themes diff --git a/page/jquery-ui/theming/api.md b/page/jquery-ui/theming/api.md deleted file mode 100644 index e2d693c4..00000000 --- a/page/jquery-ui/theming/api.md +++ /dev/null @@ -1,78 +0,0 @@ - - -[Back to jQuery UI Theming](/jquery-ui/theming/) - -### The jQuery UI CSS Framework - -jQuery UI includes a robust CSS Framework designed for building custom jQuery widgets. The framework includes classes that cover a wide array of common user interface needs, and can be manipulated using jQuery UI ThemeRoller. By building your UI components using the jQuery UI CSS Framework, you will be adopting shared markup conventions and allowing for ease of code integration across the plugin community at large. - -### Framework Classes - -The following CSS classes are split between `ui.core.css` and `ui.theme.css`, depending on whether styles are fixed and structural, or themeable (colors, fonts, backgrounds, etc.) respectively. These classes are designed to be applied to user interface elements to achieve visual consistency across an application and allow components to be themeable by jQuery UI ThemeRoller. - -### Layout Helpers - -* `.ui-helper-hidden`: Applies `display: none` to elements. -* `.ui-helper-hidden-accessible`: Applies accessible hiding to elements (via absolute positioning off the page.) -* `.ui-helper-reset`: A basic style reset for UI elements. Resets things such as `padding`, `margin`, `text-decoration`, `list-style, etc. -* `.ui-helper-clearfix`: Applies float wrapping properties to parent elements. -* `.ui-helper-zfix`: Applies iframe "fix" CSS to `