learnmore
- 浏览: 589153 次
- 性别:
- 来自: 上海
-
文章分类
最新评论
-
Garlic_90：
ireport分页的话代码写起来有些复杂，我以前试过，比较简单 ...
ireport分页显示 -
feijiing：
nice,problem solved,thanks!
虚拟机安装centos no valid devices were found on which to cereate new file systems -
Jocken：
引用的jar包需要怎么加在命令里面？十多个呢，为什么配在MAN ...
linux 如何运行jar包 -
xiaoqiao800：
看到你的问题，有帮助，我之前都是手动的clear项目下的cla ...
The project cannot be built until build path errors are resolved -
mfkdzhou：
楼主好，我现在也遇到这个问题，可以把源代码发一份不？谢谢了。8 ...
java打印
根据教程写出来一些demo
<head>
<style type="text/css">
.divcolor
{
background-color:red
}
</style>
<!--导入jquery开发包-->
<script src='jquery-1.3.1.min.js'></script>
<script language='javascript'>
<!--
//$(document).ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。 简单地说，这个方法纯粹是对向window.load事件注册事件的替代方法。通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数.document意思是说，获取整个网页文档对象（类似的于window.document），
$(document).ready(function()
{
//添加所有div元素的样式
$('div').addClass('divcolor');
/**为所有的div绑定click事件
$('div').click(function()
{
alert('hello dominic');
//移除当前元素的样式
$(this).removeClass('divcolor');
}
)*/
//增大textarea
$("#add").click(function()
{
//为textarea增加样式
$("#csschange").css("border","2px dashed #6600FF");
var objtextarea=document.getElementById("csschange");
objtextarea.rows=objtextarea.rows*2;
objtextarea.cols=objtextarea.cols*2;
}
)
//缩小textarea
$("#dimi").click(function()
{
$("#csschange").css("border","2px dashed #6600FF");
var objtextarea=document.getElementById("csschange");
//长度和宽度不能小于1
if(objtextarea.rows/2<1||objtextarea.cols/2<1)
{
return;
}
objtextarea.rows=objtextarea.rows/2;
objtextarea.cols=objtextarea.cols/2;
}
)
//层的淡出
$("#fadeout").click(function ()
{
//fadeOut函数第一个参数有三个可选值(slow,normal,fast)
$(this).fadeOut('slow',function()
{
alert('淡出完成');
}
);
}
)
//层的淡入
$("#fadeinclick").click(function ()
{
$("#fadein").fadeIn('slow',function ()
{
alert('淡入完成');
}
);
}
)
//手动调整层的透明度
$("#fadeto").click(function ()
{
//0.5表示透明度为50%
$(this).fadeTo('slow',0.5,function ()
{
alert("手动调整透明度成功");
}
)
}
)
//向下滑动显示(向上滑动效果相反,用法相同slideUp)
$("#clickslidedown").click(
function ()
{
//有四个可选参数slow,fast,normal,1000(1000表示显示所消耗的时间,在使用数字时不加引号)
$("#slidedown").slideDown(3000,function ()
{
//显示完毕的回调函数
alert("向下滑动完毕");
}
);
}
)
//混合滑动显示(如果是隐藏则滑动显示，如果是显示则滑动隐藏)
$("#clickslidetoggle").click(
function ()
{
//有四个可选参数slow,fast,normal,1000(1000表示显示所消耗的时间,在使用数字时不加引号)
$("#slidetoggle").slideToggle("slow",function ()
{
//显示完毕的回调函数
alert("混合滑动完毕");
}
);
}
)
}
)
-->
</script>
</head>
<div>
click
</div>
<br>
<div>
click1
</div>
<textarea id="csschange">
ffff
</textarea>
<div id="add"><+></div>
<div id="dimi"><-></div>
<br>
<div id="fadeout">
点我淡出
</div>
<br>
<div id="fadeinclick">
点我淡入
</div>
<br>
<div id="fadeto">
手动调整透明度
</div>
<div id="fadein" style="display:none">
我是由点击淡入而出来的
</div>
<br>
<div id="clickslidedown">
点我向下滑动显示
</div>
<div id="slidedown" style="display:none">
向下滑动显示
</div>
<br>
<div id="clickslidetoggle">
点我混合滑动显示
</div>
<div id="slidetoggle" style="display:none">
混合滑动显示
</div>
//关于jquery中属性选择器的问题,直接从网站拷贝过来
我们根据实例来解释jquery选择器（selectors）中xpath几种常用的用法
比如下面html代码
<ul>
<li class="aaaa" title="ttt">li-1</li>
<li class="bbbb">li-2</li>
<li title="fffff">li-2</li>
</ul>
<div class="aaaa" title="ttt">li-1</div>
<div class="bbbb">li-2</div>
<div title="fffff">li-2</div>
－－－－－－－－－－－－－－－－－－－－－－－－－－－
第一种根据属性选择E[@attr]
$("[@title]").click()..........
即选择所有元素内 属性带有title的元素
即
<li class="aaaa" title="ttt">li-1</li>
<li title="fffff">li-2</li>
<div class="aaaa" title="ttt">li-1</div>
<div title="fffff">li-2</div>
$("div[@title]").click()..........
选择所有div标签下的所有带title的元素
即
<div class="aaaa" title="ttt">li-1</div>
<div title="fffff">li-2</div>
第二种根据属性值选择E[@attr=val]
$("div[@title=ttt]").click()................
选择div下所有title属性等于ttt的元素
即
<div class="aaaa" title="ttt">li-1</div>
如果是 $("[@title=ttt]").click()................
所有元素下属性title等于ttt的元素
<li class="aaaa" title="ttt">li-1</li>
<div class="aaaa" title="ttt">li-1</div>
第三种根据属性值开始字母选择E[@attr^=val]
$("div[@title^=t]").click()................
所有div元素下所有属性title值是以t为开头的元素
第三种根据属性值开始字母选择E[@attr$=val]
$("div[@title$=t]").click()................
所有div元素下所有属性title值是以t为结尾的元素
第三种根据属性值包含字母选择E[@attr*=val]
$("div[@title*=t]").click()................
所有div元素下所有属性title值是包含t的所有元素
第三种根据多个属性选择E[@attr=val][@attr=val]
$("div[@title=ttt][@class=aaaa]").click()................
所有div元素下所有属性title值是等于ttt并且属性class等于aaaa的元素
//属性选择器结束
已经是夜里1点50了,虽然不瞌睡,还是强迫自己去睡.
-----------------------------------------------------------------
1.如何用jquery去统计一个表格中tr的个数
$("#tname tr").length; //其中tname是需要统计的table的id名称
2.在ie6中我们可以用伪类选择符如:hover为超链接设置悬停样式,这时我们可以使用jquery的hover()方法
3.jquery不支持事件捕获,如果想使用事件捕获请使用原生的javascript
4.这段时间乱七八糟写的一个demo文件,这里存个档
<script type="text/javascript">
$(document).ready(function()
{
$("#panel h5.head").toggle(function(event)
{
//元素的事件类型
//alert(event.type);
//获得触发事件的元素
//alert(event.target);
//获得鼠标相对于页面的坐标
//alert(event.pageX+event.pageY);
//获得鼠标的左中右三个键(1为左键,2为中键,3为右键)
//alert(e.which());
//获取键盘中的ctrl按键
//alert(event.metaKey());
//指向原始的事件对象
//alert(event.originalEvent());
//移除绑定
//$("#panel h5.head").unbind("click");
//让绑定的元素只执行一次
//$("#panel h5.head").one("click",function(){});
//模拟操作按钮点击事件
//$("#btn").trigger("click");
//动画效果
$(this).next().css("color","red");
$(this).next().show("slow");
//判断当前元素是否处于动画状态
//$(this).is(":animated");
//每三秒向右移动500px,并向左移动,动画回调函数(加上stop(true)停止当前动画并清空动画队列)
$(this).next().stop(true).animate({left:"+=500px",opacity:"1"},3000).animate({left:"-=500px"},6000,function()
{
alert("回调函数执行");
}
);
},function()
{
$(this).next().hide();
}
)
//动画滚动实例
//alert($("#next").parent().next().width());
//表单元素操作实战
$(":input").focus(function()
{
// $(":input").addClass("input");
}
).blur(function()
{
$(":input").removeClass("input");
}
)
//文本框动态变化
$("#addtext").click(function()
{
//动态变化
if(!$("#text").is(":animated"))//判断是否处于动画
{
$("#text").animate({width:"+=50px"},500).animate({height:"+=50px"},500);
}
// $("#text").attr("rows",$("#text").attr("rows")*2);
// $("#text").attr("cols",$("#text").attr("cols")*3);
}
)
$("#subtext").click(function()
{
if(!$("#text").is(":animated"))//判断是否处于动画
{
$("#text").animate({scrollTop:"+=12000"},500);//控制滚动条
}
}
)
//复选框
$("#checkall").click(function(){
$("[name='sport']:checkbox").attr("checked",true);
}
)
//获取选中的复选框的值
var check=$("input[name='order_no']:checked");
var array_order_no="";
var command="";
//拼接所有选中的订单号
check.each(function(i){
array_order_no = array_order_no+command+$(this).val();
command=",";
});
//如果每个复选框都选中了,自动选中全选框
$("[name='sport']:checkbox").click(function()
{
var flag=true;
$("[name='sport']:checkbox").each(function()
{
if(!this.checked)flag=false;
}
)
$("#checkall").attr("checked",flag);
}
)
//下拉框元素移动
$("#addright").click(function()
{
var $options=$("#leftsel option:selected");//如果是全部移动,只需将:selected去掉即可
$options.appendTo($("#rightsel"));
}
)
//表单验证
$("#send").click(function(){
$(".required").each(function(){
{
//可以在jquery对象后面加[0]实现和dom对象的相互转换
//$(this).parent()[0].innerHTML+="<strong color='red'>*</strong>";
$(this).parent().append("<strong>*</strong>");
}
})
}
)
//使用triggerHandler来处理事件,不触发浏览器默认的事件,不冒泡(此实例演示如何即时提醒用户,以增加用户的体验)
$(".required").blur(function(){
//首先清除原有的提示
$("#error").remove();
$(this).parent().append("<strong id='error'>请输入20位以内的名字</strong>");
}).focus(function(){
//获得焦点时,触发离开焦点事件(triggerHandler可以不触发默认事件以便文本框可以获得焦点)
$(this).triggerHandler("blur");
}).keyup(function(){
//当用户输入值时也触发失去焦点事件
$(this).triggerHandler("blur");
}
)
//表格隔行变色
$("#changecolor:tbody tr:odd").css({"background":"red"});
$("#changecolor:tbody tr:even").css({"background":"blue"});
//改变某一行的样式(获得当前元素所有同辈元素siblings())
$("#changecolor tr:contains('11111')").css({"background":"yellow"});
//网页换肤原理(调用不同的样式表,并且把用户选择的皮肤记入cookie中,其中用js操作cookie可以有一个jquery.cookie.js的插件)
}
);
function a()
{
// alert($("p").text());
//alert($("ul li :eq(1)").text());
// $li=$("ul li:eq(1)");
// alert($li.text());
//alert($("p").attr("title"));
$("ul li").click(function()
{
//复制元素,如果clone参数为true那么同时复制元素绑的事件
$li=$(this).clone(true);
$("ul").append($li);
}
)
//取得最近的匹配元素
$("body").bind("click",function(e)
{
// $(e.target).closest("li").css("color","red");
}
)
//随鼠标移动的div(注意:div的position要设为absolute)
$("#img").mouseover(function(e)
{
var $tooltip=$("<div id='tooltip' width='50'>666666666666</div>");
$("body").append($tooltip);
$("#tooltip").css({"top":(e.pageY-10)+"px","left":(e.pageX+20)+"px","display":"none","position":"absolute","padding":"5px"}).fadeIn("slow");
//alert($("#tooltip").html());
}
)
}
function appendfruit()
{
//添加元素
// $("ul").append($("<li class='xiangjiao'>香蕉</li><li title='xigua'>西瓜</li>"));
//移除元素
// $delelement=$("ul li:eq(3)").remove();
// alert($delelement.attr('class'));
//替换标签
//$("p").replaceWith("<strong>我很强壮</strong>");
//在p标签外面包上strong标签,如果是wrapAll是在所有元素外面,而wrap是在每个元素外面
//$("p").wrap("<strong></strong>");
//设置多个样式
//$("p").attr({"title":"red","class":"imclass"});
//添加class,如果本身有一个class,那么会同时存在两个class并合并样式,如果某个样式重复定义那么后面的会覆盖前面的
//$("p").addClass("anthor");
//删除class(可以同时删除多个样式表,不过中间要用空格隔开)
//$("p").removeClass("anthor");
//切换样式
//$("p").toggleClass("anthor");
//切换动作(在两个function中描述的动作来回切换)
// $("p").toggle(function(){...},function(){...})
//判断是否含有某个样式
//$("p").is(".anthor");
//设置html内容(相当于javascript中的innerHTML)
//$("p").html("<strong>设置p之间的html内容</strong>");
//设置文本内容(相当于innerTEXT)
//$("p").text("设置文本内容");
//设置或获得元素的值
//$("p").val();
//onfocus,onblur事件(focus,blur)
//$("p").focus(function(){..})
//多选下拉框(a,b同时被选中)
//$("select").val(["a","b"]);
//设置下拉选项被选中
//$("#single option:eq(1)").attr("selected",true);
//设置下拉选中的文本和值
$("#single").get(0).options.text="a";
$("#single").get(0).options.value="a";
//上面的方法有可能在火狐中失效,但是下面的这个方法在两个浏览器中都可用,呵呵
$("#callstatus option[value='"+callstatus+"']").attr("selected",true);
设置值为callstatus的下拉列表框被选中.
//获得子元素(只考虑子元素)
//$("ul").children();
//获得元素后面紧临的同辈元素
//$("p").next();
//获得元素前面紧临的同辈元素
//$("p").prev();
//取得元素前后所有的同辈元素
//$("p").siblings();
//设置元素的css样式
//$("p").css("color","red");
//透明度的设置(设置p元素的透明度为半透明)
//$("p").css("opacity","0.5");
//元素的宽度和高度
//$("p").height();$("p").width(100px);
//获得元素在窗口的偏移量
//$offset=$("p").offset();
//$offset.left;$offset.top;
//获取元素滚动条的位置并可以设置
//$("textarea").scrollTop(300);//元素的垂直滚动条滚动到指定的位置
//$("textarea").scrollLeft(300);//元素的横向滚动条滚动到指定的位置
}
</script>
5.在jquery中如果给一个标签绑定了一个事件,那么用dom生成的相同类型的标签不具有该
事件,比如你给页面中所有的a标签绑定了click事件,那么你用dom动态生成一个a标签并不具有click事件,但是可以用插件来实现livequery
6.一个ajax提交并返回xml数据的例子
<script type="text/javascript">
$(document).ready(function(){
$("#chatform").submit(function(){
$.post("message.xml",{
action:"getmessage",
name:$("#author").val(),
content:$("#msg").val()
},function(data){
$("#messagewindow").empty();
addMessage(data);
});
return false;
});
$("#loading").ajaxStart(function(){
$("#loading").show();
})
$("#loading").ajaxStop(function(){
$("#loading").hide();
})
});
function addMessage(data)
{
$(data).find("message").each(function() {
var name=$(this).find("name").text();
var content=$(this).find("content").text();
$("#messagewindow").append("<p>"+name+":"+content+"</p>"+"<br>");
});
}
</script>
<style type="text/css">
<!--
.mb {
border:1px solid #9FBBD0;
height:300px;
width:600px;
}
-->
</style>
<body>
<div id="wrapper">
<div id="messagewindow" class="mb"><span id="loading">加载中...</span></div>
<form id="chatform">
姓名:<input type="text" id="author" size="50"/></br>
内容:<input type="text" id="msg" size="50"/></br>
<input type="submit" value="发送"/></br>
</form>
</div>
</body>
6.jquery ajax请求
<script type="text/javascript" language="java">
$(document).ready(function(){
$("#send").click(function(){
//加载index.html页面,并且加载相应的样式(如果在页面加上class选择器,那么就是选择sel的内容注意中间有一个空格)
// $("#resText").load("index.html .sel");
//load传递的方式
// $("#resText").load("index.html",function(){//无参的传递的方式为get方式
//});
//$("#resText").load("index.html",{name:"li",age:"10"},function(responseText,textStatus,XMLHttpRequest){//无参的传递的方式为post方式
//回调函数有三个参数 responseText为返回的文本内容,textStatus返回状态,XMLHttpRequest对象
//});
//jquery.get()方法
//$.get("index.php",{
// username:$("#test").val(),
// content:$("#test").val()
//},function(data,textStatus){
//回调函数只有当textStatus为success时才能成功调用
//返回的为html内容,直接追加到后面$("#resText").html(data);
//返回的为xml内容,需要在服务器端设置(content-type:text/xml;charset=utf-8)
//var username=$(data).find("comment").attr("username");
//var content=$(data).find("comment content").text();
//var txtHtml="<div>"+username+content+"</div>";
//$("#resText").html(txtHtml);
//返回的为json内容,这时需要设置$.get()方法最后一个参数为json
//var username=data.username;var content=data.content;
//动态的加载javascript文件,支持回调函数
//});
//$.getScript('test.js');//此方法可以在点击某个按钮时动态加载
//加载一个json文件
//$.getJSON('test.json',function(data){
// //这里写加载完json数据后该如何处理
//}
//);
//利用jsonp跨域调用,其中jsoncallback=?,服务器端返回的值类似于JQUET0988788({"account":"XX","passed":"true","error":"null"})作为方法名返回
/**
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=car&tagmode=any&format=json&jsoncallback=?",function(data){
$.each(data.items,function(i,item){
$("<img class='para'/").attr("src",item.media.m).appendTo("#resText");
})
})
*/
//jquery循环函数,data为需要循环的数组和对象,commentIndex为对象的索引,commentValue为值
//$.each(data,function(commentIndex,commentValue)){};
//$.ajax()可以取代上面的所有方法,只是参数不一样
//取代$.getJSON方法
/**
$.ajax({
type:"get",
url:"test.json",
dataType:"json",
success:function(data){
//do something
},
error:function(data){
//
}
}
)
*/
//serialize()方法用来序列表单元素,serializeArray()方法将dom元素序列化后,返回json格式的数据
/**
$("#send").click(function(){
$.get("get1.php",$("#form1").serialize(),function(data,textStatus){})//此方法可以把form1的所有元素序列化成字符串传递
})
*/
//var fields={"a":"1","b":"2"};
//console.log(fields)//用firebug将fields对象输出
//$.param()用来对一个数组或对象按照key/value进行序列化
/**
var obj={a:1,b:2,c:3};
var k=$.param(obj);
console.log(k);
*/
//ajax全局事件,可以用来控制ajax请求时的等待处理,如果要使ajax请求时不受全局参数影响,可以设置$.ajax(global:false)
/**
$("#resText").load("index.html");
$("#loading").ajaxStart(function(){
$("#loading").show();
});
$("#loading").ajaxStop(function(){
$("#loading").hide();
});
*/
})
})
</script>
</head>
<body>
<input type="button" value="ajax获取" id="send"/>
<div id="resText"></div>
<div id="loading" style="display:none">等待中...</div>
</body>
注:jquery ajax提交时,如果设置异步提交为false,即共同提交!
不能使用data传参的方式,而应该在url地址后面拼接传参!
7.如果想使用ui插件请访问http://jqueryui.com/download,下载其中的开发包,里面不仅有js插件还有demo,下面是一个简单的例子(其中的js都可以在开发包中找到):
<head>
<script type="text/javascript" src="jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="ui.core.js"></script>
<script type="text/javascript" src="ui.sortable.js"></script>
<script type="text/javascript" src="jquery-ui-1.7.2.custom.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
//$("#myfirst").sortable();//某些特殊情况可能导致单击事件冲突,这时需要在sortable中加上{delay:1},延迟一毫秒
//与后台结合
$("#myfirst").sortable({
delay:1,
stop:function(){
//$("#mylist").sortable('serialize')得到的数据是这样的形式mylist[]=mood&mylist[]=photo&mylist[]=blog&mylist[]=vote....,后台得到的就是一个mylist数组
$.post("sortable.php",$("#mylist").sortable('serialize'),function(response){
alert(response);
}
)
}
})
});
</script>
<style type="text/css">
<!--
.mb {
border:1px solid #9FBBD0;
height:300px;
width:600px;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="messagewindow" class="mb"><span id="loading">加载中...</span>
<ul id="myfirst">
<li id="myfirst_mood">心情</li>
<li id="myfirst_photo">相册</li>
<li id="myfirst_blog">日志</li>
<li id="myfirst_write">发表</li>
<li id="myfirst_vote">投票</li>
</ul>
</div>
</div>
</body>
8.可拖拽的购物车(jquery自带的图片管理demo,在上面加一些代码判断让他符合自己的要求)
<html lang="en">
<head>
<title>jQuery UI Droppable - Simple photo manager</title>
<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.3.2.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
<script type="text/javascript" src="../../ui/ui.droppable.js"></script>
<script type="text/javascript" src="../../ui/ui.resizable.js"></script>
<script type="text/javascript" src="../../ui/ui.dialog.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
#gallery { float: left; width: 65%; min-height: 12em; } * html #gallery { height: 12em; } /* IE6 */
.gallery.custom-state-active { background: #eee; }
.gallery li { float: left; width: 96px; padding: 0.4em; margin: 0 0.4em 0.4em 0; text-align: center; }
.gallery li h5 { margin: 0 0 0.4em; cursor: move; }
.gallery li a { float: right; }
.gallery li a.ui-icon-zoomin { float: left; }
.gallery li img { width: 100%; cursor: move; }
#trash { float: right; width: 32%; min-height: 18em; padding: 1%;} * html #trash { height: 18em; } /* IE6 */
#trash h4 { line-height: 16px; margin: 0 0 0.4em; }
#trash h4 .ui-icon { float: left; }
#trash .gallery h5 { display: none; }
</style>
<script type="text/javascript">
$(function() {
// there's the gallery and the trash
var $gallery = $('#gallery'), $trash = $('#trash');
// let the gallery items be draggable
$('li',$gallery).draggable({
cancel: 'a.ui-icon',// clicking an icon won't initiate dragging
revert: 'invalid', // when not dropped, the item will revert back to its initial position
containment: $('#demo-frame').length ? '#demo-frame' : 'document', // stick to demo-frame if present
helper: 'clone',
cursor: 'move'
});
// let the trash be droppable, accepting the gallery items
$trash.droppable({
accept: '#gallery > li',
activeClass: 'ui-state-highlight',
drop: function(ev, ui) {
deleteImage(ui.draggable);
}
});
// let the gallery be droppable as well, accepting items from the trash
$gallery.droppable({
accept: '#trash li',
activeClass: 'custom-state-active',
drop: function(ev, ui) {
recycleImage(ui.draggable);
}
});
// image deletion function
var recycle_icon = '<a href="link/to/recycle/script/when/we/have/js/off" title="Recycle this image" class="ui-icon ui-icon-refresh">Recycle image</a>';
function deleteImage($item) {
//防止原有对象消失,克隆一个原有的对象并且不保留原有的事件属性(防止事件触发)
$item=$item.clone();var flag;
var $list = $('ul',$trash).length ? $('ul',$trash) : $('<ul class="gallery ui-helper-reset"/>').appendTo($trash);
$item.find('a.ui-icon-trash').remove();
//循环判断是否拖拽是同一件产品,如果是就不提交
$trash.find("li").each(function(data){
if($(this).attr("id")==$item.attr("id"))
{
alert("重复提交");
flag=false;
return false;
}
});
//一个标志位来标识
if(flag==false){return false;}
$item.append(recycle_icon).appendTo($list).fadeIn(function() {
$item.animate({ width: '48px' }).find('img').animate({ height: '36px' });
});
}
// image recycle function
var trash_icon = '<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>';
function recycleImage($item) {
$item=$item.clone(true);
$item.fadeOut(function() {
$item.find('a.ui-icon-refresh').remove();
$item.css('width','96px').append(trash_icon).find('img').css('height','72px').end().appendTo($gallery).fadeIn();
});
}
// image preview function, demonstrating the ui.dialog used as a modal window
function viewLargerImage($link) {
var src = $link.attr('href');
var title = $link.siblings('img').attr('alt');
var $modal = $('img[src$="'+src+'"]');
if ($modal.length) {
$modal.dialog('open')
} else {
var img = $('<img alt="'+title+'" width="384" height="288" style="display:none;padding: 8px;" />')
.attr('src',src).appendTo('body');
setTimeout(function() {
img.dialog({
title: title,
width: 400,
modal: true
});
}, 1);
}
}
// resolve the icons behavior with event delegation
$('ul.gallery > li').click(function(ev) {
var $item = $(this);
var $target = $(ev.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);
}
return false;
});
});
</script>
</head>
<body>
<div class="demo ui-widget ui-helper-clearfix">
<ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix">
<li class="ui-widget-content ui-corner-tr" id="1">
<h5 class="ui-widget-header">High Tatras</h5>
<img src="images/high_tatras_min.jpg" alt="The peaks of High Tatras" width="96" height="72" />
<a href="images/high_tatras.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
</li>
<li class="ui-widget-content ui-corner-tr" id="2">
<h5 class="ui-widget-header">High Tatras 2</h5>
<img src="images/high_tatras2_min.jpg" alt="The chalet at the Green mountain lake" width="96" height="72" />
<a href="images/high_tatras2.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
</li>
<li class="ui-widget-content ui-corner-tr" id="3">
<h5 class="ui-widget-header">High Tatras 3</h5>
<img src="images/high_tatras3_min.jpg" alt="Planning the ascent" width="96" height="72" />
<a href="images/high_tatras3.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
</li>
<li class="ui-widget-content ui-corner-tr" id="4">
<h5 class="ui-widget-header">High Tatras 4</h5>
<img src="images/high_tatras4_min.jpg" alt="On top of Kozi kopka" width="96" height="72" />
<a href="images/high_tatras4.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
</li>
</ul>
<div id="trash" class="ui-widget-content ui-state-default">
<h4 class="ui-widget-header"><span class="ui-icon ui-icon-trash">Trash</span> Trash</h4>
</div>
</div><!-- End demo -->
<div class="demo-description">
<p>You can delete an image either by dragging it to the Trash or by clicking the trash icon.</p>
<p>You can "recycle" an image by dragging it back to the gallery or by clicking the recycle icon.</p>
<p>You can view larger image by clicking the zoom icon. jQuery UI dialog widget is used for the modal window.</p>
</div><!-- End demo-description -->
</body>
</html>
<head>
<style type="text/css">
.divcolor
{
background-color:red
}
</style>
<!--导入jquery开发包-->
<script src='jquery-1.3.1.min.js'></script>
<script language='javascript'>
<!--
//$(document).ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。 简单地说，这个方法纯粹是对向window.load事件注册事件的替代方法。通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数.document意思是说，获取整个网页文档对象（类似的于window.document），
$(document).ready(function()
{
//添加所有div元素的样式
$('div').addClass('divcolor');
/**为所有的div绑定click事件
$('div').click(function()
{
alert('hello dominic');
//移除当前元素的样式
$(this).removeClass('divcolor');
}
)*/
//增大textarea
$("#add").click(function()
{
//为textarea增加样式
$("#csschange").css("border","2px dashed #6600FF");
var objtextarea=document.getElementById("csschange");
objtextarea.rows=objtextarea.rows*2;
objtextarea.cols=objtextarea.cols*2;
}
)
//缩小textarea
$("#dimi").click(function()
{
$("#csschange").css("border","2px dashed #6600FF");
var objtextarea=document.getElementById("csschange");
//长度和宽度不能小于1
if(objtextarea.rows/2<1||objtextarea.cols/2<1)
{
return;
}
objtextarea.rows=objtextarea.rows/2;
objtextarea.cols=objtextarea.cols/2;
}
)
//层的淡出
$("#fadeout").click(function ()
{
//fadeOut函数第一个参数有三个可选值(slow,normal,fast)
$(this).fadeOut('slow',function()
{
alert('淡出完成');
}
);
}
)
//层的淡入
$("#fadeinclick").click(function ()
{
$("#fadein").fadeIn('slow',function ()
{
alert('淡入完成');
}
);
}
)
//手动调整层的透明度
$("#fadeto").click(function ()
{
//0.5表示透明度为50%
$(this).fadeTo('slow',0.5,function ()
{
alert("手动调整透明度成功");
}
)
}
)
//向下滑动显示(向上滑动效果相反,用法相同slideUp)
$("#clickslidedown").click(
function ()
{
//有四个可选参数slow,fast,normal,1000(1000表示显示所消耗的时间,在使用数字时不加引号)
$("#slidedown").slideDown(3000,function ()
{
//显示完毕的回调函数
alert("向下滑动完毕");
}
);
}
)
//混合滑动显示(如果是隐藏则滑动显示，如果是显示则滑动隐藏)
$("#clickslidetoggle").click(
function ()
{
//有四个可选参数slow,fast,normal,1000(1000表示显示所消耗的时间,在使用数字时不加引号)
$("#slidetoggle").slideToggle("slow",function ()
{
//显示完毕的回调函数
alert("混合滑动完毕");
}
);
}
)
}
)
-->
</script>
</head>
<div>
click
</div>
<br>
<div>
click1
</div>
<textarea id="csschange">
ffff
</textarea>
<div id="add"><+></div>
<div id="dimi"><-></div>
<br>
<div id="fadeout">
点我淡出
</div>
<br>
<div id="fadeinclick">
点我淡入
</div>
<br>
<div id="fadeto">
手动调整透明度
</div>
<div id="fadein" style="display:none">
我是由点击淡入而出来的
</div>
<br>
<div id="clickslidedown">
点我向下滑动显示
</div>
<div id="slidedown" style="display:none">
向下滑动显示
</div>
<br>
<div id="clickslidetoggle">
点我混合滑动显示
</div>
<div id="slidetoggle" style="display:none">
混合滑动显示
</div>
//关于jquery中属性选择器的问题,直接从网站拷贝过来
我们根据实例来解释jquery选择器（selectors）中xpath几种常用的用法
比如下面html代码
<ul>
<li class="aaaa" title="ttt">li-1</li>
<li class="bbbb">li-2</li>
<li title="fffff">li-2</li>
</ul>
<div class="aaaa" title="ttt">li-1</div>
<div class="bbbb">li-2</div>
<div title="fffff">li-2</div>
－－－－－－－－－－－－－－－－－－－－－－－－－－－
第一种根据属性选择E[@attr]
$("[@title]").click()..........
即选择所有元素内 属性带有title的元素
即
<li class="aaaa" title="ttt">li-1</li>
<li title="fffff">li-2</li>
<div class="aaaa" title="ttt">li-1</div>
<div title="fffff">li-2</div>
$("div[@title]").click()..........
选择所有div标签下的所有带title的元素
即
<div class="aaaa" title="ttt">li-1</div>
<div title="fffff">li-2</div>
第二种根据属性值选择E[@attr=val]
$("div[@title=ttt]").click()................
选择div下所有title属性等于ttt的元素
即
<div class="aaaa" title="ttt">li-1</div>
如果是 $("[@title=ttt]").click()................
所有元素下属性title等于ttt的元素
<li class="aaaa" title="ttt">li-1</li>
<div class="aaaa" title="ttt">li-1</div>
第三种根据属性值开始字母选择E[@attr^=val]
$("div[@title^=t]").click()................
所有div元素下所有属性title值是以t为开头的元素
第三种根据属性值开始字母选择E[@attr$=val]
$("div[@title$=t]").click()................
所有div元素下所有属性title值是以t为结尾的元素
第三种根据属性值包含字母选择E[@attr*=val]
$("div[@title*=t]").click()................
所有div元素下所有属性title值是包含t的所有元素
第三种根据多个属性选择E[@attr=val][@attr=val]
$("div[@title=ttt][@class=aaaa]").click()................
所有div元素下所有属性title值是等于ttt并且属性class等于aaaa的元素
//属性选择器结束
已经是夜里1点50了,虽然不瞌睡,还是强迫自己去睡.
-----------------------------------------------------------------
1.如何用jquery去统计一个表格中tr的个数
$("#tname tr").length; //其中tname是需要统计的table的id名称
2.在ie6中我们可以用伪类选择符如:hover为超链接设置悬停样式,这时我们可以使用jquery的hover()方法
3.jquery不支持事件捕获,如果想使用事件捕获请使用原生的javascript
4.这段时间乱七八糟写的一个demo文件,这里存个档
<script type="text/javascript">
$(document).ready(function()
{
$("#panel h5.head").toggle(function(event)
{
//元素的事件类型
//alert(event.type);
//获得触发事件的元素
//alert(event.target);
//获得鼠标相对于页面的坐标
//alert(event.pageX+event.pageY);
//获得鼠标的左中右三个键(1为左键,2为中键,3为右键)
//alert(e.which());
//获取键盘中的ctrl按键
//alert(event.metaKey());
//指向原始的事件对象
//alert(event.originalEvent());
//移除绑定
//$("#panel h5.head").unbind("click");
//让绑定的元素只执行一次
//$("#panel h5.head").one("click",function(){});
//模拟操作按钮点击事件
//$("#btn").trigger("click");
//动画效果
$(this).next().css("color","red");
$(this).next().show("slow");
//判断当前元素是否处于动画状态
//$(this).is(":animated");
//每三秒向右移动500px,并向左移动,动画回调函数(加上stop(true)停止当前动画并清空动画队列)
$(this).next().stop(true).animate({left:"+=500px",opacity:"1"},3000).animate({left:"-=500px"},6000,function()
{
alert("回调函数执行");
}
);
},function()
{
$(this).next().hide();
}
)
//动画滚动实例
//alert($("#next").parent().next().width());
//表单元素操作实战
$(":input").focus(function()
{
// $(":input").addClass("input");
}
).blur(function()
{
$(":input").removeClass("input");
}
)
//文本框动态变化
$("#addtext").click(function()
{
//动态变化
if(!$("#text").is(":animated"))//判断是否处于动画
{
$("#text").animate({width:"+=50px"},500).animate({height:"+=50px"},500);
}
// $("#text").attr("rows",$("#text").attr("rows")*2);
// $("#text").attr("cols",$("#text").attr("cols")*3);
}
)
$("#subtext").click(function()
{
if(!$("#text").is(":animated"))//判断是否处于动画
{
$("#text").animate({scrollTop:"+=12000"},500);//控制滚动条
}
}
)
//复选框
$("#checkall").click(function(){
$("[name='sport']:checkbox").attr("checked",true);
}
)
//获取选中的复选框的值
var check=$("input[name='order_no']:checked");
var array_order_no="";
var command="";
//拼接所有选中的订单号
check.each(function(i){
array_order_no = array_order_no+command+$(this).val();
command=",";
});
//如果每个复选框都选中了,自动选中全选框
$("[name='sport']:checkbox").click(function()
{
var flag=true;
$("[name='sport']:checkbox").each(function()
{
if(!this.checked)flag=false;
}
)
$("#checkall").attr("checked",flag);
}
)
//下拉框元素移动
$("#addright").click(function()
{
var $options=$("#leftsel option:selected");//如果是全部移动,只需将:selected去掉即可
$options.appendTo($("#rightsel"));
}
)
//表单验证
$("#send").click(function(){
$(".required").each(function(){
{
//可以在jquery对象后面加[0]实现和dom对象的相互转换
//$(this).parent()[0].innerHTML+="<strong color='red'>*</strong>";
$(this).parent().append("<strong>*</strong>");
}
})
}
)
//使用triggerHandler来处理事件,不触发浏览器默认的事件,不冒泡(此实例演示如何即时提醒用户,以增加用户的体验)
$(".required").blur(function(){
//首先清除原有的提示
$("#error").remove();
$(this).parent().append("<strong id='error'>请输入20位以内的名字</strong>");
}).focus(function(){
//获得焦点时,触发离开焦点事件(triggerHandler可以不触发默认事件以便文本框可以获得焦点)
$(this).triggerHandler("blur");
}).keyup(function(){
//当用户输入值时也触发失去焦点事件
$(this).triggerHandler("blur");
}
)
//表格隔行变色
$("#changecolor:tbody tr:odd").css({"background":"red"});
$("#changecolor:tbody tr:even").css({"background":"blue"});
//改变某一行的样式(获得当前元素所有同辈元素siblings())
$("#changecolor tr:contains('11111')").css({"background":"yellow"});
//网页换肤原理(调用不同的样式表,并且把用户选择的皮肤记入cookie中,其中用js操作cookie可以有一个jquery.cookie.js的插件)
}
);
function a()
{
// alert($("p").text());
//alert($("ul li :eq(1)").text());
// $li=$("ul li:eq(1)");
// alert($li.text());
//alert($("p").attr("title"));
$("ul li").click(function()
{
//复制元素,如果clone参数为true那么同时复制元素绑的事件
$li=$(this).clone(true);
$("ul").append($li);
}
)
//取得最近的匹配元素
$("body").bind("click",function(e)
{
// $(e.target).closest("li").css("color","red");
}
)
//随鼠标移动的div(注意:div的position要设为absolute)
$("#img").mouseover(function(e)
{
var $tooltip=$("<div id='tooltip' width='50'>666666666666</div>");
$("body").append($tooltip);
$("#tooltip").css({"top":(e.pageY-10)+"px","left":(e.pageX+20)+"px","display":"none","position":"absolute","padding":"5px"}).fadeIn("slow");
//alert($("#tooltip").html());
}
)
}
function appendfruit()
{
//添加元素
// $("ul").append($("<li class='xiangjiao'>香蕉</li><li title='xigua'>西瓜</li>"));
//移除元素
// $delelement=$("ul li:eq(3)").remove();
// alert($delelement.attr('class'));
//替换标签
//$("p").replaceWith("<strong>我很强壮</strong>");
//在p标签外面包上strong标签,如果是wrapAll是在所有元素外面,而wrap是在每个元素外面
//$("p").wrap("<strong></strong>");
//设置多个样式
//$("p").attr({"title":"red","class":"imclass"});
//添加class,如果本身有一个class,那么会同时存在两个class并合并样式,如果某个样式重复定义那么后面的会覆盖前面的
//$("p").addClass("anthor");
//删除class(可以同时删除多个样式表,不过中间要用空格隔开)
//$("p").removeClass("anthor");
//切换样式
//$("p").toggleClass("anthor");
//切换动作(在两个function中描述的动作来回切换)
// $("p").toggle(function(){...},function(){...})
//判断是否含有某个样式
//$("p").is(".anthor");
//设置html内容(相当于javascript中的innerHTML)
//$("p").html("<strong>设置p之间的html内容</strong>");
//设置文本内容(相当于innerTEXT)
//$("p").text("设置文本内容");
//设置或获得元素的值
//$("p").val();
//onfocus,onblur事件(focus,blur)
//$("p").focus(function(){..})
//多选下拉框(a,b同时被选中)
//$("select").val(["a","b"]);
//设置下拉选项被选中
//$("#single option:eq(1)").attr("selected",true);
//设置下拉选中的文本和值
$("#single").get(0).options.text="a";
$("#single").get(0).options.value="a";
//上面的方法有可能在火狐中失效,但是下面的这个方法在两个浏览器中都可用,呵呵
$("#callstatus option[value='"+callstatus+"']").attr("selected",true);
设置值为callstatus的下拉列表框被选中.
//获得子元素(只考虑子元素)
//$("ul").children();
//获得元素后面紧临的同辈元素
//$("p").next();
//获得元素前面紧临的同辈元素
//$("p").prev();
//取得元素前后所有的同辈元素
//$("p").siblings();
//设置元素的css样式
//$("p").css("color","red");
//透明度的设置(设置p元素的透明度为半透明)
//$("p").css("opacity","0.5");
//元素的宽度和高度
//$("p").height();$("p").width(100px);
//获得元素在窗口的偏移量
//$offset=$("p").offset();
//$offset.left;$offset.top;
//获取元素滚动条的位置并可以设置
//$("textarea").scrollTop(300);//元素的垂直滚动条滚动到指定的位置
//$("textarea").scrollLeft(300);//元素的横向滚动条滚动到指定的位置
}
</script>
5.在jquery中如果给一个标签绑定了一个事件,那么用dom生成的相同类型的标签不具有该
事件,比如你给页面中所有的a标签绑定了click事件,那么你用dom动态生成一个a标签并不具有click事件,但是可以用插件来实现livequery
6.一个ajax提交并返回xml数据的例子
<script type="text/javascript">
$(document).ready(function(){
$("#chatform").submit(function(){
$.post("message.xml",{
action:"getmessage",
name:$("#author").val(),
content:$("#msg").val()
},function(data){
$("#messagewindow").empty();
addMessage(data);
});
return false;
});
$("#loading").ajaxStart(function(){
$("#loading").show();
})
$("#loading").ajaxStop(function(){
$("#loading").hide();
})
});
function addMessage(data)
{
$(data).find("message").each(function() {
var name=$(this).find("name").text();
var content=$(this).find("content").text();
$("#messagewindow").append("<p>"+name+":"+content+"</p>"+"<br>");
});
}
</script>
<style type="text/css">
<!--
.mb {
border:1px solid #9FBBD0;
height:300px;
width:600px;
}
-->
</style>
<body>
<div id="wrapper">
<div id="messagewindow" class="mb"><span id="loading">加载中...</span></div>
<form id="chatform">
姓名:<input type="text" id="author" size="50"/></br>
内容:<input type="text" id="msg" size="50"/></br>
<input type="submit" value="发送"/></br>
</form>
</div>
</body>
6.jquery ajax请求
<script type="text/javascript" language="java">
$(document).ready(function(){
$("#send").click(function(){
//加载index.html页面,并且加载相应的样式(如果在页面加上class选择器,那么就是选择sel的内容注意中间有一个空格)
// $("#resText").load("index.html .sel");
//load传递的方式
// $("#resText").load("index.html",function(){//无参的传递的方式为get方式
//});
//$("#resText").load("index.html",{name:"li",age:"10"},function(responseText,textStatus,XMLHttpRequest){//无参的传递的方式为post方式
//回调函数有三个参数 responseText为返回的文本内容,textStatus返回状态,XMLHttpRequest对象
//});
//jquery.get()方法
//$.get("index.php",{
// username:$("#test").val(),
// content:$("#test").val()
//},function(data,textStatus){
//回调函数只有当textStatus为success时才能成功调用
//返回的为html内容,直接追加到后面$("#resText").html(data);
//返回的为xml内容,需要在服务器端设置(content-type:text/xml;charset=utf-8)
//var username=$(data).find("comment").attr("username");
//var content=$(data).find("comment content").text();
//var txtHtml="<div>"+username+content+"</div>";
//$("#resText").html(txtHtml);
//返回的为json内容,这时需要设置$.get()方法最后一个参数为json
//var username=data.username;var content=data.content;
//动态的加载javascript文件,支持回调函数
//});
//$.getScript('test.js');//此方法可以在点击某个按钮时动态加载
//加载一个json文件
//$.getJSON('test.json',function(data){
// //这里写加载完json数据后该如何处理
//}
//);
//利用jsonp跨域调用,其中jsoncallback=?,服务器端返回的值类似于JQUET0988788({"account":"XX","passed":"true","error":"null"})作为方法名返回
/**
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=car&tagmode=any&format=json&jsoncallback=?",function(data){
$.each(data.items,function(i,item){
$("<img class='para'/").attr("src",item.media.m).appendTo("#resText");
})
})
*/
//jquery循环函数,data为需要循环的数组和对象,commentIndex为对象的索引,commentValue为值
//$.each(data,function(commentIndex,commentValue)){};
//$.ajax()可以取代上面的所有方法,只是参数不一样
//取代$.getJSON方法
/**
$.ajax({
type:"get",
url:"test.json",
dataType:"json",
success:function(data){
//do something
},
error:function(data){
//
}
}
)
*/
//serialize()方法用来序列表单元素,serializeArray()方法将dom元素序列化后,返回json格式的数据
/**
$("#send").click(function(){
$.get("get1.php",$("#form1").serialize(),function(data,textStatus){})//此方法可以把form1的所有元素序列化成字符串传递
})
*/
//var fields={"a":"1","b":"2"};
//console.log(fields)//用firebug将fields对象输出
//$.param()用来对一个数组或对象按照key/value进行序列化
/**
var obj={a:1,b:2,c:3};
var k=$.param(obj);
console.log(k);
*/
//ajax全局事件,可以用来控制ajax请求时的等待处理,如果要使ajax请求时不受全局参数影响,可以设置$.ajax(global:false)
/**
$("#resText").load("index.html");
$("#loading").ajaxStart(function(){
$("#loading").show();
});
$("#loading").ajaxStop(function(){
$("#loading").hide();
});
*/
})
})
</script>
</head>
<body>
<input type="button" value="ajax获取" id="send"/>
<div id="resText"></div>
<div id="loading" style="display:none">等待中...</div>
</body>
注:jquery ajax提交时,如果设置异步提交为false,即共同提交!
不能使用data传参的方式,而应该在url地址后面拼接传参!
7.如果想使用ui插件请访问http://jqueryui.com/download,下载其中的开发包,里面不仅有js插件还有demo,下面是一个简单的例子(其中的js都可以在开发包中找到):
<head>
<script type="text/javascript" src="jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="ui.core.js"></script>
<script type="text/javascript" src="ui.sortable.js"></script>
<script type="text/javascript" src="jquery-ui-1.7.2.custom.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
//$("#myfirst").sortable();//某些特殊情况可能导致单击事件冲突,这时需要在sortable中加上{delay:1},延迟一毫秒
//与后台结合
$("#myfirst").sortable({
delay:1,
stop:function(){
//$("#mylist").sortable('serialize')得到的数据是这样的形式mylist[]=mood&mylist[]=photo&mylist[]=blog&mylist[]=vote....,后台得到的就是一个mylist数组
$.post("sortable.php",$("#mylist").sortable('serialize'),function(response){
alert(response);
}
)
}
})
});
</script>
<style type="text/css">
<!--
.mb {
border:1px solid #9FBBD0;
height:300px;
width:600px;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="messagewindow" class="mb"><span id="loading">加载中...</span>
<ul id="myfirst">
<li id="myfirst_mood">心情</li>
<li id="myfirst_photo">相册</li>
<li id="myfirst_blog">日志</li>
<li id="myfirst_write">发表</li>
<li id="myfirst_vote">投票</li>
</ul>
</div>
</div>
</body>
8.可拖拽的购物车(jquery自带的图片管理demo,在上面加一些代码判断让他符合自己的要求)
<html lang="en">
<head>
<title>jQuery UI Droppable - Simple photo manager</title>
<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.3.2.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
<script type="text/javascript" src="../../ui/ui.droppable.js"></script>
<script type="text/javascript" src="../../ui/ui.resizable.js"></script>
<script type="text/javascript" src="../../ui/ui.dialog.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
#gallery { float: left; width: 65%; min-height: 12em; } * html #gallery { height: 12em; } /* IE6 */
.gallery.custom-state-active { background: #eee; }
.gallery li { float: left; width: 96px; padding: 0.4em; margin: 0 0.4em 0.4em 0; text-align: center; }
.gallery li h5 { margin: 0 0 0.4em; cursor: move; }
.gallery li a { float: right; }
.gallery li a.ui-icon-zoomin { float: left; }
.gallery li img { width: 100%; cursor: move; }
#trash { float: right; width: 32%; min-height: 18em; padding: 1%;} * html #trash { height: 18em; } /* IE6 */
#trash h4 { line-height: 16px; margin: 0 0 0.4em; }
#trash h4 .ui-icon { float: left; }
#trash .gallery h5 { display: none; }
</style>
<script type="text/javascript">
$(function() {
// there's the gallery and the trash
var $gallery = $('#gallery'), $trash = $('#trash');
// let the gallery items be draggable
$('li',$gallery).draggable({
cancel: 'a.ui-icon',// clicking an icon won't initiate dragging
revert: 'invalid', // when not dropped, the item will revert back to its initial position
containment: $('#demo-frame').length ? '#demo-frame' : 'document', // stick to demo-frame if present
helper: 'clone',
cursor: 'move'
});
// let the trash be droppable, accepting the gallery items
$trash.droppable({
accept: '#gallery > li',
activeClass: 'ui-state-highlight',
drop: function(ev, ui) {
deleteImage(ui.draggable);
}
});
// let the gallery be droppable as well, accepting items from the trash
$gallery.droppable({
accept: '#trash li',
activeClass: 'custom-state-active',
drop: function(ev, ui) {
recycleImage(ui.draggable);
}
});
// image deletion function
var recycle_icon = '<a href="link/to/recycle/script/when/we/have/js/off" title="Recycle this image" class="ui-icon ui-icon-refresh">Recycle image</a>';
function deleteImage($item) {
//防止原有对象消失,克隆一个原有的对象并且不保留原有的事件属性(防止事件触发)
$item=$item.clone();var flag;
var $list = $('ul',$trash).length ? $('ul',$trash) : $('<ul class="gallery ui-helper-reset"/>').appendTo($trash);
$item.find('a.ui-icon-trash').remove();
//循环判断是否拖拽是同一件产品,如果是就不提交
$trash.find("li").each(function(data){
if($(this).attr("id")==$item.attr("id"))
{
alert("重复提交");
flag=false;
return false;
}
});
//一个标志位来标识
if(flag==false){return false;}
$item.append(recycle_icon).appendTo($list).fadeIn(function() {
$item.animate({ width: '48px' }).find('img').animate({ height: '36px' });
});
}
// image recycle function
var trash_icon = '<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>';
function recycleImage($item) {
$item=$item.clone(true);
$item.fadeOut(function() {
$item.find('a.ui-icon-refresh').remove();
$item.css('width','96px').append(trash_icon).find('img').css('height','72px').end().appendTo($gallery).fadeIn();
});
}
// image preview function, demonstrating the ui.dialog used as a modal window
function viewLargerImage($link) {
var src = $link.attr('href');
var title = $link.siblings('img').attr('alt');
var $modal = $('img[src$="'+src+'"]');
if ($modal.length) {
$modal.dialog('open')
} else {
var img = $('<img alt="'+title+'" width="384" height="288" style="display:none;padding: 8px;" />')
.attr('src',src).appendTo('body');
setTimeout(function() {
img.dialog({
title: title,
width: 400,
modal: true
});
}, 1);
}
}
// resolve the icons behavior with event delegation
$('ul.gallery > li').click(function(ev) {
var $item = $(this);
var $target = $(ev.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);
}
return false;
});
});
</script>
</head>
<body>
<div class="demo ui-widget ui-helper-clearfix">
<ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix">
<li class="ui-widget-content ui-corner-tr" id="1">
<h5 class="ui-widget-header">High Tatras</h5>
<img src="images/high_tatras_min.jpg" alt="The peaks of High Tatras" width="96" height="72" />
<a href="images/high_tatras.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
</li>
<li class="ui-widget-content ui-corner-tr" id="2">
<h5 class="ui-widget-header">High Tatras 2</h5>
<img src="images/high_tatras2_min.jpg" alt="The chalet at the Green mountain lake" width="96" height="72" />
<a href="images/high_tatras2.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
</li>
<li class="ui-widget-content ui-corner-tr" id="3">
<h5 class="ui-widget-header">High Tatras 3</h5>
<img src="images/high_tatras3_min.jpg" alt="Planning the ascent" width="96" height="72" />
<a href="images/high_tatras3.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
</li>
<li class="ui-widget-content ui-corner-tr" id="4">
<h5 class="ui-widget-header">High Tatras 4</h5>
<img src="images/high_tatras4_min.jpg" alt="On top of Kozi kopka" width="96" height="72" />
<a href="images/high_tatras4.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
</li>
</ul>
<div id="trash" class="ui-widget-content ui-state-default">
<h4 class="ui-widget-header"><span class="ui-icon ui-icon-trash">Trash</span> Trash</h4>
</div>
</div><!-- End demo -->
<div class="demo-description">
<p>You can delete an image either by dragging it to the Trash or by clicking the trash icon.</p>
<p>You can "recycle" an image by dragging it back to the gallery or by clicking the recycle icon.</p>
<p>You can view larger image by clicking the zoom icon. jQuery UI dialog widget is used for the modal window.</p>
</div><!-- End demo-description -->
</body>
</html>
分享到：
发表评论
-
关于prototype介绍
2012-02-25 15:21 793prototype 是在 IE 4 及其以后版本引入的一个针对 ... -
js解析json和xml
2011-12-24 22:34 1538转自http://www.cnblogs.com/lu ... -
关于ie与firefox css兼容性的文章
2011-09-28 13:31 1003一、IE与FireFox的js和css png透明 Alph ... -
关于ie与firefox js兼容性的文章
2011-09-28 12:01 825最近作浏览器兼容性方面的工作，发现此篇文章，太好了，转帖收藏了 ... -
验证码kaptcha
2011-08-30 16:03 1503以下内容摘自:http://code.google.com/p ... -
jquery城市联动
2011-08-29 14:34 1140转载自 http://dcxy134-126-com.itey ... -
ie6下js window.location.href无法正常跳转
2011-07-25 11:09 2021问题: ie6中使用window.location.hr ... -
带checkbox的树形菜单
2011-04-01 15:49 6050dtree_checkbox.js 1.判断并选中check ... -
一个有用的时间控件
2010-12-03 14:20 923WdatePicker.js -
firefox调用本地资源
2010-12-02 12:33 1637调用firefox原理是利用xpcom组件实现,具体方式如下 ... -
js 动态改变div的定位 firefox与ie差别
2010-06-23 15:40 1637document.getElementById("_ ... -
ie dom 查看器
2010-05-25 13:28 1073ie web developer v5 插件官网: http ... -
js判断浏览器类型以及版本
2010-01-18 17:38 4764原创：李战(leadzen) 阿里软件 2008-9-6 杭州 ... -
ie7如何在js中预览本地图片
2010-01-18 17:14 2040该文章转自http://www.jb51.net/articl ... -
jquery如何实现过几秒消失的标签提示
2009-11-11 14:40 3170<head> <style> . ... -
url传中文参数
2009-11-10 17:39 1647在做搜索的时候,传参数本来中文参数没什么问题,但是后来中文之间 ... -
jquery xml
2009-09-15 09:29 1216<script type="text/java ... -
js特效
2009-09-15 00:04 820转自站内一位兄弟! 各种导航特效----JS树，QQ菜单等 ... -
thickbox.js
2009-08-14 15:44 2148ThickBox 3.1 ThickBox 是 Cody ... -
防止表单元素拖动
2009-07-20 21:43 856<body onselectstart=" ...
相关推荐
Jquery学习笔记 Jquery学习笔记 Jquery学习笔记
jquery学习资料--jquery代码和学习教程
jquery学习资料+教程 包括五个文档:jQuery的起点教程,jQuery经典入门教程,jquery的基本用法.pdf,2010最新jQuery学习资料.pdf,精通JavaScript+jQuery.pdf
该 JQuery学习手册.rar 里面包含了JQuery学习的详细信息!非常棒的学习资料!
精选 jquery 学习资料,这里面的notes.txt 是对文件夹里面文件的的介绍
jQuery学习示例 大全 最新
JQuery学习JQuery学习JQuery学习JQuery学习JQuery学习JQuery学习JQuery学习JQuery学习JQuery学习JQuery学习JQuery学习JQuery学习JQuery学习JQuery学习JQuery学习JQuery学习JQuery学习JQuery学习JQuery学习JQuery学习
learn.jquery.com, jQuery学习中心网站内容 jQuery学习站点这里站点的目标是双重的：如何使用jQuery和JavaScript信息的中心。可以信。详细的详细信息。为了保持及时。活动和社区驱动的参考，具有相对较低的贡献。...
jquery学习笔记，很全面的介绍jquery的用法。 存在的html片段)包装成jQuery对象。 $()方法里面支持的语法又包括3大类，分别是表达式(包括类表达式.，id表达式#，元素表达式等)、符号(包括后代符号space，next符号+...
资源名称：Jquery学习文档 中文WORD版内容简介：本文档主要讲述的是Jquery学习文档；jQuery是继Prototype之后有一个优秀的Javaｓｃｒｉｐｔ库，是一个由John Resig创建于2006年1月的开源项目。现在的jQuery团队主要...
jquery 教程 jQuery学习资料 jQuery学习
jQuery学习指南 和手册一起用，多看看没坏处
Jquery学习 Jquery源代码 Jquery数据库操作 Jquery学习 Jquery源代码 Jquery数据库操作 绝对有用，技术含量
Jquery 学习与实例Jquery 学习与实例Jquery 学习与实例Jquery 学习与实例Jquery 学习与实例Jquery 学习与实例Jquery 学习与实例Jquery 学习与实例Jquery 学习与实例Jquery 学习与实例Jquery 学习与实例Jquery 学习与...
资源名称：JQuery 学习总结及实例 中文WORD版内容简介：普通Javaｓｃｒｉｐｔ的缺点：每种控件的操作方式不统一，不同浏览器下有区别，要编写跨浏览器的程序非常麻烦。因此出现了很多对Javaｓｃｒｉｐｔ 的封装库，...
jQuery学习文档，跟快的适应开发的的不发
jQuery学习名额大转盘抽奖代码是一款抽奖完成会弹出奖品表单信息代码。
jquery学习资料ppt和demo阿发沙发士大夫十分公司打工风格士大夫
jQuery学习资料，包含多个jquery的学习资料，适合初中级学习文档
压缩文件中，包含jquery使用的js脚本文件，jquery介绍文档（包括pdf和教程）,对应出学者是一个很好的学习资料