成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

修改bootstrap table 源碼實(shí)現(xiàn)固定高時(shí)自定義滾動(dòng)條的樣式

littleGrow / 2314人閱讀

摘要：同時(shí)在里，大概第行，有一些用來計(jì)算滾動(dòng)條寬度的樣式。下面是顯示效果，分別為有滾動(dòng)條時(shí)候和無滾動(dòng)條時(shí)候。至此，自定義滾動(dòng)條樣式就完成了。

????????bootstrap table 其方便性與實(shí)用性已不言而喻，然，在我們實(shí)際應(yīng)用中總是有這種那種的需求，比如我近期遇到的，就是需要自定義滾動(dòng)條   = =，不過話說初始滾動(dòng)條確實(shí)有點(diǎn)難看...
????????現(xiàn)在大多數(shù)網(wǎng)站滾動(dòng)條都還是原始樣式，不過在更加追求體驗(yàn)的年代，人們總是要盡可能消除影響整體美觀的元素，滾動(dòng)條便是其中之一。如果能將滾動(dòng)條設(shè)置成符合網(wǎng)站風(fēng)格的樣式，豈不比瀏覽器默認(rèn)的更加賞心悅目？
????????回歸正題，在bootstrap table數(shù)據(jù)多且又固定高度的時(shí)候，就會(huì)出現(xiàn)滾動(dòng)條，往下滾動(dòng)。此時(shí)領(lǐng)導(dǎo)發(fā)話了，這個(gè)滾動(dòng)條太寬了，給我調(diào)窄一些...顏色也不對(duì)，你也調(diào)一下！我能怎么辦，于是就改唄。在經(jīng)過一番探索之后，發(fā)現(xiàn)在bootstrap table.js的源碼里，第100行左右，有個(gè)getScrollBarWidth()方法，該方法就是用來獲取滾動(dòng)條寬度。同時(shí)在bootstrap table.css里，大概第295行，有一些用來計(jì)算滾動(dòng)條寬度的樣式。
????????ok，找到問題所在就好辦了。首先，我們不用其自帶的樣式，刪除第295行開始到下一個(gè)段注釋之前的樣式。最后像這樣——

???????樣式已刪除，然后我們寫自己的滾動(dòng)條樣式，建議寫在自己的樣式文件里
.calcscrollin {
    width: 100%;
    height: 200px;
}
.calcscrollout{   
    top: 0;
    left: 0;    
    width: 200px;
    height: 150px; 
    overflow: scroll;
}
.calcscrollout::-webkit-scrollbar,.fixed-table-body::-webkit-scrollbar{
    width: 7px;
    height: 7px;
    background: #fff;
}
.calcscrollout::-webkit-scrollbar-track,.fixed-table-body::-webkit-scrollbar-track{
    background: #fff;
    border: 1px solid #ffffd;
    margin-right: 4px;
}
.calcscrollout::-webkit-scrollbar-thumb,.fixed-table-body::-webkit-scrollbar-thumb{
    height: 7px;
    border: 1px solid #ccc;
    background-color: #e5e5e5;
}
其中??::-webkit-scrollbar 代表整個(gè)滾動(dòng)條 ??? ::-webkit-scrollbar-track 表示滾動(dòng)條軌道  ???::-webkit-scrollbar-thumb代表軌道上的小方塊，不過，看到-webkit-應(yīng)該就知道了，咳咳，IE不支持，不過我沒測(cè)，各位可以自行測(cè)試。calcscrollin 和calcscrollout又是干什么的呢？沒錯(cuò)，就是用來計(jì)算滾動(dòng)條寬度的，現(xiàn)在，我們回到其源碼的第100行，修改這個(gè)方法，如下所示：
var getScrollBarWidth = function () {
      if (cachedWidth === null) {
        var outer = $("
")
        var w1, w2;
        $("body").append(outer);
        w1 = $(".calcscrollout")[0].offsetWidth;
        w2 = $(".calcscrollin")[0].offsetWidth;                        
        if (w1 === w2) {
            w2 = $(".calcscrollin")[0].clientWidth;
        }
        outer.remove();
        cachedWidth = w1-w2;
      }
      return cachedWidth;
    };
??????這個(gè)方法其實(shí)很簡(jiǎn)單，無非就是在body里最后加兩個(gè)元素，一個(gè)out，一個(gè)in(還記得樣式上的calcscrollout和calcscrollin嗎？)，獲取他們的offsetWidth——可見寬度，用外面的減去里面的，剩余就是滾動(dòng)條寬度，最后將兩元素刪除，返回cacheWidth即滾動(dòng)條寬度。 下面是顯示效果，分別為有滾動(dòng)條時(shí)候和無滾動(dòng)條時(shí)候。至此，bootstrap table自定義滾動(dòng)條樣式就完成了。

??????

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/112066.html

相關(guān)文章

  • 修改bootstrap table 源碼實(shí)現(xiàn)固定高時(shí)自定義滾動(dòng)條的樣式

    摘要：同時(shí)在里，大概第行，有一些用來計(jì)算滾動(dòng)條寬度的樣式。下面是顯示效果，分別為有滾動(dòng)條時(shí)候和無滾動(dòng)條時(shí)候。至此，自定義滾動(dòng)條樣式就完成了。 ????????bootstrap table 其方便性與實(shí)用性已不言而喻，然，在我們實(shí)際應(yīng)用中總是有這種那種的需求，比如我近期遇到的，就是需要自定義滾動(dòng)條 = =，不過話說初始滾動(dòng)條確實(shí)有點(diǎn)難看... ????????現(xiàn)在大多數(shù)網(wǎng)站滾動(dòng)條都還是...

    anRui 評(píng)論0 收藏0

  • 表頭固定，表的主體設(shè)置滾動(dòng)條，同時(shí)解決錯(cuò)位問題

    摘要：項(xiàng)目中遇到的問題，需要表頭固定，給表體設(shè)置滾動(dòng)條，搜了很多種方法，也研究了一下。表頭放在中，表體放在中，給設(shè)置固定高度，加樣式，這樣在數(shù)據(jù)多的時(shí)候會(huì)出現(xiàn)滾動(dòng)條，數(shù)據(jù)少的時(shí)候滾動(dòng)條會(huì)消失。項(xiàng)目中遇到的問題，需要表頭固定，給表體設(shè)置滾動(dòng)條，搜了很多種方法，bootstrap table也研究了一下。 下面是我們使用的方法。 表頭放在div1中，表體放在div2中，給div2設(shè)置固定高度，加樣式o...

    nanchen2251 評(píng)論0 收藏0

  • 前端面試之路一(HTML+CSS面試整理)

    摘要：或表示紅色，表示綠色，表示藍(lán)色，也可取其他數(shù)值來指定顏色。針對(duì)多字節(jié)文字，中文句子也是單詞允許在單詞內(nèi)換行。 一、HTML基礎(chǔ) html常見元素和理解 html常見元素分類 head區(qū)元素：（不會(huì)在頁面上留下直接內(nèi)容） meta title style link script base body區(qū)： div/selection/article/aside/header/f...

    hqman 評(píng)論0 收藏0

  • 前端面試之路一(HTML+CSS面試整理)

    摘要：或表示紅色，表示綠色，表示藍(lán)色，也可取其他數(shù)值來指定顏色。針對(duì)多字節(jié)文字，中文句子也是單詞允許在單詞內(nèi)換行。 一、HTML基礎(chǔ) html常見元素和理解 html常見元素分類 head區(qū)元素：（不會(huì)在頁面上留下直接內(nèi)容） meta title style link script base body區(qū)： div/selection/article/aside/header/f...

    YacaToy 評(píng)論0 收藏0

  • [總結(jié)]CSS/CSS3常用樣式與web移動(dòng)端資源

    摘要：不允許負(fù)值用百分比來定義縮放比例。解決這個(gè)很簡(jiǎn)單，在父元素中使用即可解決該。列寬度由單元格內(nèi)容設(shè)定。定義僅有大寫字母。不過，要讓任何元素生效還得借助于一點(diǎn)點(diǎn)。 css/css3常用樣式 CSS修改選中文字的顏色 html代碼： 第一段文字選中效果 第二段文字選中效果 css代碼： .p1::selection{background:red;color:#fff;} .p2::selec...

    The question 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<