jComponent / Helpers / jQuery extensions
Updated: 10. September 2018
Author: Peter Širka

jQuery extensions

Professional Support Chat with contributors

jComponent extends jQuery by adding these new features:


$(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).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).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])

+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());