Jquery Course

Examples Fancy-Fields

Fancy Fields is a jQuery plugin to create Forms with a Custom Look. It is useful for web designers, it can create Checkbox and Radio buttons, Select drop-down lists, text and textarea fields with a nice design that you can style it in CSS.

• To DOWNLOAD this script, click: (470 KB) - version: 1.2.


1. First, to use this plugin, copy the "jqfields" folder with all its files on your server. The script comes with jQuery 1.10.2 ("jquery.js" in "jqfields/" directory).
2. Include these files in the <head> zone of your web page: Fancy-Fields css styles, jQuery library, the Fancy-Fields jQuery plugin.
<script src="jqfields/jquery.js"></script>

<!-- jquery-ui is necessary only if you want to use custom scroll-bar for select drop-down lists -->
<script src="jqfields/jquery-ui.js" type="text/javascript"></script>

<link href="jqfields/fancyfields.css" rel="stylesheet" type="text/css" />
<script src="jqfields/fancyfields-1.2.min.js" type="text/javascript"></script>

"fancyfields.css" is the basic theme. There are also other predefined themes in the "jqfields" folder: "fancyfields2.css", "fancyfields_blue.css", "fancyfields_green.css" ... If you want one of these themes, just replace the "fancyfields.css" whit the name of that file.

3. Then, add the following code to the document ready.
- Every form element in a div with ID "myForm" will be transformed to a styled form element.
If you want to apply Fancy-Fields only to a specified form element, for example to a <select> element, add an ID to that <select> tag and write this code:
You can also create dinamycally select drop-down lists, by using this formula:
// defines an  array of arrays with 2 ["text","value"] values or 1 ["text and value"] value
var listOptions = [["select","0"],["option1", "val1"],["option2", "val2"], ["optionval3"]];

// or change the options of a Select list
• Fancy-Fields has a set of options to work with the custom form fields, to enable /disable form elements, custom scroll bar for select box, get the selected /checked value, and other useful options and events. Details and code examples are in the "Readme.html" file, in the archive with this script.

Examples Fancy-Fields




Select with icons:

Select with custom scroll bar:

Text fields:

• The Fancy fields home page is at: http://www.jqfancyfields.com/

Daily Test with Code Example

What attribute makes the input text box to not be modified by the user?
checked="checked" readonly="readonly" disabled="disabled"
<input type="text" value="fixed-value" readonly="readonly" name="a_name" />
What CSS property allows you to create rounded corners in your webpage design?
background-size border-size border-radius
.class {
  border:2px solid blue;
What instruction displays a confirmation dialog box to the viewer, who must then click OK or Cancel to proceed?
indexOf() confirm() prompt()
var ques = window.confirm("The result of 0+0 is 0?");
if (ques) alert("Corect");
else alert("Incorrect");
Indicate the PHP function that returns the lowest number of the parameter values.
floor() ceil() min()
$min_nr = min(12, 8, 25, 13);
echo $min_nr;        // 8
Fancy-Fields Custom Forms Look

Last accessed pages

  1. Date and Time in ActionScript 3 (9439)
  2. Splat Operator in PHP (3059)
  3. Moving html element to a random direction (3558)
  4. Convert BBCODE and smiles to HTML (1442)
  5. Add, Change, and Remove Attributes with jQuery (45242)

Popular pages this month

  1. PHP Unzipper - Extract Zip, Rar Archives (98)
  2. Read Excel file data in PHP - PhpExcelReader (81)
  3. SHA256 Encrypt hash in JavaScript (67)
  4. querySelector and querySelectorAll (50)
  5. SHA1 Encrypt data in JavaScript (49)