Hopiu/jquery-mobile
1
0
Fork 0
mirror of https://github.com/Hopiu/jquery-mobile.git synced 2026-03-19 07:20:24 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions
jquery-mobile/experiments/api-viewer/docs/jQuery.extend/index.html

107 lines
5.4 KiB
HTML
Raw Normal View History

added a jQuery api viewer demo. NOTE: content is a modified version of the downloadable HTML from http://jqapi.com
2010-09-16 17:13:38 +00:00
<!DOCTYPE html>
set utf-8
2010-11-02 01:46:29 +00:00
<html lang='en'><head>
Added viewport meta elements to the markup of every template and removed the metaViewportContent option from code and docs. IE does not support generated viewport tags.
2011-02-18 20:00:18 +00:00
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
Big update: In starting markup, pages should now be identified with the attribute data-role="page". This allows us to then add ui-page programatically, hiding all non-active pages, and apply ui-page-active to one page at a time to show it. mobile.js is updated to find pages by this attribute now, instead of ui-page class. fixes issue 32
2010-09-18 16:20:35 +00:00
<div data-role="page">
updated markup to use data-role attrs in place of classes for header/content/footer
2010-09-21 14:58:54 +00:00
<div data-role="header">
added a jQuery api viewer demo. NOTE: content is a modified version of the downloadable HTML from http://jqapi.com
2010-09-16 17:13:38 +00:00
<h1>jQuery.extend()</h1>
</div>
switched up padding and margins on content div. Now it will get 15px padding, unless its a fullscreen page. Inset listviews have no margin now, and regular listviews have -15px margins. Also, collapsibles now have no padding. Updated HTML to remove ui-body classes for content divs, to match these changes. Fixes #161
2010-10-12 19:50:28 +00:00
<div data-role="content" data-theme="c" id="jQuery.extend1">
added a jQuery api viewer demo. NOTE: content is a modified version of the downloadable HTML from http://jqapi.com
2010-09-16 17:13:38 +00:00
<h2 class="jq-clearfix roundTop section-title">
<span class="name">jQuery.extend( target, [ object1 ], [ objectN ] )</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#Object">Object</a></span>
</h2>
<div class=" entry-details">
<p class="desc"><strong>Description: </strong>Merge the contents of two or more objects together into the first object.</p>
<ul class="signatures">
<li class="signature" id="jQuery.extend-target-object1-objectN">
<h4 class="name">
<span class="versionAdded">version added: <a href="/category/version/1.0/">1.0</a></span>jQuery.extend( target, [ object1 ], [ objectN ] )</h4>
<p class="arguement"><strong>target</strong> An object that will receive the new properties if additional objects are passed in or that will extend the jQuery namespace if it is the sole argument.</p>
<p class="arguement"><strong>object1</strong>An object containing additional properties to merge in.</p>
<p class="arguement"><strong>objectN</strong>Additional objects containing properties to merge in.</p>
</li>
<li class="signature" id="jQuery.extend-deep-target-object1-objectN">
<h4 class="name">
<span class="versionAdded">version added: <a href="/category/version/1.1.4/">1.1.4</a></span>jQuery.extend( [ deep ], target, object1, [ objectN ] )</h4>
<p class="arguement"><strong>deep</strong>If true, the merge becomes recursive (aka. deep copy).</p>
<p class="arguement"><strong>target</strong>The object to extend. It will receive the new properties.</p>
<p class="arguement"><strong>object1</strong>An object containing additional properties to merge in.</p>
<p class="arguement"><strong>objectN</strong>Additional objects containing properties to merge in.</p>
</li>
</ul>
<div class="longdesc">
<p>When we supply two or more objects to <code>$.extend()</code>, properties from all of the objects are added to the target object.</p>
<p>If only one argument is supplied to <code>$.extend()</code>, this means the target argument was omitted. In this case, the jQuery object itself is assumed to be the target. By doing this, we can add new functions to the jQuery namespace. This can be useful for plugin authors wishing to add new methods to JQuery.</p>
<p>Keep in mind that the target object (first argument) will be modified, and will also be returned from <code>$.extend()</code>. If, however, we want to preserve both of the original objects, we can do so by passing an empty object as the target:</p>
<pre>var object = $.extend({}, object1, object2);</pre>
<p>The merge performed by <code>$.extend()</code> is not recursive by default; if a property of the first object is itself an object or array, it will be completely overwritten by a property with the same key in the second object. The values are not merged. This can be seen in the example below by examining the value of banana. However, by passing <code>true</code> for the first function argument, objects will be recursively merged.</p>
<p>Undefined properties are not copied. However, properties inherited from the object's prototype <em>will</em> be copied over.</p>
</div>
<h3>Examples:</h3>
<div id="entry-examples" class="entry-examples">
<div id="example-0">
<h4>Example: <span class="desc">Merge two objects, modifying the first.</span>
</h4>
<pre><code class="example">
var object1 = {
apple: 0,
banana: {weight: 52, price: 100},
cherry: 97
};
var object2 = {
banana: {price: 200},
durian: 100
};
$.extend(object1, object2);
</code></pre>
<h4>Result:</h4>
<pre><code class="results">object1 === {apple: 0, banana: {price: 200}, cherry: 97, durian: 100}</code></pre>
</div>
<div id="example-1">
<h4>Example: <span class="desc">Merge two objects recursively, modifying the first.</span>
</h4>
<pre><code class="example">
var object1 = {
apple: 0,
banana: {weight: 52, price: 100},
cherry: 97
};
var object2 = {
banana: {price: 200},
durian: 100
};
$.extend(true, object1, object2);
</code></pre>
<h4>Result:</h4>
<pre><code class="results">object1 === {apple: 0, banana: {weight: 52, price: 200}, cherry: 97, durian: 100}</code></pre>
</div>
<div id="example-2">
<h4>Example: <span class="desc">Merge settings and options, modifying settings.</span>
</h4>
<pre><code class="example">var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
jQuery.extend(settings, options);</code></pre>
<h4>Result:</h4>
<pre><code class="results">settings == { validate: true, limit: 5, name: "bar" }</code></pre>
</div>
<div id="example-3">
<h4>Example: <span class="desc">Merge defaults and options, without modifying the defaults. This is a common plugin development pattern.</span>
</h4>
<pre><code class="example">var empty = {}
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
var settings = $.extend(empty, defaults, options);</code></pre>
<h4>Result:</h4>
<pre><code class="results">settings == { validate: true, limit: 5, name: "bar" }
empty == { validate: true, limit: 5, name: "bar" }</code></pre>
</div>
</div>
</div>
</div>
</div>
</body></html>
Reference in a new issue Copy permalink