{"id":86,"date":"2023-08-25T17:40:58","date_gmt":"2023-08-25T17:40:58","guid":{"rendered":"\/\/api.jqueryui.com\/1.12\/?p=86"},"modified":"2023-08-25T17:40:58","modified_gmt":"2023-08-25T17:40:58","slug":"jQuery.widget.bridge","status":"publish","type":"post","link":"https:\/\/api.jqueryui.com\/1.12\/jQuery.widget.bridge\/","title":{"rendered":"Widget Plugin Bridge"},"content":{"rendered":"<article id=\"jQuery-widget-bridge1\" class=\"entry method\"><h2 class=\"section-title\"><span class=\"name\">jQuery.widget.bridge( name, constructor )<\/span><\/h2>\n<div class=\"entry-wrapper\">\n<p class=\"desc\"><strong>Description: <\/strong>Part of the <a href=\"\/1.12\/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>\n<ul class=\"signatures\"><li class=\"signature\">\n<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>\n<ul>\n<li id=\"jQuery-widget-bridge-name-constructor-name\">\n<div><strong>name<\/strong><\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#String\">String<\/a>\n<\/div>\n<div>The name of the plugin to create.<\/div>\n<\/li>\n<li id=\"jQuery-widget-bridge-name-constructor-constructor\">\n<div><strong>constructor<\/strong><\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#Function\">Function<\/a>()<\/div>\n<div>The object to instantiate when the plugin is invoked.<\/div>\n<\/li>\n<\/ul>\n<\/li><\/ul>\n<div class=\"longdesc\" id=\"entry-longdesc\">\n\t\t\t<p><code>$.widget.bridge()<\/code> does a few things:<\/p>\n\t\t\t<ul>\n\t\t\t\t<li>Connects a regular JavaScript constructor to the jQuery API.<\/li>\n\t\t\t\t<li>Automatically creates instances of said object and stores it within the element&apos;s <code>$.data<\/code> cache.<\/li>\n\t\t\t\t<li>Allows calls to public methods.<\/li>\n\t\t\t\t<li>Prevents calls to private methods.<\/li>\n\t\t\t\t<li>Prevents method calls on uninitialized objects.<\/li>\n\t\t\t\t<li>Protects against multiple initializations.<\/li>\n\t\t\t<\/ul>\n\t\t\t<p>jQuery UI widgets are created using <code>$.widget( &quot;foo.bar&quot;, {} );<\/code> syntax to define an object from which instances will be created.  Given a DOM structure with five <code>.foo<\/code>&apos;s, <code>$( &quot;.foo&quot; ).bar();<\/code> will create five instances of your &quot;bar&quot; object. <code>$.widget.bridge()<\/code> works inside the factory by taking your base &quot;bar&quot; object and giving it a public API. Therefore, you can create instances by writing <code>$( &quot;.foo&quot; ).bar()<\/code>, and call methods by writing <code>$( &quot;.foo&quot; ).bar( &quot;baz&quot; )<\/code>.<\/p>\n\t\t\t<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>\n\t\t\t<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n6\">6<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n7\">7<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n8\">8<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n9\">9<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n10\">10<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n11\">11<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n12\">12<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n13\">13<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-keyword\">var<\/span> Highlighter = <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"> options, element <\/span>) <\/span>{<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-built_in\">this<\/span>.options = options;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-built_in\">this<\/span>.element = $( element );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-built_in\">this<\/span>._set( <span class=\"hljs-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>  <span class=\"hljs-attr\">toggle<\/span>: <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-built_in\">this<\/span>._set( <span class=\"hljs-built_in\">this<\/span>.element.css( <span class=\"hljs-string\">&quot;font-weight&quot;<\/span>) === <span class=\"hljs-number\">400<\/span> ? <span class=\"hljs-number\">800<\/span> : <span class=\"hljs-number\">400<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  },<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-attr\">_set<\/span>: <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\">value<\/span>) <\/span>{<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-built_in\">this<\/span>.element.css( <span class=\"hljs-string\">&quot;font-weight&quot;<\/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>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n\t\t\t<p>All you need here is a function that acts as the constructor, accepting two arguments:<\/p>\n\t\t\t<ul>\n\t\t\t\t<li>\n<code>options<\/code>: an object of configuration options<\/li>\n\t\t\t\t<li>\n<code>element<\/code>: the DOM element this instance was created on<\/li>\n\t\t\t<\/ul>\n\t\t\t<p>You can then hook this object up as a jQuery plugin using the bridge and use it on any jQuery object:<\/p>\n\t\t\t<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n6\">6<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n7\">7<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n8\">8<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ Hook up the plugin<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>$.widget.bridge( <span class=\"hljs-string\">&quot;colorToggle&quot;<\/span>, Highlighter );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ Initialize it on divs<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">&quot;div&quot;<\/span> ).colorToggle().click(<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-comment\">\/\/ Call the public method on click<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  $( <span class=\"hljs-built_in\">this<\/span> ).colorToggle( <span class=\"hljs-string\">&quot;toggle&quot;<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>});<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n\t\t\t<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=\"\/1.12\/jQuery.widget\/#jQuery-Widget2\"><code>$.Widget<\/code><\/a>.<\/p>\n\t\t\t<p>There is one optional property the bridge will use, if present: If your object&apos;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>\n\t\t<\/div>\n<\/div><\/article>","protected":false},"excerpt":{"rendered":"<p>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.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,3],"tags":[],"class_list":["post-86","post","type-post","status-publish","format-standard","hentry","category-utilities","category-widgets"],"_links":{"self":[{"href":"https:\/\/api.jqueryui.com\/1.12\/wp-json\/wp\/v2\/posts\/86","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/api.jqueryui.com\/1.12\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/api.jqueryui.com\/1.12\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/api.jqueryui.com\/1.12\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/api.jqueryui.com\/1.12\/wp-json\/wp\/v2\/comments?post=86"}],"version-history":[{"count":1,"href":"https:\/\/api.jqueryui.com\/1.12\/wp-json\/wp\/v2\/posts\/86\/revisions"}],"predecessor-version":[{"id":87,"href":"https:\/\/api.jqueryui.com\/1.12\/wp-json\/wp\/v2\/posts\/86\/revisions\/87"}],"wp:attachment":[{"href":"https:\/\/api.jqueryui.com\/1.12\/wp-json\/wp\/v2\/media?parent=86"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/api.jqueryui.com\/1.12\/wp-json\/wp\/v2\/categories?post=86"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/api.jqueryui.com\/1.12\/wp-json\/wp\/v2\/tags?post=86"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}