jQuery表单美化插件jqTransform使用详解

如果您需要美化表单的样式并增强交互性，那么jQuery表单美化插件jqTransform就是一个很好的选择。

安装

在使用jqTransform之前，您需要首先引入jQuery库。然后可以下载jqTransform的js和css文件，或者使用CDN链接的形式引入。

<script src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="path/to/jquery.jqtransform.css">
<script src="path/to/jquery.jqtransform.js"></script>

基本用法

jqTransform主要可以应用于以下四种表单元素的美化：

• Select
• Checkbox
• Radio
• Textarea

对于每个表单元素，我们都需要分别调用它们对应的函数进行美化。

Select

<!-- 原始select元素 -->
<select id="select1">
  <option value="1">选项1</option>
  <option value="2">选项2</option>
</select>

<!-- 使用jqTransform美化后的select元素 -->
<select id="select1" class="jqTransformHidden">
  <option value="1">选项1</option>
  <option value="2">选项2</option>
</select>
<div id="select1Container" class="jqTransformSelectWrapper" style="width: 205px;">
  <div>
    <span class="jqTransformSelectText">选项1</span>
    <span class="jqTransformSelectOpen"></span>
  </div>
  <ul style="width: 203px; display: none;">
    <li><a href="#" index="1" class="selected">选项1</a></li>
    <li><a href="#" index="2">选项2</a></li>
  </ul>
</div>

如上例所示，我们需要为select元素添加class为jqTransformHidden，并且将美化后的select元素的id设置为原始select元素的id，这样jqTransform才能正确对它进行关联美化。

然后我们还需要为美化后的select元素提供一个外层的div并添加class为jqTransformSelectWrapper。该div包含两个子元素，第一个标签用于显示当前选中的选项，class为jqTransformSelectText；第二个标签用于展示所有选项，并且在点击时弹出，class为jqTransformSelectOpen。所有选项都被包含在一个ul元素中，其class设置为jqTransformSelectWrapper，每个选项需要用li和a元素来表示。

最后，我们需要调用select beautifier：

$('#select1').jqTransSelect();

Checkbox

<!-- 原始checkbox元素 -->
<input type="checkbox" id="checkbox1" name="checkbox1" value="1">

<!-- 使用jqTransform美化后的checkbox元素 -->
<span class="jqTransformCheckboxWrapper">
  <a href="#" class="jqTransformCheckbox"></a>
  <input type="checkbox" id="checkbox1" name="checkbox1" value="1" class="jqTransformHidden">
</span>

如上例所示，我们需要为checkbox元素添加class为jqTransformHidden，并且将美化后的checkbox元素的id设置为原始checkbox元素的id，这样jqTransform才能正确对它进行关联美化。

然后我们需要为美化后的checkbox元素提供一个外层的span标签，并添加class为jqTransformCheckboxWrapper。该span包含两个子元素，第一个标签包含了美化后的checkbox元素，class为jqTransformCheckbox；第二个标签包含了原始checkbox元素并添加了class为jqTransformHidden。

最后，我们需要调用checkbox beautifier：

$('#checkbox1').jqTransCheckbox();

Radio

<!-- 原始radio元素 -->
<input type="radio" id="radio1" name="radio1" value="1">

<!-- 使用jqTransform美化后的radio元素 -->
<span class="jqTransformRadioWrapper">
  <a href="#" class="jqTransformRadio"></a>
  <input type="radio" id="radio1" name="radio1" value="1" class="jqTransformHidden">
</span>

如上例所示，我们需要为radio元素添加class为jqTransformHidden，并且将美化后的radio元素的id设置为原始radio元素的id，这样jqTransform才能正确对它进行关联美化。

然后我们需要为美化后的radio元素提供一个外层的span标签，并添加class为jqTransformRadioWrapper。该span包含两个子元素，第一个标签包含了美化后的radio元素，class为jqTransformRadio；第二个标签包含了原始radio元素并添加了class为jqTransformHidden。

最后，我们需要调用radio beautifier：

$('#radio1').jqTransRadio();

Textarea

<!-- 原始textarea元素 -->
<textarea id="textarea1" name="textarea1" rows="3" cols="30"></textarea>

<!-- 使用jqTransform美化后的textarea元素 -->
<div class="jqTransformTextarea">
  <div>
    <div class="jqTransformTextareaTop"></div>
    <div class="jqTransformTextareaMain">
      <textarea id="textarea1" name="textarea1" rows="3" cols="30" class="jqTransformHidden"></textarea>
    </div>
    <div class="jqTransformTextareaBottom"></div>
  </div>
</div>

如上例所示，我们需要为textarea元素添加class为jqTransformHidden，并且将美化后的textarea元素的id设置为原始textarea元素的id，这样jqTransform才能正确对它进行关联美化。

然后我们需要为美化后的textarea元素提供一个外层的div标签，并添加class为jqTransformTextarea。该div标签包含三个子元素，分别是textarea的上、中、下三个部分，它们的class分别为jqTransformTextareaTop、jqTransformTextareaMain和jqTransformTextareaBottom。其中中间部分包含了美化后的textarea元素，其class也需要设置为jqTransformHidden。

最后，我们需要调用textarea beautifier：

$('#textarea1').jqTransTextarea();

示例

示例1

<!-- html代码 -->
<select id="select1">
  <option value="1">选项1</option>
  <option value="2">选项2</option>
  <option value="3">选项3</option>
</select>

// js代码
$('#select1').jqTransSelect();

如上例所示，我们可以在一个select元素上使用jqTransform进行美化。

示例2

<!-- html代码 -->
<input type="checkbox" name="checkbox1" value="1">选项1</input>
<input type="checkbox" name="checkbox2" value="2">选项2</input>
<input type="checkbox" name="checkbox3" value="3">选项3</input>

// js代码
$('input[type="checkbox"]').jqTransCheckbox();

如上例所示，我们可以针对多个checkbox元素使用jqTransform进行批量美化。