一、前言

对于页面的设计一直都不是很懂。看到easyui样式简洁大方的样子，就心里痒痒，趁这段时间工作没什么项目的同时充充电。同时给自己做个笔记吧。

首先需要下载easyui的包，有两种版本，支持GPL的GPL版本，或者在非GPL上面也能顺利运行的商用版本。我选择的自然是GPL版本。http://www.jeasyui.net/

二、简单loader，完全使用HTML页面编写，不涉及后台数据库。

    

这是下载下来的easyui包里面的元素内容。其中包含一个demo，Demo的后台是使用PHP写的，因为对PHP不熟，所以一般只处理前台的代码，后台控制暂时没研究。写一个简单的loader，需要用到easyloader.js和jquery.min.js的内容，还有src里面的easyui.css样式。除了easyloader.js，其他两个js基本一般处理中都会遇到。

                功能是这样的，点击load Calendar可以跳出日历框，并且光标自动定位在今天的日期上。点击load dialog，在网页中部会出现一个dialog对话框，同时在页面右下角会出现一个提示框。如上图的dialog框和info框。

下面贴一下代码

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <script src="../Scripts/jquery-easyui-1.4.1/jquery.min.js" type="text/javascript"></script>

    <script src="../Scripts/jquery-easyui-1.4.1/easyloader.js"></script>

    <link href="../Scripts/jquery-easyui-1.4.1/themes/default/easyui.css" rel="stylesheet" />

    <script>

        function load1() {

            using('calendar', function () {

                $('#cc').calendar({

                    width: 180,

                    height:180

                });

            });

        }

        function load2() {

            using(['dialog', 'messager'], function () {

                $('#dd').dialog({

                    title: 'dialog',

                    width: 300,

                    height:200

                });

                $.messager.show({

                    title: 'info',

                    msg:'dialog created'

                });

            });

        }

    </script>

</head>

<body>

    <h1>easy loader</h1>

    <a href="#" class="easyui-linkbotton" onclick="load1()">Load Calendar</a>

    <a href="#" class="easyui-linkbotton" onclick="load2()">Load Dialog</a>

    <div id="cc"></div>

    <div id="dd"></div>

</body>

</html>

方法load1()用来实现日历的载入。方法load2()有2个载入，但是只绑定在一个div上。其中linkbotton的样式在easyui中已经定义好了，包括calendar，dialog，messager的样式都不需要自己写具体的代码，只要引入就可以了。

很简单的代码，不过却是学习的第一步。好好坚持，fighting!

easyui学习日记20141213的更多相关文章

  1. Linux学习日记-使用EF6 Code First(四)

    一.在linux上使用EF 开发环境 VS2013+mono 3.10.0 +EF 6.1.0 先检测一下EF是不是6的 如果不是  请参阅 Linux学习日记-EF6的安装升级(三) 由于我的数据库 ...

  2. Asp.Net MVC4 + Oracle + EasyUI 学习 序章

    Asp.Net MVC4 + Oracle + EasyUI  序章 -- 新建微软实例 本文链接:http://www.cnblogs.com/likeli/p/4233387.html 1.  简 ...

  3. android学习日记05--Activity间的跳转Intent实现

    Activity间的跳转 Android中的Activity就是Android应用与用户的接口,所以了解Activity间的跳转还是必要的.在 Android 中,不同的 Activity 实例可能运 ...

  4. android学习日记03--常用控件Dialog

    常用控件 9.Dialog 我们经常会需要在Android界面上弹出一些对话框,比如询问用户或者让用户选择.这些功能我们叫它Android Dialog对话框 对话框,要创建对话框之前首先要创建Bui ...

  5. android学习日记03--常用控件checkbox/radiobutton

    常用控件3.checkbox 复选框,确定是否勾选,点击一下勾选,点击第二下取消,当有一系列备选项时适合用checkbox控件,方便用户提交数据. 贴上例子Activity的java代码 packag ...

  6. android学习日记03--常用控件button/imagebutton

    常用控件 控件是对数据和方法的封装.控件可以有自己的属性和方法.属性是控件数据的简单访问者.方法则是控件的一些简单而可见的功能.所有控件都是继承View类 介绍android原生提供几种常用的控件bu ...

  7. Zend Framework学习日记(2)--HelloWorld篇(转)

    Zend Framework学习日记(2)--HelloWorld篇 这一篇主要演示如何用zf命令行工具建立一个基于Zend Framework框架的工程,也是我初学Zend Framework的小练 ...

  8. Zend Framework学习日记(1)--环境搭建篇(转)

    Zend Framework学习日记(1)--环境搭建篇 (1)开发工具 Zend Framework框架:http://framework.zend.com/download/latest 包含2个 ...

  9. Python 学习日记（第三周）

    知识回顾 在上一周的学习里,我学习了一些学习Python的基础知识下面先简短的回顾一些: 1Python的版本和和安装 Python的版本主要有2.x和3.x两个版本这两个版本在语法等方面有一定的区别 ...

随机推荐

  1. 编程实现Windows系统自动登录

    编程实现Windows系统自动登录 原理: 通过注册表修改实现.Windows内置了自动登录的机制,在登录系统时,winlogon会检查注册表下有没有设置自动登录,如果设置了就上就会读取用户名和密码, ...

  2. .NET(C#)：XmlReader和Whitespace以及MoveToContent和ReadToFollowing方法

    原文 http://www.cnblogs.com/mgen/archive/2012/04/26/2471403.html XmlReader默认是读取XML文件中的Whitespace和注释的. ...

  3. 串的模式匹配——Brute-Force算法

    Brute-Force算法的基本思路为:从目标串s=“s0s1...sn-1”的第一个字符开始和模式串t=“t0t1t2...tn-1”中的第一个字符比较,若相等,则继续逐个比较后续字符: 否则从目标 ...

  4. Is it possible to implement a Firebug-like “inspect element” DOM element highlighter with client-side JavaScript?

    Is it possible to implement a Firebug-like "inspect element" DOM element highlighter with ...

  5. S3C6410 GPIO操作接口

    在后面的驱动学习中,需要对GPIO进行一系列的操作,了解这些引脚操作有助于编码的效率. 一.配置GPIO S3C6410要使用其引脚时,需要对其进行配置,如配置为输入/输出/中断等功能,根据芯片手册来 ...

  6. Android项目中包名的改动

    通常改动包名时会造成R文件错误,而且有时带有原因不明的Manifest文件里多处文本混乱. 所以,将眼下觉得最为简洁方便的改动包名流程记录例如以下: 如果我们眼下的包名为com.pepper.util ...

  7. 整数数组的定义，然后输入一个整数X,假定X不在这个数组，返回小于X位置的最大数目i而超过X位置的最小数目j

    //整数数组的定义,然后输入一个整数x,假定X不在这个数组,返回小于X位置的最大数目i而超过X位置的最小数目j: //如果X在该阵列,返回位置的阵列中的数. 资源: #include<iostr ...

  8. 手把手教你在openshift上搭建wordpress博客（二）

    相同公布于:http://www.longgaming.com/archives/128 推荐前往阅读 这一篇文章主要介绍一些经常使用插件的使用和配置. 下面是我个人安装的一些插件.大家能够依据须要自 ...

  9. EBS OAF 开发中的OAMessageRadioGroup控件

    EBS OAF 开发中的OAMessageRadioGroup控件 (版权声明,本人原创或者翻译的文章如需转载,如转载用于个人学习,请注明出处:否则请与本人联系,违者必究) 简单介绍 RadioGro ...

  10. 【踩坑】近来在Firefox上遇到的一些坑

    因为工作一年多以来,做的工作基本都是和webkit系列打交道. 先是做m站,后来做了两个app内嵌的hybrid项目,从来只考虑webkit前缀和相关的伪类. 最近四个多月开始做内部的管理系统,写写样 ...