Home>

jqtransform, a jquery style plugin written by dfc engineering,Used to beautify form elements,Easy to use,Can beautify all form elements including input, radio, textarea, select, checkbox.

Operation effect diagram:

Instructions:

1.Add references to javascript and css files

<link rel="stylesheet" type="text/css" href="jqtransform.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.jqtransform.js"></script>

2, write html form structure

<form action="#" method="post">
  <p><label>username:</label><input type="text" /></p>
  <p><label>Password:</label><input type="password" /></p>
  <p><label>Gender:</label><input type="radio" name="sex" /><label>Male</label>
 <input type="radio" name="sex" /><label>female</label></p>
  <p><label>Education:</label>
   <select>
    <option value="1">Dr</option>
    <option value="2">Master</option>
    <option value="3">Undergraduate</option>
    <option value="4">College</option>
    <option value="5">Zhongji</option>
   </select>
  </p>
  <p><label>SMS subscription:</label><input type="checkbox" /><label>Enable SMS subscription function</label></p>
  <p><label>Remarks:</label>
  <textarea name="note" rows="6" cols="40"></textarea>
  </p>
  <p><label></label><input type="submit" value="submit" /><input type="reset" value="reset" /></p> ;
</form>

3.Call the plugin

$(". jqtransform"). jqtransform ();

A beautiful form came out,But a bit flawed,jqtransform's support for Chinese form buttons under ie is not ideal,For example, the value of the button is displayed normally in English.But multiple English words such as value are sure, i submit! Will be dropped,If the value is Chinese, it ’s even better."Submit" is lined up,This is certainly not the effect I want.The solution is to start with css style,Find button.jqtransformbutton in jqtransform.css file, about 14 lines. Join:

width:auto;
white-space:nowrap;

That is, the width of the button is set to automatic.Single line display.Of course you can also set a fixed width,You can also modify the css file to customize the form style.

  • Previous C # access to SQL Server database implementation method
  • Next JavaScript implementation of Ajax