通过使用jQuery和CSS控制元素对齐来学习jQuery插件写法

大家在平时***表单之时，关于对齐一定有碰到过，那么在这个简短的教程中主要尝试另一种解决方法，希望大家会喜欢。

在Web页面中创建一个Web表单时（比如说注册信息表单，或者联系表单），你都必须做出一个功能和视觉对齐的布局。如下图所示：





我们一般在Web页面中都需要***如上图所示的美化后的表单风格。解决这种布局效果，最简单的方式就是将form用table来***，将label放在一个td，而input放在另一个td中，并设置其对齐方式，这种方法是最早的使用方法，也是最方便的一种方法，以前我也常用；但随着Web技术的发展，后面改用div来布局form就使用另一种方法，将label固定宽度来实现。虽然这两种方未能都帮我们解决需要解决的对齐问题，但是当你不想在使用table来完成这样的布局效果，而且又无法得知最长的label时，那么此时你就需要借助其他的方法了。这也是我们今天一起要学习的另一个方法——使用jQuery和CSS控制表单元素对齐。
首先我们一起来为今天的内容创建一个简单的表单Demo：

HTML代码：

<form action="./" method="post" class="form">
<div class="formField clearfix">
<label for="firstName">first name:</label>
<input type="text" class="formText" id="firstName" />
</div>
<div class="formField clearfix">
<label for="lastName">last name:</label>
<input type="text" class="formText" id="lastName" />
</div>
<div class="formField clearfix">
<label for="email">email address:</label>
<input type="text" class="formText" id="email" />
</div>
<div class="formField clearfix">
<label for="blog">blog:</label>
<input type="text" class="formText" id="blog" />
</div>
</form>
CSS代码：

我们只是对他进行一些普通的设置，在label和input上进行浮动设置，让他们在同一行，并同时在他们的父元素formField上清除浮动，具体代码如下：
/*=========form style===========*/
form {
margin-bottom: 18px;
}
.formField {
overflow: auto;
width: 100%;
margin: 5px 0;
}
label {
float: left;
display: block;
margin-right: 5px;
text-transform: capitalize;
}
.formText {
display: block;
float: left;
}
效果：





上图的效果，在我们平时都很常见吧。那么我们正常需要的效果是：





在不使用table布局情况下，通常我们都是在label上设置一个最小宽度值来实现的，我以前常常这样来解决
label {
min-width: 100px;
width: auto !important;
width: 100px;
white-space: nowrap;
word-break: keep-all;
}
下面我们使用jquery方法来实现。

jQuery代码：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var max = 0;
$('label').each(function() {
if ($(this).width() > max) {
max = $(this).width();
}
});
$('label').width(max);
});
</script>
我们通过jQuery来遍历所有label标签，并计算其中一个最大的标签的宽度，然后将这个最大宽度的值应用到所有label标签上，从而使他们的宽度一致达到对齐效果。

当然你可能会有另一种想法：你可能有不同的字段集或自己需要在不同的标签应用相同的宽度用来实现对齐的方式。一种很好实现的方法：你可以在你需要对齐的标签的父元素中form或fieldset加上一个类名“align-labels”，然后在运行下面的脚本代码：

$(document).ready(function() {
$('.align-labels').each(function(container) {
var max = 0;
$("label", container).each(function() {
if ($(this).width() > max)
max = $(this).width();
});
$("label", container).width(max);
});
});
有了上面这种思路，我们完全可以在他的基础之上来为各元素写一个扩展的插件，这样你就可以应用在任何元素，类或id之上。

jQuery.autoWidth插件
$(document).ready(function(){
$.fn.autoWidth = function(options) {
var settings = {
limitWidth: false
}

if(options) {
$.extend(settings,options);
}

var maxWidth = 0;
this.each(function(){
if($(this).width() > maxWidth) {
if(settings.limitWidth && maxWidth >= settings.limitWidth){
maxWidth = settings.limitWidth;
} else {
maxWidth = $(this).width();
}
}
});

this.width(maxWidth);
}
$('label').autoWidth();
});
有了这样的一个插件，你可以使用在任元素之上。

demo演示地址:http://www.zjgsq.com/example?pid=1103