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 ( ...
随机推荐
- MVC5+EF6 入门完整教程11--细说MVC中仓储模式的应用
摘要: 第一阶段1~10篇已经覆盖了MVC开发必要的基本知识. 第二阶段11-20篇将会侧重于专题的讲解,一篇文章解决一个实际问题. 根据园友的反馈, 本篇文章将会先对呼声最高的仓储模式进行讲解. 文 ...
- java中的23中设计模式（转载的，有时间一定要熟读）
设计模式(Design Patterns) --可复用面向对象软件的基础 设计模式(Design pattern)是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结.使用设计模式是为了 ...
- 关于SQL Server 中连接查询Join的几种常见用法
现有A.B .C 三个表,A中的ID=B中的ID,B中的ID=C中的ID:也就是:A.ID=B.ID,B.ID=C.ID; 一. Inner Join 把两个表链接一起查 Select * from ...
- Hadoop安装指引
pre.ctl { font-family: "Liberation Mono", monospace } p { margin-bottom: 0.25cm; line-heig ...
- CentOS7 运行级别
linux运行的级别7个级别运行级别的查看使用 runlevelrunlevelN 3 //运行在3级别,可以理解成命令行级别级别之间的切换需要使用init x 0 //关机3 //多用户的命令行级别 ...
- NSUrl的打印
1转自 http://my.oschina.net/wangdk/blog/165554: NSURL *url = [NSURL URLWithString:@"http://www.ba ...
- C#连接上sql server 2008 第一次实践
花了一早上的时间,终于连接上了我的本地数据库,我想应该记一下! 先贴个代码: using System; using System.Collections.Generic; using System. ...
- JMeter进行简单的数据库（mysql)压力测试
1.点击测试计划,再点击“浏览”,把JDBC驱动添加进来: 注:JDBC驱动一般的位置在java的安装地址下,路径类似于: \java\jre\lib\ext 文件为:mysql-connect ...
- spring,mybatis事务
概述事务管理对于企业应用来说是至关重要的,即使出现异常情况,它也可以保证数据的一致性.Spring Framework对事务管理提供了一致的抽象,其特点如下: 为不同的事务API提供一致的编程模型,比 ...
- block（闭包）
使用方式 1定义为类的属性 最后用来发布通知,执行block即可 甚至同时发送数据参数,给方法调用者,这样返回数据比返回值形式,更好, 因为这样传参,不是同步的,而是异步响应式的,更加灵活安全. 2定 ...