jquery-ui 相关问题

jQuery UI是一组精心设计的用户界面交互，效果，小部件和构建在jQuery JavaScript库之上的主题。

jQueryUI Tooltips 正在与 Twitter Bootstrap 竞争

我已经能够获得一些工具提示，最终可以使用以下代码：将鼠标悬停在我上方进而 $('...</desc> <question vote="160"> <p>我终于能够通过以下代码获得一些工具提示来工作：<em> </em><code><a href="#" rel="tooltip" title="Tool tip text here">Hover over me</a> </code></p> <pre>然后</pre> <p><code><script> $('[rel=tooltip]').tooltip(); </script> </code></p> <pre>我遇到的问题是它使用 jQueryUI 工具提示（没有箭头，又大又丑的工具提示）而不是 Bootstraps。</pre> <p>我需要做什么才能使用 Bootstrap Tooltips 而不是 jQueryUI？</p> <p> </p> </question>jQuery UI 和 Bootstrap 都使用 <answer tick="false" vote="205"><code>tooltip</code><p> 作为插件名称。使用 <pre><code>$.widget.bridge</code></pre> 为 jQuery UI 版本创建一个不同的名称，并允许 Bootstrap 插件保留命名为 tooltip （尝试在 Bootstrap 小部件上使用 <pre><code>noConflict</code></pre> 选项只会导致很多错误，因为它无法正常工作； <pre>该问题已在此处报告</pre>）：<a href="https://github.com/twbs/bootstrap/issues/6303#issuecomment-12715745" rel="nofollow noreferrer"> </a><code>$.widget.bridge('uitooltip', $.ui.tooltip); </code></p> <pre>因此，使其工作的代码：</pre> <p><code> <script src="/js/jquery.js"></script> <script src="/js/jquery-ui.js"></script> <script> // Resolve name collision between jQuery UI and Twitter Bootstrap $.widget.bridge('uitooltip', $.ui.tooltip); </script>  <script src="js/bootstrap.js"></script> </code></p> <pre>JQuery 工具提示可以通过以下方式实例化：</pre> <p><code>$('.someclass').uitooltip(); </code></p> <pre>很好的复制粘贴代码，还可以处理按钮冲突：</pre> <p><code><script src="/js/jquery.js"></script> <script src="/js/jquery-ui.js"></script> <script> $.widget.bridge('uibutton', $.ui.button); $.widget.bridge('uitooltip', $.ui.tooltip); </script> <script src="/js/bootstrap.js"></script> </code></p> <pre> </pre> </answer>一个简单的解决方案是在 jquery-ui.js 之后加载 bootrap.js，这样 bootstrap .tooltip 方法优先。<answer tick="false" vote="78"> <p> </p> </answer>如果您必须在 <answer tick="false" vote="38"><code>jquery-ui.js</code><p> 之后加载 <pre><code>bootstrap.js</code></pre>，请执行以下操作：<pre> </pre></p><p> </p> <div data-babel="false" data-lang="js" data-hide="false" data-console="true"><code><script type="application/javascript" src="/js/jquery.js"></script> <script type="application/javascript" src="/js/bootstrap.js"></script> <script>var _tooltip = jQuery.fn.tooltip;</script> <script type="application/javascript" src="/js/jquery-ui.js"></script> <script>jQuery.fn.tooltip = _tooltip;</script></code><div> <pre> </pre> </div></div> <p>这将覆盖 jquery-ui 的工具提示并始终使用引导程序。 </p> <p> </p> </answer>这对我有用：<answer tick="false" vote="33"> <p>如果您需要使用 JQuery-UI 但又想使用 bootstrap 的工具提示，只需从此</p>网站<p>获取 JQuery-UI 的自定义版本。<a href="http://jqueryui.com/download/"> </a>只需取消选中“工具提示”选项，然后下载它（它将类似于“jquery-ui-1.10.4.custom.js”）。</p> <p>只需将其添加到您的项目中，而不是您当前正在使用的版本，您就可以开始聚会了。这样就可以避免冲突。它对我来说就像一个魅力！</p> <p> </p> </answer>假设UI会在bootsrap初始化后调用<answer tick="false" vote="23"> <p>在 UI 初始化之前存储引导函数</p> <p><code>jQuery.fn.bstooltip = jQuery.fn.tooltip; </code></p> <pre>然后调用如下</pre> <p><code>$('.targetClass').bstooltip(); </code></p> <pre> </pre> </answer>只使用 Bootstrap 弹出窗口怎么样？ BS 弹出窗口不会产生相同的冲突，尽管它们需要相同的 tooltip.js 组件。是的，它们更加风格化，但不会导致我的 JQuery UI 按钮变得不稳定。 <answer tick="false" vote="11"> <p>我仅将 Jquery UI 用于自定义自动完成/组合框（因此不能声称其他 JQ-UI 控件没问题），并且上述方法都无法解决调用 BS Tooltips 时组合框按钮变得“无样式”的 CSS 问题。切换到 BS Popover 提供了基本相同的效果，没有冲突，无需重新排序我的脚本导入，也不需要显式的桥接语句。</p> <p> </p> </answer><answer tick="false" vote="10">这个解决方案<p>似乎对我来说效果很好。<a href="https://github.com/twitter/bootstrap/issues/6303#issuecomment-12715745" rel="noreferrer"> </a><code>// handle jQuery plugin naming conflict between jQuery UI and Bootstrap $.widget.bridge('uibutton', $.ui.button); $.widget.bridge('uitooltip', $.ui.tooltip); </code></p> <pre> </pre> </answer>尝试使用 <answer tick="false" vote="3">jQuery.noConflict()<p> 看看这是否对你有帮助。看起来 bootstrap 和 jQuery 使用相同的命名空间，也许 bootstrap 和 jQuery 工具提示被加载到同一个函数中，或者先加载一个。<a href="http://api.jquery.com/jQuery.noConflict/" rel="nofollow"> </a>您还可以检查首先加载哪个库。通常，如果您在 javascript 中声明同一函数两次，则使用第二个函数。</p> <p>第三，检查 jQueryUI 包（</p>在他们的网站上）<p>，看看是否可以下载不包含工具提示的版本（我检查过，这是完全可行的）。<a href="http://jqueryui.com/download/" rel="nofollow"> </a> </p> </answer>有一个简单又好的解决方案，只需重新排列 bootstrap 和 jquery ui 文件链接，如下所示：<answer tick="false" vote="3"> <p><code> <script src="/js/jquery-ui.min.js" type="text/javascript"></script> <script src="/js/bootstrap.min.js" type="text/javascript"></script> </code></p> <pre>只需在加载 boostrap js 文件之前加载 jQueryui 即可。这对我来说是工作。</pre> <p> </p> </answer>一个简单的方法是在 jquery-ui.js 之后加载 bootstrap.js，以便 bootstrap .tooltip 覆盖 jquery UI。如果您使用像 requirejs 这样的模块加载器，那么您可以使 bootstrap 依赖于 jquery-ui，如下所示： <answer tick="false" vote="1"> <p><code>requirejs.config({ baseUrl: 'js', waitSeconds: 30, shim: { 'bootstrap': { deps: [ 'jquery', 'jquery-ui' ] },... </code></p> <pre> </pre> </answer>另一种方法是下载 jquery UI 的自定义版本。<answer tick="false" vote="1"> <p>排除不需要的内容，在本例中为工具提示。</p> <p>可以从这里下载</p>https://jqueryui.com/download/<p><a href="https://jqueryui.com/download/" rel="nofollow noreferrer"> </a>这样您就可以将其包含在任何地方</p> <p> </p> </answer>万一你...<answer tick="false" vote="1"> <p> </p>不想在 jQuery UI 之后加载引导程序并且<ol> <li></li><code>$.widget.bridge</code><li> 和 <pre><code>noConflict</code></pre> 不适合您并且<pre> </pre>您不想覆盖 jQuery UI 工具提示</li> <li> </li>那么重新启用引导工具提示的另一种方法如下：</ol> <p><code><script src="/js/bootstrap.js"></script> <script> var bsTooltip = $.fn.tooltip; </script> <script src="/js/jquery-ui.js"></script> </code></p> <pre>然后你可以这样初始化引导工具提示：</pre> <p><code>// initialize tooltips bsTooltip.call( $( "[data-toggle='tooltip']" ) ); </code></p> <pre> </pre> </answer>假设UI会在Bootsrap初始化后调用（并且不能改变Bootstrap >> UI的顺序），放在bootstrap import之后：<answer tick="false" vote="0"> <p><code>jQuery.fn.bstooltip = jQuery.fn.tooltip; </code></p> <pre>那么毕竟：</pre> <p><code>jQuery.fn.uitooltip = jQuery.fn.tooltip; jQuery.fn.tooltip = jQuery.fn.bstooltip; </code></p> <pre>所以当你使用 </pre><code>$(".selector").tooltip()</code><p> 时，它将是 Bootstrap 的。您仍然可以使用 UI 版本 <pre><code>$(".selector").uitooltip()</code></pre>。<pre> </pre> </p></answer>

jquery-ui twitter-bootstrap

回答 0 投票 0

jQuery ui 关闭按钮未显示，但工作正常

我正在使用 jQuery-ui 对话框，并且我已经添加了库： <question vote="1"> <p>我正在使用 jQuery-ui 对话框，并且我已经添加了库：</p> <pre><code><link rel="stylesheet" href="../css/bootstrap.min.css"> <link rel="stylesheet" href="../css/jquery-ui.css"> <script src="../js/jquery-3.2.1.min.js"></script> <script src="../js/tether.min.js"></script> <script src="../js/bootstrap.min.js"></script> <script src="../js/jquery-ui.js"></script> </code></pre> <p>但是出现对话框时，看不到关闭按钮X。 </p> <p>我可以这样看：</p> <p><a href="https://i.stack.imgur.com/epUvd.png" target="_blank"><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tL2VwVXZkLnBuZw==" alt=""/></a></p> <p>我在控制台出现这些错误：</p> <blockquote> <p>加载资源失败：服务器响应404状态（未找到）</p> </blockquote> <p><a href="https://i.stack.imgur.com/kFza8.png" target="_blank"><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tL2tGemE4LnBuZw==" alt=""/></a></p> </question> <answer tick="false" vote="2"> <p>当您下载 Jquery UI zip 文件并解压时，会出现一个 images 文件夹。复制并粘贴到您的项目文件夹中。然后，它将完美地工作。 </p> </answer> <answer tick="false" vote="2"> <h2>错误：</h2> <blockquote> <p>您的服务器上没有 3 个 png。</p> </blockquote> <p>您可以指向以下位置的 png：</p> <h1><a href="https://cdnjs.com/libraries/jqueryui" rel="nofollow noreferrer">CDN</a></h1> <blockquote> <p><a href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/images/ui-icons_444444_256x240.png" rel="nofollow noreferrer">https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/images/ui-icons_444444_256x240.png</a></p> <p><a href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/images/ui-icons_555555_256x240.png" rel="nofollow noreferrer">https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/images/ui-icons_555555_256x240.png</a></p> <p><a href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/images/ui-icons_777777_256x240.png" rel="nofollow noreferrer">https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/images/ui-icons_777777_256x240.png</a></p> </blockquote> <h3>或</h3> <blockquote> <p>下载它们并将它们放在您自己的服务器上。</p> </blockquote> <p>在这两种情况下，您可能必须更改 HTML 文件上 1. 样式表或 2. 内联 <pre><code><style></code></pre> 标记中的规则集： </p> <ol> <li><strong>样式表：</strong><pre><code>jquery-ui.css</code></pre>行。要查找要编辑的特定行，请转到该错误日志并单击每个错误。您应该被重定向到 CSS 文件的浏览器视图，到达您需要编辑的确切行。</li> </ol> <h3>或</h3> <ol start="2"> <li><strong><pre><code><style>...</style></code></pre></strong> 在 <pre><code><head></code></pre> 标签内。</li> </ol> </answer> <answer tick="false" vote="1"> <p>图像文件不是其原始位置，请下载插件所需的图像并重试以下代码</p> <pre><code> <link rel="stylesheet" href="../css/bootstrap.min.css"> <link rel="stylesheet" href="../css/jquery-ui.css"> <script src="../js/jquery-3.2.1.min.js"></script> <script src="../js/tether.min.js"></script> <script src="../js/bootstrap.min.js"></script> <script src="../js/jquery-ui.js"></script> </code></pre> </answer> <answer tick="false" vote="0"> <p>在您的项目中，将 ui-icons 图像放置在内容文件夹下的图像文件夹中</p> </answer> </body></html>

jquery jquery-ui jquery-ui-dialog

回答 0 投票 0

如何在 jQuery UI 中使计时器可排序

我需要制作一个带有计时器的益智游戏。因此，它应该从开始按钮或将我的元素之一拖动到第二个块（用可排序制成）开始。我有一个名为“ti...

jquery jquery-ui countdowntimer

回答 1 投票 0

从加载的 JQueryUI 选项卡设置页面标题<title>产品ABC

我们正在将内容加载到 JQuery UI 选项卡中，该内容包含结构如下的 HTML：产品ABC <...

javascript jquery jquery-ui

回答 1 投票 0

jQuery UI 可排序和 Bootstrap 网格

我在 BS 中创建了一个仪表板网格，并希望能够使用 Sortable 拖动图块 - 这本身工作正常，但行为确实不可预测。我有一个 6 x 4 网格，对于

twitter-bootstrap jquery-ui jquery-ui-sortable

回答 3 投票 0

计算天数函数返回错误的计数

我有一个javascript函数，当我选择像11月20日到11月22日这样的日期时，我得到的计数是2而不是3，我在这里做错了什么，我尝试调试代码但无法弄清楚是什么。 ..

javascript jquery jquery-ui

回答 1 投票 0

Jquery-ui 拖放。下拉列表包含动态创建的文本框，无法编辑

动态创建的文本框在 JQuery UI 中不可编辑。使用拖放选项在放置项目时添加了文本框和项目。但文本框不可编辑。文本框在

javascript jquery html jquery-ui

回答 1 投票 0

将 jQuery Datepicker 的值与高级自定义字段字段的值进行比较

我有一个带有 jQuery 日期选择器的页面。选择值后，我希望能够将其存储在 PHP 变量中，以便我可以将其与从高级自定义字段获取的变量进行比较

php wordpress jquery-ui advanced-custom-fields jquery-ui-datepicker

回答 1 投票 0

Symfony2 在不同的 JQuery UI 选项卡中使用多种表单，但在单个页面中

我面临一个问题，我可以总结如下：我有一个像这样的 TWIG 模板页面（reg.html.twig）： {% 扩展“::base.html.twig” %} {% 块体 %} 我面临一个问题，我可以总结如下：我有一个像这样的 TWIG 模板页面（reg.html.twig）： {% extends "::base.html.twig" %} {% block body %} <ul class="tabs"> <li class="left"><a href="#tab1">tab1</a></li> <li class="left"><a href="#tab2">tab2</a></li> <li class="left"><a href="#tab3">tab3</a></li> <li class="right"><a href="#tab4">tab4</a></li> </ul> <div class="tabs_container"> <div id="tab1" class="blocco-tab"> <form action="{{ path('AAA') }}" method="post" {{ form_enctype(form) }}> <div id="name_field"> {{ form_row(form.name) }} </div> <div id="address"> {{ form_row(form.addresses[0].road) }} </div> </form> </div> <div id="tab2" class="blocco-tab"> <form action="{{ path('BBB') }}" method="post" {{ form_enctype(form) }}> <div id="surname_field"> {{ form_row(form.surname) }} </div> </form> </div> </div>  {% endblock %} 字段 name、surname 和 addresses 属于示例 Symfony2 实体 Person。 addresses是地址集合的第一个也是唯一的元素（出于其他原因我需要它作为集合）工作的 JS 文件是： jQuery(document).ready(function() { $(".blocco-tab").hide(); $("ul.tabs li:first").addClass("active").show(); $(".blocco-tab:first").show(); $("ul.tabs li").click(function() { $("ul.tabs li").removeClass("active"); $(this).addClass("active"); $(".blocco-tab").hide(); var activeTab = $(this).find("a").attr("href"); $(activeTab).fadeIn(); return false; }); }); 实体文件： class Person { protected $name; protected $surname; protected $addresses; public function __construct(){ $this->addresses = new ArrayCollection(); } } 在默认控制器中： public function tab1Action(Request $request){ $person = new Person(); $address = new Address(); $addr_coll = new ArrayCollection(); $addr_coll->add($address); $tab1_type = new Tab1Type(); $person->setAddresses($addr_coll); $form = $this->createForm($tab1_type, $person); if ($request->getMethod() == 'POST') { $form->bindRequest($request); if ($form->isValid()) /*ecc ecc ecc*/ } public function tab2Action(Request $request){ $person = new Person(); $tab2_type = new Tab2Type(); $form = $this->createForm($tab2_type, $person); if ($request->getMethod() == 'POST') { $form->bindRequest($request); if ($form->isValid()) /*ecc ecc ecc*/ } 实际上，我采取的方法是让每个 FormType 都具有我不需要渲染的所有字段，但将 'hidden' 和 'property_path' => false，因为我不能只渲染我想要的字段，因为其他字段会导致错误在运行时（它们为空），但我在以联合方式处理这两种情况时仍然遇到问题。将每个表单放在不同的页面（==不同的路由），使用不同的控制器，一切正常，所以这不是与 symfony 基本使用相关的问题，而是将 N 个表单与 JQuery UI 集成在单个页面中，使得我哭了。修复了我必须使用此选项卡的问题，我该如何解决？我必须用一个 Action 来处理所有事情吗？我必须制作一份表格吗？我错过了什么吗？预先感谢，我希望我已经清楚地解释了我的问题。您只是将相同的变量用于不同的形式 <div id="tab1" class="blocco-tab"> <form action="{{ path('AAA') }}" method="post" {{ form_enctype(**form1**) }}> <div id="name_field"> {{ form_row(**form1**.name) }} </div> <div id="address"> {{ form_row(**form1**.addresses[0].road) }} </div> </form> </div> <div id="tab2" class="blocco-tab"> <form action="{{ path('BBB') }}" method="post" {{ form_enctype(**form2**) }}> <div id="surname_field"> {{ form_row(**form2**.surname) }} </div> </form> </div> 尝试使用单一表格 {% extends "::base.html.twig" %} {% block body %} <form action="{{ path('AAA') }}" method="post" {{ form_enctype(form) }}> <ul class="tabs"> <li class="left"><a href="#tab1">tab1</a></li> <li class="left"><a href="#tab2">tab2</a></li> <li class="left"><a href="#tab3">tab3</a></li> <li class="right"><a href="#tab4">tab4</a></li> </ul> <div class="tabs_container"> <div id="tab1" class="blocco-tab"> <div id="name_field"> {{ form_row(form.name) }} </div> <div id="address"> {{ form_row(form.addresses[0].road) }} </div> </div> <div id="tab2" class="blocco-tab"> <div id="surname_field"> {{ form_row(form.surname) }} </div> </div> </div>  </form> {% endblock %} 然后你就有了ocontroller aaaAction() public function aaaAction(Request $request){ $person = new Person(); $address = new Address(); $addr_coll = new ArrayCollection(); $addr_coll->add($address); $person->setAddresses($addr_coll); $form = $this->createForm(new PersonType(), $person); if ($request->getMethod() == 'POST') { $form->bindRequest($request); if ($form->isValid()) /*ecc ecc ecc*/ } 以及表单生成器的类 class PersonType extends AbstractType { public function buildForm(FormBuilder $builder, array $options) { $builder ->add('name', null, array()) ->add('surname', null, array()) ->add('addresses', null, array()) ; } public function getName() { return 'person'; } public function getDefaultOptions(array $options) { return array( 'data_class' => 'Acme\YourBundle\Entity\Person', ); } } 正如我之前提到的，我解决了将所有选项卡包装在一个表单中的问题。您的两个解决方案都可以，谢谢您的宝贵时间。 Linuxatico 如果其他人遇到这个问题，你可以像这样解决它（我不确定这是否是最优雅的解决方案，但我认为它比为所有内容制作一个大表格更好）。此示例混合了配置文件和changePassword FOSUserBundle 形式：在您的主展示模板中（在我的例子中为 Profile：show.html.twig）： {% if profileForm is defined %} {% include 'MyBundle:Profile:edit.html.twig' with {'form':profileForm} %} {% else %} {% render 'MyBundle:Profile:edit' %} {% endif %} 重复更改密码： {% if passwdForm is defined %} {% include 'MyBundle:ChangePassword:changePassword.html.twig' with {'form':passwdForm} %} {% else %} {% render 'FOSUserBundle:ChangePassword:changePassword' %} {% endif %} 在您的控制器中（添加其他）： if ($form->isValid()) { ..... else { return $this->container->get('templating')->renderResponse('FOSUserBundle:Profile:show.html.'.$this->container->getParameter('fos_user.template.engine'), array('user' => $user, 'profileForm' => $form->createView())); } 相应地添加 profileForm 和 passwdForm。就我而言，修改后的控制器是 ProfileController 和 ChangePasswordControllers（FOSUserBundle 覆盖）。对于您的选项卡，如果发现任何错误，您可以添加 javascript（或 twig）来打开选项卡。希望这有帮助:) 我就是这样做的： <div class="form-tabs"> <ul class="nav nav-tabs" role="tablist"> <li class="nav-item"> <a class="nav-link active" id="basic-tab" data-toggle="tab" href="#basic" role="tab">Basic</a> </li> <li class="nav-item"> <a class="nav-link" id="advanced-tab" data-toggle="tab" href="#advanced" role="tab">Advanced</a> </li> </ul> <div class="tab-content"> <div class="tab-pane fade show active" id="basic" role="tabpanel"> {{ form_start(formsimple, {'attr': {'novalidate': 'novalidate'}}) }} {{ form_widget(formsimple) }} {{ form_end(formsimple) }} </div> <div class="tab-pane fade" id="advanced" role="tabpanel"> {{ form_start(form, {'attr': {'novalidate': 'novalidate'}}) }} {{ form_widget(form) }} {{ form_end(form) }} </div> </div> 在控制器中： $formTypesimple = EventTypeMultiSimple::class; $formType = EventTypeMulti::class; $form = $this->createForm($formType, $event, [ 'validation_groups' => ['create', 'Default'], 'user_choices' => $eventChoices, ]); $formsimple = $this->createForm($formTypesimple, $event, [ 'validation_groups' => ['create', 'Default'], 'user_choices' => $eventChoices, ]); return $this->render('Dashboard/Shared/Event/add-edit.html.twig', [ "event" => $event, "form" => $form->createView(), "formsimple" => $formsimple->createView(), ]);

php javascript jquery-ui symfony twig

回答 5 投票 0

JQuery 自动完成源未更新

我正在使用 jquery-ui 自动完成插件。这是我实例化自动完成插件的方法。 //自动填充 $( "#TextArea" ).autocomplete({ 来源：“search.php?option=”+ opt...

javascript jquery jquery-ui autocomplete jquery-ui-autocomplete

回答 1 投票 0

PrimeUI - 如何让它工作？

我是 PrimeUI 新手，并尝试按照 PrimeUI 快速入门指南中的步骤进行操作。来自一段话：为了使用 PrimeElements，添加 X-Tag 库，其中还包括定制的 pollyfill

jquery jquery-ui prime-ui

回答 3 投票 0

无法使用jstree功能创建动态子节点[已关闭]

在 2023 年更改了标题，因为提到了非主题。但我想知道该功能的存在，我已经研究了该功能并回答了我的问题的答案。请核实...