<table class="easyui-datagrid" title="Frozen Columns in DataGrid" style="width:700px;height:250px"data-options="rownumbers:true,singleSelect:true,url:'datagrid_data1.json',method:'get'"><thead data-options="frozen:true"><tr><th data-options="field:'itemid',width:100">Item ID</th><th data-options="field:'productid',width:120">Product</th></tr></thead><thead><tr><th data-options="field:'listprice',width:90,align:'right'">List Price</th><th data-options="field:'unitcost',width:90,align:'right'">Unit Cost</th><th data-options="field:'attr1',width:250">Attribute</th><th data-options="field:'status',width:60,align:'center'">Status</th></tr></thead></table>
2 回答
慕斯王
TA貢獻1864條經(jīng)驗 獲得超2個贊
這不是HTML的標準屬性，是個自定義屬性，HTML是不認識它的，如果就這樣直接運行，它是不會產(chǎn)生任何效果的（但也不會造成出錯），必須結(jié)合JS代碼才能產(chǎn)生效果，比如遍歷頁面所有元素，發(fā)現(xiàn)帶有data-options（意思就是數(shù)據(jù)參數(shù)）屬性的就取出來并解析，具體怎么做就要看程序的設(shè)計者了。
這種技術(shù)的典型應(yīng)用是類似淘寶的圖片延遲顯示技術(shù)，比方說（只是舉例，與淘寶的實際代碼無關(guān)），頁面代碼中的圖片是這樣的：
<img src="一個空圖片" src1="實際要顯示的圖片">
其中src1是自定義的屬性，上述代碼顯示的效果就是一個空圖片，如果有多個圖片，那么顯示的就是多個空圖片；
然后，給頁面的滾動事件綁定js代碼，當(dāng)圖片滾動到瀏覽器的可見區(qū)域時，就把src1屬性賦值給src屬性，這樣的話實際的圖片就顯示出來了。
這樣做的好處就是頁面的整體顯示速度很快，因為不在可見區(qū)域的圖片是沒有實際下載的；其次就是可以減少頁面的下載量，因為不是所有人都會把頁面內(nèi)的所有圖片都看完的，沒看的圖片就不下載。這種技術(shù)最適合一次性要顯示多個圖片的頁面，如網(wǎng)店的詳情頁。
添加回答
舉報
0/150
提交
取消