JQuery 滚动/分页选项卡
我正在尝试为一个网站创建一个简单的选项卡栏,该网站能够滚动不适合页面的选项卡。这非常简单,不需要任何 ajax 或动态加载的内容...它只是显示所有选项卡,当您单击一个选项卡时,它会将您带到另一个页面。
我已经在互联网上搜索过,但似乎找不到除以下内容之外的任何内容: http://www.extjs.com/deploy/dev/examples /tabs/tabs-adv.html 然而,这是非常繁重和复杂的...我正在寻找 jquery 中的一个轻量级示例。如果有人可以帮助我,我将不胜感激!
I am trying to create a simple tab bar for a site that has the ability to scroll for tabs that do not fit on the page. This is quite simple and does not need to have any ajax or dynamically loaded content...it simply displays all the tabs, and when you click one, it takes you to another page.
I have scoured the internet and can not seem to find anything other than:
http://www.extjs.com/deploy/dev/examples/tabs/tabs-adv.html
however this is very heavy and complicated...I am looking for a lightweight example in jquery. If anyone can help I would be grateful!
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(4)
我最终自己用一个 div 编写了它,该 div 的溢出设置为隐藏。然后使用下面的jquery来移动div中的选项卡。
我的 Html 看起来像这样:
I ended up writing it myself with a div who's overflow is set to hidden. Then used the jquery below to move the tabs in the div.
My Html looked like this:
我刚刚自己创建了一个插件:
项目主页:http://jquery.aamirafridi.com/jst
I have just created a plugin myself:
Project home: http://jquery.aamirafridi.com/jst
您可以简单地将选项卡包装在 DIV 中,并在 CSS 中设置overflow-x: auto 吗?
Could you simply wrap the tabs in a DIV with overflow-x: auto set in the CSS?
我总是使用 JQuery UI 选项卡 作为选项卡的起点。您可以在网站的下载部分自定义 JQuery UI 下载。如果您已在网站上使用 JQuery,则此方法应该比任何其他实现更轻。
开箱即用的 JQuery UI 选项卡不会为您提供所需的滚动功能。我相信这可以通过更改 CSS 来实现,但如果您更改网站的导航(即创建更多级别,使用更短的标题),则可能会更容易。
希望这有帮助
I always use JQuery UI tabs as a starting point for tabs. You can customize the JQuery UI download in the download section of the website. This method should be lighter than any other implementation, if you are already using JQuery on your website.
Out of the box, the JQuery UI tabs will not give you the scrolling you desire. This I believe could be achieved by altering the CSS, but more than likely will be easier if you alter the navigation of your site (i.e. create more levels, use shorter titles).
Hope this helps