我們?cè)谠O(shè)計(jì)網(wǎng)頁(yè)的時(shí)候，往往要為丑陋的原始表格美化一翻，美化樣式當(dāng)然要用到css，但是不是人人都是css能手，很多時(shí)候花了大量的時(shí)間也不能寫(xiě)出很好效果的css來(lái)。

本文介紹的網(wǎng)頁(yè)表格美化插件：jqtransform，將大大幫助我們?cè)O(shè)計(jì)漂亮的網(wǎng)頁(yè)表格。

我們先來(lái)對(duì)比下使用 jqtransform 前后的效果吧。

▲使用前

▲使用后

演示

execcodegetcode

插件jqtransform的使用

1、添加 javascript 引用

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.jqtransform.min.js"></script>

2、寫(xiě) html form 代碼

<form class="jqtransform">
  <div class="rowElem">
  <label for="name">Name: </label>
    <input type="text" name="name" />
  </div>
  <div class="rowElem"><input type="submit" value="send" /><div>
</form>

3、最后，應(yīng)用插件

<script type="text/javascript">
$(function() {
  //應(yīng)用插件
  $("form.jqtransform").jqTransform();
});
</script>

標(biāo)簽: jqtransform  網(wǎng)頁(yè)表格美化