zoukankan      html  css  js  c++  java
  • easyUI学习笔记一

    1.引用js文件

        <script type="text/javascript" src = jquery-easyui/jquery.min.js> </script>
        <script type="text/javascript" src = jquery-easyui/jquery.easyui.min.js> </script>
        <script type="text/javascript" src = jquery-easyui/locale/easyui-lang-zh_CN.js> </script>
        <script type="text/javascript" src ="index.js"></script>  <!-- 自定义js -->
    View Code

    2.引用css文件

    <link rel="stylesheet"  href="jquery-easyui/themes/default/easyui.css">
        <link rel="stylesheet"  href="jquery-easyui/themes/icon.css">
    View Code

    3.第一个demo

    <!DOCTYPE html>
    <html>
    <head>
        <title>easyui学习</title>
        <script type="text/javascript" src = jquery-easyui/jquery.min.js> </script>
        <script type="text/javascript" src = jquery-easyui/jquery.easyui.min.js> </script>
        <script type="text/javascript" src = jquery-easyui/locale/easyui-lang-zh_CN.js> </script>
        <link rel="stylesheet"  href="jquery-easyui/themes/default/easyui.css">
        <link rel="stylesheet"  href="jquery-easyui/themes/icon.css">
    </head>
    <body>
    <div class="easyui-dialog" style="500px;height:500px" data-options="title:'标题 ',collapsible:true,iconCls:'icon-ok'">
    内容部分</div>
    
    </body>
    </html>
    View Code

    4.js调用dialog

       <div id ="box" title="标题" style="500px;height:500px">
            内容部分
      </div>
    View Code
    $(function(){
        $('#box').dialog();
    })
    View Code

    5.可拖动

    $(function(){
    
             $('#box').draggable();
    
    })
    View Code

    6.拖放Droppable

    <!DOCTYPE html>
    <html>
    <head>
        <title>easyui学习</title>
        <script type="text/javascript" src = jquery-easyui/jquery.min.js> </script>
        <script type="text/javascript" src = jquery-easyui/jquery.easyui.min.js> </script>
        <script type="text/javascript" src = jquery-easyui/locale/easyui-lang-zh_CN.js> </script>
    
        <script type="text/javascript" src ="index.js"></script>  <!-- 自定义js -->
    
        <link rel="stylesheet"  href="jquery-easyui/themes/default/easyui.css">
        <link rel="stylesheet"  href="jquery-easyui/themes/icon.css">
    </head>
    <body>
    <div id="dd"  style=" 600px;height: 600px;background-color:red;" ></div>
    
      <div id ="box" title="标题" style="500px;height:500px;background-color: green;">
            <span id="span">内容部分</span>
      </div>
    
    <!--    <div id ="box" title="标题" style="500px;height:500px">
            内容部分
      </div> -->
    </div>
            
    </body>
    </html>
    View Code
    $(function(){
    $("#dd").droppable({
    accept:'#box',
    onDragEnter:function(e,source){
      $(this).css("background-color",'blue');
    },
    onDragLeave:function(e,source){
      $(this).css("background-color",'red');
    }
    });
    
        $('#box').draggable();
    })
    View Code
  • 相关阅读:
    Java使用默认浏览器打开指定URL
    eclipse.ini内存设置
    Eclipse关联Java源代码
    C#调用Java代码
    UVA12161 Ironman Race in Treeland
    [JSOI2012]玄武密码
    着色问题
    luogu P2680 运输计划
    [BJWC2010]严格次小生成树
    [SDOI2015]异象石
  • 原文地址:https://www.cnblogs.com/SoftWareIe/p/10990808.html
Copyright © 2011-2022 走看看