diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index cb112fa3..ae651ae6 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,6 +1,6 @@ --- title: Contributing -customFields: +customFields: - key: "is_chapter" value: 0 @@ -38,7 +38,7 @@ you are probably familiar with the frustrating feeling of putting a useful tip out there, and then wondering if it's actually making its way to the people who need it, and what to do with that old post years and versions down the road. You're invited to share that energy to help us bring that ecosystem together -and grow it further! +and grow it further! If you've ever helped anyone, colleague or stranger, with a particular problem, then you know the value of having a reference you can quickly link to that says @@ -71,7 +71,7 @@ controls most of the layout for all of our sites, and there is a [child theme](https://github.com/jquery/jquery-wp-content/tree/master/themes/learn.jquery.com) that controls the templates and styles specific to the learn site. -[`jquery-wp-content`](http://github.com/jquery/jquery-wp-content) powers our sites in +[`jquery-wp-content`](http://github.com/jquery/jquery-wp-content) powers our sites in production and staging environments, and can set up for local development relatively easily. ### Build @@ -80,7 +80,7 @@ The static content in the `page` directory is deployed to a [`jquery-wp-content`](http://github.com/jquery/jquery-wp-content) instance using [grunt](http://gruntjs.com), specifically with two grunt plugins we've created: -* [grunt-jquery-content](http://github.com/jquery/grunt-jquery-content) - pre-processes content in a variety of formats (HTML, Markdown, XML) into HTML, applying syntax highlighting and some simple partial support, preparing it for processing by +* [grunt-jquery-content](http://github.com/jquery/grunt-jquery-content) - pre-processes content in a variety of formats (HTML, Markdown, XML) into HTML, applying syntax highlighting and some simple partial support, preparing it for processing by * [grunt-wordpress](http://github.com/scottgonzalez/grunt-wordpress) - syncs static content to WordPress using [XML-RPC](http://codex.wordpress.org/XML-RPC_Support) @@ -129,7 +129,7 @@ Once you've gotten your environment working, here are the general steps you shou 1. Create a new "feature" branch based on `master` -- `git branch ` 2. Move onto that branch -- `git checkout ` -3. Work on your awesome contribution. +3. Work on your awesome contribution. 4. As you work and want to preview your changes, use `grunt` to deploy them to the your site. You can also use `grunt watch` to have the site monitor the `page` directory for any changes and automatically have the changes deployed every time you save. 5. When you're done, stage the new/modified preparation for commit -- `git add page/faq/how-do-i-add-a-new-article-to-the-learn-site.md` 6. Commit the files to your local repo -- `git commit -m "add a relevant message describing the change"` @@ -142,10 +142,10 @@ Requests](http://contribute.jquery.org/commits-and-pull-requests/) guide. ### Adding A New Article -1. Add the file to the right folder in the page folder. +1. Add the file to the right folder in the page folder. 2. Add the slug name (the filename without the extension) to the desired location `order.yml` 3. Run `grunt` -4. You should now be able to navigate to the file. +4. You should now be able to navigate to the file. ### Formatting Articles diff --git a/page/events/event-basics.md b/page/events/event-basics.md index a9485f8d..4dda1927 100644 --- a/page/events/event-basics.md +++ b/page/events/event-basics.md @@ -25,7 +25,7 @@ multiple events and handlers. ``` // Event setup using a convenience method $( "p" ).click(function() { - console.log( "You clicked a paragraph!" ); + console.log( "You clicked a paragraph!" ); }); ``` diff --git a/page/events/history-of-events.md b/page/events/history-of-events.md index 16b30df6..b6064b38 100644 --- a/page/events/history-of-events.md +++ b/page/events/history-of-events.md @@ -8,7 +8,7 @@ Given the following HTML, for our example we want to log the text of the each `< ```
-
    +
    • Item #1
    • Item #2
    • Item #3
      • diff --git a/page/jquery-mobile/getting-started.md b/page/jquery-mobile/getting-started.md index eca1e03e..1f86c2ee 100644 --- a/page/jquery-mobile/getting-started.md +++ b/page/jquery-mobile/getting-started.md @@ -7,23 +7,23 @@ jQuery Mobile provides a set of touch-friendly UI widgets and an AJAX-powered na ## Create a basic page template -To get started, you can simply paste the template below in your favorite text editor, save and open the document in a browser. +To get started, you can simply paste the template below in your favorite text editor, save and open the document in a browser. -In the `head` of this template, a meta `viewport` tag sets the screen width to the pixel width of the device. References to jQuery, jQuery Mobile and the mobile theme stylesheet from the CDN add all the styles and scripts. jQuery Mobile 1.2 (1.2.0) works with versions of jQuery core from 1.7.0 to 1.8.2. +In the `head` of this template, a meta `viewport` tag sets the screen width to the pixel width of the device. References to jQuery, jQuery Mobile and the mobile theme stylesheet from the CDN add all the styles and scripts. jQuery Mobile 1.2 (1.2.0) works with versions of jQuery core from 1.7.0 to 1.8.2. -In the `body`, a div with a `data-role` of `page` is the wrapper used to delineate a page. A header bar (`data-role="header"`), a content region (`data-role="content"`) and a footer bar (`data-role="footer"`) are added inside to create a basic page (all three are optional). These `data-` attributes are HTML5 attributes used throughout jQuery Mobile to transform basic markup into an enhanced and styled widget. +In the `body`, a div with a `data-role` of `page` is the wrapper used to delineate a page. A header bar (`data-role="header"`), a content region (`data-role="content"`) and a footer bar (`data-role="footer"`) are added inside to create a basic page (all three are optional). These `data-` attributes are HTML5 attributes used throughout jQuery Mobile to transform basic markup into an enhanced and styled widget. ``` - - - - My Page - + + + + My Page + - - + +
      @@ -47,11 +47,11 @@ In the `body`, a div with a `data-role` of `page` is the wrapper used to delinea ### Add content -The next step is to add content inside the content container. Any standard HTML elements - headings, lists, paragraphs, etc can be added. You can write your own custom styles to create custom layouts by adding an additional stylesheet to the `head` after the jQuery Mobile stylesheet. +The next step is to add content inside the content container. Any standard HTML elements - headings, lists, paragraphs, etc can be added. You can write your own custom styles to create custom layouts by adding an additional stylesheet to the `head` after the jQuery Mobile stylesheet. ### Make a listview -jQuery Mobile includes a diverse set of common listviews that are coded as lists with a `data-role="listview"` added. Here is a simple linked list that has a role of `listview`. The `data-inset="true"` attribute makes the listview look like an inset module, while `data-filter="true"` adds a dynamic search filter. +jQuery Mobile includes a diverse set of common listviews that are coded as lists with a `data-role="listview"` added. Here is a simple linked list that has a role of `listview`. The `data-inset="true"` attribute makes the listview look like an inset module, while `data-filter="true"` adds a dynamic search filter. ```
        @@ -62,10 +62,10 @@ jQuery Mobile includes a diverse set of common listviews that are coded as lists
      • Ferrari
      ``` - + ### Add a slider -The framework contains a full set of form elements that automatically are enhanced into touch-friendly styled widgets. Here's a slider made with the new HTML5 input type of range, no `data-role` needed. All form elements must always be properly associated with a `label` and the group of form elements be wrapped in a `form` tag. +The framework contains a full set of form elements that automatically are enhanced into touch-friendly styled widgets. Here's a slider made with the new HTML5 input type of range, no `data-role` needed. All form elements must always be properly associated with a `label` and the group of form elements be wrapped in a `form` tag. ```
      @@ -76,7 +76,7 @@ The framework contains a full set of form elements that automatically are enhanc ### Make a button -There are a few ways to make buttons. A common one is to turn a link into a button so it's easy to click. Just start with a link and add a `data-role="button"` attribute to it. You can add an icon with the `data-icon` attribute and optionally set its position with the `data-iconpos` attribute. +There are a few ways to make buttons. A common one is to turn a link into a button so it's easy to click. Just start with a link and add a `data-role="button"` attribute to it. You can add an icon with the `data-icon` attribute and optionally set its position with the `data-iconpos` attribute. ``` Star button @@ -84,7 +84,7 @@ There are a few ways to make buttons. A common one is to turn a link into a butt ### Choose a theme swatch -jQuery Mobile has a robust theme framework that supports up to 26 sets of toolbar, content and button colors, called a "swatch". You can add a `data-theme="e"` attribute to any of the widgets on this page: page, header, list, input for the slider, or button to turn it yellow. Different swatch letters in default theme from a-e can be used to mix and match swatches. +jQuery Mobile has a robust theme framework that supports up to 26 sets of toolbar, content and button colors, called a "swatch". You can add a `data-theme="e"` attribute to any of the widgets on this page: page, header, list, input for the slider, or button to turn it yellow. Different swatch letters in default theme from a-e can be used to mix and match swatches. If you add the theme swatch to the page, all the widgets inside the content will automatically inherit the theme (headers and footers don't inherit and default to swatch "a"). @@ -92,12 +92,12 @@ If you add the theme swatch to the page, all the widgets inside the content will Button ``` -If you would like to create a custom theme, you can use [ThemeRoller](http://jquerymobile.com/themeroller/) that allows users to create their own theme through an easy to use drag and drop interface. You will then be able to download and use your newly created theme. +If you would like to create a custom theme, you can use [ThemeRoller](http://jquerymobile.com/themeroller/) that allows users to create their own theme through an easy to use drag and drop interface. You will then be able to download and use your newly created theme. -### Go forth and build something +### Go forth and build something -This guide has provided you with a basic structure for a jQuery Mobile page and a few enhanced elements. You can explore the full [jQuery Mobile documentation](http://jquerymobile.com/demos/1.2.0/) to learn about linking pages, adding animated page transitions, and creating dialogs and popups. +This guide has provided you with a basic structure for a jQuery Mobile page and a few enhanced elements. You can explore the full [jQuery Mobile documentation](http://jquerymobile.com/demos/1.2.0/) to learn about linking pages, adding animated page transitions, and creating dialogs and popups. -If you're more of the type who prefers actually writing JavaScript to build your apps, and you don't want to use the `data-` attribute configuration system, you can take full control of everything and call plugins directly as these are all standard jQuery plugins built with the UI widget factory. Particularly useful information for such cases can be found in the global configuration, events, and methods sections. +If you're more of the type who prefers actually writing JavaScript to build your apps, and you don't want to use the `data-` attribute configuration system, you can take full control of everything and call plugins directly as these are all standard jQuery plugins built with the UI widget factory. Particularly useful information for such cases can be found in the global configuration, events, and methods sections. -Finally, you can read up on scripting pages, generating dynamic pages, and building PhoneGap apps. +Finally, you can read up on scripting pages, generating dynamic pages, and building PhoneGap apps. diff --git a/page/jquery-mobile/theme-roller.md b/page/jquery-mobile/theme-roller.md index b100d275..eeeab4f0 100644 --- a/page/jquery-mobile/theme-roller.md +++ b/page/jquery-mobile/theme-roller.md @@ -5,44 +5,44 @@ level: Beginner ## Theming Overview -jQuery Mobile has a robust theme framework that supports up to 26 sets of toolbar, content and button colors, called a "swatch". The framework comes with five defined themes (swatches 'a' to 'e') which can be used readily, removed or overwritten. +jQuery Mobile has a robust theme framework that supports up to 26 sets of toolbar, content and button colors, called a "swatch". The framework comes with five defined themes (swatches 'a' to 'e') which can be used readily, removed or overwritten. ### Default theme swatch mapping for components -If no theme swatch letter is set at all, the framework uses the 'a' swatch (black in the default theme) for headers and footers and the 'c' swatch (light gray in the default theme) for the page content to maximize contrast between the both. +If no theme swatch letter is set at all, the framework uses the 'a' swatch (black in the default theme) for headers and footers and the 'c' swatch (light gray in the default theme) for the page content to maximize contrast between the both. -All items in containers inherit the swatch from their parent. Exceptions to this rule are the listdivider in listviews, the header of nested list pages, and the button of split button lists, which all default to 'b' (blue in the default theme). Count bubbles default to 'c' (silver in the default theme). +All items in containers inherit the swatch from their parent. Exceptions to this rule are the listdivider in listviews, the header of nested list pages, and the button of split button lists, which all default to 'b' (blue in the default theme). Count bubbles default to 'c' (silver in the default theme). -Note that there is also a swatch named "active" (bright blue in the default theme) which is used to indicate an active selected item. See the Global "Active" state further down this page for further information on the active swatch. +Note that there is also a swatch named "active" (bright blue in the default theme) which is used to indicate an active selected item. See the Global "Active" state further down this page for further information on the active swatch. + +The page loading dialog and error message don't inherit a swatch theme. The loading dialog defaults to swatch 'a' (black in the default theme) and the error message to swatch 'e' (yellow in the default theme). You can configure those defaults globally. -The page loading dialog and error message don't inherit a swatch theme. The loading dialog defaults to swatch 'a' (black in the default theme) and the error message to swatch 'e' (yellow in the default theme). You can configure those defaults globally. - ### Themes and swatches -The theme system separates color and texture from structural styles that define things like padding and dimensions. This allows theme colors and textures to be defined once in the stylesheet and to be mixed, matched, and combined to achieve a wide range of visual effects. +The theme system separates color and texture from structural styles that define things like padding and dimensions. This allows theme colors and textures to be defined once in the stylesheet and to be mixed, matched, and combined to achieve a wide range of visual effects. -Each theme includes several global settings, including font family, drop shadows for overlays, and corner radius values for buttons and boxes. In addition, the theme can include multiple color swatches, each with color values for bars, content blocks, buttons and list items, and font text-shadow. +Each theme includes several global settings, including font family, drop shadows for overlays, and corner radius values for buttons and boxes. In addition, the theme can include multiple color swatches, each with color values for bars, content blocks, buttons and list items, and font text-shadow. -The default theme includes 5 swatches that are given letters (a, b, c, d, e) for quick reference. To make mapping of color swatches consistent across our widgets, we have followed the convention that swatch 'a' is the highest level of visual priority (black in our default theme), 'b' is secondary level (blue) and 'c' is the baseline level (gray) that we use by default in many situations, 'd' for an alternate secondary level and 'e' as an accent swatch. Themes may have additional swatches for accent colors or specific situations. For example, you could add a new theme swatch 'f' that has a red bar and button for use in error situations. +The default theme includes 5 swatches that are given letters (a, b, c, d, e) for quick reference. To make mapping of color swatches consistent across our widgets, we have followed the convention that swatch 'a' is the highest level of visual priority (black in our default theme), 'b' is secondary level (blue) and 'c' is the baseline level (gray) that we use by default in many situations, 'd' for an alternate secondary level and 'e' as an accent swatch. Themes may have additional swatches for accent colors or specific situations. For example, you could add a new theme swatch 'f' that has a red bar and button for use in error situations. -Most theme changes can be done using ThemeRoller, but it is also fairly simple to manually edit the base swatches in the default theme and/or add additional swatches by editing the theme CSS file. Just copy a block of swatch styles, rename the classes with the new swatch letter name, and tweak colors as you see fit. +Most theme changes can be done using ThemeRoller, but it is also fairly simple to manually edit the base swatches in the default theme and/or add additional swatches by editing the theme CSS file. Just copy a block of swatch styles, rename the classes with the new swatch letter name, and tweak colors as you see fit. -## Creating a Custom Theme with ThemeRoller +## Creating a Custom Theme with ThemeRoller -![picture Theme Roller Logo](/resources/jquery-mobile/themeroller-mobile-logo.png "Theme Roller") +![picture Theme Roller Logo](/resources/jquery-mobile/themeroller-mobile-logo.png "Theme Roller") -The easiest way to create custom themes is with the ThemeRoller tool. It allows you to build a theme composed of up to 26 swatches, download a the newly created CSS file, and use it in your project. +The easiest way to create custom themes is with the ThemeRoller tool. It allows you to build a theme composed of up to 26 swatches, download a the newly created CSS file, and use it in your project. ### Creating the Theme swatches -The [ThemeRoller](http://jquerymobile.com/themeroller/) allows users to create their own theme through an easy to use drag and drop interface. By default, ThemeRoller offers three swatches (a, b and c). You can use the offered default colors, the Adobe kuler colors, or create your own. You will create your theme by dragging the chosen color onto the chosen element in the swatch of your choice. You can add more swatches by pressing the '+' sign near the 'A', 'B', and 'C' tabs, in the left hand-side menu. +The [ThemeRoller](http://jquerymobile.com/themeroller/) allows users to create their own theme through an easy to use drag and drop interface. By default, ThemeRoller offers three swatches (a, b and c). You can use the offered default colors, the Adobe kuler colors, or create your own. You will create your theme by dragging the chosen color onto the chosen element in the swatch of your choice. You can add more swatches by pressing the '+' sign near the 'A', 'B', and 'C' tabs, in the left hand-side menu. -You can further edit your swatch from the menu. For example, you can expand the various element parts and carry out detailed editing. For example, this will allow you to text color, text shadow size, position and color, etc. You can also edit the gradient used on each element. +You can further edit your swatch from the menu. For example, you can expand the various element parts and carry out detailed editing. For example, this will allow you to text color, text shadow size, position and color, etc. You can also edit the gradient used on each element. Here are two examples of theme swatches created, the first one with the default colors and with the kuler colors: -![picture Default colors theme example](/resources/jquery-mobile/Theme.png "Default colors theme example") ![picture Kuler theme example](/resources/jquery-mobile/Kuler.png "Kuler theme example") +![picture Default colors theme example](/resources/jquery-mobile/Theme.png "Default colors theme example") ![picture Kuler theme example](/resources/jquery-mobile/Kuler.png "Kuler theme example") ### Downloading the created Theme @@ -52,7 +52,7 @@ Once you are satisfied with the various swatches that you have created in your t ### Using the downloaded Theme -The theme gets downloaded on your local machine as a zip file. This contains an `index.html` file, and a `themes` folder. The `index.html` file is an example of how you can now se your theme. The `themes` folder contains your theme CSS files, and the icons that are used by jQuery Mobile. +The theme gets downloaded on your local machine as a zip file. This contains an `index.html` file, and a `themes` folder. The `index.html` file is an example of how you can now se your theme. The `themes` folder contains your theme CSS files, and the icons that are used by jQuery Mobile. To start using your theme, you can either start from the provided `index.html` or start from scratch. As explained in the theme download popup window, all you need is to add your theme to the head of your page before the jquery.mobile.structure file, like this: @@ -65,13 +65,13 @@ To start using your theme, you can either start from the provided `index.html` o - - - + + + - + ``` -### Final Note +### Final Note -You need to be aware that jQuery Mobile will default to certain swatches when none are specified. For example, page content will default to swatch 'c', list dividers to swatch 'b', etc. As the full jQuery Mobile CSS is replaced by your custom theme CSS and the jQuery Mobile structure CSS, the only swatches available are the ones that you have provided as part of your custom theme. Therefore, you need to either always specify a swatch letter for all your elements or their parent using for example the `data-theme` attribute, or you will need to provide a swatch in your custom theme for the possible defaults. Additionally, the error messages use the swatch 'e', so this should also be specified in your theme. +You need to be aware that jQuery Mobile will default to certain swatches when none are specified. For example, page content will default to swatch 'c', list dividers to swatch 'b', etc. As the full jQuery Mobile CSS is replaced by your custom theme CSS and the jQuery Mobile structure CSS, the only swatches available are the ones that you have provided as part of your custom theme. Therefore, you need to either always specify a swatch letter for all your elements or their parent using for example the `data-theme` attribute, or you will need to provide a swatch in your custom theme for the possible defaults. Additionally, the error messages use the swatch 'e', so this should also be specified in your theme. diff --git a/page/jquery-ui/getting-started.md b/page/jquery-ui/getting-started.md index b3fe932d..1e532b7c 100644 --- a/page/jquery-ui/getting-started.md +++ b/page/jquery-ui/getting-started.md @@ -20,7 +20,7 @@ The main column of the Download Builder lists all of the javascript components i ![Configuring a download](/resources/jquery-ui/configure.png) #### Step 2: Select a theme (or roll your own custom theme) -In the right column of the download builder, you'll find a field where you can choose from a number of pre-designed themes for your jQuery UI widgets. +In the right column of the download builder, you'll find a field where you can choose from a number of pre-designed themes for your jQuery UI widgets. You can either choose from the various themes we provide, or you can design your own custom theme using ThemeRoller (more on that later). **Advanced Theme Settings:** *The theme section of the download builder also offers some advanced configuration settings for your theme. If you plan to use multiple themes on a single page, these fields will come in handy. If you plan to only use one theme on a page, you can skip these settings entirely.* @@ -47,7 +47,7 @@ Open up index.html in a text editor and you'll see that it links to a few depend ```html - + ``` @@ -82,7 +82,7 @@ $('#mySliderDiv').slider({ }); ``` -You can pass as many different options as you'd like by following each one with a comma (except the last one): +You can pass as many different options as you'd like by following each one with a comma (except the last one): ```javascript $('#mySliderDiv').slider({ @@ -104,11 +104,11 @@ ThemeRoller provides a custom interface for designing all of the elements used b ### Downloading your theme When you click the "Download theme" button in ThemeRoller, you'll be directed to the Download Builder and your custom theme will be auto-selected in the Theme dropdown menu. You can configure your download package further from there. Once you download, you'll see that the example.html page is styled using your custom theme. - + **Quick tip:** *If you ever need to edit your theme, simply open the CSS file and find on line 43 where it says "To view and modify this theme, visit ..." That url will open the theme in ThemeRoller for editing.* ### Support: Where can I get help? -JQuery UI user and developer resources are kept up-to-date at the [Support Center](http://jqueryui.com/support). +JQuery UI user and developer resources are kept up-to-date at the [Support Center](http://jqueryui.com/support). ### Developers Wanted! -Want to join the jQuery UI team? We'd love your help! Visit the UI [Development Center](http://jqueryui.com/development) for details on how to get involved. +Want to join the jQuery UI team? We'd love your help! Visit the UI [Development Center](http://jqueryui.com/development) for details on how to get involved. diff --git a/page/jquery-ui/theming.md b/page/jquery-ui/theming.md index 6203fbef..27cd29bd 100644 --- a/page/jquery-ui/theming.md +++ b/page/jquery-ui/theming.md @@ -3,13 +3,13 @@ title: Theming jQuery UI 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](/jquery-ui/theming/api/) 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, accordian 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 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 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. 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. diff --git a/page/jquery-ui/theming/themeroller.md b/page/jquery-ui/theming/themeroller.md index 295b722c..a319a759 100644 --- a/page/jquery-ui/theming/themeroller.md +++ b/page/jquery-ui/theming/themeroller.md @@ -17,7 +17,7 @@ The interface for ThemeRoller is categorized into panels for global font and cor ThemeRoller themes can be viewed via permalink URLs, and it includes a gallery of pre-designed themes to choose from. The theme gallery is accessible through the tab strip located at the top of the application interface. From the gallery, you can preview and download themes, or even choose to tweak a theme further in the "Roll Your Own" tab. ### 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 theme assets. Images included in your download will be generated to your specifications and saved as high-quality PNG files. +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 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. diff --git a/page/jquery-ui/widget-factory/how-to-use-the-widget-factory.md b/page/jquery-ui/widget-factory/how-to-use-the-widget-factory.md index 03a75ae7..b259ff93 100644 --- a/page/jquery-ui/widget-factory/how-to-use-the-widget-factory.md +++ b/page/jquery-ui/widget-factory/how-to-use-the-widget-factory.md @@ -91,7 +91,7 @@ prepending an underscore to the function name. if ( value === undefined ) { return this.options.value; } - + // value passed, act as a setter this.options.value = this._constrain( value ); var progress = this.options.value + "%"; diff --git a/page/jquery-ui/widget-factory/why-use-the-widget-factory.md b/page/jquery-ui/widget-factory/why-use-the-widget-factory.md index 5e99329c..26187592 100644 --- a/page/jquery-ui/widget-factory/why-use-the-widget-factory.md +++ b/page/jquery-ui/widget-factory/why-use-the-widget-factory.md @@ -51,7 +51,7 @@ A common pattern in jQuery plugins looks like this: options = $.extend( {}, $.fn.plugin.defaults, options ); // plugin logic goes here }; - + $.fn.plugin.defaults = { param1: "foo", param2: "bar", @@ -64,14 +64,14 @@ Let's see what this looks like with the widget factory. ``` $.widget( "ns.plugin", { - + // default options options: { param1: "foo", param2: "bar", param3: "baz" }, - + _create: function() { // options are already merged and stored in this.options // plugin logic goes here diff --git a/page/performance/append-outside-loop.md b/page/performance/append-outside-loop.md index d3ce3e97..733ef9d9 100644 --- a/page/performance/append-outside-loop.md +++ b/page/performance/append-outside-loop.md @@ -2,7 +2,7 @@ title: Append Outside of Loops level: intermediate source: http://jqfundamentals.com/legacy -attribution: +attribution: - jQuery Fundamentals --- diff --git a/page/performance/cache-loop-length.md b/page/performance/cache-loop-length.md index e518155c..ac12c735 100644 --- a/page/performance/cache-loop-length.md +++ b/page/performance/cache-loop-length.md @@ -2,7 +2,7 @@ title: Cache Length During Loops level: intermediate source: http://jqfundamentals.com/legacy -attribution: +attribution: - jQuery Fundamentals --- diff --git a/page/performance/detach-elements-before-work-with-them.md b/page/performance/detach-elements-before-work-with-them.md index 6cc161a9..b198302f 100644 --- a/page/performance/detach-elements-before-work-with-them.md +++ b/page/performance/detach-elements-before-work-with-them.md @@ -2,7 +2,7 @@ title: Detach Elements to Work with Them level: intermediate source: http://jqfundamentals.com/legacy -attribution: +attribution: - jQuery Fundamentals --- diff --git a/page/performance/dont-act-on-absent-elements.md b/page/performance/dont-act-on-absent-elements.md index 0fa177ee..9ca38551 100644 --- a/page/performance/dont-act-on-absent-elements.md +++ b/page/performance/dont-act-on-absent-elements.md @@ -2,7 +2,7 @@ title: Don't Act on Absent Elements level: intermediate source: http://jqfundamentals.com/legacy -attribution: +attribution: - jQuery Fundamentals --- diff --git a/page/performance/optimize-selectors.md b/page/performance/optimize-selectors.md index de55d4c6..29504d5c 100644 --- a/page/performance/optimize-selectors.md +++ b/page/performance/optimize-selectors.md @@ -2,7 +2,7 @@ title: Optimize Selectors level: intermediate source: http://jqfundamentals.com/legacy -attribution: +attribution: - jQuery Fundamentals --- diff --git a/page/performance/read-the-source.md b/page/performance/read-the-source.md index 302a7d4b..f7fc894e 100644 --- a/page/performance/read-the-source.md +++ b/page/performance/read-the-source.md @@ -2,7 +2,7 @@ title: Don't Treat jQuery as a Black Box level: intermediate source: http://jqfundamentals.com/legacy -attribution: +attribution: - jQuery Fundamentals --- diff --git a/page/performance/use-stylesheets-for-changing-css.md b/page/performance/use-stylesheets-for-changing-css.md index 08c5969e..d6c92e26 100644 --- a/page/performance/use-stylesheets-for-changing-css.md +++ b/page/performance/use-stylesheets-for-changing-css.md @@ -2,7 +2,7 @@ title: Use Stylesheets for Changing CSS on Many Elements level: intermediate source: http://jqfundamentals.com/legacy -attribution: +attribution: - jQuery Fundamentals --- diff --git a/page/plugins/finding-evaluating-plugins.md b/page/plugins/finding-evaluating-plugins.md index a90c1428..b9793b96 100644 --- a/page/plugins/finding-evaluating-plugins.md +++ b/page/plugins/finding-evaluating-plugins.md @@ -2,7 +2,7 @@ title : Finding & Evaluating Plugins level: intermediate source: http://jqfundamentals.com/legacy -attribution: +attribution: - jQuery Fundamentals --- ## Finding & Evaluating Plugins @@ -14,8 +14,8 @@ good that someone has written a plugin for it. The quality of jQuery plugins varies widely. Many plugins are extensively tested and well-maintained, but others are hastily created and then ignored. -More than a few fail to follow best practices. Some plugins, mainly -[jQuery UI](http://jqueryui.com/), are maintained by the jQuery team. The +More than a few fail to follow best practices. Some plugins, mainly +[jQuery UI](http://jqueryui.com/), are maintained by the jQuery team. The quality of these plugins is as good as jQuery itself. Google is your best initial resource for locating plugins, though the jQuery diff --git a/page/plugins/stateful-plugins-with-widget-factory.md b/page/plugins/stateful-plugins-with-widget-factory.md index 2792e166..b5b43c4d 100644 --- a/page/plugins/stateful-plugins-with-widget-factory.md +++ b/page/plugins/stateful-plugins-with-widget-factory.md @@ -2,7 +2,7 @@ title: Writing Stateful Plugins with the jQuery UI Widget Factory level: intermediate source: http://jqfundamentals.com/legacy -attribution: +attribution: - jQuery Fundamentals - Scott González --- diff --git a/page/style-guide.md b/page/style-guide.md index c43f6b51..6faf97c2 100644 --- a/page/style-guide.md +++ b/page/style-guide.md @@ -2,7 +2,7 @@ title: Style Guide attribution: - jorydotcom -customFields: +customFields: - key: "is_chapter" value: 0 @@ -11,7 +11,7 @@ customFields: ## Formatting Conventions Articles in the learn site are authored with [GitHub Flavored -Markdown](http://github.github.com/github-flavored-markdown/), and +Markdown](http://github.github.com/github-flavored-markdown/), and the beginning of each article contains some [YAML](http://www.yaml.org/) "front matter" that contains metadata used when the article is published. @@ -24,7 +24,7 @@ Each article should have the following header (see below as some metatags are op title:
      level: [beginner|intermediate|advance] source: -attribution: +attribution: - Ralph Whitbeck - John Paul --- @@ -99,10 +99,10 @@ guidelines. #### Voice & Tone - - Do write in clear, easy-to-understand statements. + - Do write in clear, easy-to-understand statements. - Do write in active voice. - Do keep the audience in mind while writing. - - Do write conversationally. + - Do write conversationally. - Do write in the second person to address the reader. - Do use the imperative mood. - Do use humor strategically. When in doubt, err on the side of formality. @@ -114,7 +114,7 @@ guidelines. #### Linking & Referencing Content - - Link to relevant content within the learn.jquery.com site to refer readers to previously covered topics or concepts. + - Link to relevant content within the learn.jquery.com site to refer readers to previously covered topics or concepts. - Link to the jQuery blog or API documentation when necessary. - Use inline hyperlinks to reference relevant content. - Acceptable external resources: @@ -130,4 +130,4 @@ guidelines. - Favor "Right Way" examples over "Wrong Way" examples - there is more than one wrong way to do something, after all. - Use good comments so that explanation within prose isn't necessary. - Test your code examples before submitting. - - Use the [jQuery Core Code Style Guide](http://docs.jquery.com/JQuery_Core_Style_Guidelines) for your code examples. + - Use the [jQuery Core Code Style Guide](http://docs.jquery.com/JQuery_Core_Style_Guidelines) for your code examples. diff --git a/page/using-jquery-core/data-methods.md b/page/using-jquery-core/data-methods.md index b218f5b9..a02ae2d4 100644 --- a/page/using-jquery-core/data-methods.md +++ b/page/using-jquery-core/data-methods.md @@ -2,7 +2,7 @@ title : Data Methods level: intermediate source: http://jqfundamentals.com/legacy -attribution: +attribution: - jQuery Fundamentals --- There's often data about an element you want to store with the element. In plain JavaScript, you might do this by adding a property to the DOM element, but you'd have to deal with memory leaks in some browsers. jQuery offers a straightforward way to store data related to an element, and it manages the memory issues for you. diff --git a/page/using-jquery-core/dollar-object-vs-function.md b/page/using-jquery-core/dollar-object-vs-function.md index a4409681..fc462ae0 100644 --- a/page/using-jquery-core/dollar-object-vs-function.md +++ b/page/using-jquery-core/dollar-object-vs-function.md @@ -2,7 +2,7 @@ title : $ vs $() level: beginner source: http://jqfundamentals.com/legacy -attribution: +attribution: - jQuery Fundamentals --- Until now, we’ve been dealing entirely with methods that are called on a jQuery diff --git a/page/using-jquery-core/iterating.md b/page/using-jquery-core/iterating.md index 1e8cea67..ebd6a684 100644 --- a/page/using-jquery-core/iterating.md +++ b/page/using-jquery-core/iterating.md @@ -1,7 +1,7 @@ --- title : Iterating over jQuery and non-jQuery Objects --- -jQuery provides an object iterator utility called `$.each()` as well as a jQuery collection iterator: `.each()`. These are not interchangeable. In addition, there are a couple of helpful methods called `$.map()` and `.map()` that can shortcut one of our common iteration use cases. +jQuery provides an object iterator utility called `$.each()` as well as a jQuery collection iterator: `.each()`. These are not interchangeable. In addition, there are a couple of helpful methods called `$.map()` and `.map()` that can shortcut one of our common iteration use cases. ### `$.each()` diff --git a/page/using-jquery-core/manipulating-elements.md b/page/using-jquery-core/manipulating-elements.md index b702ae2d..41aa9a4e 100644 --- a/page/using-jquery-core/manipulating-elements.md +++ b/page/using-jquery-core/manipulating-elements.md @@ -2,7 +2,7 @@ title : Manipulating Elements level: beginner source: http://jqfundamentals.com/legacy -attribution: +attribution: - jQuery Fundamentals --- For complete documentation of jQuery manipulation methods, visit the [Manipulation documentation on api.jquery.com](http://api.jquery.com/category/manipulation/). diff --git a/page/using-jquery-core/understanding-index.md b/page/using-jquery-core/understanding-index.md index e6014216..852bedaf 100644 --- a/page/using-jquery-core/understanding-index.md +++ b/page/using-jquery-core/understanding-index.md @@ -1,7 +1,7 @@ --- title : Using jQuery's .index() Function level: intermediate -attribution: +attribution: - John Paul --- `.index()` is a method on jQuery objects that's generally used to search for a given element within the jQuery object that it's called on. This method has four different signatures with different semantics that can be confusing. This article covers details about how to understand the way `.index()` works with each signature. diff --git a/page/using-jquery-core/utility-methods.md b/page/using-jquery-core/utility-methods.md index 1c61d7c5..101fc515 100644 --- a/page/using-jquery-core/utility-methods.md +++ b/page/using-jquery-core/utility-methods.md @@ -2,12 +2,12 @@ title : Utility Methods level: beginner source: http://jqfundamentals.com/legacy -attribution: +attribution: - jQuery Fundamentals --- jQuery offers several utility methods in the `$` namespace. These methods are helpful for accomplishing routine programming tasks. For a complete reference on jQuery utility methods, visit the [utilities documentation on api.jquery.com](http://api.jquery.com/category/utilities/). -Below are examples of a few of the utility methods: +Below are examples of a few of the utility methods: ### `$.trim`