您现在的位置:首页 >> 前端 >> 内容

EasyUI编写对话框代码实现教程

时间:2017/12/27 13:50:07 点击:

  核心提示:第一步:引入EasyUI的资源文件!-- 导入jquery的核心包--script type=text/ src=easyui/jquery.min.js /script!-- 导入easyui 的核...

第一步:引入EasyUI的资源文件

<!-- 导入jquery的核心包  -->
<script type="text/javascript" src="easyui/jquery.min.js" ></script>
<!-- 导入easyui 的核心包  -->
<script type="text/javascript" src="easyui/jquery.easyui.min.js" ></script>
<!-- 导入中文的提示信息  -->
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"> </script>
<!-- 导入图标对应的css  -->
<link  rel="stylesheet"  type="text/css"  href="easyui/themes/icon.css">
<!-- 导入easyui的css  -->
<link  rel="stylesheet"  type="text/css"  href="easyui/themes/default/easyui.css">

第二步:通过添加class,实现不同样式

1、EasyUI的class以easyui开头

2、class=”easyui-dialog”表示将此元素编程对话框

3、可以通过style自定义对话框的大小。

    <p class="easyui-dialog" style="width: 400px;height: 300px;">
        <h1>Hello World</h1>
        <h3>easyui 基本使用</h3>
        <p>
            导入了三个js文件 和 两个css文件
        </p>
    </p>

如图所示:

EasyUI编写对话框代码实现教程

Tags:EA AS SY YU 
作者:网络 来源:xyphf的博客