标签：
//引用easyui 文件的基本格式
<!DOCTYPE html>
<html>
<head>
<title>jQuery Easy UI</title>
<meta charset="UTF-8" />
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script> //提示插件
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />
</head>
<body>
</body>
</html>
//对话框dialog
<!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta charset="UTF-8" /> <script type="text/javascript" src="easyui/jquery.min.js"></script> <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script> <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script> <script type="text/javascript" src="js/index.js" ></script> <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" /> <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" /> </head> <body> <div id="box" title="标题" style="width:400px;height:200px"> 对话框哈哈哈 </div> </body> </html>
$.parser.auto =false; // 关闭渲染组件的功能 false的话就不会加载对应的样式 要放在$(function(){}) 外面 $(function(){ $(‘#box‘).dialog();//js方式调用 也可以css方式调用class="easyui-dialog" $.parser.parse();//渲染界面上所有的ui $.parser.parse(‘#boxparentid‘); // 渲染指定的ui id为带有easyui格式的标签的父容器的id }); $.parser.onComplete = function(){ //ui解析完毕后执行的事件 要放在$(function(){}) 外面 alert(‘ui解析完毕‘); };
//拖动组件draggable
<!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta charset="UTF-8" /> <script type="text/javascript" src="easyui/jquery.min.js"></script> <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script> <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script> <script type="text/javascript" src="js/index.js" ></script> <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" /> <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" /> </head> <body> <div id="box" style="width:400px;height:200px;background:orange"> <span id =‘pox‘>div内容部分</span> </div> </body> </html>
$(function(){ //$(‘#box‘).draggable(); //可以拖动div $.fn.draggable.defaults.cursor = ‘text‘; //为拖动组件的属性赋默认值 之后所有的draggable组件的cursor属性的默认值都是text $(‘#box‘).draggable({ // draggable的一些属性 可以以键值对的方式传参数 // revert:true, //停止拖动且松开鼠标左键的时候 div会回到起始的位置 // cursor:‘text‘, //移动时鼠标的样式 // handle:‘#pox‘, //只有鼠标点到div内容部分的时候 才可以拖动 // disabled:true, //将div设置为不可拖动 // edge:50,//div上下左右的50px 是不可以拖动的 // axis:‘v‘,//只可以上下拖动 // axis:‘h‘,//只可以左右拖动 // proxy:‘clone‘,//移动的时候会复制一个出来移动 移动结束后原来的会消失 // deltaX:20,//要配合proxy使用 移动时鼠标的位置相当于div左上角 向左偏移20px // deltaY:20,//要配合proxy使用 移动时鼠标的位置相当于div左上角 向上偏移20px /* proxy:function(source){ //source指的是id为box的div对象 var p = $(‘<div style="width:400px;height:200px;border:1px dashed #ccc">‘); p.html($(source).html()).appendTo(‘body‘); //会拖出来一个虚线框 框中的内容就是id为box的div的内容 return p; } */ // draggable的一些事件 /* onBeforeDrag:function(e){ alert(‘拖动之前触发‘); } */ /* onStartDrag:function(e){ // alert(‘拖动时触发‘); console.log($(‘#box‘).draggable(‘proxy‘)); //使用开发者工具打出相关属性 其实就是id为box的div本身 } */ /* onDrag:function(e){ alert(‘拖动过程中触发‘); } */ /* onStopDrag:function(e){ alert(‘在拖动停止时触发‘); } */ }); // draggable的一些方法 //$(‘#box‘).draggable(‘disabled‘); //禁止拖动 //$(‘#box‘).draggable(‘enable‘); //可以拖动 console.log($(‘#box‘).draggable(‘options‘)); //使用开发者工具打出相关属性 });
标签：
原文地址：http://www.cnblogs.com/YyuTtian/p/4282703.html
