一.引入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. aac格式解析

    AAC格式有以下两种: ADIF:Audio Data Interchange Format 音频数据交换格式.这种格式的特征是可以确定的找到这个音频数据的开始,不需进行在音频数据流中间开始的解码,即 ...

  2. Visual studio 中或IIS中使用Less预处理语言

    在用css预编译语言less时,在visual studio中编写静态页时报错,错误如下: 原因: 经过一番搜索后终于找到解决办法,原来是 visual studio中绑定的IIS Express没有 ...

  3. extjs 选项卡

    yufenghou extjs 选项卡 <%@ page language="java" import="java.util.*" pageEncodin ...

  4. javascript，HTML，PHP，ASP做301跳转代码 SEO优化设置

    URL HTTP Redirection URL http redirection is an automatic URL change operation from one URL to anoth ...

  5. 使用CSS修改HTML5 input placeholder颜色

    HTML <input type="text" placeholder="Value" /> 有三种实现方式:伪元素(pseudo-elements ...

  6. 推荐一个非常COOL的开源相册程序!

    不知道大家有没想过有一个完全属于自己的网络相册?现在网上的相册程序已可以说多不胜数,那么到底要使用哪个会比较好呢? 之前我也在为此事烦恼过,在网上找了很多个程序试了,但都没达到我的要求,后来发终于功夫 ...

  7. 【POJ】1279 Art Gallery

    http://poj.org/problem?id=1279 题意:给一个n个点的多边形,n<=1500,求在多边形内能看到所有多边形上的点的面积. #include <cstdio> ...

  8. Notepad++ Shortcuts 快捷键

    Ctrl-C   Copy Ctrl-X   Cut Ctrl-V   Paste Ctrl-Z   Undo Ctrl-Y   Redo Ctrl-A   Select All Ctrl-F   L ...

  9. sql-mode="STRICT_TRANS_TABLES,NO_AUTO_CREATE_USER,NO_ENGINE_SUBSTITUTION"问题解决

    安装一个软件时,遇到这个问题sql-mode="STRICT_TRANS_TABLES,NO_AUTO_CREATE_USER,NO_ENGINE_SUBSTITUTION" 上网 ...

  10. TinyMCE在线编辑器使用方法初探

    首先,下载TinyMCE包,地址:http://www.tinymce.com/ 然后将下载后的包解压,放置到一个文件夹下,创建一个html文件,并在其中书写如下代码: <!DOCTYPE ht ...