jQuery怎么實(shí)現(xiàn)鎖定頁面元素

發(fā)布時(shí)間：2022-02-23 10:15:10 來源：億速云閱讀：158 作者：iii 欄目：開發(fā)技術(shù)

這篇文章主要介紹“jQuery怎么實(shí)現(xiàn)鎖定頁面元素”的相關(guān)知識，小編通過實(shí)際案例向大家展示操作過程，操作方法簡單快捷，實(shí)用性強(qiáng)，希望這篇“jQuery怎么實(shí)現(xiàn)鎖定頁面元素”文章能幫助大家解決問題。

摘要

在拖動滾動條時(shí)，對頁面元素進(jìn)行橫向、縱向鎖定。

介紹

對于展現(xiàn)內(nèi)容較多的頁面，在滾動時(shí)，我們經(jīng)常需要對一些重要的元素進(jìn)行鎖定。這些元素經(jīng)常是表格的行、列，也可能是搜索條件，或者是其他重要信息。
對于表格列的鎖定，目前主要有三種方法。

1.表格控件
2.js生成fixtable之類填充
3.js+css

第一種，算是最簡單的方法。但是用控件的缺點(diǎn)實(shí)在太多了，其中一個(gè)與本文有直接相關(guān)的缺點(diǎn)是，部分控件對多級表頭的鎖定支持的很差。

第二種，思路很清晰，但是實(shí)現(xiàn)起來非常復(fù)雜，維護(hù)成本過高。

第三種，正是本文所用的方法。目前網(wǎng)上也有多篇相關(guān)文章，但是就使用場景來說太局限了，沒有對這一類問題進(jìn)行更高程度的抽象。
我想要的是：不只是表格，只要是想要鎖定的元素，只需要添加一個(gè)標(biāo)識，再最多額外寫一行代碼就可以完成批量鎖定。并且內(nèi)部實(shí)現(xiàn)代碼要盡量簡單。

用法

對需要縱向鎖定的元素添加樣式lock-col，橫向鎖定的添加lock-row。在nayiLock方法中傳入滾動的div所對應(yīng)的id。

完整例子

<!DOCTYPE>
<html>
<head>
    <title>鎖定</title>
    <meta http-equiv="X-UA-Compatible" charset="utf-8"/>
    <script src="../../js/jquery-1.7.2.min.js" type="text/javascript"></script>
<style type="text/css">

table td, th{
    text-align: center;
    border:#dee9ef 1px solid;
}

</style>
<script> 
jQuery(function(){
    nayiLock("aDiv");
    //支持多級表頭的鎖定
    nayiLock("bDiv");

    //支持對多個(gè)div的鎖定
}) 
//scrollDivId   滾動的div的id
function nayiLock(scrollDivId){
    jQuery("#" + scrollDivId).scroll(function(){
        var left = jQuery("#" + scrollDivId).scrollLeft();
        jQuery(this).find(".lock-col").each(function(){
            jQuery(this).css({"position":"relative","left":left,"background-color":"white","z-index":jQuery(this).hasClass("lock-row")?20:10});
        });

        var top = jQuery("#" + scrollDivId).scrollTop();
        jQuery(this).find(".lock-row").each(function(){
            jQuery(this).css({"position":"relative","top":top,"background-color":"white","z-index":jQuery(this).hasClass("lock-col")?20:9});
        });
    });
}


</script>
</head>
<body id="myBody">

<div id="aDiv" >
    <div class="lock-row lock-col" >
        <span id="span1" >span1</span>
    </div>
    <table id="table1"  >
        <thead>
            <tr>
                <th id="testTh" class="lock-col lock-row">序號</th>
                <th class=" lock-row">表頭1</th>
                <th class="lock-row">表頭2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="lock-col">1</td>
                <td class="">test</td>
                <td>test</td>
            </tr>
            <tr>
                <td class="lock-col">2</td>
                <td class="">test</td>
                <td>test</td>
            </tr>
        </tbody>    
    </table>
</div>

<div id="bDiv" >

    <table id="table1" >
        <thead>
            <tr>
                <th colspan="2" class="lock-col lock-row">
                    colspan="2"
                </th>
                <th class="lock-row">
                    colspan="1"
                </th>
            </tr>

            <tr>
                <th id="testTh" class="lock-col lock-row">序號</th>
                <th class="lock-col lock-row">表頭1</th>
                <th class="lock-row">表頭2</th>

            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="lock-col">1</td>
                <td class="lock-col">test</td>
                <td>test</td>
            </tr>
            <tr>
                <td class="lock-col">2</td>
                <td class="lock-col">test</td>
                <td>test</td>
            </tr>
        </tbody>    
    </table>
</div>

</body>
</html>

注：對低版本ie的兼容還是沒找到j(luò)s上的直接解決方法。建議使用expression方法。

關(guān)于“jQuery怎么實(shí)現(xiàn)鎖定頁面元素”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點(diǎn)。

向AI問一下細(xì)節(jié)

jQuery怎么實(shí)現(xiàn)鎖定頁面元素

摘要

介紹

用法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽