"Html behavior" inside a MVC application (using html5 data- attribute, jQuery and javascript regexp)

Html behavior is a library through we can create (with javascript) something like the xaml behavior.

We define through unobtrusive html the event that trigger the behavior, target and params. The behavior is defined in a javascript file. There is then a jquery plugin that scan all html tags and configure the behaviors. Basically it uses a naming convention and the prameters format is this:

data-behaviorattach
data-behaviorevent-(behaviorname)="click"
data-behaviortarget-(behaviorname)="target1"
data-behavior-(behaviorname)-(paramname)="value"

We have also two special event "onready" and "onstart" that are triggered on the "$(document).ready". By this event we can register some plugin as "datepicker or masknumber". Other events are triggered by the specified action "click ...".

There are also two html helper. The first is a static html helper. The second is a a dynamic html helper. The dynamic html helper is generated by a T4 template: JavascriptBehavior.tt. You must insert in the javascript file a label "// #bhaviors" that marks the beginning of the method. We have three type of behavior.


1) Default behavior: defined into file defaultbhehavior.js.

$(document).ready(function () {
$("body").htmlBehavior();
});

<p id="pane1" data-behaviorattach
data-behaviorevent-show="click" data-behaviortarget-show="target1"
data-behaviorevent-behavior1="mouseenter" data-behaviortarget-behavior1="."
data-behaviorevent-behavior2="mouseleave" data-behaviortarget-behavior2=".">
<span>Show panel 1</span>
</p>


2) Extended behavior: behavior that extend the default behavior.

var extension1 = {
fadein: function (elem, target, param) {
$(target).fadeIn();
},

fadeout: function (elem, target, param) {
$(target).fadeOut();
},

over: function (elem, target, param) {
$(elem).css("color", param.param1);
},

leave: function (elem, target, param) {
$(elem).css("color", param.param1);
}
};

$(document).ready(function () {
$("body").htmlBehavior(extension1);
});

<p id="pane1" data-behaviorattach
data-behaviorevent-fadein="click"
data-behaviortarget-fadein="#target1"

data-behaviorevent-over="mouseenter"
data-behaviortarget-over="."
data-behavior-over-param1="aqua"

data-behaviorevent-leave="mouseleave"
data-behaviortarget-leave="."
data-behavior-leave-param1="black">
<span>Fade-in</span>
</p>
<p id="pane2" data-behaviorattach
data-behaviorevent-fadeout="click"
data-behaviortarget-fadeout="#target1"

data-behaviorevent-over="mouseenter"
data-behaviortarget-over="."
data-behavior-over-param1="aqua"

data-behaviorevent-leave="mouseleave"
data-behaviortarget-leave="."
data-behavior-leave-param1="black">
<span>Fade-out</span>
</p>


3) Library behavior: behavior with a namespace.

var lib1 = {
slidedown: function (elem, target, param) {
$(target).slideDown();
},

over: function (elem, target, param) {
$(elem).css("color", param.param1);
},

leave: function (elem, target, param) {
$(elem).css("color", param.param1);
}
};

var lib2 = {
slideup: function (elem, target, param) {
$(target).slideUp();
},

over: function (elem, target, param) {
$(elem).css("color", param.param1);
},

leave: function (elem, target, param) {
$(elem).css("color", param.param1);
}
};

var library = new Array()
library0 = { name: "lib1", value: lib1 };
library1 = { name: "lib2", value: lib2 };

$(document).ready(function () {
$("body").htmlBehavior(library);
});

<p id="pane1" data-behaviorattach
data-behaviorevent-lib1.slidedown="click"
data-behaviortarget-lib1.slidedown="#target1"

data-behaviorevent-lib1.over="mouseenter"
data-behaviortarget-lib1.over="."
data-behavior-lib1.over-param1="aqua"

data-behaviorevent-lib1.leave="mouseleave"
data-behaviortarget-lib1.leave="."
data-behavior-lib1.leave-param1="black">
<span>Slide-down</span>
</p>

<p id="pane2" data-behaviorattach
data-behaviorevent-lib2.slideup="click"
data-behaviortarget-lib2.slideup="#target1"

data-behaviorevent-lib2.over="mouseenter"
data-behaviortarget-lib2.over="."
data-behavior-lib2.over-param1="aqua"

data-behaviorevent-lib2.leave="mouseleave"
data-behaviortarget-lib2.leave="."
data-behavior-lib2.leave-param1="black">
<span>Slide-up</span>
</p>

Note that in the third type of behavior the library name is part of the behavior name:
data-behaviorevent-lib2.leave="mouseleave"

My YouTube channel
Blog


Last edited Jul 31, 2014 at 7:20 AM by mastefano64, version 21