首页 > 其他 > 详细

easyUI学习笔记二

时间:2019-06-15 20:51:13      阅读:96      评论:0      收藏:0      [点我收藏+]

1.  拖拉大小

<!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"  data-options="maxWidth:600,maxHeight:600" style="width: 100px;height: 100px;border:1px solid" ></div>
</div>
        
</body>
</html>
技术分享图片
$(function(){
  $(‘#dd‘).resizable();
})
View Code

2.  Tooltip 提示框

技术分享图片
$(function(){
$("#box").tooltip({
content:"提示框"
})
})
View Code
技术分享图片
<body>
  <a href="" id="box">点击我</a>
</div>
        
</body>
View Code

3.  Progressbar

技术分享图片
$(function(){
   $("#box").progressbar({
       value:30,
       height:50,
       width:400,
       text:‘{value}元‘

   });

})
View Code

4.  Accordion

技术分享图片
</body>

<body>
 <div id=‘box‘ class="easyui-accordion" style="width: 200px;">
    <div title="ad1">ad1</div>
    <div title="ad2">ad2</div>
    <div title="ad2">ad2</div>
 </div>
        
</body>
View Code

5.  Layout

技术分享图片
<body>
 <div id=‘box‘ style="width: 400px"></div>
        
<body id="box" class="easyui-layout">

    <div data-options="region:‘north‘ " style="height: 100px" title="上北" ></div>
    <div data-options="region:‘south‘ " style="height: 100px" title="下南" ></div>
    <div data-options="region:‘west‘ " style="width: 100px" title="左西" ></div>
    <div data-options="region:‘east‘ " style="width: 100px" title="右东" ></div>
    <div data-options="region:‘center‘ " title="中间" ></div>
</body>
View Code

技术分享图片

 

easyUI学习笔记二

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!