JqueryEasyUI淺談本地化應用

標籤：style   blog   class   code   java   ext   

JqueryEasyUI淺談本地化應用

Jquery是對javascript一種封裝，使我們開發人員使用起來更加方便，同時也解決了不同瀏覽器中javascript的相容性。JqueryEasyUi是基於Jquery上開發的UI組件，和它並行的是JqueryUI，個人認為JqueryUi沒有JqueryEasyUi好用，也沒有JqueryEasyUi顯得專業。

下面先簡單介紹一線JqueryEasyUI的使用，在用JqueryEasyUI之前需要引用幾個js和css檔案

1. <link href="../jqeryEasyUi/jquery-easyui-1.3.1/themes/default/easyui.css" rel="stylesheet"2.     type="text/css" />3. <link href="../jqeryEasyUi/jquery-easyui-1.3.1/themes/icon.css" rel="stylesheet"4.     type="text/css" />5. <script src="../jqeryEasyUi/jquery-easyui-1.3.1/jquery-1.8.0.min.js" type="text/javascript"></script>6. <script src="../jqeryEasyUi/jquery-easyui-1.3.1/jquery.easyui.min.js" type="text/javascript"></script>

這幾個檔案在相應的JqueryEasyUI包中存在。（：http://www.jeasyui.com/download/v123.php）簡單介紹一下幾個JqueryEasyUI的例子。這些demo其實都可以在找到。

一、Dialog 彈出的視窗

：

檔案引用代碼同上。

Script代碼：

1. $(function () {2.            $(‘#d2‘).dialog(‘close‘);3.        });4. function open1() {5.            $(‘#d2‘).dialog(‘open‘);6.        }

視窗處代碼（其實就是使用了div）：

1. <div id="d2" class="easyui-dialog" title="處?|理¤¨a派¨|工?è信?息?é" style="width: 400px; height: 200px;2.        left: 100px; top: 150px; padding: 10px" data-options="toolbar:‘#dlg-toolbar‘,buttons:‘#dlg-buttons‘,resizable:true">3. <table width="100%" border="0" cellpadding="4" cellspacing="1" class="show-table">4. <tr>5. <td>6. 維?修T人¨?員?à：êo7. </td>8. <td>9. <asp:DropDownList ID="ddlMan" runat="server">10. </asp:DropDownList>11. </td>12. </tr>13. <tr>14. <td>15. 維?修T負o責e人¨?：êo16. </td>17. <td>18. <asp:DropDownList ID="ddlHeadMan" runat="server">19. </asp:DropDownList>20. </td>21. </tr>22. </table>23. </div>24. <div id="dlg-buttons">25. <a href="#" class="easyui-linkbutton" onclick="allot()">分¤?配?</a>26. <a href="#" class="easyui-linkbutton" onclick="javascript:$(‘#d2‘).dialog(‘close‘)">27. 取¨?消?</a>28. </div>

總結：對於dialog的使用，最好的方式就是看下載包內的demo，其他的方式也是看demo。

二、日曆顯示（這裡遇到了一點小問題，關於本地化的問題，後面我會貼出解決方案）

：

這是最終的效果，顯示的額都是中文，但是當我第一次引用的時候顯示的是

我引用js和css檔案都是同上，就是顯示是英文的，我想這是什麼問題呢，難道這是外國人寫的，不支援中文，後來想想也不對，如果外國人寫的沒有中文的話，目前這麼火也會有大神寫一個中文包吧。或者他的檔案中有陷阱。

然後我就開啟了jquery-easyui-1.3.2的包，發現了一個檔案件

我在想這個會不會就是有關本地化的東西。當我開啟後發現，果然就是本地化的東西

。看來外國人寫這個軟體的時候就已經想到了本地化的東西，看來這個值得我們以後學習。廢話不說，直接把easyui-lang-zh_CN.js引用，一切都OK了。

Js和css引用代碼：

1. <link href="../jqeryEasyUi/jquery-easyui-1.3.1/themes/default/easyui.css" rel="stylesheet"2.     type="text/css" />3. <link href="../jqeryEasyUi/jquery-easyui-1.3.1/themes/icon.css" rel="stylesheet"4.     type="text/css" />5. <script src="../jqeryEasyUi/jquery-easyui-1.3.1/jquery-1.8.0.min.js" type="text/javascript"></script>6. <script src="../jqeryEasyUi/jquery-easyui-1.3.1/jquery.easyui.min.js" type="text/javascript"></script>7. <script src="../jqeryEasyUi/jquery-easyui-1.3.1/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>

Div顯示日曆的代碼：

1. <input name="ctl00$title$TextBox1" type="text" id="ctl00_title_TextBox1" class="easyui-datebox" required="true" />

使用起來就是這麼的簡單。

郝喜路 2014年5月8日09:53:13