JS動態控制列表寬度

列表寬度常用的有兩種方法，一是用程序截取字符串，二是用CSS把超過長度部分隱藏，這兩種方法各有缺陷，第一種是依賴字體格式，當換字體或字號要修改程序，第二種是有時把想保留的內容隱藏了，那么有沒有更好的方法呢，當然有啦！

直接上代碼吧:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        .example1
        {
            border:1px solid #800000;
            float:left;
            padding:10px;
        }
        .example2
        {
            border:1px solid #800000;
            float:left;
            padding:10px;
            margin-top:10px;
        }
        .all
        {
            font-size:14px;
            width:330px;
        }
        .one
        {
            float:left;
            overflow:hidden;
            height:25px;
            color:Gray;
        }
        .two
        {
            float:left;
            color:Green;
        }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            var sumlen = 320;
            $.each($(".all"), function (index, item) {
                if (($(".one:eq(" + index + ")").width() + $(".two:eq(" + index + ")").width()) > sumlen) {
                    var length = sumlen - $(".two:eq(" + index + ")").width();
                    $(".one:eq(" + index + ")").css("width", length + "px");
                }
            });
        });
    </script>
</head>
<body>
    Demo 1:<br />
    <div class="example1">
        <div class="all">
            <div class="one">測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試</div>
            <div class="two"> (4/29 12:00:00)</div>
        </div>
        <div class="all">
            <div class="one">測試測試測試試測試測試測試測測試</div>
            <div class="two"> (4/29 12:00:00)</div>
        </div>
        <div class="all">
            <div class="one">測試測試測試測試測試測試測試測試測試測</div>
            <div class="two"> (4/29 12:00:00)</div>
        </div>
        <div class="all">
            <div class="one">測試測試測試測試測測試</div>
            <div class="two"> (4/29 12:00:00)</div>
        </div>
        <div class="all">
            <div class="one">測試測試測試測試測測測試測試測試測測測試測試測試測測測試測試測試測測試</div>
            <div class="two"> (4/29 12:00:00)</div>
        </div>
    </div>
    <div style="clear:both"></div>
    <br />
    Demo 2(去掉時間列):<br />
    <div class="example2">
        <div class="all">
            <div class="one">測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試</div>
            <div class="two"></div>
        </div>
        <div class="all">
            <div class="one">測試測試測試試測試測試測試測測試</div>
            <div class="two"></div>
        </div>
        <div class="all">
            <div class="one">測試測試測試測試測試測試測試測試測試測</div>
            <div class="two"></div>
        </div>
        <div class="all">
            <div class="one">測試測試測試測試測測試</div>
            <div class="two"></div>
        </div>
        <div class="all">
            <div class="one">測試測試測試測試測測測試測試測試測測測試測試測試測測測試測試測試測測試</div>
            <div class="two"></div>
        </div>
    </div>
</body>

</html>

效果圖：

posted @ 2011-04-29 17:16 artwl 閱讀(1961) 評論(0) 收藏舉報

刷新頁面返回頂部

個人簡介

var ME = {
	"name": "土豆/Artwl",
	"job": "coding",
	"languages": [
		"JS", "HTML",
                "CSS", "jQuery"
		"MVC",".NET",
		"設計模式"
	],
	"hobby": [
		"閱讀", "旅游",
		"音樂", "電影"
	]
}

TOP

JS動態控制列表寬度

公告

個人簡介