進度條聯動table的X軸

2021-10-01 19:50:28 字數 896 閱讀 3242

html

css

.tablexaxisrange 


.tablexaxisrange::-webkit-slider-thumb 


.tablexaxisrange::-moz-range-thumb
js

/**


* 動態生成的**，行數不確定，列數過長然後隱藏顯示（x軸出現滾動條）。然而行很多，每次都要滾動到最下方才能進行列x軸的滑動


* 新增另外乙個滾動條控制table的x軸滑動


* html中新增**：* @param $parent 父元素（即包裹table的元素）


* @param $child 子元素（table的元素）


* @param $range 滑動條元素（此處為input中type="range"的元素）


*/const controltablebyscroll = ($parent, $child, $range) => ;


$range.change(() => 


const rangeval = $range.val();


$parent.scrollleft(rangeval / 100 * (width - scrollbarwidth - 1));


});$parent.on('scroll', () => 


$range.val($parent.scrollleft() / (width - scrollbarwidth - 1) * 100);


});};
效果

補上週一的進度條進度條

進度條 行數 80 24 104 部落格字數 103 365 487 187 1142 知識點c stl簡單的異常處理 psp 一.詞頻統計 c類別c內容 s開始時間 e結束時間 i時間間隔 t淨時間 分析需求分析 8 00 9 10466 編碼編寫 9 20 17 38 1206小時 除錯除錯執行...

進度條的實現

1 實現要求 的數量在不斷地增加，後面的數字也隨著增加，圖示不停地在旋轉 2 用到的基礎知識 n 換行 lf 將當前位置移到下一行開頭 r 回車 cr 將當前位置移到本行開頭，每次游標會回到行首 代表乙個反斜線字元 0 空字元 null 3 程式的實現 index裡面是圖示的實現，100s 是左端對...

進度條的使用

進度條的使用 手機 13640736857qq 1241896329 第一步 新建乙個工程，新增進度條控制項，如下圖所示，紅色的部分進度條所關聯的 hmi變數的大小，雙擊進度條控制項，彈出進度條屬性對話方塊，如圖 2所示。在圖2中，進度條的方向有4個，分別是向上，向下，向右，向左。圖2進度條的4個方...