H5之家 - 中国HTML5教程资源分享第一站
H5再获融资，企业级应用是下一个风
用数据说话 决战HTML5游戏运营
使用HTML5的十大原因，你知道吗？
2015 HTML5游戏开发者大会7月4日将
德国大众机器人“失手”杀了一个工人，马斯克投资让机器人学“伦理道德”...
让我们来看看在产品背后，两家老板都说了些什么。...
巨额减记为的是掩饰纳德拉在移动市场的三大策略失误...
滴滴快的请全民免费坐快车：每日两次15元免单机会【TechWeb报道】5月22日消...
在上一篇中我们提到学习HTML5要具备CSS的知识，在页面设计的时候HTML5知识...
一、HTML是什么？HTML(hypertext mark-uplanguage)是 超文本标记语言, 主要...
对用户来说，该芯片的最重要的一项提升是其最高下载速度可达300Mbps...
阅读：150 09:10
不难发现，微信朋友圈的用户体验越来越差，常常可以看到有些公众号散布着各种不靠谱的谣言，传播广泛想要屏蔽或者清理还真不是一件容易的事情。为了增强用户体验...
阅读：58 14:59
昨天我们和大家分享了令人心生好感的苹果产品工业设计小细节，诚然，苹果的设计自成一派，被很多人推崇。不过，世界上的美是多种多样，一款产品不只是，也不能只...
阅读：84 12:12
今年上半年华为和荣耀两个品牌手机出货量超过5000万台。...
阅读：189 21:42
苹果设计主管乔纳森·伊夫于今年5月份再次得到提拔，其职位变成了首席设计官（ChiefDesignOfficer）。这也是苹果公司自成立以后，首次出现CDO这样的一个职位。...
阅读：137 14:29
德国大众机器人“失手”杀了一个工人，马斯克投资让机器人学“伦理道德”...
阅读：115 07:56
威锋网讯，苹果早前发布了iOS8.4正式版，除了带来整合了AppleMusic的全新音乐应用之外，还带来了iBooks的改进和对一些bug的修复。不过，升级了iOS...
阅读：182 08:20
苹果此前曾经在官网上放出了一张很诡异的iPhone5c照片，之所以诡异，是因为该照片中的“iPhone5c”比我们现在所使用的款式还要大，同时还有TouchID，但是界面...
阅读：117 03:26
苹果状态页面显示：多项iCloud服务出现技术故障（黄色标记） 凤凰科技讯 北京时间7月2日消息，据科技博客9to5mac报道，当地时间周三，苹果iCloud多项服务出现大...
阅读：178 22:51
针对iOS8.3/8.4的越狱工具目前已经趋于稳定，不过仍然会有少数人在越狱时遇到麻烦，比如一些用户——尤其是新手提及的在越狱过程中遇到的苹果驱动问题。正如图片...
阅读：126 03:29
让我们来看看在产品背后，两家老板都说了些什么。...
阅读：99 14:42
《金融时报》报道称，德国大众汽车制造厂中一个机器人杀死了一名人类工作人员。当时这名21岁的工人正在安装和调制机器人，后者突然出手击中工人的胸部，并将...
阅读：152 13:00
我们已经打败三星（电视），下一步要挑战苹果这是4月初乐视手机还未发布时，CEO贾跃亭的一番豪言。在昨天乐视超级手机Max的发布会上， 他们不仅公布了出货...
阅读：69 07:25
巨额减记为的是掩饰纳德拉在移动市场的三大策略失误...
阅读：64 03:03
关注微信公众号，了解最新精彩内容
本文重点关注如何充分利用HTML5和CSS让web app运行更加流畅。 Tip 1: 使用web storage代替cookie cookie最大的缺陷是在每一次HTTP请求中都会携带所有符合规则的cookie数据....
meta name=apple-touch-fullscreen content=yes添加到主屏幕后，全屏显示 meta name=apple-mobile-web-app-capable content=yes /这meta的作用就是删除默认的苹果工具栏和...
25年过去了，Brooks博士著名的没有银弹的论断依旧没有被打破。HTML5也是一样。但这并不妨碍HTML5是一个越来越有威力的炸蛋：发展迅速、势不可挡。随着HTML5技术的普及，用H...
本文通过解决一个假想的问题介绍了 css screen 混合模式，并介绍了如何用 svg 滤镜、canvas 2d、canvas webgl 实现相同的效果。 问题 下面的图片演示三种颜色光叠加的效果...移动端H5网页“上中下布局”的另类实现思路
QQ截图15.png (17.31 KB, 下载次数: 17)
13:47 上传
记得曾经做过这样的一个面试题，面试题要求如下：
1. 相册空间\硬盘空间的进度条,考虑百分比的控制；
2. 左中右三栏等高，整个页面的宽度不固定，左右宽度固定，中栏自宽度适应，论坛的文章标题也自适应宽；
3. 加“…”的地方，考虑过长溢出省略处理；
4. 假如这是一个访问PV达2000W/日，因成本限制，网络带宽可能满足不了此访问量，会出现滞连情况，样式文件可能加载不了，且中栏内容是最重要且要呈现在用户眼前的。(也就是说,在无样式不完全加载情况下,中栏内容要优先左右两栏前)；
5. 关注标签语义化；
6. 关注提交的页面原型便于团队合作，开发实现；
7. 关注HTTP请求和带宽消耗所带来的体验和成本。
这几点要求中，除了考察一个网页的标签语义化、页面性能、开发技巧以外，页面三栏等高布局、中间列优先加载应该算是开发过程当中的整个核心思路和决定整个页面成败的关键点。
关于三栏等高布局，网上已经有了举不胜举的实现方法和思路，且不说这些思路的好与坏，大家可以百度百度、谷歌谷歌，自作评价。
个人觉得各大互联网公司做的比较好的三栏或者是两栏布局有以下几个站点：
• 大众点评网首页
• 天猫或者是淘宝产品详细页
• 朋友网
• 淘宝首页第一屏
• 财付通账户首页
当然两栏或三栏布局，目前在各互联网网站应用的实例非常之多，就不在此一一列举。
在所有的这些案例当中，应用最多的一个css属性非margin莫属了，margin的值为“负值”。
有关margin负值，这里有篇经典文章：
负值之美：负margin在页面布局中的应用
想必看完这篇文章，大家已经对负边距有了更深一层次的认识。
于是得到了以下计算公式：
Margin负边距 + 三栏等高布局 + 中间列优先加载 = 圣杯布局（业内盛传的布局概念）的一部分。
在三列等高中间列优先加载的实现过程当中，尝试再尝试，最终沉淀出了以下“非公认的优秀代码”：
html：&div class=&wrapper&&
& &&!–头部 start–&
& &&header&header&/header&
& &&!–头部 end–&
& &&!–主体内容 start–&
& & &div class=&main_1&&
& && &&&&div class=&main_2&&
& && && &&&&div class=&main_3 cf&&
& && && && && &&!–中间列 start–&
& && && && && &&section class=&content&&
& && && && && && & &ul&
& && && && && && && &&&&li class=&&&
& && && && && && && && && &&a href=&#&&测试内容&/a&
& && && && && && && &&&&/li&
& && && && && && && &&&&li class=&&&
& && && && && && && && && &&a href=&#&&测试内容&/a&
& && && && && && && &&&&/li&
& && && && && && && &&&&li class=&&&
& && && && && && && && && &&a href=&#&&测试内容&/a&
& && && && && && && &&&&/li&
& && && && && && & &/ul&
& && && && && &&/section&
& && && && && &&!–中间列 end–&
& && && && && &&!–左侧边栏 start–&
& && && && && &&aside class=&aside_l&&
& && && && && && & aside_l
& && && && && &&/aside&
& && && && && &&!–左侧边栏 end–&
& && && && && &&!–右侧边栏 start–&
& && && && && &&aside class=&aside_r&&
& && && && && && & aside_r
& && && && && &&/aside&
& && && && &&&&!–右侧边栏 end–&
& && && &&&&/div&
& && & &/div&
& &&/div&
& &&!–主体内容 end–&
& &&!–底部导航版权 start–&
& &&footer&footer&/footer&
& &&!–底部导航版权 end–&
&&&/div&复制代码css：html, body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td{margin:0;padding:0;}
html, body{height:100%;line-height:22color:#333;-webkit-text-size-adjust:}
body{height:100%;background:#min-width:600font:16px '微软雅黑',Arial,Helvetica,sans-}
img, a img, input{vertical-align:}
img, a img, button {border:0;cursor:}
input, textarea{outline:-moz-outline:}
table, td ,th, tr{border-collapse:border:0;}
ul, ol, li{list-style:}
h1,h2,h3,h4,h5,h6{font-size:12}
a{color:#333333;text-decoration:}
/*****清除浮动*****/
.cf:after{content:&.&;display:height:0;clear:visibility:font-size:0;}
.cf{display: inline-}
* html .cf{height:1%;}
.cf{display:}
/*****头脚****/
header, footer{height:44background:#555555;line-height:44text-align:color:#FFFFFF;}
/*****三栏布局*****/
.main_1{background:#666666;padding-right:170}
.main_1 .main_2{background:#666666;padding-left:180}
.main_1 .main_3{background:#999;position:}
.content, .aside_l, .aside_r{height:100%;float:position:text-align:}
.aside_l, .aside_r{line-height:50}
/*****中间列*****/
.content{width:100%;}
.content ul{padding:10font-size:14line-height:22}
/*****左栏*****/
.aside_l{width:180left:-100%;margin-left:-180}
/*****右栏*****/
.aside_r{width:170margin-right:-170}复制代码猛戳DEMO
同理在开发移动端webapp时，我们同样需要面对各种布局以适应不同的产品需求，例如：上中下布局，曾经就是让重构头疼的一个问题。
关于webapp上中下布局，白树给我们整理一篇非常有料的文章：
移动web页面支持弹性滚动的3个方案
怎么样，是不是像打了鸡血一样兴奋，再也不用发愁移动端布局的事了！
接下来我为大家介绍一种新的实现移动端“上中下布局”的简单思路，同理于圣杯布局（margin负边距的巧妙应用）。
html：&div class=&container&&
& && &&header class=&header&&header&/header&
& && &&section class=&main&&
& && && & &div class=&wrapper& id=&wrapper&&&!–&&iscroll&&容器 –&
& && && && &&&&div class=&con&&&!–&&iscroll&&滚动层 –&
& && && && && && &&ul class=&list&&
& && && && && && && & &li&&a class=&& href=&#&&测试内容&/a&&/li&
& && && && && && && & &li&&a class=&& href=&#&&测试内容&/a&&/li&
& && && && && && && & &li&&a class=&& href=&#&&测试内容&/a&&/li&
& && && && && && && & &li&&a class=&& href=&#&&测试内容&/a&&/li&
& && && && && && && & &li&&a class=&& href=&#&&测试内容&/a&&/li&
& && && && && && && & &li&&a class=&& href=&#&&测试内容&/a&&/li&
& && && && && && && & &li&&a class=&& href=&#&&测试内容&/a&&/li&
& && && && && && && & &li&&a class=&& href=&#&&测试内容&/a&&/li&
& && && && && && && & &li&&a class=&& href=&#&&测试内容&/a&&/li&
& && && && && && && & &li&&a class=&& href=&#&&测试内容&/a&&/li&
& && && && && && && & &li&&a class=&& href=&#&&测试内容&/a&&/li&
& && && && && && && & &li&&a class=&& href=&#&&测试内容&/a&&/li&
& && && && && && && & &li&&a class=&& href=&#&&测试内容&/a&&/li&
& && && && && && && & &li&&a class=&& href=&#&&测试内容&/a&&/li&
& && && && && && && & &li&&a class=&& href=&#&&测试内容&/a&&/li&
& && && && && && && & &li&&a class=&& href=&#&&测试内容&/a&&/li&
& && && && && && && & &li&&a class=&& href=&#&&测试内容&/a&&/li&
& && && && && && &&/ul&
& && && && &&&&/div&
& && && & &/div&
& && &&/section&
& && &&footer class=&footer&&footer&/footer&
&&&/div&复制代码css：html, body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td{margin:0;padding:0;}
html, body{height:100%;line-height:22color:#333;-webkit-text-size-adjust:}
body{height:100%;background:#min-width:600font:16px '微软雅黑',Arial,Helvetica,sans-overflow:}
img, a img, input{vertical-align:}
img, a img, button {border:0;cursor:}
input, textarea{outline:-moz-outline:}
table, td ,th, tr{border-collapse:border:0;}
ul, ol, li{list-style:}
h1,h2,h3,h4,h5,h6{font-size:12}
a{color:#333333;text-decoration:}
.container{height:100%;}
.header{background:#555555;height:44position:z-index:100;line-height:44text-align:color:#FFFFFF;}
.main{background:#999999;height:100%;margin:-44px 0;padding:44px 0;-webkit-box-sizing:border--moz-box-sizing:border-box-sizing:border-}
.wrapper{height:100%;overflow-y:auto\9;position:}
.wrapper .con{padding:10}
.footer{background:#555555;height:44margin-top:-44position:z-index:100;line-height:44text-align:color:#FFFFFF;}复制代码chrome猛戳DEMO吧！ie猛戳DEMO吧！
代码中标红代码为针对IE做的兼容，webkit内核使用iscroll插件实现滚动，IE使用浏览器默认滚动！
注意点：main的高度必须为整个网页的高度，即为height:100%，所以需要继承容器container{height:100%}的高度,container继承body{height:100%;}的高度，以此类推。
最终使用margin负值和relative、z-index设置元素的位置和层级关系。从而使用纯css实现了不用css3、不专门针对IE做特殊兼容处理的移动端“上中下布局”。
文章摘自：
广州市久邦数码科技有限公司薪金：面议职位：UI设计师
爱点击互动（北京）广告有限公司薪金：面议职位：Web前端开发工程师
北京西瓜藤网络科技有限公司薪金：面议职位：Web开发工程师 上传我的文档
 下载
 收藏
该文档贡献者很忙，什么也没留下。
 下载此文档
正在努力加载中...
jquery入门
下载积分：800
内容提示：jquery入门
文档格式：PPT|
浏览次数：0|
上传日期： 16:15:28|
文档星级：
该用户还上传了这些文档
jquery入门
官方公共微信jQuery UI 教程
jQuery UI 实例 - 放置（Droppable）
为可拖拽小部件创建目标。 如需了解更多有关 droppable 交互的细节，请查看 API 文档 。
默认功能 在任意的 DOM 元素上启用 droppable 功能，并为可拖拽小部件创建目标。
&!doctype html&
&html lang="en"&
&meta charset="utf-8"&
&title&jQuery UI 放置（Droppable） - 默认功能&/title&
&link rel="stylesheet" href="///ui/1.10.4/themes/smoothness/jquery-ui.css"&
&script src="///jquery-1.9.1.js"&&/script&
&script src="///ui/1.10.4/jquery-ui.js"&&/script&
&link rel="stylesheet" href="/resources/demos/style.css"&
#draggable { width: 100 height: 100 padding: 0.5 float: margin: 10px 10px 10px 0; }
#droppable { width: 150 height: 150 padding: 0.5 float: margin: 10 }
$(function() {
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
drop: function( event, ui ) {
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
&div id="draggable" class="ui-widget-content"&
&p&请把我拖拽到目标处！&/p&
&div id="droppable" class="ui-widget-header"&
&p&请放置在这里！&/p&
接受 使用 accept 选项指定目标 droppable 接受哪一个元素（或元素组）。
&!doctype html&
&html lang="en"&
&meta charset="utf-8"&
&title&jQuery UI 放置（Droppable） - 接受&/title&
&link rel="stylesheet" href="///ui/1.10.4/themes/smoothness/jquery-ui.css"&
&script src="///jquery-1.9.1.js"&&/script&
&script src="///ui/1.10.4/jquery-ui.js"&&/script&
&link rel="stylesheet" href="/resources/demos/style.css"&
#droppable { width: 150 height: 150 padding: 0.5 float: margin: 10 }
#draggable, #draggable-nonvalid { width: 100 height: 100 padding: 0.5 float: margin: 10px 10px 10px 0; }
$(function() {
$( "#draggable, #draggable-nonvalid" ).draggable();
$( "#droppable" ).droppable({
accept: "#draggable",
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function( event, ui ) {
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
&div id="draggable-nonvalid" class="ui-widget-content"&
&p&我是不能被放置的 draggable&/p&
&div id="draggable" class="ui-widget-content"&
&p&请拖拽我到目标&/p&
&div id="droppable" class="ui-widget-header"&
&p&accept: '#draggable'&/p&
防止传播 当使用嵌套的 droppable 时 — 例如，您可以有一个树形的可编辑的目录结构，带有文件夹和文档节点 — greedy 选项设置为 true 来防止当 draggable 被放置在子节点（droppable）上时的事件传播。
&!doctype html&
&html lang="en"&
&meta charset="utf-8"&
&title&jQuery UI 放置（Droppable） - 防止传播&/title&
&link rel="stylesheet" href="///ui/1.10.4/themes/smoothness/jquery-ui.css"&
&script src="///jquery-1.9.1.js"&&/script&
&script src="///ui/1.10.4/jquery-ui.js"&&/script&
&link rel="stylesheet" href="/resources/demos/style.css"&
#draggable { width: 100 height: 40 padding: 0.5 float: margin: 10px 10px 10px 0; }
#droppable, #droppable2 { width: 230 height: 120 padding: 0.5 float: margin: 10 }
#droppable-inner, #droppable2-inner { width: 170 height: 60 padding: 0.5 float: margin: 10 }
$(function() {
$( "#draggable" ).draggable();
$( "#droppable, #droppable-inner" ).droppable({
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function( event, ui ) {
.addClass( "ui-state-highlight" )
.find( "& p" )
.html( "Dropped!" );
$( "#droppable2, #droppable2-inner" ).droppable({
greedy: true,
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function( event, ui ) {
.addClass( "ui-state-highlight" )
.find( "& p" )
.html( "Dropped!" );
&div id="draggable" class="ui-widget-content"&
&p&请拖拽我到目标&/p&
&div id="droppable" class="ui-widget-header"&
&p&外部 droppable&/p&
&div id="droppable-inner" class="ui-widget-header"&
&p&内部 droppable（不带有 greedy）&/p&
&div id="droppable2" class="ui-widget-header"&
&p&外部 droppable&/p&
&div id="droppable2-inner" class="ui-widget-header"&
&p&内部 droppable（带有 greedy）&/p&
还原 draggable 的位置 当带有布尔值 revert 选项的 draggable 停止拖拽时，返回 draggable（或它的助手）到原始位置。
&!doctype html&
&html lang="en"&
&meta charset="utf-8"&
&title&jQuery UI 放置（Droppable） - 还原 draggable 的位置&/title&
&link rel="stylesheet" href="///ui/1.10.4/themes/smoothness/jquery-ui.css"&
&script src="///jquery-1.9.1.js"&&/script&
&script src="///ui/1.10.4/jquery-ui.js"&&/script&
&link rel="stylesheet" href="/resources/demos/style.css"&
#draggable, #draggable2 { width: 100 height: 100 padding: 0.5 float: margin: 10px 10px 10px 0; }
#droppable { width: 150 height: 150 padding: 0.5 float: margin: 10 }
$(function() {
$( "#draggable" ).draggable({ revert: "valid" });
$( "#draggable2" ).draggable({ revert: "invalid" });
$( "#droppable" ).droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
drop: function( event, ui ) {
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "已放置！" );
&div id="draggable" class="ui-widget-content"&
&p&当被放置在目标上时还原&/p&
&div id="draggable2" class="ui-widget-content"&
&p&当未被放置在目标上时还原&/p&
&div id="droppable" class="ui-widget-header"&
&p&请放置在这里&/p&
购物车演示 演示如何使用折叠面板来展示产品的目录结构，使用拖拽和放置来添加产品到购物车，购物车中的产品是可排序的。
&!doctype html&
&html lang="en"&
&meta charset="utf-8"&
&title&jQuery UI 放置（Droppable） - 购物车演示&/title&
&link rel="stylesheet" href="///ui/1.10.4/themes/smoothness/jquery-ui.css"&
&script src="///jquery-1.9.1.js"&&/script&
&script src="///ui/1.10.4/jquery-ui.js"&&/script&
&link rel="stylesheet" href="/resources/demos/style.css"&
h1 { padding: .2 margin: 0; }
#products { float: width: 500 margin-right: 2 }
#cart { width: 200 float: margin-top: 1 }
/* 定义列表样式，以便最大化 droppable */
#cart ol { margin: 0; padding: 1em 0 1em 3 }
$(function() {
$( "#catalog" ).accordion();
$( "#catalog li" ).draggable({
appendTo: "body",
helper: "clone"
$( "#cart ol" ).droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
accept: ":not(.ui-sortable-helper)",
drop: function( event, ui ) {
$( this ).find( ".placeholder" ).remove();
$( "&li&&/li&" ).text( ui.draggable.text() ).appendTo( this );
}).sortable({
items: "li:not(.placeholder)",
sort: function() {
// 获取由 droppable 与 sortable 交互而加入的条目
// 使用 connectWithSortable 可以解决这个问题，但不允许您自定义 active/hoverClass 选项
$( this ).removeClass( "ui-state-default" );
&div id="products"&
&h1 class="ui-widget-header"&产品&/h1&
&div id="catalog"&
&h2&&a href="#"&T-Shirts&/a&&/h2&
&li&Lolcat Shirt&/li&
&li&Cheezeburger Shirt&/li&
&li&Buckit Shirt&/li&
&h2&&a href="#"&Bags&/a&&/h2&
&li&Zebra Striped&/li&
&li&Black Leather&/li&
&li&Alligator Leather&/li&
&h2&&a href="#"&Gadgets&/a&&/h2&
&li&iPhone&/li&
&li&iPod&/li&
&li&iPad&/li&
&div id="cart"&
&h1 class="ui-widget-header"&购物车&/h1&
&div class="ui-widget-content"&
&li class="placeholder"&添加产品到这里&/li&
简单的照片管理器 您可以通过拖拽照片到回收站或者点击回收站图标来删除照片。 您可以通过拖拽照片到相册或者点击回收利用图标来还原照片。 您可以通过点击缩放图标来查看大图。jQuery UI 对话框（dialog）部件用于模态窗口。
&!doctype html&
&html lang="en"&
&meta charset="utf-8"&
&title&jQuery UI 放置（Droppable） - 简单的照片管理器&/title&
&link rel="stylesheet" href="///ui/1.10.4/themes/smoothness/jquery-ui.css"&
&script src="///jquery-1.9.1.js"&&/script&
&script src="///ui/1.10.4/jquery-ui.js"&&/script&
&link rel="stylesheet" href="/resources/demos/style.css"&
#gallery { float: width: 65%; min-height: 12 }
.gallery.custom-state-active { background: # }
.gallery li { float: width: 96 padding: 0.4 margin: 0 0.4em 0.4em 0; text-align: }
.gallery li h5 { margin: 0 0 0.4 cursor: }
.gallery li a { float: }
.gallery li a.ui-icon-zoomin { float: }
.gallery li img { width: 100%; cursor: }
#trash { float: width: 32%; min-height: 18 padding: 1%; }
#trash h4 { line-height: 16 margin: 0 0 0.4 }
#trash h4 .ui-icon { float: }
#trash .gallery h5 { display: }
$(function() {
// 这是相册和回收站
var $gallery = $( "#gallery" ),
$trash = $( "#trash" );
// 让相册的条目可拖拽
$( "li", $gallery ).draggable({
cancel: "a.ui-icon", // 点击一个图标不会启动拖拽
revert: "invalid", // 当未被放置时，条目会还原回它的初始位置
containment: "document",
helper: "clone",
cursor: "move"
// 让回收站可放置，接受相册的条目
$trash.droppable({
accept: "#gallery & li",
activeClass: "ui-state-highlight",
drop: function( event, ui ) {
deleteImage( ui.draggable );
// 让相册可放置，接受回收站的条目
$gallery.droppable({
accept: "#trash li",
activeClass: "custom-state-active",
drop: function( event, ui ) {
recycleImage( ui.draggable );
// 图像删除功能
var recycle_icon = "&a href='link/to/recycle/script/when/we/have/js/off' title='还原图像' class='ui-icon ui-icon-refresh'&还原图像&/a&";
function deleteImage( $item ) {
$item.fadeOut(function() {
var $list = $( "ul", $trash ).length ?
$( "ul", $trash ) :
$( "&ul class='gallery ui-helper-reset'/&" ).appendTo( $trash );
$item.find( "a.ui-icon-trash" ).remove();
$item.append( recycle_icon ).appendTo( $list ).fadeIn(function() {
.animate({ width: "48px" })
.find( "img" )
.animate({ height: "36px" });
// 图像还原功能
var trash_icon = "&a href='link/to/trash/script/when/we/have/js/off' title='删除图像' class='ui-icon ui-icon-trash'&删除图像&/a&";
function recycleImage( $item ) {
$item.fadeOut(function() {
.find( "a.ui-icon-refresh" )
.css( "width", "96px")
.append( trash_icon )
.find( "img" )
.css( "height", "72px" )
.appendTo( $gallery )
.fadeIn();
// 图像预览功能，演示 ui.dialog 作为模态窗口使用
function viewLargerImage( $link ) {
var src = $link.attr( "href" ),
title = $link.siblings( "img" ).attr( "alt" ),
$modal = $( "img[src$='" + src + "']" );
if ( $modal.length ) {
$modal.dialog( "open" );
var img = $( "&img alt='" + title + "' width='384' height='288' style='display: padding: 8' /&" )
.attr( "src", src ).appendTo( "body" );
setTimeout(function() {
img.dialog({
title: title,
width: 400,
modal: true
// 通过事件代理解决图标行为
$( "ul.gallery & li" ).click(function( event ) {
var $item = $( this ),
$target = $( event.target );
if ( $target.is( "a.ui-icon-trash" ) ) {
deleteImage( $item );
} else if ( $target.is( "a.ui-icon-zoomin" ) ) {
viewLargerImage( $target );
} else if ( $target.is( "a.ui-icon-refresh" ) ) {
recycleImage( $item );
&div class="ui-widget ui-helper-clearfix"&
&ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix"&
&li class="ui-widget-content ui-corner-tr"&
&h5 class="ui-widget-header"&High Tatras&/h5&
&img src="/wp-content/uploads/2014/03/high_tatras_min.jpg" alt="High Tatras 的最高峰" width="96" height="72"&
&a href="/wp-content/uploads/2014/03/high_tatras.jpg" title="查看大图" class="ui-icon ui-icon-zoomin"&查看大图&/a&
&a href="link/to/trash/script/when/we/have/js/off" title="删除图像" class="ui-icon ui-icon-trash"&删除图像&/a&
&li class="ui-widget-content ui-corner-tr"&
&h5 class="ui-widget-header"&High Tatras 2&/h5&
&img src="/wp-content/uploads/2014/03/high_tatras2_min.jpg" alt="绿山湖畔的小屋" width="96" height="72"&
&a href="/wp-content/uploads/2014/03/high_tatras2.jpg" title="查看大图" class="ui-icon ui-icon-zoomin"&查看大图&/a&
&a href="link/to/trash/script/when/we/have/js/off" title="删除图像" class="ui-icon ui-icon-trash"&删除图像&/a&
&li class="ui-widget-content ui-corner-tr"&
&h5 class="ui-widget-header"&High Tatras 3&/h5&
&img src="/wp-content/uploads/2014/03/high_tatras3_min.jpg" alt="计划登高" width="96" height="72"&
&a href="/wp-content/uploads/2014/03/high_tatras3.jpg" title="查看大图" class="ui-icon ui-icon-zoomin"&查看大图&/a&
&a href="link/to/trash/script/when/we/have/js/off" title="删除图像" class="ui-icon ui-icon-trash"&删除图像&/a&
&li class="ui-widget-content ui-corner-tr"&
&h5 class="ui-widget-header"&High Tatras 4&/h5&
&img src="/wp-content/uploads/2014/03/high_tatras4_min.jpg" alt="在 Kozi kopka 的顶部" width="96" height="72"&
&a href="/wp-content/uploads/2014/03/high_tatras4.jpg" title="查看大图" class="ui-icon ui-icon-zoomin"&查看大图&/a&
&a href="link/to/trash/script/when/we/have/js/off" title="删除图像" class="ui-icon ui-icon-trash"&删除图像&/a&
&div id="trash" class="ui-widget-content ui-state-default"&
&h4 class="ui-widget-header"&&span class="ui-icon ui-icon-trash"&回收站&/span& 回收站&/h4&
视觉反馈 当悬停在 droppable 上时，或者当 droppable 被激活（即一个可接受的 draggable 被放置在 droppable 上）时，改变 droppable 的外观。使用 hoverClass 或 activeClass 选项来分别指定 class。
&!doctype html&
&html lang="en"&
&meta charset="utf-8"&
&title&jQuery UI 放置（Droppable） - 视觉反馈&/title&
&link rel="stylesheet" href="///ui/1.10.4/themes/smoothness/jquery-ui.css"&
&script src="///jquery-1.9.1.js"&&/script&
&script src="///ui/1.10.4/jquery-ui.js"&&/script&
&link rel="stylesheet" href="/resources/demos/style.css"&
#draggable, #draggable2 { width: 90 height: 90 padding: 0.5 float: margin: 10px 10px 10px 0; }
#droppable, #droppable2 { width: 120 height: 120 padding: 0.5 float: margin: 10 }
h3 { clear: }
$(function() {
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
hoverClass: "ui-state-hover",
drop: function( event, ui ) {
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
$( "#draggable2" ).draggable();
$( "#droppable2" ).droppable({
accept: "#draggable2",
activeClass: "ui-state-default",
drop: function( event, ui ) {
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
&h3&当悬停在 droppable 上时的反馈：&/h3&
&div id="draggable" class="ui-widget-content"&
&p&请拖拽我到目标&/p&
&div id="droppable" class="ui-widget-header"&
&p&请放置在这里&/p&
&h3&当激活 draggable 时的反馈：&/h3&
&div id="draggable2" class="ui-widget-content"&
&p&请拖拽我到目标&/p&
&div id="droppable2" class="ui-widget-header"&
&p&请放置在这里&/p&
关注微信下载离线手册