求助，关于jQuery某个功能实现方法_百度知道
按默认排序
做了一个不知是不是你说的效果。有一点，滚动需要点击上下按钮。在线demo》》html代码&input&type=&button&&value=&上&&id=&previous&&&input&type=&button&&value=&下&&id=&next&&&&&&&div&id=&showAt&&-1&/div&&div&id=&out_Div&&&&&&&div&id=&in_Div&&&&&&&&&&&table&id=&sclTbl&&&&&&&&&&&&&&&colgroup&class=&coL0&&&/colgroup&&&&&&&&&&&&&&colgroup&class=&coL1&&&/colgroup&&&&&&&&&&&&&&tbody&id=&holder&&&&&&&&&&&&&&&&&&&tr&&&&&&&&&&&&&&&&&&&&&&td&No&/td&&&&&&&&&&&&&&&&&&&&&&td&都道府県&/td&&&&&&&&&&&&&&&&&&/tr&&&&&&&&&&&&&&/tbody&&&&&&&&&&&&&&tbody&id=&data&&&&&&&&&&&&&&&&&&&tr&&&&&&&&&&&&&&&&&&&&&&td&1&/td&&&&&&&&&&&&&&&&&&&&&&td&北海道&/td&&&&&&&&&&&&&&&&&&/tr&&&&&&&&&&&&&&&&&&tr&&&&&&&&&&&&&&&&&&&&&&td&2&/td&&&&&&&&&&&&&&&&&&&&&&td&青森県&/td&&&&&&&&&&&&&&&&&&/tr&&&&&&&&&&&&&&&&&&tr&&&&&&&&&&&&&&&&&&&&&&td&3&/td&&&&&&&&&&&&&&&&&&&&&&td&岩手県&/td&&&&/tr&&&&&&&&&&&&&&&&&&tr&&&&&&&&&&&&&&&&&&&&&&td&4&/td&&&&&&&&&&&&&&&&&&&&&&td&宫城県&/td&&&&&&&&&&&&&&&&&&/tr&&&&&&&&&&&&&&&&&&tr&&&&&&&&&&&&&&&&&&&&&&td&5&/td&&&&&&&&&&&&&&&&&&&&&&td&秋田県&/td&&&&&&&&&&&&&&&&&&/tr&&&&&&&&&&&&&&&&&&tr&&&&&&&&&&&&&&&&&&&&&&td&6&/td&&&&&&&&&&&&&&&&&&&&&&td&山形県&/td&&&&&&&&&&&&&&&&&&/tr&&&&&&&&&&&&&&&&&&tr&&&&&&&&&&&&&&&&&&&&&&td&7&/td&&&&&&&&&&&&&&&&&&&&&&td&福岛県&/td&&&&&&&&&&&&&&&&&&/tr&&&&&&&&&&&&&&&&&&tr&&&&&&&&&&&&&&&&&&&&&&td&8&/td&&&&&&&&&&&&&&&&&&&&&&td&茨城県&/td&&&&&&&&&&&&&&&&&&/tr&&&&&&&&&&&&&&&&&&tr&&&&&&&&&&&&&&&&&&&&&&td&9&/td&&&&&&&&&&&&&&&&&&&&&&td&栃木県&/td&&&&&&&&&&&&&&&&&&/tr&&&&&&&&&&&&&&&&&&tr&&&&&&&&&&&&&&&&&&&&&&td&10&/td&&&&&&&&&&&&&&&&&&&&&&td&群马県&/td&&&&&&&&&&&&&&&&&&/tr&&&&&&&&&&&&&&/tbody&&&&&&&&&&/table&&&&&&/div&&/div&js代码$(document).ready(function()&{&&&&var&$content&=&$(&#in_Div&);&&&&var&idList&=&[&3&,&5&,&10&];//停留ID&&&&var&rowLen&=&$content.find(&tbody&tr&).&&&&var&rowAt&=&-1;&&&&var&rowHeight&=&25;//行高&&&&var&tmpLen&=&0;&&&&&&&&$(&#next&).click(function&next()&{&&&&&&&&if&(rowAt&&&rowLen-1)&{rowAt&+=&1;}&&&&&&&&var&tmpObj&=&$content.find(&#data&tr&).eq(rowAt);&&&&&&&&if&(idList.indexOf(tmpObj.find(&td:first&).html())&&=0)&{&&&&&&&&&&&&tmpLen&+=&1;&&&&&&&&&&&&$content.find(&#holder&).append($(&&tr&&/tr&&).html(tmpObj.html()));&&&&&&&&&&&&$content.find(&#holder&tr:last&).css(&top&,tmpLen*rowHeight&+&&px&);&&&&&&&&&&&&$content.find(&#holder&tr:last&).addClass(&tmp&);&&&&&&&&}&&&&&&&&if(!$content.is(&:animated&))&{&&&&&&&&&&&&$content.animate({scrollTop:&$content.scrollTop()&+&rowHeight});&&&&&&&&}&&&&&&&&console.log(rowAt);&&&&&&&&if&(rowAt&==&rowLen-1)&{&&&&&&&&&&&&rowAt&=&-1;&&&&&&&&&&&&tmpLen&=&0;&&&&&&&&&&&&$content.animate({scrollTop:&0});&&&&&&&&&&&&$content.find(&#holder&tr.tmp&).remove();&&&&&&&&}&&&&&&&&$(&#showAt&).html(rowAt);&&&&});&&&&$(&#previous&).click(function&next()&{&&&&&&&&var&tmpObj&=&$content.find(&#data&tr&).eq(rowAt);&&&&&&&&if&(rowAt&&=&0&&&&idList.indexOf(tmpObj.find(&td:first&).html())&&=0)&{&&&&&&&&&&&&tmpLen&-=&1;&&&&&&&&&&&&$content.find(&#holder&tr:last&).remove();&&&&&&&&}&&&&&&&&if&(rowAt&&=&0)&{rowAt&-=&1;}&&&&&&&&if(!$content.is(&:animated&))&{&&&&&&&&&&&&$content.animate({scrollTop:&$content.scrollTop()&-&rowHeight});&&&&&&&&}&&&&&&&&$(&#showAt&).html(rowAt);&&&&});&&&&&});css代码#sclTbl&{&&background-color:&#&&border-collapse:&&font-size:&16&&&}#out_Div&{&&position:&&&padding-top:&20&&width:&300&&border:&1px&solid&#0099&&background-color:&#&&&}#in_Div&{&&overflow:&&&height:&105&&&&&}#sclTbl&#holder&tr&{&&position:&&&top:&0&&left:&0&&background-color:&#&&&}#sclTbl&#holder&tr&td{&&background-color:&#0099&&color:&#&&padding:&3px&0&&&}#sclTbl&#holder&tr.tmp&td{&&background-color:&#&&color:&&&padding:&3px&6&&&&}#sclTbl&#holder&tr&td:nth-child(1){&&width:&60&}#sclTbl&#holder&tr&td:nth-child(2){&&width:&200}#sclTbl&#holder&tr.tmp&td:nth-child(1){&&width:&48&}#sclTbl&#holder&tr.tmp&td:nth-child(2){&&width:&188}#sclTbl&#data&tr&td{&&background-color:&#&&color:&&&padding:&3px&6&&&}.coL0&{&width:&60&}.coL1&{&width:&200&}
很接近了，不过我要的是自动滚动，id判断方式能不能改成&td id=“5”&山形県&/td&吗，我是初学者看不太懂
自动滚动也不难，加一个时间循环来击发下按钮
能说详细点吗 怎么个滚动法
什么意思啊？完全听不懂~能画个图看看吗？
其他类似问题
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁求助..JSP+jquery 实现无刷新功能
[问题点数：40分，结帖人mgz521009]
求助..JSP+jquery 实现无刷新功能
[问题点数：40分，结帖人mgz521009]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
相关帖子推荐：
匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。COLOR SCHEME
在网页设计中，想必一个精彩的进度条将会为你的网站增添不少的精彩，一个好的网页设计往往体现在一些小的细节上面，细节决定了成功与否。在此之前也为大家分享了一些关于进度条的设计 ― 。有了设计理念和作品，那我们怎么用最精彩的方法运用到我们的网页制作当中呢﹖今天就为大家分享一个利用css3制作动态进度条以及附加jQuery百分比数字显示。其效果对比flash来说却毫不逊色，有一个精致的动画进度条，上面还有当前进度的百分比数字显示，而且还会跟着进度条而移动。相信追求新颖的朋友来说一定会非常的喜欢。
HTML的代码非常简单，只要为进度条提供一个容器就可以了。基本的HTML代码如下：
&div class="wrapper"&
&div class="load-bar"&
&div class="load-bar-inner" data-loading="0"& &span id="counter"&&/span& &/div&
&h1&Loading&/h1&
&p&Please wait...(By:&a href=""&&/a&)&/p&
接下来是为我们的进度条定义样式，这里主要运用了CSS3的linear-gradient的渐变属性、border-radius的圆角属性、box-shadow的阴影属性等等，来制作出进度条的初步模型。完成进度条的模型后我们利用animation属性，让进度条开始动起来，就其中的进度条动画设置代码如下：
.load-bar-inner {
height: 99%;
width: 0%;
border-radius:
background: #c2d7
background: linear-gradient(#e0f6c8, #98ad84);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1),
0 1px 5px rgba(0, 0, 0, 0.3),
0 4px 5px rgba(0, 0, 0, 0.3);
animation: loader 10
如果接触了CSS3的朋友，相信大多数人对这个属性都比较熟悉了，在这里大概的说明一下animation设置的参数：
设置对象所应用的动画名称：loader
设置对象动画的持续时间：10s
设置对象动画的过渡类型：linear （线性过渡，等同于贝塞尔曲线）
设置对象动画的循环次数：infinite （无限循环）
@keyframes loader这个标签属性是用来被animation使用的，定义动画时，简单的动画可以直接使用关键字from和to，即从一种状态过渡到另一种状态：
@keyframes loader {
width: 0%;
width: 100%;
下面是完整的CSS代码，大家可以多研究下，也可以自己修改其中的代码，看看是否制作出更加有趣的东西来：
box-sizing: border-
height: 100%;
background: #
background: linear-gradient(#f9f9f9, #cecbc4);
background: -moz-linear-gradient(#f9f9f9, #cecbc4);
background: -webkit-linear-gradient(#f9f9f9, #cecbc4);
background: -o-linear-gradient(#f9f9f9, #cecbc4);
color: #757575;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-
text-align:
padding:0; margin:0;
.wrapper {
width: 350
margin: 200
.wrapper p a {color:#757575; text-decoration:}
.wrapper .load-bar {
width: 100%;
height: 25
border-radius: 30
background: #dcdbd7;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8),
inset 0 2px 3px rgba(0, 0, 0, 0.2);
.wrapper .load-bar:hover .load-bar-inner, .wrapper .load-bar:hover #counter {
animation-play-state:
-moz-animation-play-state:
-o-animation-play-state:
-webkit-animation-play-state:
.wrapper .load-bar-inner {
height: 99%;
width: 0%;
border-radius:
background: #c2d7
background: linear-gradient(#e0f6c8, #98ad84);
background: -moz-linear-gradient(#e0f6c8, #98ad84);
background: -webkit-linear-gradient(#e0f6c8, #98ad84);
background: -o-linear-gradient(#e0f6c8, #98ad84);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1),
0 1px 5px rgba(0, 0, 0, 0.3),
0 4px 5px rgba(0, 0, 0, 0.3);
animation: loader 10
-moz-animation: loader 10
-webkit-animation: loader 10
-o-animation: loader 10
.wrapper #counter {
background: #eeeff3;
background: linear-gradient(#eeeff3, #cbcbd3);
background: -moz-linear-gradient(#eeeff3, #cbcbd3);
background: -webkit-linear-gradient(#eeeff3, #cbcbd3);
background: -o-linear-gradient(#eeeff3, #cbcbd3);
padding: 5px 10
border-radius: 0.4
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1),
0 2px 4px 1px rgba(0, 0, 0, 0.2),
0 1px 3px 1px rgba(0, 0, 0, 0.1);
font-size: 12
font-weight:
animation: counter 10
-moz-animation: counter 10
-webkit-animation: counter 10
-o-animation: counter 10
.wrapper #counter:after {
content: "";
background: #cbcbd3;
transform: rotate(45deg);
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
left: 50%;
margin-left: -4
bottom: -4
box-shadow:
3px 3px 4px rgba(0, 0, 0, 0.2),
1px 1px 1px 1px rgba(0, 0, 0, 0.1);
border-radius: 0 0 3px 0;
.wrapper h1 {
font-size: 28
padding: 20px 0 8px 0;
.wrapper p {
font-size: 13
@keyframes loader {
width: 0%;
width: 100%;
@-moz-keyframes loader {
width: 0%;
width: 100%;
@-webkit-keyframes loader {
width: 0%;
width: 100%;
@-o-keyframes loader {
width: 0%;
width: 100%;
@keyframes counter {
@-moz-keyframes counter {
@-webkit-keyframes counter {
@-o-keyframes counter {
在这里其实有很多个CSS3的知识点，例如进度条上面的进度提示的小图标的下方有个小三角形，这个小三角主要是通过制作一个小的正方形，然后利用position来定位，调整好位置后，再通过transform来转换角度，使之最终成为一个三角形。大家可以多多看看里面的一些小细节，对于学习CSS3来说是很有帮助的。
Javascript
完成了进度条的模型，而且进度条也通过CSS3的定义开始动起来了，那我们就接下来用jQuery来完善我们的进度条，让他成为一个不管外表还是内心都很强大的进度条。嘿嘿…在这里主要做的是让进度条上面的数字随着进度而发生变化，从而客观的知道当前进度条的进度百分比，看下面的代码：
$(function(){
var interval = setInterval(increment,100);
var current = 0;
function increment(){
current++;
$('#counter').html(current+'%');
if(current == 100) { current = 0; }
$('.load-bar').mouseover(function(){
clearInterval(interval);
}).mouseout(function(){
interval = setInterval(increment,100);
这一步需要注意的是别忘了加入jQuery库，不然就看不到效果了。
好了，这就是今天为大家分享的进度条，希望大家喜欢，CSS3真是个好东西……哇哈哈！
素材资源：
喜欢我们的文章请您与朋友分享:
相关文章：
推崇以用户为中心的设计理念，专注于用户体验设计，游走在视觉设计与前端开发之间。——小小的一名视觉设计师jquery.ui.draggable汉语言文档jquery 自由拖拽类~study_Servlet里面一调用Dao里的某个方法就出错_关于编程思维的认知__脚本百事通
稍等，加载中……
^_^请注意，有可能下面的2篇文章才是您想要的内容：
jquery.ui.draggable汉语言文档jquery 自由拖拽类~study
Servlet里面一调用Dao里的某个方法就出错
关于编程思维的认知
jquery.ui.draggable汉语言文档jquery 自由拖拽类~study
jquery.ui.draggable中文文档jquery 自由拖拽类~study~
JQuery UI Draggable插件用来使选中的元素可以通过鼠标拖动.
Draggable的元素受影响css: ui-draggable, 拖动过程中的css: ui-draggable-dragging.
如果需要的不仅仅是拖, 而是一个完整的拖放功能, 请参阅JQuery UI 的Droppable插件, 该插件提供了一个draggable放的目标.
所有的回调函数(start, stop, drag等事件)接受两个参数:
event: 浏览器原生的事件
ui: 一个JQuery的ui对象, 其中有以下主要属性
ui.helper: 正在拖动的元素的JQuery包装对象, ui.helper.context可以获取到原生的DOM元素.
ui.position: ui.helper(也就是我们要拖动的元素)相对于父元素(包含自己的元素, 如果是顶层, 对应body)的偏移, 值是一个对象{top, left}----也就是可以用ui.position.top获取到该元素与父元素的top当前偏移
ui.offset: 与ui.position同意, 这里表示的是和浏览器内容区域左上边界的偏移(注意, 是内容区域, 而不是html的body区域.
html的body在默认情况下, 各种浏览器中都会相对offset有偏移的.)
addClasses:
[类型]Boolean(布尔值)
[默认值]true
[产生影响]
用来设置是否给draggable元素通过ui-draggable样式才装饰它. 主要为了在通过.draggable()初始化很多(成百个)元素的时候优化性能考虑, 但是, 这个选项的设置, 不会影响ui-draggable-dragging样式改变拖动过程样式.
true表示ui-draggable样式被添加到该元素.
false表示ui-draggable样式不被添加到该元素.
[代码示例]draggable其他选项的初始化, 获取属性值, 设置属性值部分除有特殊功能, 不再赘述, 仅粘贴代码.
$('.selector').draggable({ addClasses: false });
将.selector选择器选中的元素渲染成为一个可拖动控件, 不为其添加ui-draggable样式
[获取属性值]
var addClasses = $('#draggable').draggable('option', 'addClasses');
获取.selector选择器选中的可拖动控件的addClasses选项的值.
[设置属性值]
$('.selector').draggable('option', 'addClasses', false);
将.selector选择器选中的可拖动控件的addClasses选项值设置为false.
[类型]Element, Selector(HTML元素对象或选择器)
[默认值]'parent' 父元素
[产生影响]
用来指定控件在拖动过程中ui.helper的容器, 默认情况下, ui.helper使用和初始定义的draggable相同的容器, 也就是其父元素.
[代码示例]
$('.selector').draggable({ appendTo: 'body' });
[获取属性值]
var appendTo = $('.selector').draggable('option', 'appendTo');
[设置属性值]
$('.selector').draggable('option', 'appendTo', 'body');.
[类型]String, Boolean(可取的值有'x', 'y', false)
'x': 只能水平拖动
'y': 只能垂直拖动
false: 既可以水平, 也可以垂直拖动.
[默认值]false, 不限制拖动的方向
[产生影响]
约束拖动过程中的取向.
[代码示例]
$('.selector').draggable({ axis: 'x' });
[获取属性值]
var axis = $('.selector').draggable('option', 'axis');
[设置属性值]
$('.selector').draggable('option', 'axis', 'x');
[类型]选择器
[默认值]':input, option'
[产生影响]
通过选择器指定这类元素不能被渲染成draggable控件.
[代码示例]
$('.selector').draggable({ cancel: 'button' });
[获取属性值]
var cancel = $('.selector').draggable('option', 'cancel');
[设置属性值]
$('.selector').draggable('option', 'cancel', 'button');
connectToSortable: 此选项需要和sortable联合工作, 再议.
[类型]选择器
[默认值]':input, option'
[产生影响]
通过选择器指定这类元素不能被渲染成draggable控件.
[代码示例]
$('.selector').draggable({ cancel: 'button' });
[获取属性值]
var cancel = $('.selector').draggable('option', 'cancel');
[设置属性值]
$('.selector').draggable('option', 'cancel', 'button');
containment:
[类型]选择器, 元素, 字符串, 数组.
选择器: 只能在选择器约束的元素内拖动
元素: 只能在给定的元素内拖动
parent: 只能在父容器内拖动
document: 在当前html文档的document下可拖动, 超出浏览器窗口范围时, 自动出现滚动条
widow: 只能在当前浏览器窗口的内容区域拖动, 拖动超出当前窗口范围, 不会导致出现滚动条...
数组: [x1, y1, x2, y2]以[开始水平坐标, 开始垂直坐标, 结束水平坐标, 结束垂直坐标]的方式划定一个区域, 只能在此区域内拖动. 这种方式指定时, 值是相对当前浏览器窗口内容区域左上角的偏移值.
false: 不限制拖动的活动范围
[默认值]false
[产生影响]
影响指定可拖动控件的活动区域.
[代码示例]
$('.selector').draggable({ containment: 'parent' });
[获取属性值]
var containment = $('.selector').draggable('option', 'containment');
[设置属性值]
$('.selector').draggable('option', 'containment', 'parent');
[类型]字符串.
[默认值]'auto'
[产生影响]
影响指定可拖动控件在拖动过程中的鼠标样式, 该样式设定之后, 需要控件的原始元素支持指定的cursor样式, 如果指定的值原始元素不支持, 则使用原始元素默认的cursor样式. 比如, $('input[type=button]').draggable({ cursor: 'crosshair' }); 由于button不支持crosshair这个鼠标样式, 所以, 会以默认形式显示.
[代码示例]
$('.selector').draggable({ cursor: 'crosshair' });
[获取属性值]
var cursor = $('.selector').draggable('option', 'cursor');
[设置属性值]
$('.selector').draggable('option', 'cursor', 'crosshair');
[类型]对象
通过设置对象的top, left, right, bottom的属性值中的一个或两个来确定位置.
[默认值]false
[产生影响]
在拖动控件的过程中, 鼠标在控件上显示的位置, 值为false(默认)时, 从哪里点击开始拖动, 鼠标位置就在哪里, 如果设置了, 就会在一个相对控件自身左上角偏移位置处, 比如: $('.selector').draggable('option', 'cursorAt', {left: 8, top: 8}); 那么拖动过程中, 鼠标就会在自身的左上角向下向右各偏移8像素处.
[代码示例]
$('.selector').draggable({ cursor: 'crosshair' });
[获取属性值]
var cursor = $('.selector').draggable('option', 'cursor');
[设置属性值]
$('.selector').draggable('option', 'cursor', 'crosshair');
[类型]整数, 单位是毫秒
[产生影响]
可拖动控件从鼠标左键按下开始, 到拖动效果产生的延时. 该选项可以被用来阻止一些不期望的点击带来的无效拖动. 具体效果是: 一次拖动, 从鼠标左键按下, 到delay指定的时间, 如果鼠标左键还没有松开, 那么就认为这次拖动有效, 否则, 认为这次拖动无效.
[代码示例]
$('.selector').draggable({ delay: 500 });
[获取属性值]
var delay = $('.selector').draggable('option', 'delay');
[设置属性值]
$('.selector').draggable('option', 'delay', 500);
[类型]整数, 单位是像素
[产生影响]
可拖动控件从鼠标左键按下开始, 到拖动效果产生的时鼠标必须产生的位移. 该选项可以被用来阻止一些不期望的点击带来的无效拖动. 具体效果是: 一次拖动, 从鼠标左键按下, 只有当鼠标产生的位移达到distance指定的值时, 才认为是有效的拖动.
[代码示例]
$('.selector').draggable({ distance: 30 });
[获取属性值]
var distance = $('.selector').draggable('option', 'distance');
[设置属性值]
$('.selector').draggable('option', 'distance', 30);
[类型]数组[x, y], x代表水平大小, y代表垂直大小, 单位是像素
[默认值]false
[产生影响]
可拖动控件拖动时采用grid的方式拖动, 也就是说拖动过程中的单位是guid选项指定的数组描述的格子那么大.
[代码示例]
$('.selector').draggable({ grid: [50, 20] });
[获取属性值]
var grid = $('.selector').draggable('option', 'grid');
[设置属性值]
$('.selector').draggable('option', 'grid', [50, 20]);
[类型]选择器或元素
[默认值]false
[产生影响]
指定触发拖动的元素. 用法: 将一个id=window的div设置为可拖动控件, 设置它的handle是该div中的一个id=title的span, 那么, 就只有在id=title的span上点击拖动才是有效的.
注意: 该元素一定要是可拖动控件的子元素.
[代码示例]
$('.selector').draggable({ handle: 'h2' });
[获取属性值]
var handle = $('.selector').draggable('option', 'handle');
[设置属性值]
$('.selector').draggable('option', 'handle', 'h2');
[类型]字符串或函数
字符串取值:
'original': 可拖动控件本身移动
'clone': 将可拖动控件自身克隆一个移动, 自身在原始位置不变
函数则必须返回一个DOM元素: 以函数返回的DOM元素移动展现拖动的过程.
[默认值]'original'
[产生影响]
拖动过程中帮助用户知道当前拖动位置的元素.
[代码示例]
$('.selector').draggable({ helper: 'clone' });
[获取属性值]
var helper = $('.selector').draggable('option', 'helper');
[设置属性值]
$('.selector').draggable('option', 'helper', 'clone');
iframeFix:
[类型]布尔值或选择器, 选择器的选择结果需要是iframe元素
[默认值]false
[产生影响]
阻止拖动过程中由于鼠标指针在iframe区域移动, iframe对鼠标移动事件的默认响应.
如果设置为true, 将会阻止拖动过程中当前页面上所有的iframe的mousemove事件, 如果设置一个选择器, 将会阻止指定的iframe的mousemove事件.
[代码示例]
$('.selector').draggable({ iframeFix: true });
[获取属性值]
var iframeFix = $('.selector').draggable('option', 'iframeFix');
[设置属性值]
$('.selector').draggable('option', 'iframeFix', true);
[类型]浮点数值
[默认值]false
[产生影响]
拖动过程中helper(拖动时跟随鼠标移动的控件)的不透明度.
[代码示例]
$('.selector').draggable({ opacity: 0.35 });
[获取属性值]
var opacity = $('.selector').draggable('option', 'opacity');
[设置属性值]
$('.selector').draggable('option', 'opacity', 0.35);
refreshPositions:
[类型]Boolean
[默认值]false
[产生影响]
如果设置为true, 所有的droppable位置会在每次mousemove事件中进行计算.
注意: 该选项主要用于解决高级动态页面展现问题. 慎用.
[代码示例]
$('.selector').draggable({ refreshPositions: true });
[获取属性值]
var refreshPositions = $('.selector').draggable('option', 'refreshPositions');
[设置属性值]
$('.selector').draggable('option', 'refreshPositions', true);
[类型]Boolean, 字符串
[默认值]false
[产生影响]
影响一次拖动之后是否回归到原始位置.
true: 每次拖动停止之后, 元素自动回到原始位置
'invalid': 除非是一个droppable并且被drop(放)成功了, 才不将元素返回到原始位置.
'valid': 除invalid之外的其他情况.
[代码示例]
$('.selector').draggable({ revert: true });
[获取属性值]
var revert = $('.selector').draggable('option', 'revert');
[设置属性值]
$('.selector').draggable('option', 'revert', true);
revertDuration:
[类型]整数
[默认值]500
[产生影响]
revert(回归到原始位置)整个过程需要的时间, 单位是毫秒. 如果设置revert选项设置为false, 则忽略此属性.
[代码示例]
$('.selector').draggable({ revertDuration: 1000 });
[获取属性值]
var revertDuration = $('.selector').draggable('option', 'revertDuration');
[设置属性值]
$('.selector').draggable('option', 'revertDuration', 1000);
[类型]字符串
[默认值]'default'
[产生影响]
该选项描述一个范围, 和droppable的同名选项结合使用, droppable的accept选项用来设置可以接受的draggable控件, 同时, 可接受的drggable控件受scope选项约束, 必须是同一个scope中的draggable和droppable才可以互相拖放.
$('#draggable_a').draggable({scope: 'a'});
$('#draggable_b').draggable({scope: 'b'});
$('#droppable_a').droppable({scope: 'a'});
$('#droppable_b').droppable({scope: 'b'});
droppable控件的accept选项默认是'*', 看起来数draggable_a, draggable_b可以自由的放入到droppable_a和droppable_b中, 但是, 由于scope的约束, draggable_a只能放入到droppable_a, draggable_b只能发乳到droppable_b中.
注意: 这个选项就和变量的名称空间的意义类似. 默认值是'default', 说明如果不指定, 大家都还是有scope的, 名字是default而已.
[代码示例]
$('.selector').draggable({ scope: 'tasks' });
[获取属性值]
var scope = $('.selector').draggable('option', 'scope');
[设置属性值]
$('.selector').draggable('option', 'scope', 'tasks');
[类型]Boolean
[默认值]true
[产生影响]
如果设置为true, 在拖动过程中超出可拖动控件容器的时候, 容器自动增加滚动条
[代码示例]
$('.selector').draggable({ scroll: false });
[获取属性值]
var scope = $('.selector').draggable('option', 'scope');
[设置属性值]
$('.selector').draggable('option', 'scroll', false);
scrollSensitivity:
[类型]整数值
[默认值]20
[产生影响]
滚动条的敏感度.
下面所属的鼠标指针是指在draggable控件移动过程中, 鼠标所处位置.
鼠标指针和与draggable控件所在容器的边距离为多少的时候, 滚动条开始滚动.
[代码示例]
$('.selector').draggable({ scrollSensitivity: 40 });
[获取属性值]
var scrollSensitivity = $('.selector').draggable('option', 'scrollSensitivity');
[设置属性值]
$('.selector').draggable('option', 'scrollSensitivity', 40);
scrollSpeed:
[类型]整数值
[默认值]20
[产生影响]
由于scrollSensitivity导致的滚动发生时, 滚动条一次滚动多少像素值.
[代码示例]
$('.selector').draggable({ scrollSpeed: 40 });
[获取属性值]
var scrollSpeed = $('.selector').draggable('option', 'scrollSpeed');
[设置属性值]
$('.selector').draggable('option', 'scrollSpeed', 40);
[类型]Boolean, 选择器
[默认值]false
[产生影响]
吸附功能, 设置为true等价与设置选择器.ui-draggable, 具体效果是在选择器指定的所有元素上, 当前的draggable控件都可以实现吸附功能, 吸附就是拖动过程中, 靠近但是还没有挨上目标组件是, 自动的将正在拖动的组件吸过去.
[代码示例]
$('.selector').draggable({ snap: true });
[获取属性值]
var snap = $('.selector').draggable('option', 'snap');
[设置属性值]
$('.selector').draggable('option', 'snap', true);
[类型]字符串, 可选值如下
'inner': 在指定的元素内部可以吸附
'outer': 在指定元素外部可以吸附
'both': 里面外面都可以吸附.
[默认值]'both'
[产生影响]
设定吸附时候的模式.
[代码示例]
$('.selector').draggable({ snapMode: 'outer' });
[获取属性值]
var snapMode = $('.selector').draggable('option', 'snapMode');
[设置属性值]
$('.selector').draggable('option', 'snapMode', 'outer');
snapTolerance:
[类型]整数
[默认值]20
[产生影响]
设定离目标对象的边多少像素的时候, 进行吸附.
[代码示例]
$('.selector').draggable({ snap: true });
[获取属性值]
var snap = $('.selector').draggable('option', 'snap');
[设置属性值]
$('.selector').draggable('option', 'snap', true);
[类型]对象{group: '.selector', min: 50}
[默认值]false
[产生影响]
一次初始化一组draggable控件的时候, 将其中的一些draggable控件以给定选择器选择, 作为一组, 这时, 这一组draggable控件就可以实现当前被拖动的始终在最前效果, min用来指定这一组的z-index值的最小值.
[代码示例]
$('.selector').draggable({ stack: { group: 'products', min: 50 } });
[获取属性值]
var stack = $('.selector').draggable('option', 'stack');
[设置属性值]
$('.selector').draggable('option', 'stack', { group: 'products', min: 50 });
[类型]整数
[默认值]false
[产生影响]
拖动时的helper(跟随鼠标移动的控件)的z-index值. z-index就是css中的层叠层数, 数值越大, 越在上层.
[代码示例]
$('.selector').draggable({ zIndex: 2700 });
[获取属性值]
var zIndex = $('.selector').draggable('option', 'zIndex');
[设置属性值]
$('.selector').draggable('option', 'zIndex', 2700);
start: 拖动开始, 指鼠标按下, 开始移动.
[类型]dragstart
[回调函数接受的参数]
event: 原生的浏览器事件.
ui: JQuery的ui对象
this: 当前拖动的控件DOM对象
drag: 拖动过程中鼠标移动.
[类型]drag
[回调函数接受的参数]
event: 原生的浏览器事件.
ui: JQuery的ui对象
this: 当前拖动的控件DOM对象
stop: 拖动结束.
[类型]dragstop
[回调函数接受的参数]
event: 原生的浏览器事件.
ui: JQuery的ui对象
this: 当前拖动的控件DOM对象
[代码示例]
初始化时设置事件.
$('.selector').draggable({
start: function(event, ui) { alert(this); },
drag: function(event, ui) { alert(this); },
stop: function(event, ui) { alert(this); }
动态的绑定事件. 动态绑定时候, 使用的事件名就是事件的类型.
$(".selector").bind('dragstart', function(event, ui) {
alert(this);
$(".selector").bind('drag', function(event, ui) {
alert(this);
$(".selector").bind('dragstop', function(event, ui) {
alert(this);
destroy: 完全移除一个可拖动控件, 使其回退到该元素被初始化成可拖动控件之前的状态.
[代码示例]
$(".selector").progressbar('destroy');
将之前初始化的.selector指定的可拖动控件销毁, 使其返回初始化之前的状态.
disable: 将可拖动控件样式改变成为失效, 与enable对应.
enable: 将可拖动控件样式改变为允许, 与disable对应.
option: 获取或设置可拖动控件的选项, 第二个参数是选项名, 第三个参数是值. 如果不指定值, 就是获取, 指定值, 就是设置.
addClasses: 用来设置是否添加ui-draggable样式.
appendTo: 设置追加到什么地方
axis: 设置拖动的方向
cancel, handle: 设置控制整个控件拖动动作的区域, cancel指定区域不能拖动, handle指定区域控制控件拖动.
connectToSortable: 需要和sortable集成.
containment: 设置控件可拖动范围
cursor, cursorAt: 设置拖动过程中, 鼠标的样式及相对空间自身的位置.
delay, distance: 设置拖动的延迟, delay设置延迟时间, distance设置延迟距离, 目的是防止误点击带来的不期望拖动.
grid: 设置拖动过程移动的单位(以小格的方式移动)
helper: 设置拖动过程中, 跟随鼠标移动的组件.
iframeFix: 解决拖动过程中与iframe层叠后的事件问题.
opacity: 拖动过程helper的不透明度.
refreshPositions: 设置后drop过程中, 鼠标每次移动都会计算位置.
revert, revertDuration: 设置撤销移动相关.
scope: 设定draggable的域, 用来和droppable结合使用时确定可放入的目标.
scroll, scrollSensitivity, scrollSpeed: 设置拖动过程中带来的滚动条相关问题.
snap, snapMode, snapTolerance: 设置吸附的相关属性.
stack, zIndex: 设置控件的层次. http://blog.csdn.net/dunyanan1/article/details/7404467
Servlet里面一调用Dao里的某个方法就出错
【求助】Servlet里面一调用Dao里的某个方法就出错！在Action里面使用Dao中的方法就没错。
方法是同一个。
程序用的主要是Struts，因为要涉及到二级联动的问题。
而且数据都要从数据库中读出的，
所以我在Struts里用servlet来实现，
但是在servlet里，我调用Dao的方法查询数据库里的数据的时候，
public List&Discipline& findbyid(int id){
List&Discipline& list =
sql = "select * from Discipline where Dis_AcademyID = "+id+"";
list = jdbcTemplate.queryForList(sql);
} catch (Exception e) {
e.printStackTrace();
每次执行到list = jdbcTemplate.queryForList(sql);这一步就提示空指针错误。
(在Action里执行时没有出错)
真是郁闷了，琢磨了半天也没整明白到底是什么情况。
所以来到贵吧，希望各位大神帮帮忙，谢谢。
最好能加我QQ：
------解决方案--------------------
那我要怎么解决这个问题？
我试了一个方法，就是在Action里写一个方法，用dao先查询好数据，然后放到list里面，方法的返回值就是这个list，然后我在Servlet里new一个这个Action类，然后在Servlet里调用Action的那个方法，让其返回list结果，这样还是不行。。。。。。。。
你这样做必须不行啊，行就有鬼了！你还是那个问题，你在servlet里new这个action，那么你action的对象就不再是spring管理的，而是你自己管理的，spring就不能给action注入jdbcTemplate了啊！
你让spring帮你管理action是因为你加里一个包：struts2-spring-plugin，有这个包才能做到，那么如果你想让spring帮你管理servlet对象，也一样，加一个servlet和spring兼容的插件包，不过提前说明，这个我没试过，只是在我印象中有这么一个插件包。你搜一下看看有没有吧。
另外，如果你想通过你刚才的方式来做的话，你可以在servlet里调用action的方法只不过调用的使用不要去new那个action，你可以从spring的applicationContext里去拿，这样spring就可以成功注入了
关于编程思维的认知
关于编程思想的认知
通过在兄弟连三个多月的学习，php的原理渐渐地展现在我的面前。我从一个门外汉一点点地蹭进了编程的门槛，
这个过程不能不为之艰辛，铺天盖地的新名词汹涌而来，紧凑的学习节奏逐步跟进。所谓的一切技术都是一副副陌生的面孔，有的温和，有的骠悍，有的高深，有的肤浅。初来咋到的我怎一个【忐忑】了得!
随着时间的推移，迎来了第二个项目。昨日开始着手整理项目需求文档，面对着空白文档，一番苦思冥想，最终得到的结果是一片“浩瀚”！我认识到，整个的这段时间我所做的事只是学习了一点PHP语法，关于到底如何去做一个产品，如何去实现各种功能，要用到学过的哪些东西，我是一片空白。我茫然了！
如果是之前有人问我学的怎么样，我肯定会说挺好的。但事实证明，我只是学会了基本语法，各种实操我知之甚少。到底如何去把学到的东西用到实际当中成为了我面临的最大问题！成为王如嫣真的不是一件愉快的事！可是我所需要的是所谓抽象的编程思想吗？
我开始搜集文献，最终得到答案如下：
程序反应的是一种对客观问题的认识和解决方法，也就是哲学上常提到的认识论和方法论。好的程序并不仅仅局限于实现某种功能，而是以另一种另类的方法去呈现结果，好似乔帮主拿出IPad的瞬间。
通常编程思想就是要搞清楚输入输出数据，以及他们之间的关系，最后用一定的计算步骤进行转换，把输入转换为输出。数据及其关系通常称为数据结构，而计算步骤就是所谓的算法。可见编程思想就是：数据+结构+算法。
对于我的现状来说编程思想就是在编程序之前先想想要怎样编，如何编。这样一来我的目标明确了，不管好赖，坐下来把想得到的能实现的做出来。实践之中出真知，思维得到锻炼，思想自然就形成了。一句话，唯熟尔！
如果您想提高自己的技术水平，欢迎加入本站官方1号QQ群：&&，&&2号QQ群：，在群里结识技术精英和交流技术^_^
本站联系邮箱：