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 HTML5 tag can be used to embed an external application (SWF, PDF) in web page?
<mark> <embed> <canvas>
<embed src="flash_game.swf" width="450" height="350" />
Which CSS pseudo-element adds a special style to the first line of a text?
:first-letter :before :first-line
#id:first-line {
  font-weight: bold;
  color: blue;
}
Click on the window object property which gets or sets the URL of current page.
window.location window.self window.status
var url = window.location;
alert(url);
Indicate the PHP function used to get the contents of a file or page and store it into a string.
fopen() file_put_contents() file_get_contents()
$homepage = file_get_contents("http://coursesweb.net/");
echo $homepage;
Fancy-Fields Custom Forms Look

Last accessed pages

  1. Get Mime Type of file or string content in PHP (1972)
  2. Convert XML to JSON in JavaScript (21855)
  3. Replace JavaScript variable name from string with its value (1870)
  4. Contact page - CoursesWeb (27251)
  5. Tabs effect with CSS (27926)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (1323)
  2. Contact page - CoursesWeb (1294)
  3. Tabs effect with CSS (1291)
  4. PHP getElementById and getElementsByTagName (589)
  5. Get Attribute (ID, Class, Name, Title, Src) with jQuery (489)