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 ( ...
随机推荐
- MySQL配置文件mysql.ini参数详解
my.ini(Linux系统下是my.cnf),当mysql服务器启动时它会读取这个文件,设置相关的运行环境参数. my.ini分为两块:Client Section和Server Section. ...
- mysql查询优化器为什么可能会选择错误的执行计划
有可能导致mysql优化器选择错误的执行计划的原因如下: A:统计信息不准确,mysql依赖存储引擎为其提供的统计信息来评估成本,然而有的存储引擎提供的信息是准确的,有的引擎提供的可能就偏差很大,如: ...
- oracle 卸载
由于工作需要,重装了一下Oracle,然后发现同SQLServer,MySQL等数据库相比,Oracle的卸载重装真是不一般的麻烦. 整理了一下我的Oracle的卸载重装过程,给自己备忘,同时 ...
- Eclipse默认标签TODO,XXX,FIXME和自定义标签[转]
http://www.blogjava.net/Guides/archive/2011/11/14/363686.html Eclipse中的一些特殊的注释技术包括: 1. // TO ...
- 单调队列 hdu2823
Sliding Window Time Limit: 12000MS Memory Limit: 65536K Total Submissions: 48608 Accepted: 14047 ...
- WINDOWS Composer & PHPUnit 安装记录
Windows: 安装Composer: 下载了composer_setup.exe 运行之后提示和Xdebug冲突,在php.ini中注释掉php_xdebug.dll,再次运行.通过 compos ...
- mysql 日期格式化
SELECT plc.id, plc.policy_no, plc.out_date, og.organ_name, ir.insurer_name, pd.product_name, plc.pol ...
- Zero Copy
原文出处: http://www.ibm.com/developerworks/library/j-zerocopy/ 传统的I/O 使用传统的I/O程序读取文件内容, 并写入到另一个文件(或Sock ...
- 个推,手机推送api的使用
个推的作用:可以为手机端的app使用者推送消息,而不是通过手机上的app对用户发送消息.所以用户是被动的接收信息.当然不只是只有对用户弹出窗口的这种方式,也可以把信息推送给app,让app决定对用户实 ...
- CSS使用总结
1.visibility和display的区别: visibility:visible; 显示visibility:hidden; 隐藏,但是保留元素所占的空间display:block; ...