//引用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‘)); //使用开发者工具打出相关属性
});
时间： 2025-01-18 13:56:18