JQuery UI菜单滚动 [英] JQuery UI Menu Scroll

查看：53
本文介绍了JQuery UI菜单滚动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用原生jQuery UI菜单并试图让它滚动。我发现它实际上有这种行为（有点）。我不确定这是否是有意的。



JSFiddle Demo 

  //////////////////// /////////////// HTML ////////////////////////////////// ////////// 
 
< div id =container> 
< ul id =menu> 
< div id =scrollup> 
< span class =ui-icon ui-icon-triangle-1-n>< / span> 
< / div> 
< li>< a href =＃>第1项< / a>< / li> 
< li>< a href =＃>第2项< / a>< / li> 
< li>< a href =＃>第3项< / a>< / li> 
< li>< a href =＃>第4项< / a>< / li> 
< li>< a href =＃>第5项< / a>< / li> 
< li>< a href =＃>第6项< / a>< / li> 
< li>< a href =＃>第7项< / a>< / li> 
< li>< a href =＃>第8项< / a>< / li> 
< li>< a href =＃>第9项< / a>< / li> 
< li>< a href =＃>第10项< / a>< / li> 
< li>< a href =＃>第11项< / a>< / li> 
< li>< a href =＃>第12项< / a>< / li> 
< li>< a href =＃>第13项< / a>< / li> 
< li>< a href =＃>第14项< / a>< / li> 
< li>< a href =＃>第15项< / a>< / li> 
< li>< a href =＃>第16项< / a>< / li> 
< li>< a href =＃>第17项< / a>< / li> 
< li>< a href =＃>第18项< / a>< / li> 
< li>< a href =＃>第19项< / a>< / li> 
< li>< a href =＃>第20项< / a>< / li> 
< li>< a href =＃>第21项< / a>< / li> 
< li>< a href =＃>第22项< / a>< / li> 
< div id =scrolldown> 
< span class =ui-icon ui-icon-triangle-1-s>< / span> 
< / div> 
< / ul> 
< / div> 
 
 /////////////////////////////////// CSS ////// //////////////////////// $ $ $ $ $ $ $ 
 
 #container {
 height：350px; 
背景：#ccc; 
} 
 
 #menu {
最大高度：75％; 
 width：100px; 
 padding：25px 0; 
 overflow：hidden; 
 margin：20px; 
} 
 
 #menu #scrollup，
 #menu #scrolldown {
 position：absolute; 
 width：16px; 
 height：16px; 
 top：15px; 
 left：113px; 
} 
 
 #menu #scrolldown {
 top：311px; 
} 
 
 
 ///////////////////////////////// // JQUERY ////////////////////////////////////////// 
 
 $（'＃menu'）。menu（）。removeClass（'ui-menu-icons'）;

这是我能想到的最好的，我对此并不满意。我不得不增加顶部和底部填充以允许更大的可卷动区域。这本身并不可怕，但并不理想。我最关心的是向我的用户显示这个列表是可以滚动的。我使用jQuery UI图标在某些显示箭头中进行了黑客入侵，但它并不完全正确。通过将它们放在右边，它们模仿滚动条，但不能点击它们。

当您将它们悬停时，列表仍然可以滚动。通过使用跨度，我可以实现定位，但是文本在下面可见并且看起来很糟糕。通过使用div，它看起来更干净，但整个区域不能滚动。



我正在寻找一种更好，更清洁，更直观的方式实现这一点。

解决方案

这里是滚动的一面，显然没有js 

  #menu {
 overflow-y：scroll; 
 overflow-x：hidden; 
 height：200px; 
 width：200px; 
} 
 
< ul id =menu> 
< li>< a href =＃>第1项< / a>< / li> 
< li>< a href =＃>第2项< / a>< / li> 
< li>< a href =＃>第3项< / a>< / li> 
< li>< a href =＃>第4项< / a>< / li> 
< li>< a href =＃>第5项< / a>< / li> 
< li>< a href =＃>第6项< / a>< / li> 
< li>< a href =＃>第7项< / a>< / li> 
< li>< a href =＃>第8项< / a>< / li> 
< li>< a href =＃>第9项< / a>< / li> 
< li>< a href =＃>第10项< / a>< / li> 
< li>< a href =＃>第11项< / a>< / li> 
< li>< a href =＃>第12项< / a>< / li> 
< li>< a href =＃>第13项< / a>< / li> 
< li>< a href =＃>第14项< / a>< / li> 
< li>< a href =＃>第15项< / a>< / li> 
< li>< a href =＃>第16项< / a>< / li> 
< li>< a href =＃>第17项< / a>< / li> 
< li>< a href =＃>第18项< / a>< / li> 
< li>< a href =＃>第19项< / a>< / li> 
< li>< a href =＃>第20项< / a>< / li> 
< li>< a href =＃>第21项< / a>< / li> 
< li>< a href =＃>第22项< / a>< / li> 
< / ul>


I'm using the native jquery ui menu and trying to get it to scroll. I found that it actually has this behavior built in (sort of). I'm not sure if it's intentional or not.

JSFiddle Demo

/////////////////////////////////// HTML ////////////////////////////////////////////

<div id="container">
    <ul id="menu">
        <div id="scrollup">
        <span class="ui-icon ui-icon-triangle-1-n"></span>
        </div>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
        <li><a href="#">Item 4</a></li>
        <li><a href="#">Item 5</a></li>
        <li><a href="#">Item 6</a></li>
        <li><a href="#">Item 7</a></li>
        <li><a href="#">Item 8</a></li>
        <li><a href="#">Item 9</a></li>
        <li><a href="#">Item 10</a></li>
        <li><a href="#">Item 11</a></li>
        <li><a href="#">Item 12</a></li>
        <li><a href="#">Item 13</a></li>
        <li><a href="#">Item 14</a></li>
        <li><a href="#">Item 15</a></li>
        <li><a href="#">Item 16</a></li>
        <li><a href="#">Item 17</a></li>
        <li><a href="#">Item 18</a></li>
        <li><a href="#">Item 19</a></li>
        <li><a href="#">Item 20</a></li>
        <li><a href="#">Item 21</a></li>
        <li><a href="#">Item 22</a></li>
        <div id="scrolldown">
        <span class="ui-icon ui-icon-triangle-1-s"></span>
        </div>
    </ul>
</div>

/////////////////////////////////// CSS ////////////////////////////////////////////

#container {
    height: 350px;
    background: #ccc;
}

#menu {
    max-height: 75%;
    width: 100px;
    padding: 25px 0;
    overflow: hidden;
    margin: 20px;
}

#menu #scrollup,
#menu #scrolldown {
    position: absolute;
    width: 16px;
    height: 16px;
    top: 15px;
    left: 113px;
}

#menu #scrolldown {
    top: 311px;
}


/////////////////////////////////// JQUERY //////////////////////////////////////////

$('#menu').menu().removeClass('ui-menu-icons');

This is the best I can come up, and I'm not really happy with it. I've had to increase the top and bottom padding to allow for a larger scroll-able area. This itself isn't terrible but not ideal. My biggest concern is showing my users that this list is scroll-able. I've hacked in some display arrows using the jquery ui icons, but it doesn't quite feel right. By putting them on the right they mimic a scrollbar, but you can't click on them.

Ideally what I'd like is for the arrows to be centered, but when you hover them the list is still scroll-able. By using a span I can achieve the positioning but then the text is visible underneath and just looks bad. By using a div it looks cleaner, but then the entire area isn't scroll-able.

I'm looking for a better, cleaner, and more intuitive way to implement this.

解决方案

Here is scrolling on the side, no js here though obviously 

 #menu {
          overflow-y: scroll;
          overflow-x: hidden;
          height: 200px;
          width: 200px;
        } 

  <ul id="menu">
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
        <li><a href="#">Item 4</a></li>
        <li><a href="#">Item 5</a></li>
        <li><a href="#">Item 6</a></li>
        <li><a href="#">Item 7</a></li>
        <li><a href="#">Item 8</a></li>
        <li><a href="#">Item 9</a></li>
        <li><a href="#">Item 10</a></li>
        <li><a href="#">Item 11</a></li>
        <li><a href="#">Item 12</a></li>
        <li><a href="#">Item 13</a></li>
        <li><a href="#">Item 14</a></li>
        <li><a href="#">Item 15</a></li>
        <li><a href="#">Item 16</a></li>
        <li><a href="#">Item 17</a></li>
        <li><a href="#">Item 18</a></li>
        <li><a href="#">Item 19</a></li>
        <li><a href="#">Item 20</a></li>
        <li><a href="#">Item 21</a></li>
        <li><a href="#">Item 22</a></li>
    </ul>

这篇关于JQuery UI菜单滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆