jQuery UI是一组精心设计的用户界面交互,效果,小部件和构建在jQuery JavaScript库之上的主题。
我从事 asp.net mvc 工作。运行自动完成时遇到问题,但我不知道如何解决 当运行 ASP.NET MVC 应用程序时,这些问题会显示在辞职页面的 console.log 上。 辞职页面
这段代码调用了最新版本的jquery: 现在我想要最新版本的 jquery ui: <p>此代码调用最新版本的<pre><code>jquery</code></pre>:</p> <pre><code><script src='https://code.jquery.com/jquery-latest.min.js'></script> </code></pre> <p>现在我想要最新版本的<pre><code>jquery ui</code></pre>:</p> <pre><code><script src="https://code.jquery.com/ui/jquery-ui-latest.min.js"></script> </code></pre> <p>不起作用 - 网络选项卡上的状态代码 <pre><code>404</code></pre> </p>有办法吗?<p> </p> </question> <answer tick="false" vote="0">您可以为此使用 jQuery UI 的 <p>内容分发网络 (CDN)<a href="https://releases.jquery.com/ui/" rel="nofollow noreferrer">。</a> </p>或者,更好的是,使用 <p>cdnjs.cloudflare.com<a href="https://cdnjs.com/libraries/jqueryui" rel="nofollow noreferrer">。它为我们提供了 </a><code><script></code><pre> 标签,可以放入我们的 html 中,其中包括 </pre>子资源 <a href="https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity" rel="nofollow noreferrer"><code>integrity</code><pre> 哈希值 </pre>。这些哈希值可以保护我们免受网络犯罪分子的侵害,他们可能会通过更改 Javascript 来攻击我们。最新版本的 jQuery UI 的标签是这样的。</a> </p><code><script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js" integrity="sha512-57oZ/vW8ANMjR/KQ6Be9v/+/h6bq9/l3f0Oc7vn6qMqyhvPd1cvKBRWWpzu0QoneImqr2SkmO4MSqU+RpHom3Q==" crossorigin="anonymous" referrerpolicy="no-referrer"> </script> </code><pre> 出于同样的原因,使用 jQuery 本身的 CDN 是个好主意。它就是 Cloudflare;他们以在全球范围内的广泛影响力和出色的网络流量工程技能而闻名。</pre> <p>但是您应该知道,jQuery UI 是作为“自定义下载”分发给我们用户的。我们可以选择我们需要的小部件和其他功能,下载页面会为我们创建一个 .js 和一个 .min.js 文件。自定义下载生成器省略了我们不需要的小部件和功能。对于不使用 jQueryUI 许多不同部分的应用程序来说,这可以节省大量的下载“足迹”。使用子集通常比使用最快的 CDN 更快。<a href="https://cdnjs.com/libraries/jquery" rel="nofollow noreferrer"> </a></p>专业提示<p>。不要在生产网页中使用来自第三方 CDN 源的 <a href="https://jqueryui.com/download/" rel="nofollow noreferrer"><code>/latest/</code></a> 之类的内容。使用 CDN 时始终指定准确的版本。您不希望随机迟到的最新版本更新破坏您经过严格测试的网络应用程序。按照</p>您的<p>时间表更新您的版本,而不是库出版商的时间表。<strong> </strong> <pre> </pre>您可能必须指定确切的版本。请前往<em>JQuery UI 发布页面</em>并选择要使用的正确版本。每个页面可以使用以下脚本标记将最新代码的缩小版本添加到您的页面上。</p> </answer><code><script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js" integrity="sha256-lSjKY0/srUM9BE3dPm+c4fBo1dky2v27Gdjm2uoZaL0=" crossorigin="anonymous"></script> </code><answer tick="false" vote="0"> <p> <a href="https://releases.jquery.com/ui/" rel="nofollow noreferrer"></a>
如何实现嵌套 ul li 标签的 jquery 手风琴...?
我正在尝试为我的嵌套 标签显示 jQuery 手风琴... 我发现这个网站可以显示手风琴:http://jqueryui.com/demos/accordion/ 但不幸的是,它使用的是 &l... 我正在尝试为我的嵌套 <ul> <li> 标签显示 jQuery 手风琴... 我发现这个网站可以显示手风琴:http://jqueryui.com/demos/accordion/ 但不幸的是,它使用 <h3> 标签作为标题。 在我的实际代码中,我只有 <ul> 和 <li> 标签,我尝试过,但我无法理解要编写什么函数来实现它。 我的代码风格类似于: <ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea <ul> <li>China</li> <li>Africa</li> </ul> </li> </ul> </li> <li>Milk</li> </ul> 据我所知,您必须像示例中那样构建文档。 jQuery 正在搜索带有锚点的标头,后跟 div 块,依此类推... 示例: <div id="accordion"> <h3><a href="#">First header</a></h3> <div>First content</div> <h3><a href="#">Second header</a></h3> <div>Second content</div> </div> 所以,你必须使用jQuery的标记,否则jQuery将无法识别你的内容。 您的 <ul> 列表的另一个问题是,jQuery 不知道哪一部分是标题,哪一部分是内容。 此时您有多种选择: 你可以在jQuery中找到相应的代码行并编辑它们(不推荐) 你可以写自己的手风琴(基于原文) (如果您确实想要 <ul> 列表)您可以在运行时将 <ul> 和 <ul> 标签与相应的“jQuery 标签”交换 使用jQuery的标记(推荐) 致以诚挚的问候
我正在使用 jQueryUI 自动完成,并且我有一个映射到选择事件的函数,例如: $("#someId").autocomplete({ 来源:一些数据, 选择:函数(事件,ui){...}, 重点:功能...
美好的一天,我有一个新安装的 WordPress 网站。没有安装任何插件或第 3 方主题,只有 WordPress 的库存版本。然而,在我还没来得及之前,似乎就出现了问题
我有一个问题,如果存在隐藏元素,jQuery 可排序项目将很难在可排序元素中找到它们的位置。在下面的jsfiddle中,有2个例子。在...
我正在使用 jquery ui 自动完成功能,想要破译由键盘交互和鼠标交互触发的焦点事件。我该怎么办呢? $('输入').autocomplete({ 来源:
排序时是否可以“暂停”放置事件以询问用户问题(jquery-ui 可排序)?
我正在开发一个使用 jquery-ui 可排序小部件的项目。 在某些情况下,我需要问用户一个与排序相关的问题,然后更新回调就会起作用
我正在使用jquery的daterangepicker组件。当我将日期传递为“Jan 2011”时,jquery 的 Date.parse() 函数会给出一些奇怪的输出。以下是不同用例的示例输出:...
我正在使用Jquery的dialog()方法来创建对话框。 我在创建对话框时在对话框上创建按钮,使用 $("#divName").dialog({ 纽扣: { ...
jQuery UI Slider - 如何在页面中使用多个滑块
我正在尝试使用 jquery ui 滑块创建多个滑动条。问题是只有当在其他条上滑动时,最后一个条中的值才会发生变化。 当在另一个滑动条上滑动时,值会发生变化...
我正在尝试创建一个强大的拖放事件调度程序。我几乎已经完成了所有内容,但仍停留在一个元素上:如何拖动项目的副本。 您可以看到当前版本正在运行
用户选择州和城市后,将触发 Ajax 以从服务器检索数据。只有这样,我才允许他们使用 jQuery UI 自动完成功能搜索结果。 我填充一个名为
jQuery 日期选择器月份选择框在 Bootstrap 模式中立即打开和关闭
我遇到了 Bootstrap 模式和 jQuery UI 日期选择器之间的冲突,我无法使用月份选择框,因为某些东西在打开后立即将其关闭。 重现步骤: ...
我想使用jquery ui,但我缺少以下环境中的css: $.ajax({ url: '//code.jquery.com/ui/1.12.1/jquery-ui.js', 数据类型:'脚本', 缓存:真, 成功:函数(){ ...
我有一个简单的工具提示,其中的 div 中有很长的 JavaScript 代码。我想让它尽可能简单。 这是我的代码: 我有一个简单的工具提示,div 中有很长的 JavaScript 代码。我想让它尽可能简单。 这是我的代码: <div onmouseover="document.getElementById('tt1DX1').style.display='block'" onmouseout="document.getElementById('tt1DX1').style.display='none'" style="position:relative;">Tool <div id="tt1DX1" class="toolTip_new pbc11_ttpos1_1Q_di" style="display: none;"> <div class="tool_wrapper"> <div class="tooltip_top_new"></div> <div class="tooltip_middle_new"> <div class="content"> <p>Please holder actuall text</p> <p>Please holder actuall text</p> </div> </div> <div class="tooltip_bot_new2"></div> </div> </div> </div> CSS .tooltip_top_new{ background:url(../images/n_tooltip_top.png) no-repeat; height:9px; width:212px; } .tooltip_middle_new{ background:url(../images/n_tooltip_middle.png) no-repeat; width:212px; } .tooltip_middle_new .content{ padding:2px 13px 1px; } .tooltip_middle_new .content p{ line-height: 1.3; margin-bottom: 1em; text-align: left; } .tooltip_bot_new2{ background:url(../images/n_tooltip_bot2.png) no-repeat; height:21px; width:212px; } .Question_di{ position:relative; } .pbc11_ttpos1_1Q_di { border: 0 solid #FF0000; } .toolTip_new { background: none repeat scroll 0 0 transparent; color: #5C5C5C; display: none; font: 10px/12px Tahoma,Geneva,sans-serif; left: -173px; top: -90px; position: absolute; z-index: 1000; } 问题是我必须复制和粘贴onmouseover="document.getElementById('tt1DX1').style.display='block'" onmouseout="document.getElementById('tt1DX1').style.display='none'"无论我在哪里使用工具提示,我都想避免它。 JQueryTools 包含一个工具提示模块,它将消除您的大部分代码。 http://jquerytools.org/demos/tooltip/index.html 也可以完全不使用 JavaScript,使用 HTML 和 CSS 创建工具提示: <div class="has-tooltip"> <button class="huge red">You Know You Wanna...</button> <div class="tooltip">Do NOT Press This Button.</div> </div> 在 CSS 中: .has-tooltip .tooltip { position: absolute; display: none; <style code to position (with margin-left and margin-top) and make the tooltip box look how you want> } .has-tooltip:hover .tooltip { display: block; } Google“CSS Tooltips”查看大量示例。
我已经在项目中设计并实现了 jQuery UI 滑块。尽管它具有响应性,但滑块不会响应触摸和拖动。相反,您必须触摸您想要的位置
我正在尝试手动将单选按钮设置为选中状态,但出现问题。代码运行得很好: $('#'+align+'Text').attr("选中","选中"); 但是当我将 jQuery UI 付诸实践时......
我有一个名为 #person 的对象,我需要使用滑块的输入将其从 -180 度旋转到 180 度。我让滑块与输入框同步以显示当前角度值和
这是垂直居中对齐元素可拖动的示例: #draggablediv { 宽度:100px; 高度:100px; 回来...</desc> <question vote="0"> <p>这是可拖动的垂直居中对齐元素<a href="https://codepen.io/tp1415926535/pen/oNaOePX" rel="nofollow noreferrer">示例</a>:</p> <pre><code><html> <head> <style> #draggablediv { width: 100px; height: 100px; background-color: yellow; position: absolute; margin: auto 0; top: 0; bottom: 0; } </style> </head> <body> <div id="draggablediv"></div> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script> <script> $(function () { $("#draggablediv").draggable(); }); </script> </body> </html> </code></pre> <p>由于“margin: auto”,可拖动元素将不再准确设置顶部值。有没有办法让它正常工作?</p> </question> <answer tick="true" vote="0"> <p>这个问题可以分为两步解决:</p> <ul> <li>为了最初将元素垂直居中,我建议以这种方式使用 FlexBox:</li> </ul> <pre><code>/* to make sure that both document root & body take the whole vertical space */ html,body { height: 100%; display: flex; align-items: center; } </code></pre> <ul> <li>要修复顶部/底部错误的偏移,您应该删除</li> </ul> <pre><code>#draggablediv { ... ... /* remove these 2 lines:*/ top: 0; /* <--- this */ bottom: 0; /* <--- this */ ... } </code></pre> <p>这是<strong>众多建议之一</strong>,另一个建议(如果您不想触及正文和文档根目录),您可以使用另一个父 div 容器来应用相同的先前规则或也使用 JQuery 将元素居中。</p> </answer> </body></html>