這兩天看了下easyui的教學(xué)先說說自己的一些小小理解吧!
----在使用easyui中也遇到了一個問題 :
Uncaught TypeError:cannot call method ‘offset’ of undefined//為方法聲明...
后來在百度上搜索相關(guān)問題經(jīng)發(fā)現(xiàn),這是easyui 的包被修改了導(dǎo)致一些樣式除了問題報的錯...
1. 引入easyui主要文件:
<script type="text/javascript" src="easyWord/jEasyUi/jquery-1.4.2.min.js"></script>
<script type="text/Javascript" src="easyword/jEasyUi/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyword/jEasyUi/locale/easyui-lang-zh_CN.js"></script>
<link href="easyword/jEasyUi/themes/default/easyui.CSS" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="easyword/jEasyUi/themes/icon.css" />
2. 首先布局按照:north(北)、south(南)、east(東)、west(西)、center(中)
例:
<body class="easyui-layout">
<div data-options="region:'north',上北 title:'North Title',split:true" style="height:100px;"></div>
<div data-options="region:'south',title:'下南Title',split:true" style="height:100px;"></div>
<div data-options="region:'east',iconCls:'icon-reload',title:' 右東East',split:true" style="width:100px;"></div>
<div data-options="region:'west',title:' 左西 West',split:true" style="width:100px;"></div>
<div data-options="region:' 中 center',title:'center title'" style="padding:5px;background:#eee;"></div>
</body>
在寫分頁插件時 在手冊好像沒看見這個屬性:layout:分頁控件布局定義,布局選項可以包含一個或多個值
1.list(頁面顯示條數(shù)列表)、2.sop(頁面按鈕分割線) 、3.first(首頁按鈕)、4.PRev(上一頁按鈕)、
5. next(下一頁按鈕)、6.last(尾頁按鈕)、7.refresh(刷新按鈕)、8.(手工輸入當(dāng)前頁的輸入框)、
9.links(頁面數(shù)鏈接)
例如:<div id="pp" class="easyui-pagination" data-options="total:1000,pageSize:10" style="background:#efefef;border:1px solid #ccc;"></div>
效果如下:

在使用上面layout:里面的 links改變樣式


3. 必須知道的data-options屬性的用法(通過這個屬性,我們可以對easyui組件的實例化可以完全寫入到html中)例如:

結(jié)果如下:

4. easyui的組件屬性 也可以寫入標簽里面去
<div id="p" class="easyui-panel" title="My Panel" style="width:500px;height:150px;padding:10px;" iconCls="icon-save" closable="true" collapsible="true" minimizable="true" maximizable=true> 等同于:
<div id="p" class="easyui-panel" title="My Panel" data-options="width:500px;height:150px;padding:10px;background:#fafafa;" iconCls="icon-save" closable="true" collapsible="true" minimizable="true" maximizable=true>
----上面是class寫法,下面是JS寫法 例如:
<div id="login">
<p>賬號:<input class="easyui-numberbox" id="manager" type="text" name="name" value=" " /></p>
<p>密碼:<input class="easyui-numberbox" id="managerpass" type="password" name="name" value=" " /></p>
</div>
先給div一個id(“login”)

新聞熱點
疑難解答