Nate
/
BIM-Monitor


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
							<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI jQuery documentation</title>

	<style>
	body {
		font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif"
	}
	.gutter {
		display: none;
	}
	</style>
</head>
<body>

<script>{
		"title":
			"Widget Plugin Bridge",
		"excerpt":
			"Part of the jQuery Widget Factory is the jQuery.widget.bridge() method. This acts as the middleman between the object created by $.widget() and the jQuery API.",
		"termSlugs": {
			"category": [
				"utilities","widgets"
			]
		}
	}</script><article id="jQuery-widget-bridge1" class="entry method"><h2 class="section-title"><span class="name">jQuery.widget.bridge( name, constructor )</span></h2>
<div class="entry-wrapper">
<p class="desc"><strong>Description: </strong>Part of the <a href="/jQuery.widget/">jQuery Widget Factory</a> is the <code>jQuery.widget.bridge()</code> method. This acts as the middleman between the object created by <code>$.widget()</code> and the jQuery API.</p>
<ul class="signatures"><li class="signature">
<h4 class="name"><a id="jQuery-widget-bridge-name-constructor" href="#jQuery-widget-bridge-name-constructor"><span class="icon-link"></span>jQuery.widget.bridge( name, constructor )</a></h4>
<ul>
<li>
<div><strong>name</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#String">String</a>
</div>
<div>The name of the plugin to create.</div>
</li>
<li>
<div><strong>constructor</strong></div>
<div>Type: <a href="http://api.jquery.com/Types/#Function">Function</a>()</div>
<div>The object to instantiate when the plugin is invoked.</div>
</li>
</ul>
</li></ul>
<div class="longdesc" id="entry-longdesc">
			<p><code>$.widget.bridge()</code> does a few things:</p>
			<ul>
				<li>Connects a regular JavaScript constructor to the jQuery API.</li>
				<li>Automatically creates instances of said object and stores it within the element's <code>$.data</code> cache.</li>
				<li>Allows calls to public methods.</li>
				<li>Prevents calls to private methods.</li>
				<li>Prevents method calls on uninitialized objects.</li>
				<li>Protects against multiple initializations.</li>
			</ul>
			<p>jQuery UI widgets are created using <code>$.widget( "foo.bar", {} );</code> syntax to define an object from which instances will be created.  Given a DOM structure with five <code>.foo</code>'s, <code>$( ".foo" ).bar();</code> will create five instances of your "bar" object. <code>$.widget.bridge()</code> works inside the factory by taking your base "bar" object and giving it a public API. Therefore, you can create instances by writing <code>$( ".foo" ).bar()</code>, and call methods by writing <code>$( ".foo" ).bar( "baz" )</code>.</p>
			<p>If all you want is one-time initialization and calling methods, your object passed to <code>jQuery.widget.bridge()</code> can be very minimal:</p>
			<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
						<div class="line n4">4</div>
					
						<div class="line n5">5</div>
					
						<div class="line n6">6</div>
					
						<div class="line n7">7</div>
					
						<div class="line n8">8</div>
					
						<div class="line n9">9</div>
					
						<div class="line n10">10</div>
					
						<div class="line n11">11</div>
					
						<div class="line n12">12</div>
					
						<div class="line n13">13</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="keyword">var</span> Highlighter = <span class="keyword">function</span>( options, element ) {</code></div></div><div class="container"><div class="line"><code>  <span class="keyword">this</span>.options = options;</code></div></div><div class="container"><div class="line"><code>  <span class="keyword">this</span>.element = $( element );</code></div></div><div class="container"><div class="line"><code>  <span class="keyword">this</span>._set( <span class="number">800</span> );</code></div></div><div class="container"><div class="line"><code>};</code></div></div><div class="container"><div class="line"><code>Highlighter.prototype = {</code></div></div><div class="container"><div class="line"><code>  toggle: <span class="keyword">function</span>() {</code></div></div><div class="container"><div class="line"><code>    <span class="keyword">this</span>._set( <span class="keyword">this</span>.element.css( <span class="string">"font-weight"</span>) === <span class="number">400</span> ? <span class="number">800</span> : <span class="number">400</span> );</code></div></div><div class="container"><div class="line"><code>  },</code></div></div><div class="container"><div class="line"><code>  _set: <span class="keyword">function</span>(value) {</code></div></div><div class="container"><div class="line"><code>    <span class="keyword">this</span>.element.css( <span class="string">"font-weight"</span>, value );</code></div></div><div class="container"><div class="line"><code>  }</code></div></div><div class="container"><div class="line"><code>};</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

			<p>All you need here is a function that acts as the constructor, accepting two arguments:</p>
			<ul>
				<li>
<code>options</code>: an object of configuration options</li>
				<li>
<code>element</code>: the DOM element this instance was created on</li>
			</ul>
			<p>You can then hook this object up as a jQuery plugin using the bridge and use it on any jQuery object:</p>
			<div class="syntaxhighlighter javascript nogutter">
	<table>
		<tbody>
			<tr>
				<td class="gutter">
					
						<div class="line n1">1</div>
					
						<div class="line n2">2</div>
					
						<div class="line n3">3</div>
					
						<div class="line n4">4</div>
					
						<div class="line n5">5</div>
					
						<div class="line n6">6</div>
					
						<div class="line n7">7</div>
					
						<div class="line n8">8</div>
					
				</td>
				<td class="code">
					<pre><div class="container"><div class="line"><code><span class="comment">// Hook up the plugin</span></code></div></div><div class="container"><div class="line"><code>$.widget.bridge( <span class="string">"colorToggle"</span>, Highlighter );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// Initialize it on divs</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">"div"</span> ).colorToggle().click(<span class="keyword">function</span>() {</code></div></div><div class="container"><div class="line"><code>  <span class="comment">// Call the public method on click</span></code></div></div><div class="container"><div class="line"><code>  $( <span class="keyword">this</span> ).colorToggle( <span class="string">"toggle"</span> );</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
				</td>
			</tr>
		</tbody>
	</table>
</div>

			<p>To use all the features of the bridge, your object also needs to have an <code>_init()</code> method on the prototype. This will get called whenever the plugin is invoked while an instance already exists. In that case you also need to have an <code>option()</code> method. This will be invoked with the options as the first argument. If there were none, the argument will be an empty object. For a proper implementation of the <code>option</code> method, check out the implementation of <a href="/jQuery.widget/#jQuery-Widget2"><code>$.Widget</code></a>.</p>
			<p>There is one optional property the bridge will use, if present: If your object's prototype has a <code>widgetFullName</code> property, this will be used as the key for storing and retrieving the instance. Otherwise, the name argument will be used.</p>
		</div>
</div></article>

</body>
</html>