标签: jquery-ui

如何使用jQuery UI Resizable水平或垂直调整大小?

我发现的唯一解决方案是使用当前值设置最大和最小高度或宽度.

例:

foo.resizable({ 
  maxHeight: foo.height(), 
  minHeight: foo.height() 
});
Run Code Online (Sandbox Code Playgroud)

但这真的很难看,特别是如果我必须以编程方式更改元素的高度.

jquery jquery-ui jquery-ui-resizable

80
推荐指数
4
解决办法
7万
查看次数

jQuery UI对话框 - 关闭后无法打开

我有一个问题jquery-ui dialog box.

问题是,当我关闭对话框然后单击触发它的链接时,除非我刷新页面,否则它不会再次弹出.

如何在不刷新实际页面的情况下调用对话框.

以下是我的代码:

$(document).ready(function() {
    $('#showTerms').click(function()
    {
        $('#terms').css('display','inline');
        $('#terms').dialog({
            resizable: false,
            modal: true,
            width: 400,
            height: 450,
            overlay: { backgroundColor: "#000", opacity: 0.5 },
            buttons:{ "Close": function() { $(this).dialog("close"); } },
            close: function(ev, ui) { $(this).remove(); },
    }); 
});
Run Code Online (Sandbox Code Playgroud)

谢谢

javascript jquery jquery-ui modal-dialog jquery-ui-dialog

79
推荐指数
4
解决办法
22万
查看次数

jQuery scrollTop无法在Chrome中运行但在Firefox中工作

我已经scrollTop在jQuery中使用了一个函数来导航到顶部,但奇怪的是"平滑的动画滚动"在我做了一些更改后停止在Safari和Chrome中工作(滚动没有平滑的动画).

但它仍然在Firefox中顺利运行.可能有什么不对?

这是我使用的jQuery函数,

jQuery的:

$('a#gotop').click(function() {
    $("html").animate({ scrollTop: 0 }, "slow");
    //alert('Animation complete.');
    //return false;
});
Run Code Online (Sandbox Code Playgroud)

HTML

<a id="gotop" href="#">Go Top </a>
Run Code Online (Sandbox Code Playgroud)

CSS

#gotop {
      cursor: pointer;
      position: relative;
      float: right;
      right: 20px;
      /*top:0px;*/
}
Run Code Online (Sandbox Code Playgroud)

jquery jquery-ui jquery-selectors

78
推荐指数
4
解决办法
9万
查看次数

在本地托管jQuery的好处与陷阱

我们目前正在从谷歌CDN中提取jQuery和jQueryUI(以及jQueryUI CSS)库.我喜欢这个,因为我可以调用google.load("jquery", "1");
,最新的jQuery 1.xx将被使用.

现在我因为安全性而在本地拉出库.

我很乐意将它们拉到当地,但我想知道还有哪些其他好处和缺陷值得注意?

javascript jquery jquery-ui cdn

78
推荐指数
6
解决办法
4万
查看次数

jQuery draggable在页面滚动后在错误的位置显示帮助器

我正在使用jQuery draggabledroppable来开发我正在开发的工作计划系统.用户将作业拖到不同的日期或用户,然后使用ajax调用更新数据.

一切正常,除非我向下滚动主页面(作业出现在超出浏览器窗口底部的大型周规划器中).如果我尝试在这里拖动一个可拖动的元素,那么元素会出现在我的鼠标光标上方与我向下滚动的像素数量相同.悬停状态仍然可以正常工作并且功能正在爆炸,但看起来并不正确.

我正在使用jQuery 1.6.0和jQuery UI 1.8.12.

我确定我需要添加一个偏移功能,但我不知道应用它的位置,或者是否有更好的方法.这是我的.draggable()初始化代码:

$('.job').draggable({
  zIndex: 20,
  revert: 'invalid',
  helper: 'original',
  distance: 30,
  refreshPositions: true,
});
Run Code Online (Sandbox Code Playgroud)

知道我能做些什么来解决这个问题吗?

jquery jquery-ui draggable jquery-ui-draggable

78
推荐指数
7
解决办法
6万
查看次数

jquery-ui datepicker更改z-index

这个问题很简单,虽然我很难搞清楚如何解决它.

我正在使用jQuery-ui datepicker以及定制的"ios样式开/关切换".此切换使用一些绝对定位的元素,这些元素当前显示在我的日期选择器之上.

看看下面7月6日的丑陋圈子......

在此输入图像描述

执行此操作的脏方法(至少是imo)是在我的一个样式表中编写样式,但是当选择器启动以完成此操作时,我更倾向于使用一些javascript.

我已经试过了

$('.date_field').datepicker(); 
$('.date_field').datepicker("widget").css({"z-index":100});
Run Code Online (Sandbox Code Playgroud)

$('.date_field').datepicker({
    beforeShow: function(input, inst) { 
        inst.dpDiv.css({"z-index":100});
    }
});
Run Code Online (Sandbox Code Playgroud)

但似乎每次启动datepicker时都会覆盖z-index.

任何帮助表示赞赏!

javascript css jquery jquery-ui datepicker

78
推荐指数
5
解决办法
9万
查看次数

将CSS应用于jQuery对话框按钮

所以我目前有一个带有两个按钮的jQuery对话框:Save and Close.我使用下面的代码创建对话框:

$dialogDiv.dialog({
    autoOpen: false,
    modal: true,
    width: 600,
    resizable: false,
    buttons: {
        Cancel: function() {
                        // Cancel code here
        },
        'Save': function() {
                        // Save code here
        }
    },
    close: function() {
        // Close code here (incidentally, same as Cancel code)
    }
});
Run Code Online (Sandbox Code Playgroud)

但是,使用此代码时,两个按钮的颜色相同.我希望我的取消按钮与我的保存颜色不同.有没有办法使用一些内置的jQuery选项来做到这一点?我没有从文档中获得太多帮助.

请注意,我正在创建的"取消"按钮是预定义类型,但"保存"我自己定义.不确定这是否会对问题产生任何影响.

任何帮助,将不胜感激.谢谢.

更新:共识是这里有两条道路:

  1. 使用像firebug这样的Firefox插件检查HTML ,并记下jQuery应用于按钮的CSS类,并尝试覆盖它们.注意:在我的HTML中,两个按钮都使用了完全相同的CSS类,没有唯一的ID,因此该选项已经用完了.
  2. 在打开的对话框上使用jQuery选择器来捕获我想要的按钮,然后添加一个CSS类.

我使用了第二个选项,并使用了jQuery find()方法,因为我认为这比使用更合适:first或:first-child b/c我想要更改的按钮不一定是列出的第一个按钮标记.使用find,我只需指定按钮的名称,并以这种方式添加CSS.我最终得到的代码如下:

$dialogDiv.dialog({
    autoOpen: false,
    modal: true,
    width: 600,
    resizable: false,
    buttons: {
        Cancel: function() {
                        // Cancel code here
        },
        'Save': function() …
Run Code Online (Sandbox Code Playgroud)

css jquery dialog jquery-ui button

77
推荐指数
3
解决办法
11万
查看次数

Javascript Array Concat不能正常工作.为什么?

所以我创建了这个jqueryui小部件.它创建了一个div,我可以将错误输入.小部件代码如下所示:

$.widget('ui.miniErrorLog', {
   logStart: "<ul>",   // these next 4 elements are actually a bunch more complicated.
   logEnd:   "</ul>",
   errStart: "<li>",
   errEnd:   "</li>",
   content:  "",
   refs:     [],

   _create: function() { $(this.element).addClass( "ui-state-error" ).hide(); },

   clear: function() { 
      this.content = ""; 
      for ( var i in this.refs )
         $( this.refs[i] ).removeClass( "ui-state-error" );
      this.refs = [];
      $(this.element).empty().hide(); 
   }, 

   addError: function( msg, ref ) {
      this.content += this.errStart + msg + this.errEnd; 
      if ( ref ) {
         if ( ref instanceof Array ) …
Run Code Online (Sandbox Code Playgroud)

javascript jquery jquery-ui

77
推荐指数
4
解决办法
6万
查看次数

如何在JQuery DataTable中默认显示所有行

有没有人知道如何在jQuery数据表中默认显示所有行?

我试过这段代码,但默认只显示10行.

   $("#adminProducts").dataTable({
        "aLengthMenu": [100]
    });
Run Code Online (Sandbox Code Playgroud)

jquery jquery-ui jquery-plugins datatables

76
推荐指数
3
解决办法
13万
查看次数

如何在JQuery中为getJSON设置缓存false?

我使用getJSON从服务器端获取结果,但面临浏览器缓存问题.我希望缓存是假的.我在getJSON调用之前尝试使用它.

 $.ajaxSetup({
                cache: false
            })
Run Code Online (Sandbox Code Playgroud)

但我没有得到预期的结果.它仍然显示旧的结果.任何帮助将不胜感激.

我还确定了一些其他解决方案,例如使用.ajax,但我真的不想使用它.

jquery jquery-ui getjson browser-cache

76
推荐指数
3
解决办法
6万
查看次数