Knockout plugin: visibility bindings with JQueryUI effects. by Roberto

KoUIvisibilityBindings – of KoUiVb for short – is a little Knockout plugin I wrote to provide you with some visibility bindings that take advantadge of JQuery UI effects.

You have just to put the link to the script after your JQuery, JQueryUI and Knockout references and you’re ready to go.

<script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.js" type="text/javascript" ></script>
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js" type="text/javascript" ></script>
<script type="text/javascript" src="http://www.codecoding.com/wp-content/uploads/2013/08/KoUiVb.js"></script>

How to use it

Once you have accomplished the previous step you will be rewarded with 14 different effects that you can see working below on this post.

The use is very straightforward as all these bindings work exactly as the Knockout visibility binding with a few extra bindings that will customize the behaviour of your effects.

A common way to use, for instance, the highlightVisible binding would be this:

<span style="display: none;" data-bind="highlightVisible :highlight(),vbOptions:{color:'#f00'}, vbDuration:1000, effectOnClose:true">Lorem ipsum dolor sit amet</span>

I’m going now to dissect this little piece of code to make it clearer:

• The display style is set to none because we want this span to begin hidden but you may not need it if you obviously want it to start visible.
• highlightVisible: This is the visibility binding and you will need to pass a boolean value to it; directly or using observables or functions.
• vbOptions: This is an optional extrabinding and here you will be able to provide all the specific effect’s options. Please see JQuery’s documentation for further reference on this topic as each of the effects has different options. In this case we’re using the highlihgt options that you can see here.
  Note! Mode option will be overwritten by the plugin itself as it is used to make the element visible/invisible so no use at all in the vbOptions property.
• vbDuration: This is an optional extrabinding and here you will have to provide the duration of the effect. 400ms by default.
• effectOnClose: This is also an optional binding and it’s used to execute the effect both on showing and hiding. False by default.

How to create your own JQueryUI bindings

One of the cool things that you can also do is mix all these JQueryUI effects in order to create your own sequences and pack them into a custom binding or just change the behaviour of some of the effects.

I’m going to show you how to build a highlight + pulsate sequence and use it. You can see a living example here.

By using this plugin, ko is extended with some new properties. Under the uiVb namespace you will find two functions:

• applyEffect:Executes the specified effect. It takes the same parameter list as create/update methods from knockout custom bindings (element, valueAccessor, allBindingsAccessor, viewModel) plus two extra parameters: effect and callback. In custom bindings, effect parameter must be set to null and callback must be set to your custom effect sequence (a function).
  Here you can see how to create your custom highlightPulsateVisible binding. All custom bindings will have this structure so it’s very easy to create sequences as the only parameter that you will have to provide for your custom bindings is the callback parameter, the rest of them will come from knockout update functions.

  ko.bindingHandlers.highlightPulsateVisible = {
  	update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
  		ko.uiVb.applyEffect(element, valueAccessor, allBindingsAccessor, viewModel, null, yourCustom.highlightPulsate);
  	}
  };
  

• JQuerUiEffect: This function is responsible for managing all effects. In fact, all the functions passed to applyEffect’s callback parameter must have JQueryUiEffect signature. The parameters it takes are: ($element, effect, duration, options, isHide).
  You can see below how to create your custom highlightPulsate callback function.
  Note! Pay atention to the use of a specific options’ property called addQueue. This is not a JQueryUI effect’s property on itself but a flag for the plugin to know that we’re dealing with a sequence and so subsequent effects will start when the previous one has just finished.

  var yourCustom={
  	highlightPulsate: function ($element, effect, duration, options, isHide) {
  		options = {color:'#ff0000'};
  		duration = 300;
  		ko.uiVb.JQuerUiEffect($element, 'highlight', duration, options, isHide);
  		options = { times: 2, addQueue:true };
  		duration = 300;
  		ko.uiVb.JQuerUiEffect($element, 'pulsate', duration, options, isHide);
  	} //end highlightShake
  };
  

I’ll let you see the whole code here for you to have some global perspective. Now you will be able to use it on your html just like the built-in bindings that came with the plugin. Remember that you have the option to pass vbOptions, vbDuration and effectOnClose as we exposed before. You can check the example page on Github too if you want.

$(function(){
	
	//CUSTOM bindings
	ko.bindingHandlers.highlightPulsateVisible = {
		update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
			ko.uiVb.applyEffect(element, valueAccessor, allBindingsAccessor, viewModel, null, yourCustom.highlightPulsate);
		}
	};
	
	var yourCustom={
		highlightPulsate: function ($element, effect, duration, options, isHide) {
			options = {color:'#ff0000'};
			duration = 300;
			ko.uiVb.JQuerUiEffect($element, 'highlight', duration, options, isHide);
			options = { times: 2, addQueue:true };
			duration = 300;
			ko.uiVb.JQuerUiEffect($element, 'pulsate', duration, options, isHide);
		} //end highlightShake
	};
});

Finally, here you will find some examples of the built-in visibility bindings and two custom bindings.
 

Examples

Execute the effect on hiding too

Custom bindings

Github repository containing full scripts