jquery-ui 相关问题

我在表上的 jquery 可排序方面遇到问题。我的桌子是这样的： <... 我在表上的 jquery 可排序方面遇到问题。我的桌子是这样的： <table> <thead> <th>Number</th> <th>Text</th> <th>Order</th> </thead> <tbody id="sortable" data-bind="foreach: fruits"> <tr class="ui-state-default"> <td data-bind="text: number"></td> <td data-bind="text: fruit"></td> <td data-bind="text: order"></td> <tr> 我希望它可以排序，除了在订单列上，我有这个代码，但它不起作用 $( function() { $( "#sortable" ).sortable({ items: 'td:not(:nth-child(3))' } }); 例如，如果我有数量文字订购数量水果订购 1 香蕉 5 2 苹果 10 3 桃子 15 当我改变它时，拖动整行，我想要看起来像这样，顺序保持不变：数量水果订购 2 苹果 5 1 香蕉 10 3 桃子 15 考虑替代方法。 $(function() { $("#sortable").sortable(); }); .sidebyside { float: left; margin: 0; margin-right: -1px; padding: 0; } <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.3/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-3.7.1.js"></script> <script src="https://code.jquery.com/ui/1.13.3/jquery-ui.js"></script> <div style="width: 400px;"> <table class="sidebyside" style="width: 66%;"> <thead> <th>Number</th> <th>Text</th> </thead> <tbody id="sortable" data-bind="foreach: fruits"> <tr class="ui-state-default"> <td data-bind="text: number">1</td> <td data-bind="text: fruit">Banana</td> </tr> <tr class="ui-state-default"> <td data-bind="text: number">2</td> <td data-bind="text: fruit">Apple</td> </tr> <tr class="ui-state-default"> <td data-bind="text: number">3</td> <td data-bind="text: fruit">peach</td> </tr> </tbody> </table> <table class="sidebyside" style="width: 33%;"> <thead> <th>Order</th> </thead> <tbody data-bind="foreach: fruits"> <tr class="ui-state-default"> <td data-bind="text: order">5</td> </tr> <tr class="ui-state-default"> <td data-bind="text: order">10</td> </tr> <tr class="ui-state-default"> <td data-bind="text: order">10</td> </tr> </tbody> </table> <table> </div> 填充表格会需要更多工作，但它确实实现了您的目标。

jquery jquery-ui jquery-ui-sortable

回答 1 投票 0

JQuery UI 滑块，仅加载 Button，而不加载 Range，并且滑块不滑动

我正在使用jquery滑块，我面临的问题是仅显示滑块按钮而不显示范围。当我尝试滑动按钮时，它不会滑动。超文本标记语言我正在使用jquery滑块，我面临的问题是仅显示滑块按钮而不显示范围。当我尝试滑动按钮时，它不会滑动。 HTML <div id="slider-range"></div> JS $("#slider-range").slider({ range: true, min: 0, max: 500, values: [75, 300], slide: function (event, ui) { console.log("sliding"); } }); 之后 UI 就出现了备注：我确认div在JS执行之前就被加载了，控制台也没有异常。为了确认 JQuery UI JS 和 CSS 的加载，我在同一个 Div 中渲染了一个不同的控件（日历控件），它加载并正常工作。我实现了滑块回调，以确认该控件可以从 JQueryUI 正常工作，并且滑块回调可以正常工作。我可以看到我放入回调中的控制台日志。我通过控制台中的 Elements 选项卡确认 Div 已附加 JQueryUI 类我观察到滑块按钮添加了一个 href 属性，它指向 localhost。我还确认，通过控制台我可以看到滑块按钮上应用的 jquery-UI 样式如果有人能帮助我解决这个问题，那将非常有帮助。使用这个： https://jsfiddle.net/6sxg9ytd/1/ <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery UI Slider - Default functionality</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script> $( function() { $( "#slider" ).slider( { range: true, min: 0, max: 500, values: [ 55, 105 ], slide: function( event, ui ) { console.log("sliding"); } }); } ); </script> </head> <body> <div id="slider"></div> </body> </html> $( "#slider_element" ).slider({ orientation: "vertical", min: 20, max: 90, range: false, values: 20, slide: function( event, ui ) { $('#input_element').val(ui.values[ 0 ] ).change(); } }); 这是获取一个滑动按钮的代码，而不是范围。这也是垂直滑块的一个示例。正如您在代码中看到的。这100%有效。

javascript html jquery css jquery-ui

回答 2 投票 0

jQuery UI 图标系统是否有一个“空”图标 - 一个没有图像的图标？

听起来有点愚蠢的问题，但这将是一个很好的功能。 jQuery UI 图标系统是否有一个“空”图标 - 一个没有图像的图标？我是否被迫在 ui-icon-emp 上做一些自定义样式...

jquery jquery-ui icons

回答 4 投票 0

jquery mobile 中下拉选项默认显示问题

我不希望下拉默认选择的选项单独显示，但为什么会发生这种情况。是否有一个选项可以跳过特定下拉列表的 jquery 设置？就像使用某些功能一样...

html jquery dom jquery-ui jquery-mobile

回答 1 投票 0

将项目移动到新的可排序：如何引用我将元素拖放到其中的列表？

我有两个链接在一起的可排序列表。我在第一个列表上有一个事件侦听器，在“sortupdate”上调用函数“A”，以便在我对列表中的项目进行排序或

jquery-ui jquery-ui-sortable

回答 4 投票 0

扫描条形码后按 Enter

我正在寻找在完成输入后按 Enter 的方法。我正在扫描输入中的条形码，但在将代码插入输入后，我想自动按 Enter 键并调用我的

javascript jquery asp.net-mvc jquery-ui barcode-scanner

回答 1 投票 0

jQuery 选项卡：如何隐藏单个选项卡？

如何隐藏tab2？我可以将 ID 添加到第二个 li 中，然后用 jQuery 隐藏它，但是没有办法直接通过 .tabs 来做到这一点吗？如何隐藏tab2？我可以将 ID 添加到第二个 li，然后用 jQuery 隐藏它，但是没有办法直接通过 .tabs 来做到这一点吗？ <div id="tabs" style="width:100%"> <ul> <li> <a href="#tab1"> Tab 1 Title </a> </li> <li> <a href="#tab2"> Tab 2 Title </a> </li> </ul> <div id="tab1" style="width:100%;"> content tab1 .... 试试这个： $('[href="#tab2"]').closest('li').hide(); 试试这个： $($("#tabs").find("li")[1]).hide() 演示 HTML： <div id='MyTabSelector'> <ul> <li><a href="#tabs-1">Tab 0</a></li> <li><a href="#tabs-2">Tab 1</a></li> <li><a href="#tabs-3">Tab 2</a></li> </ul> <div id="tabs-1"> <a href="#" onclick="$('#MyTabSelector').disableTab(1);">Disable Tab 1</a><br /> JS： (function ($) { $.fn.disableTab = function (tabIndex, hide) { // Get the array of disabled tabs, if any var disabledTabs = this.tabs("option", "disabled"); if ($.isArray(disabledTabs)) { var pos = $.inArray(tabIndex, disabledTabs); if (pos < 0) { disabledTabs.push(tabIndex); } } else { disabledTabs = [tabIndex]; } this.tabs("option", "disabled", disabledTabs); if (hide === true) { $(this).find('li:eq(' + tabIndex + ')').addClass('ui-state-hidden'); } // Enable chaining return this; }; $.fn.enableTab = function (tabIndex) { $(this).find('li:eq(' + tabIndex + ')').removeClass('ui-state-hidden'); this.tabs("enable", tabIndex); return this; }; })(jQuery); $('#MyTabSelector').tabs(); 您需要隐藏 li 和 div 才能隐藏选项卡所以你的jquery将是 $($("#tabs").find("li")[1]).hide(); $($("#tabs").find('#tab2')).hide(); 你可以试试这个： //when you click a tab $('#tabs a').click(function(){ //show hidden tabs again $('#tabs li:hidden').show(); //hide the clicked tab $(this).parent().hide(); });

javascript jquery jquery-ui tabs

回答 5 投票 0

openai 的 jQuery 智慧

等等等等，吸它OPEN AI。显然我需要更多角色......

javascript jquery jquery-ui tabs

回答 5 投票 0

Datepicker：模态上的日期选择器（z-index）

今天，当我尝试在 Bootstrap Modal 上显示日期选择器时，我遇到了这个问题。我使用 bootstrap-datepicker 作为日期选择器库。这是我的模式形式： <... 今天当我尝试在 Bootstrap Modal 上显示日期选择器时遇到这个问题。我使用 bootstrap-datepicker 作为日期选择器库。这是我的模式形式： <div class="form-group"> <label for="message-text" class="control-label">Start Date</label> <div class="input-group date"> <div class="input-group-addon"> <i class="fa fa-calendar"></i> </div> <input type="text" class="form-control pull-right datepicker" id="datepicker2" name="start_date"> </div> </div> 这是我的日期选择器脚本： $('#datepicker2').datepicker({ autoclose: true, format: 'yyyy-mm-dd', zIndexOffset: 10000 }); 我已经使用了 zIndexOffset 但它不起作用，日历仍然显示在模式后面。有人可以建议解决方案吗？谢谢你。您应该尝试在模式中添加日期选择器容器div。你可以给模态一个 id，如下所示： <div class="form-group" id="myModalWithDatePicker"> <label for="start_date" class="control-label">Start Date</label> <div class="input-group date"> <div class="input-group-addon"> <i class="fa fa-calendar"></i> </div> <input type="text" class="form-control pull-right datepicker" id="datepicker2" name="start_date"> </div> </div> 然后您可以使用 container 选项，如下所示： $('#datepicker2').datepicker({ autoclose: true, container: '#myModalWithDatePicker', format: 'yyyy-mm-dd' }); 我使用此选项来修复。 .modal-open .ui-datepicker{z-index: 2000!important} 此选项已在模态打开时应用（类 modal-open 添加到主体）这对我来说很好用...只需添加样式 <style> /* style sici */ .datepicker { z-index: 1600 !important; } </style>

javascript jquery twitter-bootstrap jquery-ui datepicker

回答 3 投票 0

带有链接的 jQuery UI 工具提示 HTML 内容

我想使用 jQuery UI 工具提示。在工具提示中，我希望有一个 HTML 格式的链接。我看到这个问题说如何在工具提示中使用 HTML，但是当我想要时出现问题...

jquery jquery-ui tooltip

回答 3 投票 0

如何在 jQuery DatePicker 中使用 Tab 键选择月份？

我一直在尝试在 jQuery 日期选择器中的“下个月”按钮上启用 keydown 事件。这个想法是让用户不使用鼠标而只使用制表键和 Enter 键来选择日期。我知道...

jquery html jquery-ui datepicker keydown

回答 2 投票 0

jQuery Datepicker：使用 Tab 键选择月份

我一直在尝试在 jQuery 日期选择器中的“下个月”按钮上启用 keydown 事件。这个想法是让用户不使用鼠标而只使用制表键和 Enter 键来选择日期。我知道...