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 ( ...
随机推荐
- mongodb 安装、开启服务 和 php添加mongodb扩展
1.下载mongodb:https://www.mongodb.org/downloads#production (https://www.mongodb.org/dl/win32) 2.安装.配置 ...
- android 蓝牙串口通讯使用简介
需要的权限 <uses-permission android:name="android.permission.BLUETOOTH" /> <uses-perm ...
- LA 3713 宇航员分组
题目链接:http://vjudge.net/contest/142615#problem/B 题意:有A,B,C三个人物要分配个N个宇航员,每个宇航员恰好要分配一个任务,设平均年龄为X,只有年龄大于 ...
- 什么是 HTML？
前言 在 W3C(万维网联盟)官网里,有一套针对于初学者的 HTML 培训教程,为期四周.为了提升自己的翻译水平,同时帮助大家入门,我给大家翻译出来,以供参考. 1. 什么是 HTML HTML 是创 ...
- JavaScript高级应用(一)
1.尺寸 //各种尺寸 s += "\r\n网页可见区域宽(document.body.clientWidth):"+ document.body.clientWidth; s + ...
- [poj3378] Crazy Thairs (DP + 树状数组维护 + 高精度)
树状数组维护DP + 高精度 Description These days, Sempr is crazed on one problem named Crazy Thair. Given N (1 ...
- StudyFoxCMS-6
1.phpstrom中安装emmet File=>Settings=>Plugins=>右侧搜索框搜索“emmet”=>点击下方中间按钮“Browse repositories ...
- How To Use FETCH_RECORDS In Oracle Forms
When called from an On-Fetch trigger, initiates the default Form Builder processing for fetching rec ...
- 三种DSO（标准DSO、写优化DSO、直接更新DSO）、标准DSO覆盖合计规则
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- [bzoj1452][JSOI2009]Count(树状数组)
1452: [JSOI2009]Count Time Limit: 10 Sec Memory Limit: 64 MBSubmit: 2057 Solved: 1216[Submit][Stat ...