easyui框架的优缺点_ui框架有哪些[通俗易懂]

easyui框架的优缺点_ui框架有哪些[通俗易懂]参考资料文章目录常用前端框架常用前端语言环境搭建API文档Dialog(对话框窗口)easyloader组件parser解析器panle组件新建一个登录界面Form组件validatebox组件layout布局Dat

参考资料

常用前端框架

  1. EasyUI 框架 (组件型)
  2. Bootscrapt 框架 (组件型)
  3. Jquery框架(功能型)
  4. 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

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注