Creating jQuery plug-ins from MicrosoftAjax components
We had an interesting discussion recently on the
ASP Insiders mailing
list and ended up talking about what cool stuff we could
build on top of jQuery. Many interesting things were
mentioned and it was a very useful discussion but one
suggestion in particular struck my curiosity as it was
something I had investigated before and that could be
improved on with very little code.
I had already written a little plugin to enable instantiation of Microsoft Ajax components on the results of a jQuery selector:
jQuery.fn.create = function(type, properties) { return this.each(function() { Sys.Component.create(type, properties, {}, {}, this); }); };
I have another version that is a little more elaborate and takes a bag of properties and events instead of just properties (get it from the attached sample) but you get the idea. This makes it fairly easy to instantiate components based on a selector:
$(":text.nomorethanfive")
.create(Bleroy.Sample.CharCount, { maxLength: 5 });
But if this were a native jQuery plugin instead of a Microsoft Ajax component, as Rick Strahl suggested, chances are you’d do something like this instead:
$(":text.nomorethanfive").charCount({ maxLength: 5 });
We can actually get that exact result fairly easily by writing a plugin that is specific to this component, but we can’t expect every Microsoft Ajax component author to also write a jQuery plugin, can we? We can do better than that. Here is a second small piece of code that is still generic but is in the business of creating jQuery plugins:
Sys.Component.exposeTojQuery = function(type, pluginName) { return jQuery.fn[pluginName] = function(properties) { return this.each(function() { Sys.Component.create(type, properties, {}, {}, this); }); } }
Like above, the version in the sample is better than that in that it supports events in addition to properties but again you get the idea. Thanks to this function, we can create a jQuery plugin for any existing Microsoft Ajax component with a single line of code:
Sys.Component.exposeTojQuery(Bleroy.Sample.CharCount, "charCount");
After this call, we can write exactly the code we wrote before, but without having had to write a specific plugin. We can then use charCount like a native jQuery plugin:
$(":text.nomorethanfive").charCount({ maxLength: 5 });
This is really easy to use, and I quite like it. We could for example add the following line of code to the new MicrosoftAjaxTemplates.js:
if (jQuery)
Sys.Component.exposeTojQuery(Sys.UI.DataView, "dataView");
This would enable us to instantiate DataView controls as simply as this:
<ul class="dv"> <li>{{ $dataItem }}</li> </ul> <script type="text/javascript"> $(".dv").dataView({ data: ["foo", "bar", "baz"] }); </script>
Get the code from here (you need to include
jquery-1.3.2.js
to the script folder):
https://aspblogs.z22.web.core.windows.net/bleroy/Samples/jQueryCreate.zip