山路弯弯需坚持之jQuery EasyUI （二）

xiaoxiao2021-03-25 184

jQueryEasyUI 基础

拖动–Draggable

通过标签创建一个可拖动的元素。需要给标签添加一个class类，值为easyui-draggable； EasyUI的方式：

<div id="dd" class="easyui-draggable" data-options="handle:'#mountain'" style="width:100px;height:100px;"> <div id="mountain" style="background:#ccc;">mountain</div></div>

也可以通过以前JS的方式：

<div id="dd" style="width:100px;height:100px;"> <div id="mountain" style="background:#ccc;">mountain</div> </div>

JS代码：

$('#dd').draggable({ handle:'#mountain' });

draggable的一个重要属性proxy，在拖动的时候使用的代理元素，当使用’clone’的时候，将使用该元素的一个复制元素来作为替代元素。如果指定了一个函数,它将返回一个jquery对象。

$('#dd2').draggable({ // 克隆一个元素让它可以移动 proxy:'clone' }); $('#dd3').draggable({ proxy:function(source){ var p = $('<div class="proxy">proxy</div>'); p.appendTo('body'); return p; } });

放置–Droppable

通过标签创建一个可拖动的元素。需要给标签添加一个class类，值为easyui-draggable；

也可以通过javascript创建。页面的代码：

JS中代码：

$('#dd').droppable({ accept:'#d1,#d3' //可以接受d1、d3 });

备注：droppable的accept属性表示确定哪些可拖拽元素将被接受

搜索框–SearchBox

搜索框提示用户需要输入搜索的值。它可以结合一个菜单，允许用户选择不同的搜索类别。在用户按下回车键或点击组件右边的搜索按钮的时候会执行搜索操作。 1）使用标签创建。添加’easyui-searchbox’类到< input >标签。

2）通过javascript创建 HTML

<input id="ss"></input> <div id="mm" style="width:120px"> <div data-options="name:'all',iconCls:'icon-ok'">All News</div> <div data-options="name:'sports'">Sports News</div> </div>

$('#ss').searchbox({ searcher:function(value,name){ alert(value + "," + name) }, menu:'#mm', prompt:'Please Input Value' });

可以通过它的setValue与getValue来设置或都返回一个搜索值;

调整大小–Resizable

通过给< div >标签添加class=”easyui-resizable” 属性来创建一个可以调整大小的窗口。

也可以通过javascript来创建；页面代码

JS代码

$('#rr').resizable({ maxWidth:800, //当调整大小时候的最大宽度 maxHeight:600 //当调整大小时候的最大高度 });

分页–pagination

分页控件允许用户导航页面的数据。它支持页面导航和页面长度选择的选项设置。用户可以在分页控件上添加自定义按钮，以增强其功能。分页控件可以通过标签来创建，我们通过设置< div >标签的class=‘easyui-pagination’来创建。

通过javascript来创建； HTML

JS：

$('#pp').pagination({ total:1000, //总记录数，在分页控件创建时初始的值。 pageSize:30 　//页面大小 });

进度条–ProgressBar

进度条提供了一个反馈显示一个长时间运行的操作进展。可以更新的进展条，让用户知道当前正在执行操作。创建进度条再次以两种方式： 1）使用标签创建：

2）使用Javascript创建进度条： HTML代码

JS代码：

$('#p').progressbar({ value: 60 });

扩展：获取当前值和设置一个新的值到进度条控件：

var value = $('#p').progressbar('getValue'); //获取进度条的值 if (value < 100){ value += Math.floor(Math.random() * 10); $('#p').progressbar('setValue', value); //设置进度条的值 }

案列演示：制作一个进度条 HTML：

<html> <head> <link rel="stylesheet" type="text/css" href="css/easyui.css"> <link rel="stylesheet" type="text/css" href="css/icon.css"> <script src="jquery.min.js"></script> <script src="jquery.easyui.min.js"></script> </head> <body> <div style="margin:20px 0;"> <a href="javascript:void(0)" class="easyui-linkbutton" onclick="start()">Start</a> </div> <div id="p" class="easyui-progressbar" style="width:200px;height:15px;"></div> </body> </html>

JS代码：

function start(){ var value = $('#p').progressbar('getValue'); if (value < 100){ value += Math.floor(Math.random() * 10); $('#p').progressbar('setValue', value); setTimeout(arguments.callee, 200); } };

提示框–Tooltip

当用户将鼠标移动到元素上的时候，将会显示一个消息提示框。提示框的内容可以是页面中任何一个HTML元素或者通过Ajax发送后台请求以获取提示框内容。 1）通过标签创建提示框，给元素添加一个”easyui-tooltip”的类名，无需任何Javascript代码。

<a href="javascript:void(0)" title="This is the tooltip message." class="easyui-tooltip">我是提示框，移动到我这里有提示</a>

2）通过Javascript创建提示框； HTML代码

<a id="dd" href="javascript:void(0)">Click here</a>

JS代码

$('#dd').tooltip({ position: 'right', //显示的位置 content: '<span style="color:#fff">This is the tooltip message.</span>', // 显示的内容 onShow: function(){ $(this).tooltip('tip').css({ backgroundColor: '#666', borderColor: '#666' }); }});

通过show与hide方法来实现提示框的显示与隐藏。

小的案列–课程表的制作

整合案例的内容主要针对学校课程安排，应用拖放的组件完成课程安排；实现之后的效果图： 1）首先设计学校安排的课程：

2）设计时间安排：

3）拖动左侧的学校科目：

$('.left .item').draggable({ revert:true, proxy:'clone' });

4）放置学校科目在表格里面

$('.right td.drop').droppable({ onDragEnter:function(){ $(this).addClass('over'); }, onDragLeave:function(){ $(this).removeClass('over'); }, onDrop:function(e,source){ $(this).removeClass('over'); if ($(source).hasClass('assigned')){ $(this).append(source); } else { var c = $(source).clone().addClass('assigned'); $(this).empty().append(c); c.draggable({ revert:true }); } } });

总结：EasyUI用起来真的很方便因为少写了很多的JS代码，这些组件，不用死记硬背，需要用时候，可以随时去查API，不过需要经常查看，熟能生巧，谁也不会说背下来所有的组件，只是熟练和陌生的区别；

—–这里的山路十八弯，这里的码农不怕难—–

转载请注明原文地址: https://ju.6miu.com/read-4694.html

技术

最新回复(0)