jQueryUI之交互
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<script src="../jquery-2.2.4.min.js"></script>
<script src="jquery-ui.min.js"></script>
<link rel="stylesheet" href="jquery-ui.min.css" type="text/css" />
<style>
.ui-selected {
background: #004099;
}
</style>
<script>
//允许拖动
$(function() {
//可拖动
$('#div1').draggable();
//可拖入
$('#div2').droppable();
$('#div2').on('drop', function(event, ui) {
alert();
});
$('#div3').resizable(); //列表选择
$('#select').selectable();
$('#btn').button();
$('#btn').on('click', function() {
if ($('#right').hasClass('ui-selected')) {
alert('回答正确');
}
}) //列表拖动排序
$('.sort').sortable();
})
</script>
</head>
<div id='div1' style="width: 100px ; height: 100px ; border: 1px solid black;">draggable</div>
<div id='div2' style="width: 200px ; height: 200px ; border: 1px solid red;">droppable</div>
<div id='div3' style="width: 300px ; height: 300px ; border: 1px solid red;">resizeable</div> <!--selecteable-->
<p>世界上最美丽的人是？</p>
<ul id="select">
<li id="right">A.me</li>
<li>B.我</li>
<li>C.I</li>
</ul> <a href="#" id="btn">提交</a> <!--<button class="sort">1</button>
<button class="sort">2</button>
<button class="sort">3</button>
<button class="sort">4</button>-->
<ul class="sort">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul> <body>
</body> </html>
一共4项：允许拖动，拖入，列表选择，列表cell拖动排序
jQueryUI之交互的更多相关文章
- 解决JqueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug
前些日子不是在做 使用Jquery-UI实现一次拖拽多个选中的元素操作嘛,在持续完善这个组件时遇到了一个关于拖放排序的bug.今天就着图片和代码重现一下,也顺便告诉大家如何解决这个问题. 首先先上图描 ...
- jQuery高级编程
jquery高级编程1.jquery入门2.Javascript基础3.jQuery核心技术 3.1 jQuery脚本的结构 3.2 非侵扰事JavaScript 3.3 jQuery框架的结构 3. ...
- Ajax与JqueryUI和EasyUI错题总结
Ajax与JqueryUI和EasyUI错题总结 正确答案A,解析:此题考察的是JQuery UI下的menu插件的使用,menu提供ui-state-disabled class 方法禁用任何菜单项 ...
- 从零开始学习jQuery (十) jQueryUI常用功能实战
一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍. 本文是实战篇. 使用jQueryUI完成制作网站 ...
- EF+jQueryUI前后端分离设计
开源项目练习EF+jQueryUI前后端分离设计 最近大家流行把项目开源,我也来玩玩.只是开源公司项目不好,小弟只好从公司项目经验上另外弄出一套练习开源给大家. 这个项目可以做简单的团队任务系统( ...
- jQuery UI 是建立在 jQuery JavaScript 库上的一组用户界面交互、特效、小部件及主题
jQuery UI 是建立在 jQuery JavaScript 库上的一组用户界面交互.特效.小部件及主题.无论您是创建高度交互的 Web 应用程序还是仅仅向窗体控件添加一个日期选择器,jQuery ...
- jQueryUI使用指南
jQuery UI包含了许多维持状态的小部件(Widget),因此,它与典型的 jQuery 插件使用模式略有不同.所有的 jQuery UI 小部件(Widget)使用相同的模式,所以,只要您学会使 ...
- 开源项目练习EF+jQueryUI前后端分离设计
最近大家流行把项目开源,我也来玩玩.只是开源公司项目不好,小弟只好从公司项目经验上另外弄出一套练习开源给大家. 这个项目可以做简单的团队任务系统(做一些简单的任务分配,没经过严格测试.功能单一别喷啊, ...
- jQueryUI常用功能实战
本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery ( ...
随机推荐
- Oracle数据库DOC命令导入导出(2014-3-10记)
导出:exp lwj/lwj123456@orcl file=d:/db.dmp full=y 导入:imp lwj/lwj123456@orcl file=d:/db.dmp full=y 注:用户 ...
- CentOS更新软件
列出所有可更新的软件清单命令:yum check-update 安装所有更新软件命令:yum update 仅安装指定的软件命令:yum install <package_name> 仅更 ...
- Asp.net 头像的简单实现
1:创建数据库 Create Table ImageSave ( ID ,), Name ), img image ) 2:上传照片页关键代码 前台: <div> <asp:File ...
- linux 用户态 内核态
http://blog.chinaunix.net/uid-1829236-id-3182279.html 究竟什么是用户态,什么是内核态,这两个基本概念以前一直理解得不是很清楚,根本原因个人觉得是在 ...
- Uva 11090 在环中
题目链接:http://vjudge.net/contest/143318#problem/A 题意: 求平均权值最小的回路. 分析: 平均权值不可能超过最大边,二分查,然后,由于是平均权值,就可以转 ...
- IDispatch error #3092
在采用ADO访问ACCESS数据库的时候,出现IDispatch error #3092错误的原因之一是在SQL语句中使用了保留关键字.比如:如果表的名称为User 则会出现该错误.,若字段为valu ...
- JAVA线程同步辅助类CyclicBarrier循环屏障
CyclicBarrier是一个同步辅助类,主要作用是让一组线程互相等待,知道都到达一个公共障点,在一起走.在涉及一组固定大小的线程的程序中,这些线程必须不时地互相等待,此时 CyclicBarrie ...
- Key Figure中的Aggregation决定了DSO/CUBE转换规则中的Aggregation合计方式
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- Codeforces Round #384 (Div. 2)A,B,C,D
A. Vladik and flights time limit per test 2 seconds memory limit per test 256 megabytes input standa ...
- Intellij 图标介绍及配置文件常识
图标 参数名称 含义 默认值 -Xms 初始堆大小 物理内存的1/64(<1GB) 默认(MinHeapFreeRatio参数可以调整)空余堆内存小于40%时,JVM就会增大堆直到-Xm ...