haley解决中文字段名称字数不同时两端对齐的问题

做项目的时候，最恶心的就是字段名称字数不同，比如“姓名”，“公司名”，“手机号码”，类似这样的问题真让人头大。

现在写个jq的插件来解决这个问题。

先上效果图

废话不多说直接贴代码：



<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, target-densitydpi=device-dpi">
    <meta name="Author" content="haley">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>

    <style>
        .container{
        width: 90%;
        margin: 0 auto;;
    }
        .con{
            border:1px solid #2c44ff;
            width:28%;
            float: left;
            padding:20px;
            margin:10px;
        }
        h2{text-align: center;border-bottom: 3px solid #007aff;margin:20px 10%; padding:20px;}
        h3{text-align: center;border-bottom: 1px solid #007aff;padding:10px 20px;margin:20px 5%;}
        .na{
            text-align: right;
            width:11em;
            display: inline-block;
        }
    </style>
    <title>解决中文字数不同时两端对齐的问题</title>
</head>
<body>
<h2>
    2016年12月9日 haley解决中文字数不同对齐问题
</h2>
<section class="container"><div class="con">
    <h3>插件控制的效果</h3>
    <p><span class="nameLs">手机号</span>: <input type="text" placeholder="输入内容"/></p>
    <p><span class="nameLs">姓名</span>: <input type="text" placeholder="输入内容"/></p>
    <p><span class="nameLs">固定电话</span>: <input type="text" placeholder="输入内容"/></p>
    <p><span class="nameLs">中文公司名称</span>: <input type="text" placeholder="输入内容"/></p>
    <p><span class="nameLs">邮政编码号</span>: <input type="text" placeholder="输入内容"/></p>
    <p><span class="nameLs">一个特殊字段名称</span>: <input type="text" placeholder="输入内容"/></p>
    <p><span class="nameLs">又一个特殊字段名称</span>: <input type="text" placeholder="输入内容"/></p>
    <p><span class="nameLs">又又一个特殊字段名称</span>: <input type="text" placeholder="输入内容"/></p>
</div>
<div class="con">
    <h3>插件控制的效果</h3>
    <p><span class="nameLs2">两字</span>: <input type="text" placeholder="输入内容"/></p>
    <p><span class="nameLs2">三个字</span>: <input type="text" placeholder="输入内容"/></p>
    <p><span class="nameLs2">共四个字</span>: <input type="text" placeholder="输入内容"/></p>
    <p><span class="nameLs2">一共五个字</span>: <input type="text" placeholder="输入内容"/></p>
    <p><span class="nameLs2">我一共六个字</span>: <input type="text" placeholder="输入内容"/></p>
    <p><span class="nameLs2">我们一共七个字</span>: <input type="text" placeholder="输入内容"/></p>
    <p><span class="nameLs2">我是八个字的标题</span>: <input type="text" placeholder="输入内容"/></p>
    <p><span class="nameLs2">我就是九个字的标题</span>: <input type="text" placeholder="输入内容"/></p>
    <p><span class="nameLs2">我们才是十个字的标题</span>: <input type="text" placeholder="输入内容"/></p>
</div>
<div class="con">
    <h3>插件控制的效果</h3>
    <p><span class="nameLs3">两字</span>: <input type="text" placeholder="输入内容"/></p>
    <p><span class="nameLs3">三个字</span>: <input type="text" placeholder="输入内容"/></p>
    <p><span class="nameLs3">共四个字</span>: <input type="text" placeholder="输入内容"/></p>
</div>
    <div class="con">
        <h3>普通右对齐的效果</h3>
        <p><span class="na">手机号</span>: <input type="text" placeholder="输入内容"/></p>
        <p><span class="na">姓名</span>: <input type="text" placeholder="输入内容"/></p>
        <p><span class="na">固定电话</span>: <input type="text" placeholder="输入内容"/></p>
        <p><span class="na">一个特殊字段名称</span>: <input type="text" placeholder="输入内容"/></p>
        <p><span class="na">又一个特殊字段名称</span>: <input type="text" placeholder="输入内容"/></p>
        <p><span class="na">又又一个特殊字段名称</span>: <input type="text" placeholder="输入内容"/></p>
    </div>
</section>
<script>
    (function($){
        $.fn.extend({
            'ls':function(){
                var arr=[],arrTemp=[],lss=[];
                $.each(this,function(){
                    var elem=$(this);
                    var elemArr=elem.html().split('');
                    $.each(elemArr,function(n){
                        arrTemp.push('<span>'+elemArr[n]+'</span>');
                    });
                    arr.push(elemArr.length);
                    elem.html(arrTemp.join(''));
                    arrTemp.length=0;
                });
                $.each(arr,function(i){
                    var max=Math.max.apply(null, arr);
                    lss.push((max-arr[i])/(arr[i]-1));
                });
                $.each(this,function(i){
                    $(this).children('span:not(:last)').css({
                        'letter-spacing':lss[i]+'em'
                    });
                });
            }
        });
    })(jQuery);
</script>
<script>
    var elems=[$('.nameLs'),$('.nameLs2'),$('.nameLs3')];//需要添加自己在这里添加对象名称就行
    $.each(elems,function(){
        $(this).ls();
    });
</script>
</body>
</html>






基本能满足正常需求。







            

            
posted @ 
2016-12-09 00:30 
HALEY168 
阅读(239) 
评论(0) 
编辑 
收藏 
举报