easyUI学习笔记一

时间：2019-06-08 16:23:21 阅读：110 评论：0 收藏：0 [点我收藏+]

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

easyUI学习笔记一

原文：https://www.cnblogs.com/SoftWareIe/p/10990808.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)