參考資料

文章目錄

• • 常用前端框架
  • 常用前端語言
  • 環境搭建
  • API文檔
  • Dialog（對話框窗口）
  • easyloader組件
  • parser解析器
  • panle組件
  • 新建一個登錄界面
  • Form組件
  • validatebox組件
  • layout布局
  • DataGrid（數據表格）

常用前端框架

EasyUI 框架 （組件型）

Bootscrapt 框架 （組件型）

Jquery框架（功能型）

Vue框架（功能型）

常用前端語言

javascript
jQuery
jQuery EasyUI
JSON

環境搭建

jQuery Easy UI下載地址

vscode 如何相對路徑？直接拷貝不對

vscode打開新建一個test.html

API文檔

開發文檔地址

如果當前窗口屬性沒有找到，可以找繼承的窗口。

Dialog（對話框窗口）

將 dialog 窗體顯示為模式化窗口。

easyloader組件

開發文檔地址

不推薦easyloader方式

parser解析器

參考文檔

panle組件

參考文檔

# 屬性iconCls 對應icon.css 查看對應的圖標

# 屬性collapsible false 不顯示折疊按鈕 true 顯示折疊按鈕

# 屬性closed boolean 定義是否在初始化的時候關閉面板。

# 方法 open 打開panel

# 方法 distory 銷毀panel

新建一個登錄界面

jQuery API文檔

<script type="text/javascript">var LoginDialog;var WebServiceURL = "http://localhost/WebService/WebService1.asmx/";console.log(WebServiceURL)$(function () {LoginDialog = $('#LoginDialog').dialog({modal: true, // 修改窗口模式closable: false,buttons: [{text: '注冊', handler: function () {console.info('點擊了注冊按鈕');}}, {text: '登錄', handler: function () {console.info('點擊了登錄按鈕');$.ajax({type: "POST", //訪問WebService使用Post方式請求contentType: "application/json;charset=UTF-8",url: WebServiceURL + "/HelloWorld",// data: {// a:1// },cache: false,dataType: 'json',success: function (r) {if (r.d == 'Hello World') {// 登錄成功LoginDialog.dialog('close');$.messager.show({title: '提示',msg: '登錄成功',timeout: 3000,showType: 'slide'});}else {$.messager.alert('提示', '登錄失敗！');}}});}}]});});</script>

Form組件

<script type="text/javascript">var LoginDialog;var LoginForm;var WebServiceURL = "http://localhost/WebService/WebService1.asmx";console.log(WebServiceURL)$(function () {LoginDialog = $('#LoginDialog').dialog({modal: true, // 修改窗口模式closable: false,buttons: [{text: '注冊', handler: function () {console.info('點擊了注冊按鈕');}}, {text: '登錄', handler: function () {console.info('點擊了登錄按鈕');LoginForm.submit();}}]});LoginForm = $('#LoginForm').form({url: "http://localhost/WebService/WebService1.asmx/HelloWorld2",onSubmit: function () {debugger;},success: function (data) {debugger;console.log(data);var jsondata= JSON.parse(data);console.log(jsondata);}});});</script>

validatebox組件

引入 <scrpt type="text/javascript" src="../jquery-easyui-1.7.0/locale/easyui-lang-zh_CN.js"></scrpt> 但是還是英文提示 設置屬性 missingMessage

增加回車功能

layout布局

DataGrid（數據表格）

總結

以上是生活随笔為你收集整理的Easy UI框架的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。