一.引入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. Hark的数据结构与算法练习之图书馆排序

    算法说明 图书馆排序是插入排序的变种,典型的以空间换时间的一种方法.我个人感觉这种思路可以学习借鉴,但直接使用的场景应该不大. 我们知道,真正的插入排序通常往前边插入元素后,我们要把后边所有的元素后移 ...

  2. Linux常用命令_（系统管理）

    用户管理:useradd.passwd.userdel用户组管理:groupadd.groupdel.gpasswd系统信息:uname.who.whoami.id登录注销:login.logout. ...

  3. http://www.open-open.com/lib/view/open1397274257325.html

    http://www.open-open.com/lib/view/open1397274257325.html

  4. spring实战四之Bean的自动装配(注解方式)

    使用注解装配: 从spring2.5开始,Spring启用了使用注解自动装配Bean的属性,使用注解方式自动装配与在XML中使用 autowire 属性自动装配并没有太大区别,但是使用注解方式允许更细 ...

  5. 【转】CSS清除浮动_清除float浮动

    CSS清除浮动方法集合 一.浮动产生原因 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 浮动产生样式效果截图 ...

  6. BZOJ3073 : [Pa2011]Journeys

    用线段树套链表维护所有边,用set维护未访问过的点 然后BFS,每次在线段树上找边,然后在set中查询点 一条边使用之后就没有用了,所以在链表中将它删去 时间复杂度$O((n+m)\log n+m\l ...

  7. BZOJ3780 : 数字统计

    从低位到高位数位DP,f[i][j][k]表示已经填了后i位,转化的数字为j,后i位与x后i位的大小关系为k的方案数. #include<cstdio> const int N=202,B ...

  8. 【BZOJ】2802: [Poi2012]Warehouse Store（贪心）

    http://www.lydsy.com/JudgeOnline/problem.php?id=2802 自己yy了一下... 每一次如果够那么就买. 如果不够,考虑之前买过的,如果之前买过的比当前花 ...

  9. 给iOS工程增加Daily Build

    给iOS工程增加Daily Build  前言 Daily Build 是一件非常有意义的事情,也是敏捷开发中关于 "持续集成" 的一个实践.Daily Build 对于开发来说有 ...

  10. HP StorageWorks MSL2024 Tape Libraries - Tape library Error Codes

    Main error codes Error Code Description Details and Solution 80 Can not initialize bar code reader P ...