不忘初心,不负韶华,砥砺前行!
Pages: 1/2 First page 1 2 Next page Final page [ View by Articles | List ]
Nov 21
asp.net+jQuery.Jcrop实现在线裁剪图片
Demo地址:

Highslide JS
the jQuery Image Cropping Plugin插件项目地址:
http://deepliquid.com/content/Jcrop.html
1、在页面上加载原图

这个就不用多说了,就是在页面上显示一张图片,一个img标签搞定,不过为了下一步演示,还是贴一下代码

2、用矩形框在原图上选取区域

这个我们要用到一个jQuery插件Jcrop,感谢Jcrop,其项目页面地址:http://deepliquid.com/content/Jcrop.html,再次感谢。接下来就是运用这个插件来让我们能在原图上随意地切图。先在页面上放几个隐藏域,用来存放当前选取的顶点坐标及选取矩形的尺寸,再放一个保存按钮,点击保存按钮后将在服务器上保存切割后的图片。代码如下:

四个隐藏域分别表示x:左上顶点x坐标;y:左上顶点y坐标;w:选取矩形宽度;h:选取矩形长度。
然后我们调用插件,做好初始化工作,引入js和css文件:
Nov 18
SimpleUI 是一基于jQuery开发的一套插件库  
Highslide JS
SimpleUI 1.0 实现了以下功能:
    require(动态加载资源)
    Drag(拖动)
    Drop(拖放)
    Resize(动态调整大小)
    Selectable(鼠标拖选)
    AutoComplete(自动完成)
    Dialog(模拟弹窗)
    Pagination(分页)
    Slide(幻灯片)
    Tab(选项卡)
    每一个功能我们都有详细的DEMO和文档介绍,欢迎大家使用!
    您在使用中有任何问题都可以在本板块发帖,我们会尽快给予答复!
    官网:http://www.simpleui.org/
    下载:http://code.google.com/p/simple-ui/downloads/list
Download ( 376 downloads)

Nov 3
1、关于页面元素的引用
通过jQuery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jQuery对象(集合对象),不能直接调用dom定义的方法。
2、jQuery对象与dom对象的转换
只有jQuery对象才能使用jQuery定义的方法。注意dom对象和jQuery对象是有区别的,调用方法时要注意操作的是dom对象还是jQuery对象。普通的dom对象一般可以通过$()转换成jQuery对象。
如:$(document.getElementById(”msg”))则为jQuery对象,可以使用jQuery的方法。
由于jQuery对象本身是一个集合。所以如果jQuery对象要转换为dom对象则必须取出其中的某一项,一般可通过索引取出。如:$(”#msg”)[0],$(”div”).eq(1)[0],$(”div”).get()[1],$(”td”)[5]这些都是dom对象,可以使用dom中的方法,但不能再使用jQuery的方法。
以下几种写法都是正确的:
$("#msg”).html();  
$("#msg”)[0].innerHTML;  
$("#msg”).eq(0)[0].innerHTML;  
$("#msg”).get(0).innerHTML;
3、如何获取jQuery集合的某一项
对于获取的元素集合,获取其中的某一项(通过索引指定)可以使用eq或get(n)方法或者索引号获取,要注意,eq返回的是jQuery对象,而get(n)和索引返回的是dom元素对象。对于jQuery对象只能使用jQuery的方法,而dom对象只能使用dom的方法,如要获取第三个<div>元素的内容。有如下两种方法:
$("div”).eq(2).html();    //调用jQuery对象的方法  
$("div”).get(2).innerHTML; //调用dom的方法属性
Aug 17
jquery获取父窗口的元素
$("#父窗口元素ID",window.parent.document); 对应javascript版本为window.parent.document.getElementByIdx_x("父窗口元素ID");

取父窗口的元素方法:$(selector, window.parent.document);
那么你取父窗口的父窗口的元素就可以用:$(selector, window.parent.parent.document);

类似的,取其它窗口的方法大同小异
$(selector, window.top.document);
$(selector, window.opener.document);
$(selector, window.top.frames[0].document);
May 30
jquery编写自己的插件
js插件实现代码
第一种实现写法

Js代码  
;(function($){  
    $.fn.extend({  
       "liyh":function(value){  
            if(value==undefined){  
               alert("hello");  
           }else{  
               alert(""+value);  
            }  
       }  
   });  
})(jQuery);
第二种实现写法

Js代码  
(function($){  
    $.fn.liyh=function(value){  
        if(value==undefined){  
           alert("hello");  
        }else{  
           alert(value);  
       }  
    };  
})(jQuery);  


测试调用代码

Html代码  
<html>  
<head>  
   <script type="text/javascript" src="../jquery-1.4.4.min.js"></script>  
    <script type="text/javascript" src="test.js"></script>  
   <script type="text/javascript">  
       $(function(){  
            $(this).liyh("liyh");  
       });  
   </script>  
      
</head>  
<body>  
</body>  
</html>
May 26
JQuery 中没有这个方法,自己今天写了一个Plugin,把代码贴出来分享一下;
Highslide JS
代码如下:

jquery-highlight.js
view sourceprint?
/*
    description:TextBox HighLight
    author:Allen Liu
*/
(function($) {
    $.fn.highlight = function(options) {
        var defaultOpt = {
            lightColor: 'yellow',   /* 高亮时的颜色 */
            lightTime: 1000,        /* 高亮时长 (单位:毫秒) */
            isFocus: true           /* 是否获取焦点 */
        };

        options = $.extend(defaultOpt, options);
        return this.each(function() {
            var sender = $(this);
            if (sender.attr('light') == undefined) {
                var _bgColor = sender.css('background-color');
                sender.css({ 'background-color': options.lightColor });
                if (options.isFocus) {
                    sender.focus();
                }

                sender.attr('light', true);
                window.setTimeout(function() {
                    sender.removeAttr('light');
                    sender.css({ 'background-color': _bgColor });
                }, options.lightTime);
            }
        });
    }
})(jQuery);
Pages: 1/2 First page 1 2 Next page Final page [ View by Articles | List ]