一.引入jquery,jquery_easyui，jquery_easyui css,图标css,本地语言

二.通过学习jquery_easyui 手册，用简单的js代码来实现(按钮、表单、表格、弹出框)等各种效果

1.Parser（解析器）

2.Draggable（拖动）

<body>
<div id="box" style="width:400px; height:200px; background:orange">
    <span id="pox">内容文本</span>
</div>
</body>
<script type="text/javascript">
$(function(){
    $.fn.draggable.defaults.cursor = 'text';//所有的鼠标拖动样式为text;
    $("#box").draggable({
        //revert:true, //如果设置为true，在拖动停止时元素将返回起始位置。
        //cursor:"text",//拖动时的CSS指针样式。
        //handle:"#pox",//设置那块地方能拖动(开始拖动的句柄)。
        //disabled:false,//true不能拖动,false能拖动。
        //edge:10,//上下左右有10px的位置不能实现拖动
        //axis:"v",//‘v’只能垂直拖动,'h'水平拖动,默认为null,垂直水平都可以。
        //delay:500,//定义元素在多少毫秒后开始移动。（该属性自1.4.2版开始可用）
        //proxy:"clone",
        //deltaX:50,//配合proxy,拖动时,鼠标固定在元素左边50px的地方。
        //deltaY:50,

        /*proxy: function(source){    //拖动时在代理对象内获取元素的html内容
        var p = $('<div style="border:1px solid #ccc;width:80px"></div>');
        p.html($(source).html()).appendTo('body');
        return p;
        },*/

        /*proxy: function(source){        //创建一个简单的代理对象。
        var p = $('<div style="border:1px solid #ccc;width:400px;height:200px"></div>');
        p.appendTo('body');
        return p;
        }*/

        /*onBeforeDrag:function(e){
            $("#box").css("background","green");//在拖动之前触发，返回false将取消拖动。
        },

        onStartDrag:function(e){
            $("#box").css("background","black");//在目标对象开始被拖动时触发。
        },

        onDrag:function(e){
            $("#box").css("background","#CF3");//在拖动过程中触发，当不能再拖动时返回false。
        },
        */
/*        onStopDrag:function(e){
            //$("#box").css("background","red");//在拖动停止时触发。
            console.log($("#box").draggable('proxy'));//在触发是才可以调用,如果代理属性被设置则返回该拖动代理元素。
        },*/
        });
        //$("#box").draggable('disable');//禁止拖动,另起draggable方法
        //$("#box").draggable('able');//恢复拖动,另起draggable方法
        //console.log($("#box").draggable('options'));//可以输出属性,类似var_dump($a),另起draggable方法;

    })
</script>
</html>

3.Droppable（放置）：data-options="accept:'#box,#pox'"设置接收#box,#pox元素进来

<body>
<div id="dd" style="width:600px; height:400px; background-color:#000"></div>
<div id="box" style="width:100px; height:100px; background:#ccc">
    <span id="pox">内容文本</span>
</div>
</body>
<script type="text/javascript">
$(function(){
    $.fn.droppable.defaults.disabled = true;//设置页面都禁止放置,#dd里面单独设置disable:false后，可以放置,只在$("#dd").droppable({})里面可以
    $("#dd").droppable({
        accept:'#box',//确定哪些可拖拽元素将被接受。
        disabled:false,//如果为true，则禁止放置。
        onDragEnter:function(e,source){//在被拖拽元素到放置区内的时候触发，source参数表示被拖拽的DOM元素。
            $(this).css('background','blue');
            //$("#box").css('background','orange');
            //alert('enter');
            },
        onDragOver:function(e,source){//在被拖拽元素经过放置区的时候触发，source参数表示被拖拽的DOM元素。
            $(this).css('background','green');
            //$("#box").css('background','red');
            //alert('over');
            },
        //onDragEnter值触发一次,onDragOver在不停拖动的过程中不停被触发
        onDragLeave:function(e,source){//在被拖拽元素离开放置区的时候触发，source参数表示被拖拽的DOM元素。
            $(this).css('background','red');
            },
        onDrop:function(e,source){//onDrop是把元素放入到放置区，松开鼠标左键后触发的事件
            $(this).css('background','yellow');
            },
        })
    })
</script>
</html>

4.Resizable（调整大小）

<body>
<div id="dd" style="width:100px; height:100px; border:3px solid #C39"></div>
</body>
<script type="text/javascript">
$(function(){
    $("#dd").resizable({
    //disabled:true,
    //handles:'e,s,se',
    //minwidth:200,
    //minheight:200,
    //maxwidth:400,
    //maxheigth:400,
    //edge:50,//拖拉的接触面
    onStartResize:function(e){//在开始改变大小的时候触发。
    $("#dd").css('background','yellow');
    },

    onResize:function(e){//在调整大小期间触发。当返回false的时候，不会实际改变DOM元素大小。
    $("#dd").css('background','blue');
    return false;
    },
    //onStartResize只触发一次,onResize不停的被触发

    onStopResize:function(e){//在停止改变大小的时候触发。
    $("#dd").css('background','black');
    },
    });
    console.log($('#dd').resizable('options'));//打印默认值
})
</script>
</html>

5.Tooltip（提示框）

<body style="margin:200px">
<a href="###" id="box">Hover Me</a>
</body>
<script type="text/javascript">
$(function(){
    $('#box').tooltip({
    content:'<strong>这里可以输入提示内容</strong>',
    position:'top',//提示框在哪里出现
    trackMouse:true,//提示框跟随鼠标
    //showEvent:'click',//单击显示
    //hideEvent:'dblclick',//双击隐藏
    showDelay:1000,//延时多少秒显示提示框。
    hideDelay:1000,//延时多少秒隐藏提示框。

    /*onShow:function(e){
        alert('显示的时候触发');
    },*/

    /*onHide:function(e){
    alert('隐藏的时候触发');
    },*/

    /*4.onUpdate:function(content){
    alert('内容改变了为:'+content);
    },*/

    /*onPosition:function(left,top){
    alert('内容改变了');
    },*/

    onPosition:function(left,top){
    alert('内容改变了');
    },
    });

    /*4.$("#box").click(function(){
        $(this).tooltip('update','改变了！');
    })*/
})
</script>
</html>

jquery_easyui的使用的更多相关文章

  1. jquery_easyui 相关问题

    1. datagrid点击title,无法进行客户端排序. 增加属性 data-options="singleSelect:true,collapsible:true,url:'/ViewS ...

  2. jquery_EasyUI的学习

    1 Accordion(可折叠标签) 1.1 实例 1.1.1 代码 <html> <head> <meta http-equiv="Content-Type& ...

  3. jQuery_easyUI 合并单元格 （DataGrid 数据表格）

    <table id="dg" style="height:350px;z-index:-5555; " class="easyui-datagr ...

  4. jquery_EasyUI使用细节注意

    一.属性key不加双引号,value加双引号,对于url的value,添加‘’单引号:url的访问地址可以使用以下格式: datagrid中的url格式: var datagrid; $(functi ...

  5. jquery_easyUI 键盘弹起事件

    $('#num').numberbox('textbox').bind('keyup', function(event) { });

  6. EasyUI datagrid优化

    easyui datagrid 在IE上加载速度慢, 150行数据就无法忍受了. firefox加载速度还可以. jquery easyui datagrid使用参考 http://www.cnblo ...

  7. SSh结合Easyui实现Datagrid的分页显示

    近日学习Easyui,发现非常好用,界面很美观.将学习的心得在此写下,这篇博客写SSh结合Easyui实现Datagrid的分页显示,其他的例如添加.修改.删除.批量删除等功能将在后面的博客一一写来. ...

  8. 初识EasyUI

    1.下载Jquery_EasyUI文档,将里面的spket-1.6.18.jar复制放到适合的位置(随意,不要有中文路径).使用命令行将其安装:  进入到文件目录下:   弹出安装界面选择下一步: 选 ...

  9. TrimPath - Js模板引擎

    当页面中引用template.js文件之后,脚本将创建一个TrimPath对象供你使用. parseDOMTemplate(elementId,optionalDocument) //获得模板字符串代 ...

随机推荐

  1. loadrunner关联的感悟：

    首先用URL模式录制脚本: 切换到树模式下: 很容易查看到关联的位置,由此知道产生动态值得请求为nav.pl 但是在html中我们怎么查看关联值在哪里呢: 今天无意中意识到这个问题: 先看树视图脚本:

  2. POJ1523 SPF（割点模板）

    题目求一个无向图的所有割点,并输出删除这些割点后形成几个连通分量.用Tarjan算法: 一遍DFS,构造出一颗深度优先生成树,在原无向图中边分成了两种:树边(生成树上的边)和反祖边(非生成树上的边). ...

  3. ZOJ2770 Burn the Linked Camp（差分约束系统）

    区间和一定要联系到前缀和. 这题,把前缀和看作点,从s0到sn: 对于每一个营地i的容量capi,有这么个关系si-si-1<=capi: 对于每一个区间的评估i,j,k,有sj-si-1> ...

  4. 【Linux下进程机制】从一道面试题谈linux下fork的运行机制

    今天一位朋友去一个不错的外企面试linux开发职位,面试官出了一个如下的题目: 给出如下C程序,在linux下使用gcc编译: #include "stdio.h" #includ ...

  5. BZOJ3498 : PA2009 Cakes

    令三元环(i,j,k)中i>j>k,则每条边只需要从大点连向小点 设d[x]表示从x连出的边的条数 从1到n枚举点i,然后枚举所有与i相连的边(i,x)(x<i) 如果$d[x]\l ...

  6. BZOJ3217 : ALOEXT

    替罪羊树套Trie,Trie合并用线段树合并,注意常数优化. 顺便AC800题纪念~~~ #include<cstdio> #include<cmath> #include&l ...

  7. HTML6 展望

    HTML5 概述 HTML5 是 HTML 语言最受欢迎的版本之一,它支持音频和视频.离线存储.移动端.和标签属性等等.还提供了<article>, <section>, &l ...

  8. JAVA计算文件大小

    File f = new File(save_path+File.separator + resouce_id+".zip"); FileInputStream fis = new ...

  9. data structure | heap

    #include <iostream> #include <string.h> using namespace std; template <class T> cl ...

  10. 2014 top100

    下面是 TOP 100 的软件列表: 1. JFinal JFinal 是基于 Java 语言的极速 WEB + ORM 框架,其核心设计目标是开发迅速.代码量少.学习简单.功能强大.轻量级.易扩展. ...