SegmentFault jquery-ui的问题
2023-10-04T23:51:15+08:00
https://segmentfault.com/feeds/tag/jquery-ui
https://creativecommons.org/licenses/by-nc-nd/4.0/
如何在旋转后的父元素中使用draggable拖动元素?
https://segmentfault.com/q/1010000044276862
2023-10-04T23:51:15+08:00
2023-10-04T23:51:15+08:00
Godgiven天恩
https://segmentfault.com/u/godgiventianen
0
<p>编辑2:在仔细阅读了jquery-ui的源代码,并充分理解了其原理后,我制作出了能够符合我的需求的代码:能够在旋转后的父元素中使用jquery-ui的draggable功能以实现拖动子元素的效果。我希望能分享给大家,或许有其他人有着和我类似的需求,可以提供给您作为参考。</p><p>需要写在最前面强调的是,这个功能有一定的局限性,例如旋转的父元素和拖拽的子元素必须都是position:absolute,并且一部分draggable的功能例如snap将可能无法正确工作。另外,由于涉及到了更多计算,这会影响到代码的运行效率。如果这些限制可以满足您的需求,请往下看。</p><p>为了完成这个功能,我们首先需要明确一点:jquery中的offset功能对于旋转后的元素而言,只会得到错误的结果,无一例外。如果您想要移动一个旋转后的元素,必须在这个元素外面嵌套一个父元素用于定位offset,并且移动的draggable绑定的对象也必须是这个父元素。不过,只要我们将其高度和宽度设定为0px,位置设定为absolute的话,就不需要担心这个多出来的父元素会影响到我们的元素结构。wrapper的用处是获取元素在旋转前左上角的offset,并结合角度等计算出旋转后的元素的offset,并以这个旋转后的offset来计算元素的位移值<br>对于我而言,我将其设置为:</p><p>HTML:</p><pre><code><div class="wrapper">
<div id="转动的父元素">
<div class="wrapper>
<div id="移动的子元素"></div>
</div>
</div>
</div>
</code></pre><p>CSS:</p><pre><code>.wrapper{
height:0px;
width:0px;
position:absolute;
}
</code></pre><p>js:</p><pre><code>$(旋转的父元素).css({
"transform" : "rotate(45deg)",
//注意这里,我将父元素的中心设置为元素的中心,如果您需要以其他位置为中心进行旋转,请注意修改下方的return_playground_wrapperOffset()函数中有关中心点坐标和偏移量的部分
"transform-origin" : "center"
)
$(移动的子元素).parent(".wrapper").draggable()
</code></pre><p>随后,我们还需要一些准备工作,例如:<br>1.我们需要能够获取到“转动的父元素”所转动的角度,在这里我将其记录在父元素内: $("#转动的父元素").attr("angle",转动的角度),并通过return_angle()函数获取这个值</p><p>2.我们需要一个额外的函数,用来求得“旋转的父元素”在旋转后的左上角的位置,我的函数如下:</p><pre><code>function return_playground_wrapperOffset(){
//父元素wrapper的坐标:
var wrapper = $("#旋转的父元素").parent(".wrapper")
var wrapper_offset = $(wrapper).offset()
//中心点的坐标
var center_x = wrapper_offset.left + $(huabu).width()/2 * return_scale()
var center_y = wrapper_offset.top + $(huabu).height()/2 * return_scale()
//wrapper相对于中心点的偏移量
var delta_x = - $(huabu).width()/2 * return_scale()
var delta_y = - $(huabu).height()/2 * return_scale()
//旋转弧度
var radian = return_angle() * Math.PI / 180
//计算旋转后的相对坐标
var new_delta_x = delta_x * Math.cos(radian) + delta_y * Math.sin(radian)
var new_delta_y = - delta_x * Math.sin(radian) + delta_y * Math.cos(radian)
//将相对坐标加上中心点的坐标,得到旋转后的左上角顶点的坐标
var new_x = center_x + new_delta_y
var new_y = center_y + new_delta_x
return {left:new_x,top:new_y}</code></pre><p>}</p><p>随后,我修改了jquery-ui的源代码,也就是jquery-ui.js的内容,修改的内容包括两个部分,首先是第约10006行的_refreshOffsets: function( event ) {……}<br>我将其修改为:</p><pre><code>_refreshOffsets: function( event ) {
this.offset = {
top: this.positionAbs.top - this.margins.top,
left: this.positionAbs.left - this.margins.left,
scroll: false,
parent: this._getParentOffset(),
relative: this._getRelativeOffset()
};
//获取父元素转动的角度,并转化为弧度以供三角函数使用
var radian = return_angle() * Math.PI / 180
//旧的偏移量表示的是这个鼠标点击位置与元素左上角的距离,但由于其原理使用到了offset,因此其无法在旋转后正确工作
var old_left = event.pageX - this.offset.left
var old_top = event.pageY - this.offset.top
//不过,我们可以对错误的值进行偏转,依次得到鼠标相对于旋转后的子元素的偏移量,并将其以旋转后的子元素的Left和top的方式进行表示,之所以使用left和top的方式,是因为之后我们在移动元素时,实际操作的是元素的top和left值,这也是为什么在offset无法正确工作的情况下,我们能够通过一些修复来使得draggable能够正确工作,因为其实际的工作原理与offset无关,只是一部分值涉及到了offset的使用
var new_top = old_top * Math.cos(radian) - old_left * Math.sin(radian)
var new_left = old_top * Math.sin(radian) + old_left * Math.cos(radian)
this.offset.click = {
top: new_top,
left: new_left
};
},
</code></pre><p>随后我们还需要修改第约10380行的_generatePosition: function( event, constrainPosition ) {……}函数,修改后的函数如下所示:</p><pre><code>_generatePosition: function( event, constrainPosition ) {
//一直到下一个注解前的内容都可以忽略
var containment, co, top, left,
o = this.options,
scrollIsRootNode = this._isRootNode( this.scrollParent[ 0 ] ),
pageX = event.pageX,
pageY = event.pageY;
if ( !scrollIsRootNode || !this.offset.scroll ) {
this.offset.scroll = {
top: this.scrollParent.scrollTop(),
left: this.scrollParent.scrollLeft()
};
}
if ( constrainPosition ) {
if ( this.containment ) {
if ( this.relativeContainer ) {
co = this.relativeContainer.offset();
containment = [
this.containment[ 0 ] + co.left,
this.containment[ 1 ] + co.top,
this.containment[ 2 ] + co.left,
this.containment[ 3 ] + co.top
];
} else {
containment = this.containment;
}
if ( event.pageX - this.offset.click.left < containment[ 0 ] ) {
pageX = containment[ 0 ] + this.offset.click.left;
}
if ( event.pageY - this.offset.click.top < containment[ 1 ] ) {
pageY = containment[ 1 ] + this.offset.click.top;
}
if ( event.pageX - this.offset.click.left > containment[ 2 ] ) {
pageX = containment[ 2 ] + this.offset.click.left;
}
if ( event.pageY - this.offset.click.top > containment[ 3 ] ) {
pageY = containment[ 3 ] + this.offset.click.top;
}
}
if ( o.grid ) {
top = o.grid[ 1 ] ? this.originalPageY + Math.round( ( pageY -
this.originalPageY ) / o.grid[ 1 ] ) * o.grid[ 1 ] : this.originalPageY;
pageY = containment ? ( ( top - this.offset.click.top >= containment[ 1 ] ||
top - this.offset.click.top > containment[ 3 ] ) ?
top :
( ( top - this.offset.click.top >= containment[ 1 ] ) ?
top - o.grid[ 1 ] : top + o.grid[ 1 ] ) ) : top;
left = o.grid[ 0 ] ? this.originalPageX +
Math.round( ( pageX - this.originalPageX ) / o.grid[ 0 ] ) * o.grid[ 0 ] :
this.originalPageX;
pageX = containment ? ( ( left - this.offset.click.left >= containment[ 0 ] ||
left - this.offset.click.left > containment[ 2 ] ) ?
left :
( ( left - this.offset.click.left >= containment[ 0 ] ) ?
left - o.grid[ 0 ] : left + o.grid[ 0 ] ) ) : left;
}
if ( o.axis === "y" ) {
pageX = this.originalPageX;
}
if ( o.axis === "x" ) {
pageY = this.originalPageY;
}
}
//此处开始我们的修正,首先仍然是获取旋转的父元素的旋转角度并转化为弧度
var radian = return_angle() * Math.PI / 180
//通过上面提到的函数,获取旋转后父元素的左上角此时的位置
var wrapper_offset = return_playground_wrapperOffset()
var old_top = pageY - wrapper_offset.top
var old_left = pageX - wrapper_offset.left
//进行修正,请不要忘记“- this.offset.click.left/top”
var new_left = old_left * Math.cos(radian) + old_top * Math.sin(radian)
- this.offset.click.left
var new_top = - old_left * Math.sin(radian) + old_top * Math.cos(radian)
- this.offset.click.top
//将这个函数返回的值修改为如下
return {
top: new_top ,
left: new_left
};
},
</code></pre><p>至此,我们完成了所有的修改,理论上无论您的父元素如何旋转,其都能正确地进行定位,另外,我建议您在进行修改之前将您的jquery-ui.js文件进行备份,以免错误或误差导致您的修改前的内容丢失。最后,如果我的代码能够帮助到你,或是给您启发,这是我的荣幸!</p><h2>以下为原问题内容,其中提出的猜想没有参考价值,仅作为存档所用</h2><p>首先我需要道歉,标题中的问题,实际上我已经解决了一部分,我希望得到回答的并不完全是我的题目。</p><p>我尝试在一个经过了transform:rotate(45deg) 的旋转的父元素中,使用jquery-ui的draggable拖动其中的子元素,然而jquery-ui的draggable并不支持transform属性,直接使用draggable是不可能的。</p><p>事实上,在这之前我也遇到过类似的问题,并且最后通过修改jquery-ui的源文件解决,这一次我也想进行同样的尝试。</p><p>我通过修改jquery-ui.js文件中,约10382行的内容,也就是</p><pre><code>$.widget( "ui.draggable", $.ui.mouse, {
……
_generatePosition: function( event, constrainPosition ) {
……
}
</code></pre><p>中的内容,成功做到了鼠标的移动与对象的移动“同步”,也就是说是鼠标向左移动100px的距离,拖拽的对象也会向左移动100px的距离。只不过我遇到了一些难以解决的bug,因此我需要您的帮助。</p><p>我遇到的问题是:当拖拽开始时,对象会“瞬移”一段距离,我必须为position增添一些固定的值才能解决这个问题,然而我并不知道这些固定的值是如何产生的,以及为什么对象会“瞬移”,我希望能解决这些问题</p><p>以下是我的代码,其中#playground是我的容器元素,#ball是容器中的可拖拽元素</p><p>CSS:</p><pre><code>#playground{
width:1000px;
height:1000px;
positition:absolute;
transform:rotate(45deg);
transform-origin:center center;
background-color:white;
}
#ball{
width:100px;
height:100px;
position:absolute;
}</code></pre><p>JS:</p><pre><code>//下面的是我修改jquery-ui后的代码,修改内容仅限_generatePosition最后的return内容,其余内容均未有任何改动
var old_top = pageY-
this.offset.click.top -
this.offset.relative.top -
this.offset.parent.top +
(this.cssPosition === "fixed" ?
-this.offset.scroll.top :
(scrollIsRootNode ? 0 : this.offset.scroll.top ))
var old_left = pageX-
this.offset.click.left -
this.offset.relative.left -
this.offset.parent.left +
(this.cssPosition === "fixed" ?
-this.offset.scroll.left :
(scrollIsRootNode ? 0 : this.offset.scroll.left ))
//以上两个值为原本函数中的返回值,我将其进行了一定的修改,以适配旋转后的主元素
var angle = 45
var radian = angle * Math.PI / 180
var new_left = old_top * Math.sin(radian) + old_left * Math.cos(radian)
var new_top = old_top * Math.cos(radian) - old_left * Math.sin(radian)
//这里我必须增添两个值才能使得#ball元素不会瞬移
//最终本函数会返回一个位置的值,并使用这个位置的值来修改被拖拽元素的位置,从而使得被拖拽元素能够与鼠标一同移动
return {
top: new_top + 450,
left: new_left - 450
};
</code></pre><p>我个人的猜想是:瞬移是因为position的初值不正确,最有可能是父元素角度变化导致了原本的old_left和old_top的值出现异常,但是我并没有那么深刻的理解,我不明白为什么这样的事情会发生我也不明白为什么最终我需要增加和减少“450”这个偏差值,我想知道这个偏差值是为什么会产生,如何获得的,因为我希望在后续的功能中增加其他的旋转角度</p><p>目前已知的信息是:这个偏差值会随着角度的变化而变化,也会随着#ball的height变化而变化,当角度在0-90°之间时,随着角度增大,或者height增大时,这个偏差值的数值也需要随之增大。有趣的是,width的变化似乎不会产生影响。</p><p>感谢你的任何建议,如果我没能描述清楚我的问题,我可以提供更多,谢谢您!</p><p>编辑1:经过多次的实验后,我大致得出了45°角时的偏差值规律为(1000 - 100)/2 ,也就是:(父元素的<strong>高度</strong> - 子元素的<strong>高度</strong>)/ 2的值,这个结果让我感到很疑惑,为什么只有高度参与了这个偏差值的变化,宽度为什么不会参与?为什么要除以1/2?我正在尝试其他角度规律,有任何进展都愿意分享给大家,但我仍然希望能获得为什么会产生这样的变化的原因。</p><p>编辑2:我想我得到了top的偏差值的计算公式:</p><pre><code>var offset_top = ($("#playground").height() - $(this.bindings).height()) * Math.pow(Math.sin(radian),2)
</code></pre><p>在任何角度下,这个top的偏差值都能准确奏效,但问题是left的偏差值却仍然是一个谜团,无论是<code> Math.pow(Math.sin(radian),2)</code> 还是 <code> Math.pow(Math.cos(radian),2) </code> 都不是一个完美的值,我感到十分困惑,并且我并不了解为什么这个偏差值会是这样生成的,尤其是将三角函数开平方这件事完全在我的意料之外,无论如何,我仍然需求帮助,谢谢您!</p>
如何解决动态创建的droppable的over事件无法被第一时间触发的问题?
https://segmentfault.com/q/1010000044273348
2023-09-30T20:26:39+08:00
2023-09-30T20:26:39+08:00
Godgiven天恩
https://segmentfault.com/u/godgiventianen
0
<p>我使用jqui中的droppable小部件。</p><p>我的父元素“Div”是一个droppable对象,当accept对象“ball”进入其中时会在父元素Div内创建另一个同样是droppable的子元素“circle”,这个子元素同样绑定了一个over事件,当“ball”对象进入“circle”时,会触发“进球了”函数</p><p>但是,我发现:当我移动ball进入Div内,circle产生了,而此时我移动ball进入circle内,却没有正确触发“进球”事件(事实上,任何绑定在"circle"上的droppable事件都没有触发),必须先松开处于拖拽中的ball,再点击ball拖拽,使其进入circle中,才能正确触发circle的over事件。</p><p>然而,这并不符合我的预期,我希望当ball进入Div内,再进入circle时,能够直接触发这个事件,而不是先松开,再拖拽,随后触发这个事件,我该如何解决这个问题?感谢任何愿意提出的建议!</p>
draggable如何snap到新创建的元素上?
https://segmentfault.com/q/1010000044273566
2023-09-30T23:40:00+08:00
2023-09-30T23:40:00+08:00
Godgiven天恩
https://segmentfault.com/u/godgiventianen
0
<p>我使用jqui中的draggable小部件。</p><p>我希望当我的draggable元素拖拽到某个区域后,能产生一个新元素“#block”,并且这个新元素能够被draggable的"snap"所识别</p><p>我的代码如下:</p><pre><code>$("#ball").draggable({
refreshPositions:true,
snap:"#block",
statr: function(event,ui) {
//创建#block元素的函数
createBlock()
}
})
</code></pre><p>我发现#block元素能够正确被创建,并且没有任何拼写错误,但是"#ball"元素仍然无法识别#block元素,也无法吸附上去。我尝试使用refreshPoistion:true来更新draggable元素,但这没有效果。</p><p>我应该怎么解决这个问题,或者说,我能通过其他方法来完成我的需求吗?谢谢你的建议和回答!</p>
jqui的draggable功能在scale修改的情况下不能正常运作?
https://segmentfault.com/q/1010000044256086
2023-09-25T00:51:02+08:00
2023-09-25T00:51:02+08:00
Godgiven天恩
https://segmentfault.com/u/godgiventianen
0
<p>在使用jquery-ui的draggable功能时,若drag对象的父元素经过scale修饰调整了大小的比例,则此时的拖拽会出现拖拽对象瞬移,并且拖拽距离与鼠标距离不同的情况。</p>
使用 npm install 导入 jQuery-ui 和 jQuery
https://segmentfault.com/q/1010000043069618
2022-12-13T19:34:31+08:00
2022-12-13T19:34:31+08:00
https://segmentfault.com
1
<p>这里的 npm 有点新..</p>
<p>我想在我的项目中使用 jQuery-ui。我习惯于在我的 HTML 中使用脚本标签导入 jQuery 和 jQuery-ui,但我想使用 npm install 导入两者。</p>
<p>我得到了 jQuery 的工作。</p>
<pre><code> import $ from 'jquery'
</code></pre>
<p>但每当我尝试导入 <code>jquery-ui</code> 时,我都会收到此错误:</p>
<blockquote>
<p>未捕获的 ReferenceError:未定义 jQuery</p>
</blockquote>
<p>有很多关于此错误的帖子。但是所有这些似乎都以人们为中心,只是将他们的 jQuery 和 jQuery-ui 脚本标签放在错误的顺序中。</p>
<p>我找不到任何关于如何使用 npm install 安装 jQuery 和 jQuery-ui 的信息?</p>
<p>有任何想法吗?</p>
<blockquote>
<p>原文由 <a href="https://link.segmentfault.com/?enc=ou8I2FtTt3tykFKNGbpl0A%3D%3D.b2Z6ldYs82aC1A39jEy07gRWEfSxgL3AlGGmx1y3IgQmmLPnDVqa%2BBC6pCdeWn%2FyXKUFKFN8WS52r0sZYrcSV2wabWBT8nsVoNp1LRVM2VfKmIWiNd%2BketIPbtMxss79" rel="nofollow">MLyck</a> 发布,翻译遵循 CC BY-SA 4.0 许可协议</p>
</blockquote>
jsplumb 端点显示与隐藏的问题
https://segmentfault.com/q/1010000039891801
2021-04-25T00:17:45+08:00
2021-04-25T00:17:45+08:00
一骑绝尘
https://segmentfault.com/u/yiqijuechen_602d334b6996b
0
<p>jsplumb 想实现一个功能,请教大佬:</p><p>鼠标移入节点,端点endpoint显示,可以连线;<br>鼠标移出节点,端点隐藏,但是连线不隐藏。</p><p>我给节点加mouseover和mouseout,但是只要移出节点端点就隐藏起来了,不能进行连线。。</p><p>大佬们有没有解决方法??</p>
jQuery-ui中的resizable控制范围没有放大到指定大小?
https://segmentfault.com/q/1010000037494977
2020-10-16T10:28:05+08:00
2020-10-16T10:28:05+08:00
随声
https://segmentfault.com/u/suisheng
0
<p>拖入到表格中,resizable控制放大到外围的父级框(相当于元素父级的父级),如果向左放大只能向下拉着放大,向右拉着放大到这个大小就不行了,请问是什么原因,用的是jquery-ui.min.js,resizable中缩放也只写了containment: '#qemd',handles: "all",<br><img src="/img/bVcHujJ" alt="image" title="image"></p>
急急急,求用过Jquery的大佬帮帮小弟
https://segmentfault.com/q/1010000037446634
2020-10-12T18:32:09+08:00
2020-10-12T18:32:09+08:00
一骑绝尘
https://segmentfault.com/u/yiqijuechen_5e0d9fb57395e
0
<p>我在写一个项目是原生html,引入了jquery、jqueryu-ui、vue、axios等,用axios生成的新数据,在页面用vue动态渲染,但是渲染出来的东西怎么跟jquery-ui的draggable拖拽事件相互绑定,直接写的数据是没问题的,但是动态渲染出来的页面有问题,不能绑定事件,该怎么办?有没有什么解决方案?</p>
用jquery-ui进行拖拽时,拖拽开始时被拖拽对象就与鼠标突然偏移一段距离,这是怎么回事?
https://segmentfault.com/q/1010000021325005
2019-12-18T14:40:58+08:00
2019-12-18T14:40:58+08:00
小电感
https://segmentfault.com/u/xiaodiangan
0
<p>我将一个svg元素设置成可拖拽,当用鼠标点击这个svg刚要开始移动时,这个svg元素突然偏移一段距离,然后才跟随我的鼠标移动而移动,而且这个偏移在drag时和stop后始终保持着,请问是什么原因,该怎样解决,谢谢!</p>
jquery mobile功能确实方便,但是默认样式太丑怎么解决??????求大神
https://segmentfault.com/q/1010000016657161
2018-10-12T01:58:31+08:00
2018-10-12T01:58:31+08:00
前端ChenQ
https://segmentfault.com/u/yingfeng_5b1327b25e389
0
<p>用data-role="none"解决不了动态创建的class,比如导航栏点击时,按钮的蓝色背景,觉得太丑了怎么换?</p>
lazyload ,當圖片加載完成時,如何增加 fadeIn/Out ?
https://segmentfault.com/q/1010000016371177
2018-09-12T16:05:09+08:00
2018-09-12T16:05:09+08:00
火爆浪子
https://segmentfault.com/u/asys0512
0
<p><strong>取用</strong><br>lazyload <br><a href="https://link.segmentfault.com/?enc=onCDMuTsodXwMHMfJqEc9A%3D%3D.LzoGp6QZ1alxP6QpAVICn5g%2FCwQxaALTEf55pi%2Fp9EGqHTDvlbe8U8wD6zEnIW9%2BmGnI3zKp4jRXMCcmIWPPHA%3D%3D" rel="nofollow">https://github.com/tuupola/jq...</a></p>
<p><strong>Jquery</strong></p>
<pre><code>$(".lazyload-blog-selector").lazyload();
$(".lazyload-blog-selector").on('load',function(){
img.removeClass('lazyload-blog-selector');
});</code></pre>
<p><strong>HTML</strong></p>
<pre><code><img data-src="真實圖片網址" src="/images/lazyload.png" class="lazyload-blog-selector"></code></pre>
<p>我是使用這樣運行 lazyload<br>我看代碼的原理是當圖片讀取完成就出現該圖片,只是我發現他會是<code>直接出現</code>,沒有效果。我想加入一個效果是<code>淡出淡入 fadeIn/fadeOut</code>,可能是將 <code>/images/lazyload.png</code> 淡出,或是將圖片淡入,這有辦法實現嗎?我看他的Jquery代碼不知道能從哪裡下手。<br>然後我發現我把 <code>img.removeClass('lazyload-blog-selector');</code> 拿掉,他一樣可以運行...</p>
jquery ui 中draggable 中的 appendTo到底实际什么作用
https://segmentfault.com/q/1010000015238873
2018-06-10T03:15:07+08:00
2018-06-10T03:15:07+08:00
阿帕车
https://segmentfault.com/u/apache_587ccdca2441f
0
<p>draggable 设置appendTo,但是一直没模拟出效果,看了文档说是拖动过程中给元素找父容器。。模拟不出效果,不知道这个属性实际作用是什么,求详细解答。谢谢不要复制手册。。再次跪谢</p>
Tag-it插件限定输入的标签的数量?
https://segmentfault.com/q/1010000014691820
2018-05-02T15:24:06+08:00
2018-05-02T15:24:06+08:00
metfat
https://segmentfault.com/u/metfate
0
<p>如题,input的value接收用户的选择的标签,只允许选三个,多了就把输入标签的框设为不可编辑,简单试了设置disable属性不行,没有太多时间研究,求教怎么设置?</p>
開始日期跟結束日期 jquery ,開始日期選擇後,選擇結束日期不能低於開始日期
https://segmentfault.com/q/1010000014441593
2018-04-17T22:27:05+08:00
2018-04-17T22:27:05+08:00
火爆浪子
https://segmentfault.com/u/asys0512
0
<p>我用jquery 的 datepicker 插件</p>
<pre><code><div class="fs_title">開始時間</div>
<input id="time_available" name="time_available" class="datepicker date_field" required>
<div class="fs_title">結束時間</div>
<input id="expiry" name="expiry" class="datepicker date_field" required></code></pre>
<p>當我選擇開始日期後<br>如何當我選擇結束日期時,不得低於選擇開始日期?</p>
<pre><code>$(function() {
$( ".datepicker" ).datepicker({
dateFormat:"yy-mm-dd",
minDate: "0d",
changeMonth: true,
changeYear: true
});
});</code></pre>
<p>他裡面 minDate: "0d", 可以設定但我不知道怎麼做<br>有大神可以幫幫我嗎謝謝</p>
如何让jquery-weui弹出层滚动?
https://segmentfault.com/q/1010000013999898
2018-03-26T22:00:13+08:00
2018-03-26T22:00:13+08:00
poi_rs
https://segmentfault.com/u/poi_rs
0
<p>完整的页面是这样的:<br><img src="/img/bV6Uak?w=1080&h=1920" alt="clipboard.png" title="clipboard.png"></p>
<p>但是在输入到门牌号的时候,键盘弹出来,页面就变这样了(门牌号,建筑面积两个输入框被遮了):<br><img src="/img/bV6Uax?w=1080&h=1920" alt="clipboard.png" title="clipboard.png"></p>
<p>上拉下拉都拉不动,设置scroll也没用,这是什么原因造成的?</p>
react中jquery-ui的draggable()失效问题
https://segmentfault.com/q/1010000012476210
2017-12-18T17:03:37+08:00
2017-12-18T17:03:37+08:00
yetnum
https://segmentfault.com/u/yuenanjun
0
<p>js:</p>
<pre><code>$('#模块' + numi).draggable();
$('#模块' + numi).resizable();</code></pre>
<p>之前写的代码没问题,放到react后出现draggable()失效的问题,resizable()依然正常,请问这是什么原因?</p>
jQueryUI 的resizable 有个bug。。
https://segmentfault.com/q/1010000012253835
2017-12-02T14:16:32+08:00
2017-12-02T14:16:32+08:00
我的神
https://segmentfault.com/u/oceanstick
0
<p>1.两个可缩放(resizable)的div,互相嵌套。<br>2.然后拖拽移动父级 div 。<br>3.缩放子div ,发现子div的大小错乱了。</p>
<p>父级可拖拽移动的情况下, resizable 组件的helper 和containment 不能同时使用。<br>换成其他拖拽移动组件,也有问题,说明是 resizable 组件有bug。它有1000行代码。<br>大神能帮找一下吗?</p>
<p>demo<br><a href="https://jsfiddle.net/px580e3g/2/"></a><a href="https://jsfiddle.net/px580e3g/2/">https://jsfiddle.net/px580e3g/2/</a><br>或者<br><a href="https://codepen.io/oceanstick/pen/LOqGGw"></a><a href="https://codepen.io/oceanstick/pen/LOqGGw">https://codepen.io/oceanstick...</a></p>
accordion折叠板设置属性值的问题
https://segmentfault.com/q/1010000011632663
2017-10-19T17:43:32+08:00
2017-10-19T17:43:32+08:00
杨轲
https://segmentfault.com/u/yang_59e6aa80f2287
0
<p>想设置accordiance的active属性 对象为角标为2的对象。</p>
<p>创建实例时设置属性值</p>
<p>$(".class").accordion({active:2});<br>实例化后得到属性值</p>
<p>var active = $("#id").accordion("option","active");<br>实例化后设置属性值</p>
<p>$("#id").accordion("option","active",2);</p>
<p>请问实例化后获得了属性值 为什么还需要重新设置一遍属性值呢?</p>
animate方法函数中涉及到的if else语句
https://segmentfault.com/q/1010000011601633
2017-10-18T09:27:44+08:00
2017-10-18T09:27:44+08:00
杨轲
https://segmentfault.com/u/yang_59e6aa80f2287
0
<pre><code><!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Effects - Animate demo</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
.toggler { width: 500px; height: 200px; position: relative; }
#button { padding: .5em 1em; text-decoration: none; }
#effect { width: 240px; height: 135px; padding: 0.4em; position: relative; background: #fff; }
#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
</style>
<script>
$(function() {
var state = true;
$( "#button" ).click(function() {
if ( state ) {
$( "#effect" ).animate({
backgroundColor: "#aa0000",
color: "#fff",
width: 500
}, 1000 );
} else {
$( "#effect" ).animate({
backgroundColor: "#fff",
color: "#000",
width: 240
}, 1000 );
}
state = !state;
});
});
</script>
</head>
<body>
<div class="toggler">
<div id="effect" class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all">Animate</h3>
<p>
jQuery is a fast, small, cross-platform and feature-rich JavaScript library. It is designed to simplify the client-side scripting of HTML.
</p>
</div>
</div>
<button id="button" class="ui-state-default ui-corner-all">Toggle Effect</button>
</body>
</html> </code></pre>
<p>上面的代码演示了animate()方法的使用 script函数中有一个变量var state=true;请问这里面的if(state)和state=!state是什么意思啊?我知道它是用来判断点击#button时候#effect选择器的样式 可是我并不明白state变量的用法啊。希望好心人解答。</p>
我试着用jquery ui的拖拽和放置组件实现div的无限嵌套,请问有什么解决办法?
https://segmentfault.com/q/1010000011533576
2017-10-12T23:58:04+08:00
2017-10-12T23:58:04+08:00
依米
https://segmentfault.com/u/yimi_59df8dd7c63cc
0
<p>在点击元素时,给当前元素设置一个新的class名字,再将该class对应的元素设置为jquery ui放置组件的对象,但是由于获取不了新生成的元素,所以导致拖拽的元素放置不了,请问有什么好的解决办法吗?目前代码如下:</p>
<pre><code><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jqeruy UI 拖拽</title>
<style>
.content{
width:65%;
height:500px;
padding:20px;
border:1px solid black;
display: inline-block;
}
.element{
width:30%;
height:600px;
display:inline-block;
float:right;
}
.element>div{
height:50px;
margin-bottom:20px;
border:1px solid black;
}
#target{
border:1px solid blue;
background-color:lightgray;
}
.content>div{
border:1px solid black;
width:100px;
height:60px;
padding:20px;
}
</style>
</head>
<body>
<div class="content">
</div>
<div class="element">
<div id="draggable1">克隆体1</div>
<div id="draggable2">克隆体2</div>
<div id="draggable3">克隆体3</div>
</div>
<script type="text/javascript" src="jQuery1.11.3.min.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript" language="javascript">
$().ready(function(e) {
$(".content").click(function(){
$(this).addClass("target");
});
$('div[id^="draggable"]').draggable({
helper:"clone",
revert: "invalid",
cursor: "move"
});
//释放后
$(".target").droppable({
drop: function (event, ui) {
var source = ui.draggable.clone();
source.addClass("target");
$(this).append(source);
}
})
})
</script>
</body></code></pre>
jQueryUI拖拽sortable排序在DOM重新渲染之后失效
https://segmentfault.com/q/1010000011356181
2017-09-26T08:54:06+08:00
2017-09-26T08:54:06+08:00
sore
https://segmentfault.com/u/sore
0
<p>最近在用jQueryUI 的sortable做表格拖拽排序功能,但是每次拖拽成功向后台重新请求数据更新DOM的之后,拖拽事件就失效了,有什么办法在DOM重新渲染让sortable事件不失效的方法吗?<img src="/img/bVVOpF?w=548&h=514" alt="图片描述" title="图片描述"></p>
<p><img src="/img/bVVOpK?w=512&h=507" alt="图片描述" title="图片描述"></p>
<p>这是拖拽的代码,success是请求成功的参数,因为没办法局部渲染,只能先刷新页面,但是后面的功能好多要用到局部刷新。。。求大神帮忙!!!<br><img src="/img/bVVOEt?w=546&h=86" alt="图片描述" title="图片描述"></p>
<p><img src="/img/bVVOEy?w=386&h=273" alt="图片描述" title="图片描述"></p>
<p>这是改了绑定之后的报错,改了一个之后会一直往下报这样的符号错误</p>
<p><img src="/img/bVVOQG?w=694&h=393" alt="图片描述" title="图片描述"></p>
jqueryUI拖动表格tr排序问题
https://segmentfault.com/q/1010000011265415
2017-09-19T21:34:47+08:00
2017-09-19T21:34:47+08:00
sore
https://segmentfault.com/u/sore
0
<p>有用过jQueryUI的大佬知道如何获取拖动时当前的元素的内容?官网有个ui.item是获取当前元素的,但是输出的是整个tr,该如何拿到类似于数组形式的内容?求大佬解惑!</p>
easyui自动把我的input变成后备,此时该如何操作input?
https://segmentfault.com/q/1010000010267594
2017-07-20T10:08:12+08:00
2017-07-20T10:08:12+08:00
fireemissary
https://segmentfault.com/u/fireemissary
0
<pre><code><div id="userdialog" class="easyui-dialog" data-options="closed:true,iconCls:'icon-save'" style="width:400px; padding:10px;">
<form id="userdialogform" method="post">
<table>
<tr>
<td width="60" align="right">姓 名:</td>
<td><input type="text" name="name" class="easyui-textbox" /></td>
</tr>
<tr>
<td align="right">密码:</td>
<td><input type="password" name="pass" class="easyui-textbox" /></td>
</tr>
<tr>
<td align="right">密码确认:</td>
<td><input type="password" name="pass2" class="easyui-textbox" /></td>
</tr>
</table>
</form>
</div>
比方上面的情况,我想在编辑和新建公用这个dialog,编辑时想把名字自动填上且disabled,但没有效果,发现easyui自动建立了格外的input覆盖了我的.那么我如何让我对input[name='name']的操作反应出来呢?</code></pre>
jquery ui 拖动加上 helper:"clone" 之后,helper 的样式有很大变化。
https://segmentfault.com/q/1010000010594093
2017-08-10T14:34:36+08:00
2017-08-10T14:34:36+08:00
阿唧米德
https://segmentfault.com/u/aajijifujiji
0
<p><img src="/img/bVSB43?w=1199&h=69" alt="图片描述" title="图片描述"></p>
<p><img src="/img/bVSB9J?w=1380&h=69" alt="图片描述" title="图片描述"></p>
<p>请忽略 名字。<br>上面的代码,点中的是本体,点中元素下面是helper。<br>给加了一大堆style 变成了第二幅图的样子(忽略汉字名字)。</p>
jquery ui做拖动效果。 拖动时给正在拖动的对象加莫名奇妙的style。
https://segmentfault.com/q/1010000010560615
2017-08-08T19:41:36+08:00
2017-08-08T19:41:36+08:00
阿唧米德
https://segmentfault.com/u/aajijifujiji
0
<p>jquery ui做拖动效果。 拖动时给正在拖动的对象加莫名奇妙的style。</p>
jQuery UI 实例 上下两个列表排序 下面列表 移到上面列表之后下面列表能不能 把下面的位置空下
https://segmentfault.com/q/1010000010461758
2017-08-02T10:36:00+08:00
2017-08-02T10:36:00+08:00
阿唧米德
https://segmentfault.com/u/aajijifujiji
0
<p>下面有空位之后最好 我把上面的那条移到下面会后,他还回原来位置<br><img src="/img/bVR3Kb?w=410&h=394" alt="图片描述" title="图片描述"></p>
jquery UI 关于dialog()
https://segmentfault.com/q/1010000009613518
2017-06-01T08:45:29+08:00
2017-06-01T08:45:29+08:00
winds_随风
https://segmentfault.com/u/winds_frist
0
<p>jquery 调用关于jquery UI的dialog方法</p>
<pre><code>$(document).on("click", ".dialog-editSwitch", function () {
objcontent = this;
$("#IsAdd").val("0");
$("#dialog-form-play").dialog({ title: "编辑组件" });
$("#dialog-form-play").dialog("open");
});</code></pre>
<p>html 部分关于单机修改按钮 调用上面的代码</p>
<pre><code> <span class="dialog-editSwitch operater" style="text-decoration:underline;color:#66B3FF"
m_id="{value.ID}"
projectname="{value.ProjectName}"
projectcode='{value.ProjectCode}'
customername="{value.CustomerName}"
customercode="{value.CustomerCode}"
customerid="{value.CustomerID}"
ems_localip="{value.EMS_LocalIP}"
eam_localip="{value.EAM_LocalIP}"
ems_externalip="{value.EMS_ExternalIP}"
eam_externalip="{value.EAM_ExternalIP}"
IsIntegrated ="test123"
officialurl="{value.OfficialUrl}">
修改
</span></code></pre>
<p>这是弹框的html 现在是 为什么 IsIntergrated 没有显示值</p>
<pre><code><div class="form">
<div>
<table cellspacing="0" cellpadding="0" style="border:0px; !important">
<tr>
<td width="32%" height="30px;" align="right" style="margin-top:5px;" maxlength="50">
项目编码:
</td>
<td>
<input type="text" id="ProjectCode" />
</td>
</tr>
<tr>
<td width="32%" height="30px;" align="right" style="margin-top:5px;" maxlength="50">
项目名称:
</td>
<td>
<input type="text" id="ProjectName" />
</td>
</tr>
<tr>
<td width="32%" height="30px;" align="right" style="margin-top:5px;" maxlength="50">
内网EMS服务ip:
</td>
<td>
<input type="text" id="EMS_LocalIP" />
</td>
</tr>
<tr>
<td width="32%" height="30px;" align="right" style="margin-top:5px;" maxlength="50">
内网EAMIP:
</td>
<td>
<input type="text" id="EAM_LocalIP" />
</td>
</tr>
<tr>
<td width="32%" height="30px;" align="right" style="margin-top:5px;" maxlength="50">
外网EMS服务ip:
</td>
<td>
<input type="text" id="EMS_ExternalIP" />
</td>
</tr>
<tr>
<td width="32%" height="30px;" align="right" style="margin-top:5px;" maxlength="50">
外网EAMIP:
</td>
<td>
<input type="text" id="EAM_ExternalIP" />
</td>
</tr>
<tr>
<td width="32%" height="30px;" align="right" style="margin-top:5px;" maxlength="50">
官方网站IP:
</td>
<td>
<input type="text" id="OfficialUrl" />
</td>
</tr>
<tr>
<td width="32%" height="30px;" align="right" style="margin-top:5px;" maxlength="50">
是否集成:
</td>
<td>
<input type="text" id="IsIntegrated" />
</td>
</tr>
</table>
</div>
</div>
</form></code></pre>
jQuery weui的图片浏览器具体使用方法?
https://segmentfault.com/q/1010000009165470
2017-04-23T16:55:52+08:00
2017-04-23T16:55:52+08:00
ktktk
https://segmentfault.com/u/ktktk
1
<p>文档是这么描述的:<br></p>
<hr>
<br>Photo Browser<br>为了使用图片浏览器,你必须引用如下的JS文件:<p><script type='text/javascript' src='/js/swiper.js' charset='utf-8'></script><br>Photo Browser 是一个可以全屏浏览多张图片的插件,类似朋友圈中查看图片的功能。</p>
<p>Photo Browser 只能通过 JavaScript 进行调用:</p>
<pre><code>var pb1 = $.photoBrowser({
items: [
"./images/swiper-1.jpg",
"./images/swiper-2.jpg",
"./images/swiper-3.jpg"
]
});</code></pre>
<p>如果图片带有文案,可以这样调用:</p>
<pre><code>var pb2 = $.photoBrowser({
items: [
{
image: "./images/swiper-1.jpg",
caption: "描述文案"
},
{
image: "./images/swiper-2.jpg",
caption: "描述文案"
},
{
image: "./images/swiper-3.jpg",
caption: "描述文案"
}
]
});</code></pre>
<p>$.photoBrowser 方法会返回一个实例,这个实例可以调用方法打开和关闭弹层:</p>
<p>pb.open(); //打开<br>pb.close(); //关闭</p>
<hr>
<p>但是还是不太明白具体怎么用,有没有大神给个具体的例子?<br>而且按照文档的方法使用$.photoBrowser 方法时报错显示没有定义这个方法,然而我按文档说的引用了swiper.js。jquery-weui.min.js,jquery-3.2.0.min.js,zepto.js也引用了还是报错,这是怎么回事呢</p>
jquery ui的拖拽功能如何实现符合某一条件时停止拖拽
https://segmentfault.com/q/1010000009061234
2017-04-14T09:14:50+08:00
2017-04-14T09:14:50+08:00
lizhigang
https://segmentfault.com/u/lizhigang
0
<p>如图这个功能,我拖拽右下角的小圆点可以实现图片的缩放,由于jquery ui的缩放功能无法满足,所以我自己写了这个,现在需要右下角小圆点拖动到图2位置时,就不能再继续往左上方向拖动,该怎么实现?网上找了好久没发现可以停止拖拽的方法,请大神赐教<br><img src="/img/bVMboH?w=409&h=269" alt="图1" title="图1"></p>
<p><img src="/img/bVMboW?w=200&h=169" alt="图2" title="图2"></p>
jQuery的draggable插件,元素父级不是body不能拖动?
https://segmentfault.com/q/1010000008100838
2017-01-12T19:20:14+08:00
2017-01-12T19:20:14+08:00
duenyang
https://segmentfault.com/u/niubilityman
0
<pre><code>$(".red").draggable();</code></pre>
<p>就是元素父级不是body的话不能拖动,是body的话就能拖动,请问怎么解决?</p>
jquery UI 中的autocomplete控件中怎么让显示的内容为一个竖着的列表样式?
https://segmentfault.com/q/1010000006679479
2016-08-22T14:52:03+08:00
2016-08-22T14:52:03+08:00
大猫先生
https://segmentfault.com/u/viclion
0
<p><!DOCTYPE html><br><html lang="en"><br><head></p>
<pre><code><meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<title>jquery</title>
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/jquery-ui.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/app.js"></script></code></pre>
<p></head><br><body><br><div class="ui-widget"></p>
<pre><code><label for="tags">Tags: </label>
<input id="tags" class="ui-autocomplete-input" autocomplete="off">
</div></code></pre>
<p></body><br></html></p>
<p>app.js:</p>
<p>$(document).ready(function(){</p>
<pre><code> var autotags=["iwen","ime","html","css","javascript","ios"];
$("#tags").autocomplete({
source:autotags,
});
}) </code></pre>
<p>显示效果是这样的:<br><img src="/img/bVCbNv" alt="clipboard.png" title="clipboard.png"><br>怎么让它分别显示在一行啊,求大神指点一下。</p>
关于autocomplete的问题,求高手解答
https://segmentfault.com/q/1010000008629069
2017-03-09T14:59:00+08:00
2017-03-09T14:59:00+08:00
gunner
https://segmentfault.com/u/gunner_56c2c48488870
-2
<p>autocomplete中的init,bind,setDom,insert是什么意思</p>
jqueryui日期选择器实现多选
https://segmentfault.com/q/1010000008504257
2017-02-27T19:47:53+08:00
2017-02-27T19:47:53+08:00
zhuangchen
https://segmentfault.com/u/zhuangchen
0
<p>求牛人来实现下!或者提供个多选日期的控件!</p>
关于jQuery UI的时间组件初始化的问题
https://segmentfault.com/q/1010000008342151
2017-02-14T09:16:32+08:00
2017-02-14T09:16:32+08:00
zzard
https://segmentfault.com/u/mxjpre
0
<p><img src="/img/bVJajp?w=352&h=356" alt="图片描述" title="图片描述"></p>
<p>如图,我现在的项目有个时间控件绑在一个新建表单上,新建第一张表单自然是初始化状态,第二次新建表单触发时间控件的时候,时间刻度条不会重置,沿用了第一张新建表单的时间,初始时间从7点开始了。</p>
<hr>
<p>以下是我的初始化代码:</p>
<pre><code> // 这个地方用于做时间控件重置,临时方案
endDateTextBox.datetimepicker('option', 'minDate', new Date(0) );
startDateTextBox.datetimepicker('option', 'minDate', new Date(0) );
endDateTextBox.datetimepicker('option', 'maxDate', new Date(2147483648000) );
startDateTextBox.datetimepicker('option', 'maxDate', new Date(2147483648000) );
console.log('cleared');</code></pre>
<p>求教初始化刻度条的代码改怎么写?万分感谢</p>
jq ui Droppable 使用中 position.top值错误
https://segmentfault.com/q/1010000007909326
2016-12-24T22:53:29+08:00
2016-12-24T22:53:29+08:00
winds_随风
https://segmentfault.com/u/winds_frist
0
<p>posiont.top值 跟元素本身top值不一样 不知道为什么?</p>
<p><img src="/img/bVHlJJ?w=490&h=285" alt="clipboard.png" title="clipboard.png"></p>
<p><img src="/img/bVHlJN?w=1279&h=517" alt="clipboard.png" title="clipboard.png"></p>
<p>求助! 求有偿远程求解 困扰一天</p>
jquery ui报错,很多图片未能加载?
https://segmentfault.com/q/1010000007750320
2016-12-09T15:36:07+08:00
2016-12-09T15:36:07+08:00
坏人未变坏
https://segmentfault.com/u/hzleon
0
<p>页面没有任何问题,之前没有报过错,可能是把图片文件夹的位置换了,可以解决吗?<br><img src="/img/bVGGni?w=1353&h=161" alt="图片描述" title="图片描述"></p>
<p>谢谢~</p>
关于jquery ui autocomplete的问题
https://segmentfault.com/q/1010000007742333
2016-12-08T20:49:20+08:00
2016-12-08T20:49:20+08:00
坏人未变坏
https://segmentfault.com/u/hzleon
0
<pre><code>$.ajax({
type: "POST",
url: "/settingPage/userManage/all",
dataType: "json",
success: function (msg) {
$("#projectUser").autocomplete(msg, {
minChars: 1, //最少输入字条
max: 12,
autoFill: false, //是否选多个,用","分开
mustMatch: false, //是否全匹配, 如数据中没有此数据,将无法输入
matchContains: true, //是否全文搜索,否则只是前面作为标准
scrollHeight: 220,
width: 147,
multiple: false,
formatItem: function (row, i, max) { //显示格式
console.log(row.username)
return "<span>" + row.id + "</span><span>" + row.username + "</span>";
},
formatMatch: function (row, i, max) { //以什么数据作为搜索关键词,可包括中文,
return row.username;
},
formatResult: function (row) { //返回结果
return row.id
}
})
}
});</code></pre>
<p>这是js代码<br><img src="/img/bVGEil?w=427&h=332" alt="图片描述" title="图片描述"></p>
<p>这是json。<br>我这样获取一直报错,<br>jquery-ui.min.js:9 Uncaught TypeError: this.source is not a function。<br>但是我把json换成本地获取就没问题了,不知道为什么。求解答谢谢!</p>
使用jquery ui 拖拽排序的时候,如果里面的元素高度不一样怎么让元素紧凑排列?
https://segmentfault.com/q/1010000007634951
2016-11-29T14:33:27+08:00
2016-11-29T14:33:27+08:00
田超
https://segmentfault.com/u/tianchao
0
<p>我在使用jquery ui 拖拽排序的时候,发现里面的div模块的高度不一样,怎么让div紧凑排列?<br>求高手赐教!!!</p>
<p><img src="/img/bVGcmo?w=1251&h=819" alt="图片描述" title="图片描述"></p>
<pre><code>$( "#sortable").sortable({
cursor: "move",
opacity: 0.6, //拖动时,透明度为0.6
revert: true, //释放时,增加动画
});
$( "#sortable").disableSelection();</code></pre>
<p>怎么修改啊?求高手赐教!!!</p>
请教一个关于jquery ui时间组件的问题?
https://segmentfault.com/q/1010000007551126
2016-11-21T16:14:15+08:00
2016-11-21T16:14:15+08:00
坏人未变坏
https://segmentfault.com/u/hzleon
0
<p><img src="/img/bVFQx7?w=473&h=340" alt="图片描述" title="图片描述"></p>
<p>月份选择里的英文如何改为中文。谢谢!</p>
请问可以改变jquery-ui日期控件的样式吗?
https://segmentfault.com/q/1010000007448708
2016-11-11T10:13:59+08:00
2016-11-11T10:13:59+08:00
坏人未变坏
https://segmentfault.com/u/hzleon
0
<p><img src="/img/bVFpUu?w=299&h=271" alt="图片描述" title="图片描述"></p>
<p>这里有个控制上月下月的按钮但是颜色和背景一样,都看不到了,请问可以改变吗?<br>谢谢!<br>点击后又成这样的了?<br><img src="/img/bVFp5B?w=280&h=50" alt="图片描述" title="图片描述"></p>
jQuery UI 的autocomplete 在BootStrap 的Modal 中不管用
https://segmentfault.com/q/1010000005077488
2016-05-07T15:49:25+08:00
2016-05-07T15:49:25+08:00
ludaming
https://segmentfault.com/u/ludaming
0
<p>在项目中使用jquery-ui的autocomplete,如果input在页面中就没有问题,但是如果input在bootstrap的模态框中,就没有效果</p>
<p>username在modal里,username2在页面中</p>
<pre><code>$( "#username" ).autocomplete({
source: user_list
});
$( "#username2" ).autocomplete({
source: user_list
});</code></pre>
<p>input id="username2"<br><img src="/img/bVvs2X" alt="clipboard.png" title="clipboard.png"></p>
<p>input id="username"</p>
<p><img src="/img/bVvs2Z" alt="clipboard.png" title="clipboard.png"></p>
<p>是jquery-ui对bootstrap的支持问题么?<br>如果无法解决,又该用什么自动补全好呢?</p>
webpeck将jquery-ui单独打包,发现很多下面的组件没有打包进来
https://segmentfault.com/q/1010000006231516
2016-08-10T20:00:01+08:00
2016-08-10T20:00:01+08:00
martinko2009
https://segmentfault.com/u/martinko2009
0
<p>最近在使用webpack发现打完包,文件很大,所以想把一些组件独立打包,所以在网上看到了这篇文章,<a href="https://link.segmentfault.com/?enc=Lma8o5CHA%2F6VuwDHtwgMJw%3D%3D.TsvGyoiy4nRi%2BcGGoNf8eMhHELKylWhF9646uWUYYiMU6TlkrXUlGAQXn5RCxa1R" rel="nofollow">http://mini.eastday.com/a/160...</a></p>
<p>安装上面的方法,发现给jquery-ui打包时,虽然已经用npm将其下面的各种控件安装在了node_modules下面,但是打包后,发现下面的控件并没有被打包进来,不知道谁有办法解决这个问题呢,谢谢了。</p>
jQuery UI 的Tab如何切换而不刷新内容
https://segmentfault.com/q/1010000006218022
2016-08-09T17:18:38+08:00
2016-08-09T17:18:38+08:00
francisM
https://segmentfault.com/u/francism
0
<p>RT</p>
<p>每个Tab的内容通过ajax获取,目前在切换<strong>已经打开</strong>的Tab时都会有请求产生,会导致页面的有些表单数据丢失等问题。<br>如何只打开页签而不发送请求呢?<br>目前用的Tab的<code>active</code> 属性来激活目标tab , 参考:<a href="https://link.segmentfault.com/?enc=1OAqpWX3BUnR3b424P3nvw%3D%3D.QfSDbVPLbb89VLrH6Mt7%2FuOYO4iZ5F6fiMN7gcJEeMg%3D" rel="nofollow">https://api.jqueryui.com/tabs/</a></p>
jquery ui spinner的value数值无法改变
https://segmentfault.com/q/1010000006204517
2016-08-08T15:10:50+08:00
2016-08-08T15:10:50+08:00
心中有个小孩
https://segmentfault.com/u/xinzhongyougexiaohai
0
<p><img src="/img/bVAcd2" alt="html部分代码图片" title="html部分代码图片"></p>
<p><img src="/img/bVAcee" alt="js部分代码图片" title="js部分代码图片"></p>
<p><img src="/img/bVAcdX" alt="最终效果图" title="最终效果图"></p>
<p>在给spinner加上value数值后,spinner失效。求解答,谢谢</p>
layerui的弹出层控件和jquery-ui的selectmenu样式冲突?
https://segmentfault.com/q/1010000005892093
2016-07-06T17:34:13+08:00
2016-07-06T17:34:13+08:00
Futurefinger
https://segmentfault.com/u/marklo
0
<p><img src="/img/bVySV8?w=994&h=368" alt="clipboard.png" title="clipboard.png"></p>
<p><img src="/img/bVySWB?w=1085&h=379" alt="clipboard.png" title="clipboard.png"></p>
<p>.layui-layer-page的z-index是动态生成的,大概是弹出多个窗口这个值还会变化。<br>问题我的jquery-ui 的selectmenu 样式该怎么调整才不会被覆盖?<br>这个值这么大,手动写死样式也没有的!<br>求高人指点。</p>
jquery-ui 的selectmenu-api配置option参数时报错!
https://segmentfault.com/q/1010000005888279
2016-07-06T12:26:54+08:00
2016-07-06T12:26:54+08:00
Futurefinger
https://segmentfault.com/u/marklo
0
<p>chrome debug提示:</p>
<pre><code>Uncaught Error: cannot call methods on selectmenu prior to initialization; attempted to call method 'option'
</code></pre>
<p><img src="/img/bVyRYg" alt="clipboard.png" title="clipboard.png"></p>
<p>我的代码是这么写的:</p>
<pre><code> $( "#speed" ).selectmenu("option",{
width:200
});</code></pre>
<p>为什么会有这个报错,有谁知道吗?</p>
用bower下载的jquery-ui,里面的文件结构有点看不懂,用过的谁能介绍下?
https://segmentfault.com/q/1010000005839628
2016-06-30T14:38:16+08:00
2016-06-30T14:38:16+08:00
Futurefinger
https://segmentfault.com/u/marklo
0
<p><img src="/img/bVyFjb" alt="clipboard.png" title="clipboard.png"></p>
<p>1.这个i18n文件下的js是什么意思?<br>2.官网直接下的jquery-ui,引用的js和css都是一个文件,用bower下载的为什么都拆分开了,一个组件一个文件。<br>3.看了js源码都是工厂函数,是采用什么规范的,amd吗?<br>4.我页面上如果要引用这些组件是不是要用require.js来加载这些模块呢?</p>
jquery ui安装问题
https://segmentfault.com/q/1010000005341161
2016-05-25T11:11:42+08:00
2016-05-25T11:11:42+08:00
jsscripting
https://segmentfault.com/u/jsscripting
0
<p>npm bower安装问题,不是很懂,现在要用到jquery ui,请教一下这两种安装方式具体的流程,谢谢各位</p>
jquery-ui 拖拽插件 如何绑定给动态生成的DOM节点
https://segmentfault.com/q/1010000005629972
2016-06-03T11:33:02+08:00
2016-06-03T11:33:02+08:00
NeoChang
https://segmentfault.com/u/neochang
1
<p>draggable里面的参数handle如何绑定给js生成的动态节点。</p>
后台管理框架
https://segmentfault.com/q/1010000005066409
2016-05-05T17:03:55+08:00
2016-05-05T17:03:55+08:00
getvalue
https://segmentfault.com/u/getvalue
0
<p>公司的管理框架是用DWZ做的,因为最近出了一些问题,领导决定换一个框架。领导还想要有自带角色权限验证的,像DWZ。大神们推荐一下比较好的框架,哪怕没有角色权限验证呢!<br>我自己在用bootstrap+jQuery UI 搭建,可是不知道如何下手,有没有研究过的呢?<br>要实现的效果就是 导航栏 左子树 主内容是tab效果<br>大家帮帮忙!</p>