back to Overview

.set()

Modifies the list's elements by setting their properties, attributes, CSS styles and/or CSS classes.
Web module only.

Syntax Variants

list.set(name, value)
list.set(properties)
list.set(cssClasses)

Parameters

name
the name of a single property or attribute to modify. Unprefixed names set properties, a '$' prefix sets CSS styles and '@' sets attributes. Please see the table above for special properties and other options.
value
the value to set. If value is null and name specified an attribute, the attribute will be removed. If dollar ('$') has been passed as name, the value can contain space-separated CSS class names. If prefixed with a '+' the class will be added, with a '-' prefix the class will be removed. Without prefix, the class will be toggled. If value is a function, the function(oldValue, index, obj) will be invoked for each list element to evaluate the new value:
oldValue
The old value of the property to be changed, as returned by get(). For the CSS style names, this is the computed style of the property
index
The list index of the object owning the property
obj
The list element owning the property.
(callback return value)
The value to be set.
Functions are not supported by '$'.
properties
a Object as map containing names as keys and the values to set as map values. See above for the name and value syntax.
cssClasses
if set() is invoked with a string as single argument, the name "$" (CSS classes) is assumed and the argument is the value. See above for CSS syntax. Instead of a string, you can also specify a function(oldValue, index, obj) to modify the existing classes.
(return value)
the list

Description

Modifies the list's elements by setting their properties, attributes, CSS styles and/or CSS classes. You can either supply a single name and value to set only one property, or you can provide an object that contains name/value pairs to describe more than one property. More complex operations can be accomplished by supplying functions as values. They will then be called for each element that will be set.

The name parameter defines what kind of data you are setting. The following name schemes are supported:

Name SchemaExampleSets what?Description
nameinnerHTMLPropertyA name without prefix of '$' or '@' sets a property of the object.
@name@hrefAttributeSets the HTML attribute using setAttribute(). In order to stay compatible with Internet Explorer 7 and earlier, you should not set the attributes '@class' and '@style'. Instead use '$' and '$$' as shown below.
%name%phoneData-AttributeSets a data attribute using setAttribute(). Data attributes are attributes whose names start with 'data-'. '%myattr' and '@data-myattr' are equivalent.
$name$fontSizeCSS PropertySets a style using the element's style object. The syntax for the CSS styles is camel-case (e.g. "$backgroundColor", not "$background-color").
$$CSS ClassesA simple $ modifies the element's CSS classes using the object's className property. The value is a space-separated list of class names. If prefixed with '-' the class is removed, a '+' prefix adds the class and a class name without prefix toggles the class. The name '$' can also be omitted if set is called with class names as only argument.
$$$$StyleSets the element's style attribute in a browser-independent way.
$$show$$showShow/HideIf true or a number not 0, it will make sure the element is visible by making sure '$display' is not 'none' and by setting '$visibility' to 'visible'. Please see show() for details. If the value is false or 0, it will be hidden by setting '$display' to 'none'.
$$fade$$fadeFade EffectThe name '$$fade' sets the opacity of the element in a browser-independent way. The value must be a number between 0 and 1. '$$fade' will also automatically control the element's 'visibility' style. If the value is 0, the element's visibility will automatically be set to 'hidden'. If the value is larger, the visibility will be set to 'visible'. '$$fade' only works with block elements.
$$slide$$slideSlide EffectThe name '$$slide' allows a vertical slide-out or slide-in effect. The value must be a number between 0 and 1 and will be used to set the element's '$height'. '$$slide' will also automatically control the element's 'visibility' style. If the value is 0, the element's visibility will automatically be set to 'hidden'. If the value is larger, the visibility will be set to 'visible'. '$$slide' only works with block elements and will not set the element's margin or padding. If you need a margin or padding, you should wrap the elements in a simple <div>.
$$scrollX, $$scrollY$$scrollYScroll CoordinatesThe names '$$scrollX' and '$$scrollY' can be used on $(window) to set the scroll coordinates of the document. The coordinates are specified in pixels, but must not use a 'px' unit postfix.

Example

Unchecking checkboxes: 

$('input.checkbox').set('checked', false);

Example

Changing the innerHTML property of an element: 

$('#toc').set('innerHTML', 'Content');

Example

Changing attributes: 

$('a.someLinks').set('@href', 'http://www.example.com/');

Example

Removing attributes: 

$('a.someLinks').set('@title', null);

Example

Changing styles: 

$('.bigText').set('$fontSize', 'x-large');

Example

Adding and removing CSS classes: 

$('.myElem').set('$', '+myClass -otherClass');

Example

Toggling a CSS class: 

$('.myElem').set('$', 'on');

Example

Shortcut for CSS manipulation: 

$('.myElem').set('+myClass -otherClass on');

Example

Making an element transparent: 

$('.seeThrough').set('$$fade', 0.5);

Example

Making an element visible. Note that $$fade will set the element's display style to 'block' and visibility style to 'visible'. 

$('.myElem').set('$$fade', 1);

Example

Using a map to change several properties: 

$('input.checkbox').set({checked: false,
                         '@title': 'Check this'});

Example

Changing CSS with a map: 

$('.importantText').set({$fontSize: 'x-large',
                         $color: 'black',
                         $backgroundColor: 'red',
                         $: '+selected -default'});

Example

You can specify a function as value to modify a value instead of just setting it: 

$('h2').set('innerHTML', function(oldValue, index) {
    return 'Chapter ' + index + ': ' + oldValue.toUpperCase();
});

See also..

  • get() retrieves values using the same property syntax.
  • animate() animates values using the same property syntax.
  • toggle() can toggle between two sets of values.
  • dial() allows smooth transitions between two sets of values.

Comments

comments powered by Disqus

back to Overview

Functions