一.引入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. Selenium自动化中DOM，XPATH，CSS定位Web页面对象的优劣性分析

    加速IE浏览器自动化执行效率:Selenium自动化中DOM,XPATH,CSS定位Web页面对象的优劣性分析 1.技术背景       在Web应用中,用户通过键盘在输入框中输入值和鼠标点击按钮,链 ...

  2. haohantechsoft-PDA软件,PDA管理软件,PDA管理系统,仓库PDA销售开单盘点软件

    为了更好服务于广大服装客户群体进行销售.盘点.调拨配送等.推出基于无线网络版移动PDA销售开单盘点软件系统.该系统支持无线3G.WIFI.GPRS系统,用户可以手持PDA在无线网络连接状态下进行销售. ...

  3. Mesh系列文章 - 自定义Mesh

    就是在做项目的过程中,有用到三角形的,今天就写一下如何自定义三角形? 先截个图,让大家有个感性认识! //引用 using UnityEngine;        using System.Colle ...

  4. BZOJ4389 : ZYB and Trees

    Link-Cut Tree维护. 每个点x维护以下信息: v:这个点的点权 s:实链上的信息和 st:子树信息和(不包括链上) sa:子树+链上的信息和 as:所有虚儿子的sa的和 则有 s[x]=v ...

  5. 洛谷 P1009 阶乘之和 Label：高精度

    题目描述 用高精度计算出S=1!+2!+3!+…+n!(n≤50) 其中“!”表示阶乘,例如:5!=5*4*3*2*1. 输入输出格式 输入格式: 一个正整数N. 输出格式: 一个正整数S,表示计算结 ...

  6. 遍历josn的三种方式

    第一种:使用for循环 js代码: function CyclingJson1() { var testJson = '[{ "name": "小强", &qu ...

  7. <META http-equiv=X-UA-Compatible content=IE=EmulateIE7>

    未来兼容性中的 META 标记和锁定 注意:本文档是预备文档,随时可能变更. 对于 Web 开发人员来说,文本兼容性是一个要考虑的重要问题.Windows Internet Explorer 8 引入 ...

  8. float塌陷有关问题

    程序代码需要用到的CSS样式body{ margin:0px; padding:0px; text-align:center; font:Arial, Helvetica, sans-serif; f ...

  9. [转载]从GetSafeHwnd()和GetSafeHandle()分析句柄和指针

    GetSafeHwnd()和GetSafeHandle()的主要区别: 1.使用者不同: (1)窗体使用: GetSafeHwnd()用于获取窗体的安全句柄(即HWND),有了HWND我们就可以方便的 ...

  10. Css3 - 全面学习

    css3实验.生成.学习网站 http://www.css3maker.com/ http://www.css3.me/ 查询前缀和兼容性 http://caniuse.com/ 1.文本阴影 < ...