参考资料
文章目录
常用前端框架
- 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(数据表格)
今天的文章easyui框架的优缺点_ui框架有哪些[通俗易懂]分享到此就结束了,感谢您的阅读。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/70677.html