jquery-ui 相关问题

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

Javascript 拖/放 - Illustrator 风格“智能指南”

我正在寻找一种在 Javascript 中拖/放时实现 Adobe Illustrator 风格“智能指南”的方法。我目前正在使用 jQuery UI 的可拖动： $('.object').draggable({ 遏制：'

javascript jquery jquery-ui draggable adobe-illustrator

回答 5 投票 0

Jquery ui 可拖动 - 自动调整父容器的大小[重复]

我遇到了一个小问题。我无法解决这个问题。我希望调整容器元素的大小以始终包含其子元素。感谢您的帮助。 $(文档).ready(函数() { ...

javascript jquery jquery-ui

回答 3 投票 0

JQuery 日期选择器 - 从开始日期设置结束日期

使用了两个Jquery日期选择器，StartDate和EndDate 使用了两个 Jquery 日期选择器，StartDate 和 EndDate <input id="StartDate" class="datepicker setNext hasDatepicker" type="text" value="13/02/2015" name="StartDate"> <input id="EndDate" class="datepicker hasDatepicker" type="text" value="15/02/2015" name="EndDate"> 选择 StartDate 日期选择器时，我希望 EndDate 日期选择器为 StartDate + 1 天，并确保在 EndDate 中不能选择早于 StartDate 的日期。我有这个代码： $(function () { $(".datepicker").datepicker({ dateFormat: 'dd/mm/yy', onSelect: function( selectedDate ) { if(this.id == 'StartDate') { var minDate = selectedDate + 1; $('#to').datepicker("option", "minDate", minDate); } } }); }); 所以它点击了onSelect ok，但是随后向日期添加1不起作用（我只是得到末尾带有1的日期字符串，所以'31/12/20141'）。我还在 OnSelect 中尝试了以下操作，假设 selectedDate 是字符串而不是日期类型： var minDate = new Date(selectedDate); var tomorrow = new Date(); tomorrow.setDate(minDate.getDate() + 1); $('#to').datepicker("option", "minDate", tomorrow); minDate 最终成为无效日期，明天也是如此。我不知道如何从字符串设置日期。尝试一些类似的事情： var minDate = selectedDate.getDate(); 给我一个“未捕获的类型错误：未定义不是一个函数”。使用 JQuery 1.11.1，英国日期格式为 dd/mm/yyyy。如果您想更改另一个日期选择器的日期选择器添加一天，您可以执行以下操作：注意 selectedDate 的格式为 dd/mm/YYYY，这不是在 Date 构造函数中使用的有效字符串日期格式。然后你必须解析它。 var arr = selectedDate.split("/"); var date = new Date(arr[2]+"-"+arr[1]+"-"+arr[0]); var d = date.getDate(); var m = date.getMonth(); var y = date.getFullYear(); var minDate = new Date(y, m, d + 1); $("#EndDate").datepicker('setDate', minDate); 这里有一个工作示例fiddle 这里我只让用户选择10天的间隔..您可以根据您的要求进行修改。 $(document).ready(function() { var minDate ; var maxDate; var mDate var j = jQuery.noConflict(); j( "#startTime" ).datepicker({ onSelect: function() { minDate = j( "#startTime" ).datepicker("getDate"); var mDate = new Date(minDate.setDate(minDate.getDate())); maxDate = new Date(minDate.setDate(minDate.getDate() + 10)); j("#endTime").datepicker("setDate", maxDate); j( "#endTime" ).datepicker( "option", "minDate", mDate); j( "#endTime" ).datepicker( "option", "maxDate", maxDate); } }); var tdate = new Date(); var ddate = new Date(tdate.setDate(tdate.getDate() + 10)); j("#startTime").datepicker("setDate", new Date()); j( "#endTime" ).datepicker(); j("#endTime").datepicker("setDate",ddate); }); <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.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><div>Please Select Dates:</div> <p>Strat Date:<input id ="startTime" type="text" ></input></p> <p>End Date:<input id ="endTime" type="text" ></input></p> 您可以使用 setDate 和 getDate。示例： <input id="StartDate" class="datepicker setNext hasDatepicker" type="text" value="13/02/2015" name="StartDate"> <script> function convertInputtoDate(){ var input = document.getElementById("StartDate").value; var date = input.split('/'); var selectdate = new Date(date[2], date[1], date[0]); return selectdate; } var today = convertInputtoDate(); var tomorrow = new Date(convertInputtoDate()); tomorrow.setDate(today.getDate() + 1); alert('Today : ' + today + ' Tommorow :' + tomorrow.toLocaleString()); </script> 如果您想更改日期格式，请使用： tomorrow.toLocaleString(); // output will be : d/m/Y H:M:S 并将您的输入转换为日期： function convertInputtoDate(){ var input = document.getElementById("StartDate").value; var date = input.split('/'); var selectdate = new Date(date[2], date[1], date[0]); return selectdate; } 你甚至可以使用这样的东西。 jQuery(function() { jQuery('#date-range').daterangepicker({ startDate: moment(), endDate: moment(), timePicker: true, timePicker24Hour: true, timePickerIncrement: 15, locale: { format: 'M/DD/YYYY h:mm A' } }); });  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" /> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script> <label for="date-range">Date Range:</label> <input type="text" id="date-range" name="date-range" />

javascript jquery jquery-ui datepicker

回答 4 投票 0

Jquery 滑块无法在我的网页上工作？

Jquery 滑块无法正常工作我的网页我的 HTML 代码是我的 Jquery 代码是 <question vote="-2"> <p><strong>Jquery 滑块无法正常工作我的网页</strong></p> <p>我的<em><pre><code>HTML</code></pre></em>代码是</p> <pre><code><div id="sl"></div> </code></pre> <p>我的<em><pre><code>Jquery</code></pre></em>代码是</p> <pre><code><script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <script> $(function() { $( "#sl" ).slider(); }); </script> </code></pre> </question> <answer tick="false" vote="1"> <p>这是你的演示，它的工作人员..</p> <pre><code>$(function() { $( "#sl" ).slider(); }); </code></pre> <p><a href="http://jsfiddle.net/hjEnM/" rel="nofollow">演示</a></p> <p>有滑块及其工作..还有什么你想要的..？</p> </answer> <answer tick="false" vote="0"> <p>我无法解决您共享的代码。这是一个<a href="https://john-web-guide.blogspot.com/2024/08/simple-jquery-slider-for-web.html" rel="nofollow noreferrer">简单的 jQuery 滑块</a>，可以按照它来学习如何为网页制作自定义 jQuery 滑块。它可以与 WordPress Elementor 以及其他不同的开源软件一起使用。谢谢</p> </answer> </body></html>

jquery jquery-ui slider jquery-ui-widget

回答 0 投票 0

iFrame 内的 jQuery 对话框未运行关闭功能

我有一个简单的 jQuery UI 对话框。当单独查看页面时，一切都按预期工作，除非该页面位于 iframe 中。由于某种原因 close: 函数没有触发。一切...

jquery jquery-ui datatables

回答 1 投票 0

jQuery 多选下拉菜单

我有一个简单的 html 多选下拉列表：分配 ... 我有一个简单的 html 多选下拉列表： <select id="transactionType" multiple="multiple" size="10"> <option value="ALLOC">ALLOC</option> <option value="LOAD1">LOAD1</option> <option value="LOAD2">LOAD2</option>  </select> 我想在 javascript 被禁用的情况下继续使用此列表，但是使用 javaScript 我想将该列表呈现为多选下拉列表。也就是说，它仅显示列表中的一项，直到单击为止，然后将展开以显示 x 项并提供滚动，其中我可以在按住 Shift 或 Ctrl 的同时按照您的预期选择多个元素。 jQuery 新手正在搜索 http://jquery.com/ 但尚未找到我需要的内容。编辑 Struts2 用户，所选答案将使用 [] 进行 url 编码，这会导致 struts2 出现问题，但修复非常简单。只需打开 jquery.multiSelect.js 并搜索“[]”并删除在字符串连接中使用的一个实例。我还使用 jQuery 1.4.4，而不是与它捆绑在一起的 1.3.2，一切都工作得很好。更新（2017）：以下两个库现已成为 Javascript 中最常用的下拉库。虽然它们是 jQuery 原生的，但它们已经过定制，可以与从 AngularJS 1.x 到 Bootstrap 的自定义 CSS 的所有内容一起使用。（Chosen JS，这里的原始答案，受欢迎程度似乎已经下降到#3。）选择2：https://select2.github.io/ 选择：http://selectize.github.io/selectize.js/ 下面是必要的屏幕截图。选择2：选择：原始答案（2012）：我认为选择的库也可能有用。它有 jQuery、Prototype 和 MooTools 版本。随附的是“Chosen”中多选功能的屏幕截图。我也在为我的公司寻找一个简单的多重选择。我想要一些简单的、高度可定制的、除了 jQuery 之外没有大依赖的东西。我没有找到适合我需求的，所以我决定编写自己的代码。我在生产中使用它。这里有一些演示和文档：loudev.com 如果您想贡献，请检查 github 存储库下载jquery.multiselect 包含 jquery.multiselect.js 和 jquery.multiselect.css 文件 <script src="jquery-ui-multiselect-widget-master/src/jquery.multiselect.js" type="text/javascript"></script> <link rel="stylesheet" href="jquery-ui-multiselect-widget-master/jquery.multiselect.css" /> 填充您选择的输入添加多选 $('#' + Field).multiselect({ checkAllText: "Your text for CheckAll", uncheckAllText: "Your text for UncheckCheckAll", noneSelectedText: "Your text for NoOptionHasBeenSelected", selectedText: "You selected # of #" //The multiselect knows to display the second # as the total }); 您可以改变风格 ui-multiselect { //The button background:#fff !important; //background-color wouldn't work here text-align: right !important; } ui-multiselect-header { //The CheckAll/ UncheckAll line) background: lightgray !important; text-align: right !important; } ui-multiselect-menu { //The options text-align: right !important; } 如果要重新填充选择，则必须刷新它： $('#' + Field).multiselect('refresh'); 获取所选值（逗号分隔）： var SelectedOptions = $('#' + Field).multiselect("getChecked").map(function () { return this.value; }).get(); 要清除所有选定的值： $('#' + Field).multiselect("uncheckAll"); 看看 erichynds 下拉多选，其中包含大量设置和调整。您可以使用 selected.i 从该链接下载所有文件选择下载链接 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <link href="style.css" rel="stylesheet" type="text/css" /> <link href="prism.css" rel="stylesheet" type="text/css" /> <link href="chosen.css" rel="stylesheet" type="text/css" /> <script src="jquery-2.1.4.min.js" type="text/javascript"></script> <script src="chosen.jquery.js" type="text/javascript"></script> <script src="prism.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $(".chzn-select").chosen(); }); </script> </head> <body> <form id="form1" runat="server"> <div> <ion-view view-title="Profile"> <ion-content class="padding"> <div> <label class="item item-input"> <div class="input-label">Enter Your Option</div> <select class="chzn-select" multiple="true" name="faculty" style="width:1000px;"> <option value="Option 2.1">Option 2.1</option> <option value="Option 2.2">Option 2.2</option> <option value="Option 2.3">Option 2.3</option> </select> </label> </div> </ion-content> </ion-view> </div> </form> </body> </html> 同一文件夹中的所有文件 <select id="mycontrolId" multiple="multiple"> <option value="1" >one</option> <option value="2" >two</option> <option value="3">three</option> <option value="4">four</option> </select> var data = "1,3,4"; var dataarray = data.split(","); $("#mycontrolId").val(dataarray); 您可以破解自己的，而不是依赖 jQuery 插件...尽管您需要在外部（在 JS 中）跟踪所选项目，因为转换会删除所选状态信息： <head> <script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4.min.js'></script> <script type='text/javascript'> $(window).load(function(){ $('#transactionType').focusin(function(){ $('#transactionType').attr('multiple', true); }); $('#transactionType').focusout(function(){ $('#transactionType').attr('multiple', false); }); });> </script> </head> <body> <select id="transactionType"> <option value="ALLOC">ALLOC</option> <option value="LOAD1">LOAD1</option> <option value="LOAD2">LOAD2</option> </select> </body> 我使用 jQuery MultiSelect 来实现带有复选框的多选下拉菜单。您可以从这里查看实施指南 - 带有复选框的多选下拉列表实现非常简单，只需要使用以下代码即可。 $('#transactionType').multiselect({ columns: 1, placeholder: 'Select Transaction Type' }); 你想做这样的事情吗http://jsfiddle.net/robert/xhHkG/ $('#transactionType').attr({ 'multiple': true, 'size' : 10 }); 将其放入 $(function() {...}) 或其他加载中编辑重新阅读您的问题，您实际上并不是在寻找多项选择...而是一个允许您选择多项的下拉框。是的，可能最好使用插件或从头开始编写它，但这不是“快速回答”类型的交易。试试这个多选功能 $(document).ready(function(){ var multipleCancelButton = new Choices('#choices-multiple-remove-button', { removeItemButton: true, maxItemCount:5, searchResultLimit:5, renderChoiceLimit:5 }); }); .mt-100{margin-top: 100px}body{background: #00B4DB;background: -webkit-linear-gradient(to right, #0083B0, #00B4DB);background: linear-gradient(to right, #0083B0, #00B4DB);color: #514B64;min-height: 100vh} <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/bbbootstrap/libraries@main/choices.min.css"> <script src="https://cdn.jsdelivr.net/gh/bbbootstrap/libraries@main/choices.min.js"></script> <div class="row d-flex justify-content-center mt-100"> <div class="col-md-4"> <select id="choices-multiple-remove-button" placeholder="Select upto 5 tags" multiple> <option value="HTML">HTML</option> <option value="Jquery">Jquery</option> <option value="CSS">CSS</option> <option value="Bootstrap 3">Bootstrap 3</option> <option value="Bootstrap 4">Bootstrap 4</option> <option value="Java">Java</option> <option value="Javascript">Javascript</option> <option value="Angular">Angular</option> <option value="Python">Python</option> <option value="Hybris">Hybris</option> <option value="SQL">SQL</option> <option value="NOSQL">NOSQL</option> <option value="NodeJS">NodeJS</option> </select> </div> </div> 下拉菜单尝试这个真实的例子 - https://bbbootstrap.com/snippets/multiselect-dropdown-list-83601849

jquery jquery-ui jquery-plugins multi-select

回答 0 投票 0

如何使 jQuery UI 可通过嵌套下拉菜单进行排序？

我已阅读与此处发布的问题类似的所有内容，但没有找到任何解决方案。我创建了一个菜单，在下拉菜单中包含子菜单条目。所有菜单条目都可分类到所有菜单级别。 ...

jquery-ui drop-down-menu jquery-ui-sortable

回答 1 投票 0

JQuery 数据表不可见

我有一个用 C# 编写的 ASP.NET Core MVC Web 应用程序。我创建了一个 Razor 视图，在该视图中，我水平显示 2 个 jQuery 数据表，在这 2 个数据表之间有 3 个按钮。 T...

jquery-ui asp.net-core-mvc c#-6.0

回答 1 投票 0

ASP.NET Core MVC jQuery UI

我对 C# 中的 ASP.NET Core MVC 非常陌生。我在水平排列的窗口中有 2 个数据网格或数据表。我在两个网格之间排列了一些按钮。如何创建如下所示的 UI？拜...