JQF1 - Jquery FormOne - Jquery Form Styling plugin

  • (Ignored element || Elemento ignorado)

Input type=text examples

<ul class="ul">
<li><label for="inptext1">Input text 1:</label></li>
<li><input type="text" id="inptext1" size="12" name="inptext1" maxlength="10" /></li>
</ul>
<script type="text/javascript">
$(document).ready(function(){
  $('.ul').jqf1();
});
</script>
<ul class="ul">
<li><label for="inptext2">Input text 2:</label></li>
<li><input type="text" id="inptext2" size="2" name="inptext2" maxlength="100" style="width:300px" /></li>
</ul>
<script type="text/javascript">
$(document).ready(function(){
  $('.ul').jqf1();
});
</script>

Input type=file example

  • OBS: Input file enhancements coming soon || Melhoras no input file em breve
<ul class="ul">
<li><label for="inpfile">Input file:</label></li>
<li><input type="file" id="inpfile"  name="inpfile" style="width:300px;" /></li>
</ul>
<script type="text/javascript">
$(document).ready(function(){
  $('.ul').jqf1();
});
</script>

Input type=radio and type=checkbox examples

<div id="divRadioExample">
<ul class="ul">
<li><label for="inpradio1">Input radio 1:</label></li>
<li><input type="radio" id="inpradio1"  name="inpradio" value="rad01" /></li>
</ul>
<ul class="ul">
<li><label for="inpradio2">Input radio 2:</label></li>
<li><input type="radio" id="inpradio2"  name="inpradio" value="rad02" /></li>
</ul>
<ul class="ul">
<li><label for="inpcheck1">Input check 1:</label></li>
<li><input type="radio" id="inpcheck1"  name="inpcheck" value="check01" /></li>
</ul>
<ul class="ul">
<li><label for="inpcheck2">Input check 2:</label></li>
<li><input type="checkbox" id="inpcheck2"  name="inpcheck" value="check02" /></li>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function(){
  $('#divRadioExample').jqf1();
});
</script>

Select commands

  • Attribute: search="ok": Select with filter inside || Select com filtro dentro
  • Attribute: openheight="?": Opened options list height || Altura da lista de options aberta
  • Attribute: size="1": Special select multiple || Select multiple especial

Select examples

<ul class="ul">
<li><label for="selSearch">SelectSearch:</label></li>
<li>
<select name="selSearch" id="selSearch" search="ok" style="width:200px;" openheight="150">
...A lot of options :P...
<select>
</li>
</ul>
<script type="text/javascript">
$(document).ready(function(){
  $('.ul').jqf1();
});
</script>
<ul class="ul">
<li><label for="selectx">>Multiple with optgroup:</label></li>
<li>
<select name="selectx" id="selectx" multiple="multiple" style="width:200px;">
<optgroup label="Optgroup1">
<option value="01">Option 1</option>
<option value="02">Option 2</option>
</optgroup>
<optgroup label="Optgroup2">
<option value="03">Option 3</option>
<option value="04">Option 4</option>
</optgroup>
</select>
</li>
</ul>
<script type="text/javascript">
$(document).ready(function(){
  $('.ul').jqf1();
});
</script>
<ul class="ul">
<li><label for="select3">Multiple size=1:</label></li>
<li>
<select name="select3" id="select3" multiple="multiple" size="1" style="width:150px;" openheight="100">
<option value="01" selected>Option 1</option>
<option value="02">Option 2</option>
<option value="03">Option 3</option>
</select>
</li>
</ul>
<script type="text/javascript">
$(document).ready(function(){
  $('.ul').jqf1();
});
</script>

Textarea example

<ul class="ul">
<li><label for="textarea">Textarea:</label></li>
<li><textarea id="textarea" rows="10" cols="40" name="textarea"></textare></li>
</ul>
<script type="text/javascript">
$(document).ready(function(){
  $('.ul').jqf1();
});
</script>
<ul class="ul">
<li><label for="submit">Input submit:</label></li>
<li><input type="submit" id="submit" value="Input Submit" /></li>
</ul>
<ul class="ul">
<li><label for="button">Button:</label></li>
<li><button type="button" id="button" style="width:200px;">Button</button></li>
</ul>
<script type="text/javascript">
$(document).ready(function(){
  $('.ul').jqf1();
});
</script>

JQF1 NOT WORKS IN HIDDEN ELEMENTS (display:none/visibility:hidden)
Turns element visible to use the .jqf1() function.

NÃO FUNCIONA EM ELEMENTOS ESCONDIDOS (display:none/visibility:hidden)
Torne o elemento visível para poder usar a função .jqf1()

IE6: "openheight" attribute for select elements needed.
É necessário usar o atributo "openheight"

Unobtrusive integration || Integração não-obstrutiva

  • Use jqf1=ok attribute to ignore a element || Use o atributo jqf1=ok p/ ignorar um elemento
<textarea name="wysiwyg" id="wysiwyg" jqf1="ok" rows="5" cols="62"></textarea>

Manipulation: Add/Del/Update element || Adicionar/Apagar/Atualizar elemento

<script type="text/javascript">
$('#example1').bind("click", function(){
  $(this).html('<input type=text id=inpex1 size=5 name=inpex1 />');
  $('#inpex1').jqf1();
  $('#example1').unbind('click');
});
</script>
<script type="text/javascript">
$('#example2').bind("click", function(){
$('#inpex2').attr('checked',true);
$('#inpex2').jqf1();
$('#example2').remove();
});
</script>
<script type="text/javascript">
$('#example3').bind("click", function(){
$('#selEx3').html('<option>1</option> <option>2</option>');
$('#selEx3').jqf1();
$('#example3').remove();
});
</script>
<script type="text/javascript">
$('#example4').bind("click", function(){
$('#example4').html('
  <select name="selex4" id="selex4" style="width:100px;">
  <option value="01">1</option>
  <option value="02">2</option>
  <option value="03" selected>3 checked</option>
  </select>
');
$('#example4').unbind('click');
$('#selex4').jqf1();
});
</script>

JQF1 is the most complete form styling JQuery plugin, read some features below:

  1. Crossbrowser: Tested in IE 6,7,8, Firefox(win/mac), Safari(win/mac), Opera, Chrome, SeaMonkey, Flock (Please report the bugs to azurem@gmail.com with browser, version, O.S. information and a printscreen/screenshot).
  2. Keeps working events and some attributes:: label for, onclicks, onchanges, etc...
  3. The style be created using the original form element sizes, keeps the same layout with or without javascript.
  4. Uses the original elements all the time. It's easy to working with AJAX.
  5. Exclusive feature: search filter inside of select options list.
  6. Exclusive feature: Select multiple with attribute size=1 works like a normal select, but uses a checkbox elements inside to apply the multiple options :)

08/09/2010 - CRITICAL BUG SOLVED: Updating select / Adding select with DOM - 1.0.3

21/08/2010 - Bugs solved: Selects hidding like as original, type=reset ok (Sorry, I forgot :P Thanks Nickson!) - 1.0.2

07/06/2010 - Bugs solved: Select active option status ok (font-size and standard width) - 1.0.111

06/06/2010 - CRITICAL BUG SOLVED: option selection bug (bug from 1.0.101 version) =) - 1.0.110

05/06/2010 - Bugs solved: Select (width optgroup) search and manipulation bugs! =) - 1.0.101

05/06/2010 - Optgroup now works! =) - 1.0.1

07/03/2010 - All buttons widths bugs and IE7 textarea bug solved! :) - 1.0.082

06/01/2010 - CRTICAL BUG SOLVED: input password now transforms (LOL :P) - 1.0.081

17/12/2009 - Usability enhancement: Radios/Checks (All browsers) works as usual and select(IE/Firefox) opens ONFOCUS (tab navigation) - 1.0.07

17/12/2009 - Hidden elements are disabled to transform onload - 1.0.06

14/12/2009 - CRTICAL BUG SOLVED: Buttons overlap - 1.0.05

14/12/2009 - Bug solved: SAFARI select area calculator - 1.0.04

13/12/2009 - Bug solved: CSS bugs,select area calculator for portuguese version, button area calculator - 1.0.03

28/11/2009 - Bug solved: select search filter style bug - 1.0.02

27/11/2009 - Bug solved: checkbox/radio JS manipulation - 1.0.01

Click to see the How To / Clique para ver como usar

Download JQF1 1.0.1