1、设置一个区域可拖动的
第一种方法直接用html
第一种方法直接用html
5、进度条progressbar
//先写一个a标签
8、分类accordion
//以上div设置是固定的和tabs一样 有一个div包裹然后里面写对应的div 你要多少个选项就写多少个div
12、数字微调
14、窗口window
15、dialog弹出框
第二种是用jquery方法首先要导入两个库jquery
16、消息实体框
记载远程数据到下拉列表
18、回车事件
19、鼠标右击指定元素或者区域弹出菜单
js写法
网页代码如下
20、获取到鼠标在页面上点击时的xy坐标
js写法
第一种方法直接用html
<div id="dd" style="width:100px;height:100px;">
<div id="title" style="background:#ccc;">title</div>
</div>第二种是用jquery方法首先要导入两个库jquery.min.js和jquery.easyui.min.js
<link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="themes/icon.css">
<link rel="stylesheet" type="text/css" href="demo.css">以上是easyui的自己的样式 也导入进去 不然页面效果不好看
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.easyui.min.js"></script>$('#dd').draggable({
handle:'#title',
revert:true ---拖动结束后元素返回起始位置
...
})第一种方法直接用html
<div id="rr"
class="easyui-resizable" 这两个数行一定要加上
data-options="maxWidth:800,maxHeight:600"
style="width:100px;height:100px;border:1px solid #ccc;">
</div>$('#rr').resizable({
maxWidth:800,
maxHeight:600,
minWidth:100,
minHeight:20
})第一种方法直接用html
<div id="pp"
class="easyui-pagination" 设置这个div需要什么功能 pagination代表分页
data-options="total:2000,pageSize:10" 设置总页数2000和每页10 那就是200页
style="background:#efefef;border:1px solid #ccc;"></div>$('#pp').pagination({
total:200,
pageSize:10，
pageList:[10,20,50,100] 这个属性是每页可以显示多少条数据 默认为10 20 50 100 那么的话pageSixe的值只能是这几个值中的一个
loading:true显示页面正在载入
});$('#ss').searchbox({
searcher:function(value,name){ //这个方法是当用户点击搜索按钮的时候 会把他选择的搜索选项的名字和输入的值弹出来
alert(value+name) 搜索的name值就是 之前设置的子选项的name：sports 这个值就是sports
},
menu:'#mm', 设置菜单选项是哪个
prompt:'搜索框的提示语'
})；<input id="ss" style="width:300px;"></input> 写一个input输入框给定ID和样式
<div id="mm" style="width:120px"> 写一个div来设置搜索框里的选项
<div data-options="name:'all',iconCls:'icon-ok'">All News</div> //下面是子div 你又多少个选项就写多少个div
<div data-options="name:'sports'">Sports News</div> //iconCls:'icon-ok'设置图标
<div data-options="name:'item1'">Search Item1</div>
<div data-options="name:'item2',selected:true">Search Item2</div> //selected:true默认选中状态
<div data-options="name:'item3'">Search Item3</div>
</div>5、进度条progressbar
<div id="p" class="easyui-progressbar" data-options="value:60" style="width:400px;"></div>
<div id="p" style="width:400px;"></div>$('#p').progressbar({
value: 60 //默认值60
onChange:function(newValue,oldValue){
alert(newValue+"----------"+oldValue);//newValue是获取到的新值 oldValue是设置的初始值
}//当值改变的时候就会触发这个事件
});
var value = $('#p').progressbar('getValue'); //获取到一个新值
$('#p').progressbar('setValue', value); //将获取到的新值设置到进度条中//先写一个a标签
<a href="#"style="margin-left:100px; text-decoration:none">点击我</a>
$('#dd').tooltip({
position: 'right',//提示框显示的位置
content: '<span style="color:#fff">This is the tooltip message.</span>',//提示框的内容
trackMouse:true,//允许提示框跟着鼠标移动
})<div id="div"></div>$('#div').panel({
width:300,
height:200,
iconCls:'icon-ok',//设置图标
left:100,//距离左边像素
top:100,//距离上面像素
fit:true,//自适应富容器大小
border:true,//是否显示面板的边框
content:'内容'//面板的主题内容
collapsible:true,//可以折叠
minimizable:true,//显示最大化
maximizable:true//显示最小化
closable:true//是否显示关闭按钮
href:'路径',
loadingMessage:'正在加载，请稍后。。。'//在加载的时候显示的提示语
method:'post',
tool:[
{iconCls:'icon-add',
handler:function(){alert('add')}
}]//自定义工具栏
})<div id="div1">
<div title="asas">asdsd</div>//这两个div是tab选项卡
<div title="111s">asdsd</div>
</div>$('#div1').tabs({
width: 200,
height: 100,
onSelect: function(title) {
alert(title); //选中一个tab时就会触发这个事件 弹出选中的tab的title的值
},
tools: [{ //自定义工具栏
iconCls: 'icon-mini-refresh',
//设置工具栏的图标
handler: function() { //当点击工具栏的图标时触发该事件
alert('refresh'); //弹出提示框
$('#div1').tabs('add', {
//当点击工具栏的图标时 就触发添加tab选项卡的事件
title: "title",
content: "content",
closable: true,
//是否显示关闭按钮
tools: [{ //定义tab的图标
iconCls: 'icon-mini-refresh',
handler: function() {
alert('refresh');
}
}]
})
}
}]
})8、分类accordion
<div id="div2">
<div title="aa">asdsa</div>//这两个div是分类
<div title="bb">bbbb</div>
</div>//以上div设置是固定的和tabs一样 有一个div包裹然后里面写对应的div 你要多少个选项就写多少个div
$('#div2').accordion({
width:200,
height:150,
border:true,
animate,true,
multiple:true,//同时展开多个
selected:0//设置初始化时默认选中的面板索引号 从0开始0代表第一个
onSelect:function(title,index){
alert(title+"--"+index);//当选中一个面板时 会触发这个事件 弹出选中的面板的索引和标题
}
})<div id="mm" class="easyui-menu" style="width:120px;"> 大的div包裹起来
<div>New</div> 第一个菜单选项
<div>
<span>Open</span> 第二个菜单选项
<div style="width:150px;"> 如果有子菜单的话 那么就用一个div将该选项的子选项全部包裹起来
<div><b>Word</b></div>
<div>Excel</div>
<div>PowerPoint</div>
</div> 最后再用一个div将选项和他的子选项全部包裹起来
</div>
<div data-options="iconCls:'icon-save'">Save</div> 第三个选项
<div class="menu-sep"></div> 第四个选项
<div>Exit</div>
</div>10、按钮linkbuttton
<a id="linkbtn" href="#">点击我</a>$('#linkbtn').linkbutton({
iconCls:'icon-save',//设置按钮的图标
text:'点击我'//设置按钮的上面显示的字
toggle:true//
})11、
$('#linkbtn').splitbutton({
menu:'#mm'
})12、数字微调
<input id="ss" required="required" style="width:80px;">$('#ss').numberspinner({
min: 10,
max: 100,
editable: false
});$('#ok').slider({
width:300,
height:10,
mode:'h',
showTip:true,
value:10,
step:1,
rule:[
0,25,50,75,100
]
})14、窗口window
$('#win').window({
width:600,
height:400,
modal:true//是否显示模块化窗口 就是当窗口弹出的时候页面其他链接都无效
})15、dialog弹出框
<div id="dialog" class="easyui-dialog" data-options="iconCls:'icon-save',resizable:true,modal:true" style="width:500px; height:450px;"></div>第二种是用jquery方法首先要导入两个库jquery
$('#dialog1').dialog({
width: 300,
对话框的宽度height: 200,
对话框的高度resizable: true,
是否可以更改大小modal: true,
是否模块化对话框buttons: [{定义对话框下面的按钮比如保存和取消text: '确定',
iconCls: 'icon-ok',
handler: function() {点击按钮触发事件alert("确定");
}
},
{
text: '关闭',
iconCls: 'icon-save',
handler: function() {
alert("关闭");
}
}],
toolbar: [{定义对话框左上方的按钮比如保存和编辑帮助什么的text: '编辑',
iconCls: 'icon-edit',
handler: function() {触发事件alert("编辑");
}
},
{
text: '帮助',
iconCls: 'icon-help',
handler: function() {
alert("帮助");
}
}]
})16、消息实体框
1、
$.messager.alert("温馨提示","消息",'info',function(){
这个回调函数是在用户点击确定后触发 error question warning info
}); //这个对话框有ok按钮2、
$.messager.show({
title:'我的消息',
msg:'消息将在5秒后关闭。',
timeout:5000,
showType:'slide' 在页面右下角显示出来
});3、
$.messager.confirm('确认对话框','你确定要删除吗？',function(r){
if(r){
alert("点的是确定");
}else{
alert("点的是取消");
}
})4、
$.messager.prompt('消息提示','请输入你的姓名:',function(v){
if(v){
alert("你输入的姓名是："+v);
}
});5、
$.messager.progress({
title:'aaaa',
msg:'系统正在注销...',
interval:500
})记载远程数据到下拉列表
<input type="text" id="className" class="easyui-combobox" data-options="valueField:'id',textField:'className'"/>$.ajax({
url:'findClass',
dataType:'json',
type:'post',
success:function(data){
var result =eval(data);
$('#className').combobox('loadData',result);
}
});
$('#className').combobox("getValue");获取的是用户选择的选型的ID
$('#className').combobox("getText");获取的是用户选择的选型的文本值18、回车事件
js写法
document.onkeydown = function(event) {
var e = event || window.event || arguments.callee.caller.arguments[0];
if (e && e.keyCode == 27) { // 按 Esc
//要做的事情
}
if (e && e.keyCode == 113) { // 按 F2
//要做的事情
}
if (e && e.keyCode == 13) { // enter 键
//要做的事情
onPageInit(1);
}
};jquery写法
$(function() {
document.onkeydown = function(e) {
var ev = document.all ? window.event: e;
if (ev.keyCode == 13) {
$('#FormId).submit();//处理事件
}
}
});'19、鼠标右击指定元素或者区域弹出菜单
js写法
document.getElementById("youji").oncontextmenu = youjiEvent; //指定这个元素 给他绑定右击事件
function youjiEvent() { //鼠标右击时显示菜单
$('#mm').menu('show', {
left: x,
hideOnUnhover: false,
//鼠标移走时 菜单不消失
top: y,
onClick: function(item) {
alert(item.name);
}
});
return false; //屏蔽网页本身的右击效果
}网页代码如下
<div id="mm" class="easyui-menu" style="width:120px;">
<div data-options="name:'new'">New</div><div>
<span>Open</span>
<div style="width:150px;">
<div data-options="name:'world'"><b>Word</b></div>
<div data-options="name:'excel'">Excel</div>
<div data-options="name:'ppt'">PowerPoint</div>
</div>
</div>
<div data-options="name:'save',iconCls:'icon-save'">Save</div>
<div class="menu-sep"></div>
<div data-options="name:'exit'">Exit</div>
//鼠标右击的区域
<div id="youji" style="width:200px; height:200px; background-color:#1621E5"></div>$(function() {
$('#youji').mousedown(function(e) {
if (e.which == 1) {
alert("这是左击事件");
} else if (e.which == 2) {
alert("这是中击事件");
} else {
alert("这是右击事件");
return false; //屏蔽不掉网页本身的右击事件
}
});
})20、获取到鼠标在页面上点击时的xy坐标
js写法
var x, y;
function mousePosition(ev) {
if (ev.pageX || ev.pageY) {
return {
x: ev.pageX,
y: ev.pageY
};
}
return {
x: ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y: ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
function mouseMove(ev) {
ev = ev || window.event;
var mousePos = mousePosition(ev);
x = mousePos.x;
y = mousePos.y;
}
document.onmousedown = mouseMove;
扫一扫
1036
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
