Jquery有没有图形设计界面?

发布网友发布时间：2022-04-29 01:06

我来回答

共3个回答

懂视网时间：2022-05-16 12:42

jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库，是jquery官方推出的配合jquery使用的用户界面组件集合！包含了许多的界面操作功能。

无论是jQuery UI 还是jQuery的EasyUI框架都能够帮助你，使你建立你的网页很容易。

jQuery UI 或者easyui是一个用户界面插件集合jQuery的基础。

使用jQuery UI 或者easyui你不需要写很多JavaScript代码，你通常定义写一些HTML标记的用户界面。

jQuery UI 或者easyui是很容易的，但功能强大。

使用jQuery UI或者easyui你都需要在你的页面中加入一些js和css文件，当然，你也可以自己去定义自己需要的css。

jQuery UI和easyui都是一些我们可以拿来使用的工具，他们都封装好了，他们经过了不同版本的编写，让我们在使用的时候不用去考虑浏览器兼容性，免去了在写页面时候最容易出现的不同浏览器间不能够兼容的问题，可以直接使用，是真正的“拿来主义”。

jQuery UI和easyui他们所提供的插件的功能有所不同。

jQuery UI所提供的功能共有三大类，其中包括Interactions，Widgets，和Effects。

Interactions中包含Draggable，Droppable，Resizable，Selectable，Sortable这些功能供我们选择，

Widgets类中包含Accordion，Datepicker，Dialog，Progressbar，Slider，Tabs这些不同的功能。

Effects类中包含Add Class，Remove Class，Animate，Effect，show，Switch Class，Toggle，Toggle Class这些功能。

每一个功能都会有不同的属性呈现不同的效果，稍后我会具体的讲解每一个功能的用法。

而easyui共包含7大类。

第一类是Base，包含EasyLoader，Draggable，Droppable，Resizable四个方面。

第二类是Layout，包含Panel，Tabs，Accordion，Layout四个方面。

第三类是Menu and Button，包含Menu，Link Button，Menu Button，Split Button四个创建按钮的效果。

第四类是Form，包含Form，ComboBox，ComboTree，NumberBox，ValidateBox，DateBox，Calendar这几个不同的表单需求。

第五类是Window，包含window，Dialog，Message。

第六类是DataGrid and Tree，包含Pagination，DataGrid，Tree。

我们先来看一下jQuery UI各个功能的具体用法。

我们从Interactions中的Draggable开始。

"EN-US">Draggable有较多的效果，从它所给出方法的参数不同，可以达到不同的效果，它所要用到jquery-1.3.2.js，ui.core.js，ui.draggable.js这三个js文件。它所给出的方法是draggable()，给它不同的参数，它可以实现种不同的效果。

我们先看一下它是第一个效果(默认属性)（Default functionality），可以在页面中用鼠标随意拖动一个DOM element在你可以看见的范围内，它所用的代码为：

$(function() {

$("#draggable").draggable();

});

</script>

很简单，只要这几行代码你就可以实现一个javascript特效。

我们再看第二个效果（Events）下面这段代码：

$(function() {

var $start_counter = $('#event-start'), $drag_counter = $('#event-drag'), $stop_counter = $('#event-stop');

var counts = [0,0,0];

$("#draggable").draggable({

start: function() {

counts[0]++;

updateCounterStatus($start_counter,counts[0]);

drag: function() {

counts[1]++;

updateCounterStatus($drag_counter,counts[1]);

stop: function() {

counts[2]++;

updateCounterStatus($stop_counter,counts[2]);

}

});

function updateCounterStatus($event_counter,new_count) {

// first update the status visually...

if (!$event_counter.hasClass('ui-state-hover')) {

$event_counter.addClass('ui-state-hover')

.siblings().removeClass('ui-state-hover');

}

// ...then update the numbers

$('span.count',$event_counter).text(new_count);

}

</script>

这段代码比之前的代码要复杂，所实现的效果也更多，它可以计算你共拖动了多少次DOM和你共拖动了多少距离。

它通过在draggable方法内增加的一个数组counts来存储开始和结束时的次数，和你一共拖动的距离。

我们再看第三个效果（Constrain movement），代码：

$(function() {

$("#draggable").draggable({ axis: 'y' });

$("#draggable2").draggable({ axis: 'x' });

$("#draggable3").draggable({ containment: '#containment-wrapper', scroll: false });

$("#draggable4").draggable({ containment: '#demo-frame' });

$("#draggable5").draggable({ containment: 'parent' });

});

</script>

分别调用了五次draggable方法，每次都给draggable方法不同的参数，实现不同的效果。第一个方法调用是让DOM只能够上下移动，第二个方法调用实现让DOM只能够左右移动，第三个方法调用实现让DOM只能在给它规定的box内移动，第四个方法调用就实现可以在box外移动，而第五个方法调用则是让DOM只能在它的父节点内移动。

第四个效果（Delay start），代码：

$(function() {

$("#draggable").draggable({ distance: 20 });

$("#draggable2").draggable({ delay: 1000 });

$(".ui-draggable").disableSelection();

});

</script>

它给的参数有一定的限制作用，例如distance:20，就说明你必须要拖动20px以上它才会有效果，否则它是不会让你拖动的，而delay则是延时，是说你要等到1000ms以后你才能够拖动它。

第五个效果（Snap to element or grid）

</style>

$(function() {

$("#draggable").draggable({ snap: true });

$("#draggable2").draggable({ snap: '.ui-widget-header' });

$("#draggable3").draggable({ snap: '.ui-widget-header', snapMode: 'outer' });

$("#draggable4").draggable({ grid: [20,20] });

$("#draggable5").draggable({ grid: [80, 80] });

});

</script>

第一个参数是DOM可以自动吸附在其它的box边缘上，第二个参数是让DOM可以吸附在大的box边缘，里外侧都可，第三个参数让DOM只能吸附在box的外侧，而里侧没有效果，第四个参数是让DOM只能移动到20,20的倍数这样的地方，第五个参数和第四个参数是一样的，只是给的数据不同。

第六个效果（Auto-scroll）

$(function() {

$("#draggable").draggable({ scroll: true });

$("#draggable2").draggable({ scroll: true, scrollSensitivity: 100 });

$("#draggable3").draggable({ scroll: true, scrollSpeed: 100 });

});

</script>

第七个效果（Revert position）

$(function() {

$("#draggable").draggable({ revert: true });

$("#draggable2").draggable({ revert: true, helper: 'clone' });

});

</script>

参数revert设定，使DOM被拖动后返回原来的位置。加上helper：’clone’属性，则在拖动的时候在原先DOM的地方依旧显示DOM。

第八个效果（Visual feedback）

$(function() {

$("#draggable").draggable({ helper: 'original' });

$("#draggable2").draggable({ opacity: 0.7, helper: 'clone' });

$("#draggable3").draggable({

cursor: 'move',

cursorAt: { top: -12, left: -20 },

helper: function(event) {

return $('<div class="ui-widget-header">I'm a custom helper</div>');

}

});

$("#set div").draggable({ stack: { group: '#set div', min: 1 } });

});

</script>

第一个DOM可以正常的拖动，第二个DOM拖动后会返回原来的位置，helper属性上面讲过了，opacity属性则是设定DOM的透明度。第三个DOM在你实施拖动的时候，会显示一个I'm a custom helper的DIV给你。

而后面三个DOM，每拖动一个DOM会让被拖动的DOM在其它的两个DOM外层，也就是最上面。

第九个效果（Drag handle）

$(function() {

$("#draggable").draggable({ handle: 'p' });

$("#draggable2").draggable({ cancel: "p.ui-widget-header" });

$("div, p").disableSelection();

});

</script>

在这两个DOM中每个DIV中都嵌套一个p标签，每个handle属性表明鼠标在点击在P标签上才能够拖动DOM，而第二个cancel表明要点击在不是P标签的DIV中才能够拖动DOM。

第十个效果（Cursor style）

$(function() {

$("#draggable").draggable({ cursorAt: { cursor: 'move', top: 56, left: 56 } });

$("#draggable2").draggable({ cursorAt: { cursor: 'crosshair', top: -5, left: -5 } });

$("#draggable3").draggable({ cursorAt: { bottom: 0 } });

});

</script>

第一个DOM中的参数是说在拖动DOM的时候，在水平方向上移动，会先向相反的方向移动56px，垂直方向上也是一样。第二个DOM说明在小范围移动或者双击时会让DOM往上移动-5,左移动-5,实际上就是向下和向右各移动5,第三个DOM是在小范围拖动或双击时会向上移动。

第十一个效果（Draggable + sortable）

$(function() {

$("#sortable").sortable({

revert: true

});

$("#draggable").draggable({

connectToSortable: '#sortable',

helper: 'clone',

revert: 'invalid'

})

$("ul, li").disableSelection();

});

</script>

以上代码是让页面中的ul和li元素在拖动的同时呈现出sortable的效果。

第二个介绍的是 "EN-US">droppable，它包含有六个效果，它分别要用到 "EN-US">jquery-1.3.2.js， "EN-US">ui.core.js， "EN-US">ui.droppable.js， "EN-US">ui.draggable.js这四个js文件。

先看第一个（Default functionality）

$(function() {

$("#draggable").draggable();

$("#droppable").droppable({

drop: function(event, ui) {

$(this).addClass('ui-state-highlight').find('p').html('Dropped!');

}

});

</script>

上面代码表示当DOM拖动到指定的DOM中，该DOM背景色变，增加一个class效果。

第二个（Accepted elements），代码：

$(function() {

$("#draggable, #draggable-nonvalid").draggable();

$("#droppable").droppable({

accept: '#draggable',

activeClass: 'ui-state-hover',

hoverClass: 'ui-state-active',

drop: function(event, ui) {

$(this).addClass('ui-state-highlight').find('p').html('Dropped!');

}

});

</script>

上面代码分别给两个DOM都用了Draggable方法让其可以拖动，然后对其第二个DOM用了droppable（）方法，并且给了hoverCalss，让拖动到指定的DOM上浮动时候也产生效果，并且当放开鼠标后再次产生一个效果。

第三个（Prevent propagation），代码：

$(function() {

$("#draggable").draggable();

$("#droppable, #droppable-inner").droppable({

activeClass: 'ui-state-hover',

hoverClass: 'ui-state-active',

drop: function(event, ui) {

$(this).addClass('ui-state-highlight').find('> p').html('Dropped!');

return false;

}

});

$("#droppable2, #droppable2-inner").droppable({

greedy: true,

activeClass: 'ui-state-hover',

hoverClass: 'ui-state-active',

drop: function(event, ui) {

$(this).addClass('ui-state-highlight').find('> p').html('Dropped!');

}

});

</script>

首先给第一个DOM可以拖动的效果，然后给第二个大DOM和第三个DOM都调用droppable()方法，所不同的是第二个方法中在调用drop时候返回一个false,而第三个不返回，第三个DOM在一开始就调用greedy:true,它们分别表示了，当将第一个DIV拖动到同级的第二个DIV的时候，如果拖动到它同级的DIV上时，只有外层DIV会产生效果，如果拖动到内层的DIV时，则整个DIV都产生效果，也就是包含外层同级的DIV，而第三个函数调用后只是你拖动到哪个层的DIV，哪个层的DIV产生效果。

第四个（Visual feedback）代码：

$(function() {

$("#draggable").draggable();

$("#droppable").droppable({

hoverClass: 'ui-state-active',

drop: function(event, ui) {

$(this).addClass('ui-state-highlight').find('p').html('Dropped!');

}

});

$("#draggable2").draggable();

$("#droppable2").droppable({

accept: "#draggable2",

activeClass: 'ui-state-hover',

drop: function(event, ui) {

$(this).addClass('ui-state-highlight').find('p').html('Dropped!');

}

});

</script>

这个也同样让其中两个DOM可以拖动让另外两个相对应的DOM上，这次相对应的两个DOM分别调用了hoverCalss和activeClass以产生不同的效果。他们都是在鼠标拖动DOM浮动在其上所表现出的不同。

第五个（Revert draggable position）代码：

$(function() {

$("#draggable").draggable({ revert: 'valid' });

$("#draggable2").draggable({ revert: 'invalid' });

$("#droppable").droppable({

activeClass: 'ui-state-hover',

hoverClass: 'ui-state-active',

drop: function(event, ui) {

$(this).addClass('ui-state-highlight').find('p').html('Dropped!');

}

});

</script>

同样，给其中两个DOM可拖动效果，然后分别拖动两个DOM到指定的DOM上。他们在调用draggable（）方法时就给了不同的revert参数，让其分别拖动到指定DOM上产生不同效果，第一个效果是当拖动到指定的DOM上后，它返回到原来的位置，而指定的DOM也产生相应的效果，第二个效果是当拖动到指定的DOM上后，指定DOM产生相应效果，当把其再拖出时，它返回到原来所在DOM的位置。

第六个（Simple photo manager），代码：

$(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="http://www.php1.cn/">

function deleteImage($item) {

$item.fadeOut(function() {

var $list = $('ul',$trash).length ? $('ul',$trash) : $('<ul class="gallery ui-helper-reset"/>').appendTo($trash);

$item.find('a.ui-icon-trash').remove();

$item.append(recycle_icon).appendTo($list).fadeIn(function() {

$item.animate({ width: '48px' }).find('img').animate({ height: '36px' });

});

}

// image recycle function

var trash_icon = '<a href="http://www.php1.cn/">

function recycleImage($item) {

$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

热心网友时间：2022-05-16 09:50

一。Dreamweaver
Dreamweaver for JQUERY 插件 JQuery MX-9 v.0.2.9.mxp ，
功能：能自动提示代码！对喜欢用Dreamweaver 写jquery 的前台程序员是一个不错的选择
目前支持：Dreamweaver 8 Dreamweavercs3 Dreamweaver cs4
JQuery MX-9 v.0.2.9.mxp 下载

cs4 图

二。aptana

这个是可以说是目前支持js最好的。不仅支持jquery框架。还支持ext ,yui等。

现在最新的版本的是1.2可以做为eclipase的插件，也可以作为作为单独的开发ide

他的一些特性如下：

肯定是支持js的智能提示的。

可以同时看到写的js代码支持的浏览器。

支持js调试，(个人认为 js调试 firefox+firebug就可以）。

不过这个软件启动的时候有点慢。不过电脑的内存够大，也是一点都不慢的。

另外这个软件有免费和收费两种版本。个人认为免费的已经够我们平时的开发使用了。

特性还有很多。等待你的发现

版本分为完全安装版和直接解压就可用的版本。但是要安装jdk。最新的jdk下载

最新版下载：Aptana_Studio_Setup 1.2 rc

图aptana支持的js框架

三。jqueryWtp

这个是我转兄台的原地址

http://hi.baidu.com/javajavajava/blog/item/894620d57e7296c251da4bb1.html

Eclipse的WTP支持Javascript的代码补全功能
但是很简单，而且不支持jQuery
jQueryWTP的目的就是让Eclipse WTP支持jQuery

需要说明的是该插件对于MyEclipse等基于Eclipse WTP的工具也是支持的
项目主页是
http://www.langtags.com/jquerywtp/index.html
下载地址：http://sourceforge.net/project/showfiles.php?group_id=202840

安装方法：

step1:download jqueryWTP_version.jar
step2:find you Eclipse Plugin org.eclipse.wst.javascript.ui_xxxxxxx.jar,backup the plugin.
step3:double click the jar file or run with command java -jar jqueryWTP.version.jar
step4:on the opened swing UI,choose org.eclipse.wst.javascript.ui_xxxxxxx.jar,and output dir.
step5:click generate button.
step6:replace old org.eclipse.wst.javascript.ui_xxxxxxx.jar file with the generated file.
step7:restart eclipse.
step8:open a html file,edit js content.

上面的安装方法是官方网提供的，但我照做了，没安装成功！！

我一直也是用wtp+jquery 用这个也没有安装成功。郁闷。哪位安装成功过的。给我说说哈。先谢过

四。vs2008

来源http://blog.csdn.net/lee576/archive/2008/04/10/2276534.aspx

上周Rich Strahl的POST中提到一个新发布的VS2008 hotfix修复了VS2008对Javascript智能感知的一些BUG，fixed之后可以让VS2008对JQuery提供智能感知，让我等JQuery fans欣喜了一阵子。可仔细一看，还需要另外给JQuery添加上XML comments才行 :( 丧气了... 　

一、

刚才看到已经有快手的牛人做完了这项工作，现在可以直接下载(http://data.lancefisher.net/jquery-1.2.3-intellisense.js)回来用了。

这样引用就行了

<script src="jquery-1.2.3-intellisense.js" type="text/javascript"></script>

如果是在独立的.js文件中需要JQuery智能提示，那么在文件开始加上这行

/// <reference path="jquery-1.2.3-intellisense.js" />

就OK了。

但这个JS是未压缩版的jqery1.2.3，加上XML comments，有120K之巨，开发时用就行了，部署的时候可以换个pack版本的。

不过似乎VS2008对JS的智能感知还有点不足的地方，比如js中的重载函数就不能提供很好的提示支持...希望能再有改进

二、

另外，还有个JQuery XML comments的生成器JQuery IntelliSense Header Generator，这个生成器是根据JQuery官方提供的XML DOC来生成JQuery的函数签名和XML comments。注意，这里只生成函数签名，没有具体的实现。如果嫌第一种方法部署麻烦，那么就可以使用这个签名JS了，我们可以把脚本全部放到独立的.js文件中，然后在js中reference 这个假的JQuery，而在.aspx中则引用真正Pack版的jquery。

这个生成器有个BUG，因为jquery xml doc有些函数的说明中有些有回车符，而这个生成器没有做处理，导致生成的签名JS有误。

我修正了这个BUG，需要的同学可以点击这里下载。记住：这个生成器只生成jq函数签名和XML comments；这个生成器是根据JQuery官方的的XML API doc生成的，也就是说如果以后有版的JQuery API doc出来，你只要把它下载回来覆盖掉这个旧的就行了。

这个生成器生成的签名有个比较好的地方，就是它把重载方法的comments都放到一起了，也就是vs2008的智能提示中可以看到几个不同重载的comments

热心网友时间：2022-05-16 11:08

有0 0~ 装了正在研究现