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="width:500px;height:500px" data-options="title:'标题 ',collapsible:true,iconCls:'icon-ok'">
内容部分</div>

</body>
</html>

View Code

4.js调用dialog

   <div id ="box" title="标题" style="width: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="width: 600px;height: 600px;background-color:red;" ></div>

  <div id ="box" title="标题" style="width:500px;height:500px;background-color: green;">
        <span id="span">内容部分</span>
  </div>

<!--    <div id ="box" title="标题" style="width: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

来源：https://www.cnblogs.com/SoftWareIe/p/10990808.html

标签

javascript

脚本

jquery