easyUI替換非16x16的表徵圖，easyui替換16x16

easyUI替換非16x16的表徵圖，easyui替換16x16

我們知道easyUI原生的表徵圖是比較難看的。所以要達到較好的使用者體驗，那麼就非常有必要替換它的表徵圖。

原生的easyUI的表徵圖：

但是，easyUI中的組件easyui-linkbutton預設只提供了對16x16圖片的良好支援。

如果你替換成別的尺寸的，那麼圖片就會被縮放，這顯然不是我們想要的。

於是我們需要對easyui-linkbutton解析出的html進行改寫。

1、把要更改的表徵圖構造成css中的一個class，便於我們使用

.icon-add-3 {background: url('icons/add.png') no-repeat center center;}.icon-edit-3 {background: url('icons/modify.png') no-repeat center center;}.icon-delete-3 {background: url('icons/delete.png') no-repeat center center;}

2、這三張表徵圖的尺寸都是48x48的，如果不更改easyui-linkbutton的樣式，那麼出來的結果會非常難看。

3、修改easyui-linkbutton的樣式

可以看到預設的easyui-linkbutton解析出來的內容:

<a href="#" class="easyui-linkbutton l-btn l-btn-small l-btn-plain"iconcls="icon-add-3" plain="true"><span class="l-btn-left l-btn-icon-left"><span class="l-btn-text l-btn-empty"> </span><span class="l-btn-icon icon-add-3"> </span> </span> </a>

一、外面這層a有2個作用：①是用於處理背景色②是對a設定display：inline-block來定義a為區塊層級元素並保證a水平排布

二、裡面第一層span用來固定第二層span的位置，使用了display：inline-block和position：relative

三、第二層span.l-btn-text是用來撐開第一層的span,並且提供hover出現邊框的效果

四、第二層span.l-btn-icon是用來顯示表徵圖的.

知道了這些之後,其實我們需要改變的就是三和四，因為一和二都會被撐開而得到合適的顯示。

4、但是其實給裡面的span元素直接加class是不現實的，因為這些元素的產生都是easyUI的js來控制的，所以我們只能控制到a這層

（或者你可以直接對span.l-btn-textspan.l-btn-icon來設定樣式，但是這樣可能會影響到別的組件比如分頁控制項的表徵圖）

所以，我這裡是給外層的div做的控制，也就是a的父級元素，下面為參考代碼：

.big-size-icon>a>span {line-height: 48px;padding-right: 10px;font-size: 24px;font-weight: bold;}.big-size-icon>a>span>span.l-btn-text {width: 48px;line-height: 48px;}.big-size-icon>a>span>span.l-btn-icon {width: 48px;height: 48px;line-height: 48px;top: 0;margin-top: 2px;}.big-size-icon>a[iconcls="icon-add-3"]>span:after {content: '新增';font-size: 28px;font-weight: bold;}.big-size-icon>a[iconcls="icon-edit-3"]>span:after {content: '修改';font-size: 28px;font-weight: bold;}.big-size-icon>a[iconcls="icon-delete-3"]>span:after {content: '刪除';font-size: 28px;font-weight: bold;}

最後放張實現的效果：

那種小表徵圖 16X16 是這做出來的？ 非常清晰 ？？？

都是單獨處理的，直接將128的縮成16x16幾乎不可能清晰，和你的表徵圖的複雜程度也有關係~
 
easyui<th data-options="field:'ck',checkbox:true">換成radio

很簡單啊。
首先你需要弄一個checkbox，但是要hidden:true。這樣就可以看不見了。
然後，因為我熟悉用Js的方式載入，所以我說Js的。
建立一個json列，比如
{field:'radio',formatter:function(value,row,index){
return "<input type='radio'>";

}}
這樣就OK了。
以後有easyui不會的，可以直接求助我。