easyui是一款非常流行的框架，尤其是在創(chuàng)建Web界面時(shí)，它能夠幫助我們輕松地創(chuàng)建出漂亮的用戶圖形界面。作為一款基于jQuery的UI框架，它也同樣支持php的源碼實(shí)現(xiàn)，那么接下來(lái)我們就來(lái)深入了解一下這個(gè)easyui php的源碼實(shí)現(xiàn)。
在使用easyui php之前，我們需要先引入jQuery庫(kù)和easyui庫(kù)。代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>easyui php demo</title> <link rel="stylesheet" type="text/css" href="jquery-easyui-1.8.8/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="jquery-easyui-1.8.8/themes/icon.css"> <script type="text/javascript" src="jquery-easyui-1.8.8/jquery.min.js"></script> <script type="text/javascript" src="jquery-easyui-1.8.8/jquery.easyui.min.js"></script> </head> <body> <div class="easyui-panel" title="easyui php demo" style="width:400px;height:200px;"> <p>Content here.</p> </div> </body> </html>上述代碼中，我們通過(guò)head標(biāo)簽中的link和script標(biāo)簽來(lái)導(dǎo)入easyui和jQuery相關(guān)的樣式和文件，確保easyui Panel可以正常運(yùn)行。我們需要用到的easyui控件都需要嵌套在div標(biāo)簽內(nèi)。 比如說(shuō)，我們現(xiàn)在需要使用easyui的datagrid。代碼如下：
<table id="dg"></table>需要注意的是，我們?cè)趧?chuàng)建完datagrid后，需要指定其一些初始參數(shù)，比如url，fit等等。代碼如下：
<script type="text/javascript">
$('#dg').datagrid({
url:'datagrid_data.json',
fit:true,
columns:[[ ... ]]
});
</script>以上代碼實(shí)現(xiàn)了對(duì)easyui的datagrid控件參數(shù)的設(shè)置。但是，還有一些擴(kuò)展性的設(shè)置，如排序和分頁(yè)等，都需要手動(dòng)編寫(xiě)代碼來(lái)實(shí)現(xiàn)。而這些擴(kuò)展性設(shè)置是我們需要注意的地方。因?yàn)樵谥苯邮褂胑asyui時(shí)，我們很容易出現(xiàn)參數(shù)不對(duì)的情況，例如不支持自定義表格的寬高。但是，在手動(dòng)編寫(xiě)擴(kuò)展性代碼后，我們就可以很輕松地實(shí)現(xiàn)想要的功能。
以下是一個(gè)簡(jiǎn)單的例子：比如我們創(chuàng)建了一個(gè)textarea輸入框，可是通過(guò)鼠標(biāo)滾輪控制發(fā)現(xiàn)文字字號(hào)仍然過(guò)小。這個(gè)時(shí)候，我們就需要手動(dòng)實(shí)現(xiàn)一個(gè)鼠標(biāo)滾輪的事件，實(shí)現(xiàn)控制文字字號(hào)的語(yǔ)句代碼如下：$('#textArea').bind('mousewheel',function(event, delta){
if(delta>0){
var size=$(this).css("font-size");
$(this).css("font-size",(parseInt(size)+1)+"px");
}else{
var size=$(this).css("font-size");
$(this).css("font-size",(parseInt(size)-1)+"px");
}
});以上代碼中，我們使用bind方法來(lái)綁定鼠標(biāo)滾輪事件。每次滾輪滑動(dòng)時(shí)，我們就可以通過(guò)代碼來(lái)實(shí)現(xiàn)文字字號(hào)的修改。這樣就可以簡(jiǎn)單、快捷地實(shí)現(xiàn)鼠標(biāo)滾輪控制字號(hào)了。
easyui php框架具有一定的學(xué)習(xí)曲線，但是通過(guò)這篇文章，我們可以看出，如果熟悉它的源碼實(shí)現(xiàn)，是可以通過(guò)手寫(xiě)代碼實(shí)現(xiàn)我們想要的效果的。寫(xiě)過(guò)jQuery代碼的同學(xué)可以將這樣的思想轉(zhuǎn)化到easyui源碼中去，通過(guò)改變easyui的源碼實(shí)現(xiàn)更符合自己業(yè)務(wù)的效果，起到事半功倍的效果。