zoukankan      html  css  js  c++  java
  • jquery easy ui 1.3.4 快速入门(1)

    什么是easyui

    jQuery EasyUI是一组基于jQuery的UI插件集合,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript,也不需要对css样式有深入的了解,开发者需要了解的只有 一些简单的html标签。

    jQuery EasyUI为我们提供了大多数UI控件的使用,如:accordion,combobox,menu,dialog,tabs,tree,validatebox,window等等。

    目录说明

    一、快速入门

    1.1搭建easyui环境

    我们需要引入3个基本的文件

      <link href="jquery-easyui-1.3.4/themes/default/easyui.css" rel="stylesheet" />
        <link href="jquery-easyui-1.3.4/themes/icon.css" rel="stylesheet" />
        <script src="jquery-easyui-1.3.4/jquery.min.js"></script>
        <script src="jquery-easyui-1.3.4/locale/easyui-lang-zh_CN.js"></script>
        <script src="jquery-easyui-1.3.4/jquery.easyui.min.js"></script>

    1.2Hello World

    我们在写easyui 的js代码的时候也需要在dom树生成后,也就

    是说我们需要写$(function(){})这个方法

    l   easyui版Hello World

       $(function () {

                $.messager.alert("hello word", "欢迎光临");//hello word 为标题,欢迎光临为内容

            });

    1.3如何写easyui - html方式

    通过配置元素的属性的方式来写easyui的ui插件,如下面的代码,我们配置

    一个panel(面板) ,首先必须配置calss为"easyui-panel",如果需要加一个

    标题我们则需要些title属性即可,想给这个面板添加一个图标,我们只需

    要配置 iconCls属性即可,easyui本身就提供了一套icon的css,我们在页

    面里面引入"themes/icon.css"即可使用easyui给我们定义的css

    <div style="300px;height:500px" class="easyui-panel"

        title="第一个面板" iconCls="icon-save" collapsible="true">

     </div>

    1.4 data-options属性

    我们在写 "iconCls"这种属性的时候编辑器会提示错误,easyui提供data-options属性给我来写组件的配置如下面代码

    <div style=" 300px; height: 500px" class="easyui-panel"

         title="第一个面板" data-options="iconCls:'icon-save',collapsible:true">

    </div>

    1.5如何写easyui - js方式

    使用配置的方式创建以easyui的panel组件。代码如下

    $("#myDiv").panel({

                   title: "js方式的panel",

                   300,

                   height: 500,

                   collapsible: true

               });

  • 相关阅读:
    codeforces round 512 F. Putting Boxes Together 树状数组维护区间加权平均数
    sgu 110 射线关于球的反射光线
    快速读模板
    HDU-3506 二维四边形不等式
    BZOJ 1563 四边形不等式
    HIT Summer Day17 计算几何初步 题解
    IME Starters Try-outs 2018 C. China Adventures
    IME Starters Try-outs 2018 J. JHADCBEIGF
    ACM International Collegiate Programming Contest, Amman Collegiate Programming Contest (2018) GYM 100810 K. League of Demacia
    Codeforces Round #493 (Div. 1) C. Sky Full of Stars
  • 原文地址:https://www.cnblogs.com/yxlblogs/p/3437401.html
Copyright © 2011-2022 走看看