javascript - jquery.nicescroll 的 tabindex 值错误

标签 javascript jquery css nicescroll

我关注了jQuery.NiceScroll编辑滚动条。通常,当我调用$(selector).niceScroll()时,它将附加 tabindex以及一些 css 属性到选择器中。像这样:

$('p.lead').niceScroll({autohidemode: false});

p

然后,2个id以ascrail开头的div将被附加到<body> ,也是。

_p

如您所见:if tabindex5000 , 2 个新 ID 将为 ascrail2000ascrail2000-hr .

这意味着我们可以访问 <div>通过:

var id = 2000 + (+$('p.lead').prop('tabindex') - 5000);
var vertical = $('div#ascrail' + id);
var horizontal = $('div#ascrail' + id + '-hr');

//do stuff...

这很好,直到我使用 jQuery BlockUI将一些 div 显示为弹出窗口:

<div class="new-topic">
  <!-- another divs -->

  <div id="tab-content5" class="tab-content">
    <div class="n-images">          
    </div>
  </div>

  <!-- another divs -->
</div>

脚本:

    $.blockUI({
        message: $('div.new-topic'),
        css: {
            top: '50%',
            left: '50%',
            transform: 'translate(-50%, -50%)',
            border: 'none',
            cursor: 'default',
            borderRadius: '5px',
            width: ''
        }
    });
    $('div.n-images').niceScroll({autohidemode: false});

然后,我查看了页面源,tabindex被覆盖:

i

但这不适合div[id^="ascrail"] :

_i

现在,如何更改 css 属性 z-indexdiv#ascrail2001div#ascrail2001-hr

这种方式无法正常工作:

//this will return 2000 instead of 2001
var id = 2000 + (+$('div.n-images').prop('tabindex') - 5000);

//if I can get the id correctly, every thing will became easy:
//change z-index: auto -> z-index: 10001 
//because if z-index is smaller than 10000, it won't appear

$('div#ascrail' + id).css('z-index', 10001);
$('div#ascrail' + id + '-hr').css('z-index', 10001);

我的问题是:$(selector).niceScroll()没有检查现有的 tabindex 值并更新新的 tabindex 值。 (现有值:5000,新值:5001)。

所以,我的问题是:在这种情况下如何将新值更新为 tabindex?

p/s:我正在使用 mvc 5。<p class="lead">是另一个与 <div class="n-images"> 不同的部分 View .

最佳答案

我解决了这个问题。那是因为我添加了

<script src"~/Scripts/jquery.nicescroll.js"></script>

在 2 个部分 View 中两次。

我尝试删除它们,打开 App_Start 文件夹中的 BundleConfig.cs 并添加此行:

bundles.Add(new ScriptBundle("~/bundles/nicescroll").Include(
                        "~/Scripts/jquery.nicescroll.js"));

它应该可以工作。感谢您的阅读!

关于javascript - jquery.nicescroll 的 tabindex 值错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34198668/

相关文章:

javascript - 提升行为在 chrome 48 和 49 之间发生了变化?

jquery - 按钮上的 CSS 过渡

javascript - 单独的 Controller AngularJS

javascript - DataTables 无法在 Laravel Blade 模板中工作

javascript - 将变量传递给自启动函数

html - 背景图片在浏览器中不可见

html - 从调色板设置背景后,如何使用 INLINE HTML 在深色背景上自动使文本变白

javascript - 使用 css悬停时突出显示表格行

javascript - 当代码更改时,webpack 热加载器会重新编译,但不会反射(reflect)在输出中(app.js)

javascript - 检查用户是否登录 Facebook