欢迎来到Doc100.Net免费学习资源知识分享平台!
您的位置:首页 > 程序异常 >

jquery学习 - learnmore的实验田

更新时间: 2015-05-04 00:00:00 责任编辑: Author_N14

 

根据教程写出来一些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>




上一篇:上一篇
下一篇:下一篇

 

随机推荐程序问答结果

 

 

如对文章有任何疑问请提交到问题反馈,或者您对内容不满意,请您反馈给我们DOC100.NET论坛发贴求解。
DOC100.NET资源网,机器学习分类整理更新日期::2015-05-04 00:00:00
如需转载,请注明文章出处和来源网址:http://www.doc100.net/bugs/t/1693160/
本文WWW.DOC100.NET DOC100.NET版权所有。