JQF1 - Jquery FormOne - Jquery Form Styling plugin

Input type=text examples

• Input text 1:

<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>

• Input text 2:

<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

• Input file:

<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

• Select Search:
• Primeiro Joao 1 Pedro 2 Thiago Silva 3 Thiago Azurem 4 Renata 5 Jose 6 Fernanda 7 Isabel 8 Galvao 9 Toronto 10 Ademar 11 Olimpio 12 Tiel 13 Raimundo 14 David 15 Joaldo 16 Alberto 17 Caua 18 Giulia 19 Julia 20 Thiego 21 Reginaldo 22 Gildo 23 Antonio 24 Jackson 25 Humberto 26

<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>

• Multiple with optgroup:
• Option 1 Option 2 Option 3 Option 4

<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>

• Multiple size=1:
• Option 1 Option 2 Option 3

<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

• Textarea:

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"

<textarea name="wysiwyg" id="wysiwyg" jqf1="ok" rows="5" cols="62"></textarea>

<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>