山路弯弯需坚持之jQuery EasyUI （二）
来源：互联网 发布：淘宝网风衣外套女 编辑：程序博客网 时间：2024/06/08 12:46
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；
<div id="dd" class="easyui-droppable" data-options="accept:'#d1,#d3'" style="width:100px;height:100px;"></div>也可以通过javascript创建。
页面的代码：
<div id="dd" style="width:100px;height:100px;"></div>JS中代码：
$('#dd').droppable({ accept:'#d1,#d3' //可以接受d1、d3}); 备注：droppable的accept属性表示确定哪些可拖拽元素将被接受
搜索框–SearchBox
搜索框提示用户需要输入搜索的值。它可以结合一个菜单，允许用户选择不同的搜索类别。在用户按下回车键或点击组件右边的搜索按钮的时候会执行搜索操作。
1）使用标签创建。添加’easyui-searchbox’类到< input >标签。
<input id="ss" class="easyui-searchbox" style="width:300px" data-options="searcher:qq,prompt:'Please Input Value'"></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> JS
$('#ss').searchbox({ searcher:function(value,name){ alert(value + "," + name) }, menu:'#mm', prompt:'Please Input Value' }); 可以通过它的setValue与getValue来设置或都返回一个搜索值;
调整大小–Resizable
通过给< div >标签添加class=”easyui-resizable” 属性来创建一个可以调整大小的窗口。
<div id="rr" class="easyui-resizable" data-options="maxWidth:800,maxHeight:600" style="width:100px;height:100px;border:1px solid #ccc;"></div> 也可以通过javascript来创建；
页面代码
<div id="rr" style="width:100px;height:100px;border:1px solid #ccc;"></div> JS代码
$('#rr').resizable({ maxWidth:800, //当调整大小时候的最大宽度maxHeight:600 //当调整大小时候的最大高度}); 分页–pagination
分页控件允许用户导航页面的数据。它支持页面导航和页面长度选择的选项设置。用户可以在分页控件上添加自定义按钮，以增强其功能。
分页控件可以通过标签来创建，我们通过设置< div >标签的class=‘easyui-pagination’来创建。
<div id="pp" class="easyui-pagination" data-options="total:2000,pageSize:10" style="background:#efefef;border:1px solid #ccc;"></div> 通过javascript来创建；
HTML
<div id="pp" style="background:#efefef;border:1px solid #ccc;"></div> JS：
$('#pp').pagination({ total:1000, //总记录数，在分页控件创建时初始的值。pageSize:30 //页面大小}); 进度条–ProgressBar
进度条提供了一个反馈显示一个长时间运行的操作进展。可以更新的进展条，让用户知道当前正在执行操作。
创建进度条再次以两种方式：
1）使用标签创建：
<div id="p" class="easyui-progressbar" data-options="value:60" style="width:400px;"></div> 2）使用Javascript创建进度条：
HTML代码
<div id="p" style="width:400px;"></div> 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）首先设计学校安排的课程：
<div class="left"> <table> <tr><td><div class="item">语文</div></td></tr> <tr><td><div class="item">数学</div></td></tr> <tr><td><div class="item">英语</div></td></tr> <tr><td><div class="item">政治</div></td></tr> <tr><td><div class="item">历史</div></td></tr> <tr><td><div class="item">物理</div></td></tr> <tr><td><div class="item">化学</div></td></tr> <tr><td><div class="item">体育</div></td></tr> </table></div>2）设计时间安排：
<div class="right"> <table> <tr> <td class="blank"></td> <td class="title">周一</td> <td class="title">周二</td> <td class="title">周三</td> <td class="title">周四</td> <td class="title">周五</td> </tr> <tr> <td class="time">08:00</td> <td class="drop"></td> <td class="drop"></td> <td class="drop"></td> <td class="drop"></td> <td class="drop"></td> </tr> <tr> <td class="time">09:00</td> <td class="drop"></td> <td class="drop"></td> <td class="drop"></td> <td class="drop"></td> <td class="drop"></td> </tr> <tr> <td class="time">10:00</td> <td class="drop"></td> <td class="drop"></td> <td class="drop"></td> <td class="drop"></td> <td class="drop"></td> </tr> <tr> <td class="time">11:00</td> <td class="drop"></td> <td class="drop"></td> <td class="drop"></td> <td class="drop"></td> <td class="drop"></td> </tr> <tr> <td class="time">12:00</td> <td class="drop"></td> <td class="drop"></td> <td class="drop"></td> <td class="drop"></td> <td class="drop"></td> </tr> <tr> <td class="time">13:00</td> <td class="lunch" colspan="5">阳光午餐</td> </tr> <tr> <td class="time">14:00</td> <td class="drop"></td> <td class="drop"></td> <td class="drop"></td> <td class="drop"></td> <td class="drop"></td> </tr> <tr> <td class="time">15:00</td> <td class="drop"></td> <td class="drop"></td> <td class="drop"></td> <td class="drop"></td> <td class="drop"></td> </tr> <tr> <td class="time">16:00</td> <td class="drop"></td> <td class="drop"></td> <td class="drop"></td> <td class="drop"></td> <td class="drop"></td> </tr> </table> </div> </div>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，不过需要经常查看，熟能生巧，谁也不会说背下来所有的组件，只是熟练和陌生的区别；
—–这里的山路十八弯，这里的码农不怕难—–
0 0
- 山路弯弯需坚持之jQuery EasyUI （二）
- 山路弯弯需坚持之jQuery EasyUI （一）
- Android Studio入门阶段的山路弯弯之Android设备篇
- 汽车百科系列之（九）: 山路驾驶技术要点
- 弯弯
- 那一年春节回家，100公里高速100公路盘山路....山路弯弯
- etmvc+jQuery EasyUI使用教程（二）
- jQuery EasyUI中的Layout布局（二）
- JQuery EasyUi之界面设计——通用的JavaScript（二）
- JQuery EasyUi之界面设计——通用的JavaScript（二）
- JQuery EasyUi之界面设计——通用的JavaScript（二）
- JQuery EasyUi之界面设计——通用的JavaScript（二）
- JQuery EasyUi之界面设计——通用的JavaScript（二）
- JQuery EasyUi之界面设计——通用的JavaScript(二)
- jquery easyui 学习之datagrid（一）
- jQuery之easyUi
- jQuery之父：坚持每天都要写代码
- jQuery EasyUI 备忘之tabs
- XGBoost：二分类问题
- Android Studio 编译缓存(Build Cache)
- 基于okhttp封装网络库 （1）
- BaseRecyclerViewAdapterHelper之BaseMultiItemQuickAdapter实现多级列表功能
- webpack 的学习
- 山路弯弯需坚持之jQuery EasyUI （二）
- select，poll，epoll比较
- GCD
- jsp页面乱码
- C# 处理word IOException
- Linux下用户组、文件权限详解
- Android File存储
- MongoDB的权限控制
- 基于 okhttp 封装网络库 （2）
