jquery学习

learnmore

浏览: 597264 次
性别:
来自: 上海

最近访客更多访客>>

wangyy

地方疙瘩人

leimingchao

chrunlee

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

jQuery CSS UI json JavaScript

根据教程写出来一些demo

<head>
<style type="text/css">
   .divcolor
   {
       background-color:red
   }
</style>

<script src='jquery-1.3.1.min.js'></script>
<script language='javascript'>
   
</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">

</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">

</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>

<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>
</body>
</html>

分享到：

设计模式 | 如何更改鼠标右键菜单(转载)

2009-02-07 23:39
浏览 2862
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jquery学习

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jquery学习

评论

发表评论

相关推荐

关于prototype介绍

js解析json和xml

关于ie与firefox css兼容性的文章

关于ie与firefox js兼容性的文章

验证码kaptcha

jquery城市联动

ie6下js window.location.href无法正常跳转

带checkbox的树形菜单

一个有用的时间控件

firefox调用本地资源

js 动态改变div的定位 firefox与ie差别

ie dom 查看器

js判断浏览器类型以及版本

ie7如何在js中预览本地图片

jquery如何实现过几秒消失的标签提示

url传中文参数

jquery xml

js特效

thickbox.js

防止表单元素拖动

最近访客更多访客>>