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.

Installation

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.
$('#myForm').fancyfields();
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:
$('#id_select').fancyfields();
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"]];
$("#id_container").setOptions(listOptions);

// or change the options of a Select list
$("#id_select").setOptions(listOptions);
• 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

Checkbox:




Radio:


Select:

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

HTML
CSS
JavaScript
PHP-MySQL
Which tag is used in <table> to create table header cell?
<thead> <th> <td>
<table><tr>
  <th>Title 1</th>
  <th>Title 2</th>
</tr></table>
Which CSS property sets the distance between lines?
line-height word-spacing margin
.some_class {
  line-height: 150%;
}
Which function opens a new browser window.
alert() confirm() open()
document.getElementById("id_button").onclick = function(){
  window.open("http://coursesweb.net/");
}
Indicate the PHP function that returns an array with names of the files and folders inside a directory.
mkdir() scandir() readdir()
$ar_dir = scandir("dir_name");
var_export($ar_dir);
Fancy-Fields Custom Forms Look

Last accessed pages

  1. Insert, Select and Update NULL value in MySQL (59216)
  2. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (143287)
  3. Image in PHP with background in two colors (1238)
  4. AJAX Course, free Lessons (19946)
  5. Working with XML Namespaces in ActionScript (2997)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (520)
  2. CSS cursor property - Custom Cursors (69)
  3. The Mastery of Love (50)
  4. PHP-MySQL free course, online tutorials PHP MySQL code (48)
  5. Read Excel file data in PHP - PhpExcelReader (46)