jQuery extensions

jComponent extends jQuery by adding these new features:

• $(selector).aclass(value)
• $(selector).asvg(value)
• $(selector).attrd(key, [value])
• $(selector).binder()
• $(selector).CMD()
• $(selector).component()
• $(selector).components(fn)
• $(selector).FIND()
• $(selector).hclass(value)
• $(selector).noscrollbar([force])
• $(selector).psvg(value)
• $(selector).rattr(name)
• $(selector).rattrd(name)
• $(selector).rescroll([offset])
• $(selector).rclass(value)
• $(selector).rclass2(search)
• $(selector).tclass(value)
• $(selector).RECONFIGURE()
• $(selector).SETTER()
• $(selector).scope()
• $(selector).vbind()
• $(selector).vbindarray()

---

$(selector).aclass(value)

Method adds class from the element/elements.

$(selector).aclass(value);
// @value {String} class name
// return {jQuery}

$('.button').aclass('selected');

$(selector).asvg(value)

Method appends SVG element.

$(selector).asvg(value);
// @value {String} raw HTML or tag name
// return {jQuery}

// With raw HTML:
$('.svg').asvg('<line ... ><rect ... >');

// With tag name:
var rect = $('.svg').asvg('rect');
rect.attr('x', 100);

$(selector).attrd(key, [value])

Method gets/sets data- attribute from the element/elements

$(selector).attrd(key, [value]);
// @key {String} attribute name without "data-"
// @value {String} optional, a value for attribute
// return {jQuery}

$('#element').attrd('name', 'Peter');
// <div id="element" data-name="Peter"></div>

console.log($('#element').attrd('name'));
// Output: Peter

$(selector).binder()

+v17 Method returns one current/parent data-bind instance (if exists). It travelses parents element too.

$(selector).binder();
// return {Binder} or null

console.log($('[data-bind]').binder());

Method: $(selector).CMD()

+v17 Executes a command in all components according to the selector. It executes a registered method via component.command().

$(selector).CMD(name, [a], [b], [n..]);
// @name {String} A command name
// @a {Object} Argument A
// @b {Object} Argument B
// @c {Object} Argument N
// return {jQuery}

$(selector).CMD('mycommand');

$(selector).component()

Method returns one component instance (if exists). It travelses parents element too.

$(selector).component();
// return {jComponent} or null

console.log($('[data-jc]').component());

$(selector).components(fn)

Method finds all jComponents on the selector path.

$(selector).component(fn);
// return {jQuery}

$('#components').components(function(component) {
    console.log(component);
});

$(selector).FIND()

Method performs FIND() according to the selector.

// $(selector).FIND(selector, [many], [callback], [timeout]);
$(selector).FIND();

var textbox = $('div').FIND('textbox');

$(selector).hclass(value)

Method performs jQuery.hasClass().

$(selector).hclass(value);
// @value {String} class name
// return {Boolean}

console.log($('.button').hclass('selected'));

$(selector).noscrollbar([force])

+v17 Method hides vertical scrollbars. IMPORTANT: the method extends the width of the element by adding width of scrollbar. Width of this element is obtained from the parent element.

$(selector).noscrollbar([force]);
// @force {Boolean} disables cache (default: false)
// return {jQuery}

console.log($('.button').hclass('selected'));

Good to know:

jComponent watches noscrollbar class and it hides vertical scrollbars automatically. This jQuery extension is for special cases.

$(selector).psvg(value)

Method prepends SVG element to element.

$(selector).psvg(value);
// @value {String} raw HTML or tag name
// return {jQuery}

// With raw HTML:
$('.rect').psvg('<line ... ><rect ... >');

// With tag name:
var rect = $('.group').psvg('rect');
rect.attr('x', 100);

$(selector).rattr(name)

+v12.0.4 Method removes attribute from the element/elements.

$(selector).rattr(name);
// @name {String} Attribute name
// return {jQuery}

$(selector).rattrd(name)

+v12.0.4 Method removes data-attribute from the element/elements.

$(selector).rattrd(name);
// @name {String} Attribute name without data-
// return {jQuery}

$(selector).rescroll([offset])

REMOVED in v18 +v12.0.4 Method re-scrolls a scroll container to element according to the selector. This method uses scrollIntoView(true) method with a custom implementation offset`.

$(selector).rescroll([offset]);
// @offset {Number} Optional, default: 0
// return {jQuery}

$(selector).rclass(value)

Method removes class from the element/elements.

$(selector).rclass(value);
// @value {String} class name
// return {jQuery}

$('.button').rclass('selected');

$(selector).rclass2(value)

Method removes all classes according to the text.

$(selector).rclass2(search);
// @search {String} text to search
// return {jQuery}

$('.button').rclass2('fa-');

$(selector).tclass(value)

Method toggles class for the element/elements.

$(selector).tclass(value);
// @value {String} class name
// return {jQuery}

$('.button').tclass('selected');

$(selector).RECONFIGURE()

Method performs RECONFIGURE() according to the selector for all nested components.

// $(selector).RECONFIGURE(selector, config);
$(selector).RECONFIGURE(selector, config);

$('div').RECONFIGURE('textbox', 'disabled:true');

$(selector).SETTER()

Method performs SETTER() according to the selector for all nested components.

// $(selector).SETTER([wait], selector, propOrMethod, [argA], [argB], [..argN]);
$(selector).SETTER();

$('div').SETTER('*', 'reconfigure', 'required:false');
$('div').SETTER('textbox', 'reconfigure', 'disabled:true');

$(selector).scope()

Method returns one parent scope instance (if exists).

$(selector).scope();
// return {Scope} or null

console.log($('[data-jc-scope]').component());

$(selector).vbind()

Method returns one VBIND instance (if exists).

$(selector).vbind();
// return {VBIND} or null

console.log($('[data-bind]').vbind());

$(selector).vbindarray()

Method returns one VBINDARRAY instance (if exists).

$(selector).vbindarray();
// return {VBINDARRAY} or null

console.log($('[data-bind]').vbind());