一.引入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. HTML列表-框架

    <frameset frameborder="边框大小" 列cols="各窗口百分比,隔开" 行rows=“各窗口百分比”> <frame n ...

  2. HDU1796 How many integers can you find（容斥原理）

    题目给一个数字集合,问有多少个小于n的正整数能被集合里至少一个元素整除. 当然是容斥原理来计数了,计算1个元素组合的有几个减去2个元素组合的LCM有几个加上3个元素组合的LCM有几个.注意是LCM. ...

  3. 操作properties文件，注意抹掉最前面的"file:"

    package com.xiewanzhi.property; import java.io.BufferedInputStream; import java.io.File; import java ...

  4. BZOJ3776 : 警察局

    怎么3776又换题目了…换题目了…题目了…目了…了… SCC缩点后只有入度或者出度为0的点必须要放警察局 假设一共有t-1个入度或者出度为0的SCC q[1]-q[t-1]表示这些SCC中点的个数 q ...

  5. [Cocos2d-x For WP8]Menu菜单

    菜单栏这是游戏里面基本的控件来的, 头文件: #include <CCMenu.h>                        继承关系图:   头文件:  #include < ...

  6. Codeforces Round #264 (Div. 2)

    http://codeforces.com/contest/463 这场是我人生第一场cf啊.. 悲剧处处是啊. 首先,看不懂题,完全理解不了啊.都是wa了好几次才过的 所以a和b这两sb题我做了1个 ...

  7. 使 SortList 实现重复键排序

    SortList 默认对按Key来排序,且Key值不能重复,但有时可能需要用有重复值的Key来排序,以下是实现方式: 1.对强类型:以float为例 #region 使SortList能对重复键排序 ...

  8. Vim 学习资料

    VIM中文手册 简明 Vim 练级攻略 所需即所获:像 IDE 一样使用 vim

  9. [转载] c++ cout 格式化输出浮点数、整数及格方法

    C语言里可以用printf(),%f来实现浮点数的格式化输出,用cout呢...? 下面的方法是在网上找到的,如果各位有别的办法谢谢留下... iomanip.h是I/O流控制头文件,就像C里面的格式 ...

  10. [转] - QBuffer类参考

    QBuffer类参考 QBuffer类是一个操作QByteArray的输入/输出设备. 详情请见…… #include <qbuffer.h> 继承了QIODevice. 所有成员函数的列 ...