the Step 240. Library jQuery. The use of expansion modules. Extension library jQuery UI. Form. Jeditable widget (still continued)

In this step we will review the work list and styling elements.

The material of this step is based on

You can use the drop-down list by setting the parameter type in the value select. The list is built from an array of encoded JSON. This array may be derived from parameter data or received from an external source specified in loadurl. The value of the array keys are the values of the tags . The value of the array elements are list items.

The encoded array format JSON looks like this:

 {'Classic Rock':'Classic Rock', 'Rock Hard':'Hard Rock', 'Blues Rock':'Blues Rock', 'selected': 'Hard Rock'} 

Note the last item. He special — indicates Jeditablewhich option is specified by default as selected. Let us consider two simple examples. In the first example, we consider the transmission of data via the parameter data.

 $(".editable_select").editable("../cgi-bin/echo.php", { indicator : ", data : "{'Classic Rock':'Classic Rock','Rock Hard':'Hard Rock', 'Blues Rock':'Blues Rock', 'selected': 'Hard Rock'}", type : "select", submit : "OK" }); 

Fig.1. The result of the script

The full text of this example can be found here.

What if You need to get a dynamic list? Then you can get it with an external url. Suppose we have this script in PHP:


Then instead of the data parameter we use loadurl:

 $(".editable_select").editable("../cgi-bin/echo.php", { indicator : ", loadurl : "", type : "select", submit : "OK", style : "inherit" }); 

But some are concerned about extra queries to the server. There is another option: to combine the two methods. Let’s get the array directly in the code JavaScript:

  $('.editable').editable('../cgi-bin/echo.php', { data : '', type : 'select', submit : 'OK' }); 

You can stylize input element using parameters cssclass and style. Setting cssclass implies the existence of a class in CSS. The parameter style can contain any valid style definition. Here are some examples:

 $('.editable').editable('', { cssclass : 'someclass' }); $('.editable').editable('', { loadurl : '', type : 'select', submit : 'OK', style : 'display: inline' }); 

Both parameters can have the special value inherit. Installed in the option cssclass, it specifies the form class to inherit from the parent element. Set the parameter style, it tells the form to inherit the same name attribute (style) of the parent element.

The following example will make the word ipsum drop-down list. This list will inherit the style from the element . It will be display: inline.

 Lorem ipsum dolor sit amet. $('.editable').editable('', { loadurl : '', type : 'select', submit : 'OK', style : 'inherit' }); 

In the next step we will complete the study of this question.

The previous step the Content of the Next step