使用jQuery的tab控件
以前写winform程序的时候tab控件是非常容易使用的,写网页时确费了我不少劲,主要原因是jQuery的混乱。
有很多前端控件都提供tab,像bootstrap等,这里只说jQuery的。
下载相应的jQuery的代码和css样式,注意css样式文件必不可少,要不然就出不了tab的效果。范例代码如下:
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Tabs</title>
<link rel="stylesheet" href="js/jquery/ui/themes/base/jquery.ui.tabs.css" />
<link rel="stylesheet" href="js/jquery/ui/themes/base/jquery.ui.tabs.css" />
<script src="js/jquery/jquery-1.7.1.min.js"></script>
<script src="js/jquery/ui/jquery-ui-1.8.16.custom.min.js"></script>
<script src="js/jquery.ui.core.min.js"></script>
<script src="js/jquery.ui.widget.min.js"></script>
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
</head>
<body> <div id="tabs">
<ul>
<li><a href="#tabs-1">tab-1</a></li>
<li><a href="#tabs-2">tab-2</a></li>
<li><a href="#tabs-3">tab-3</a></li>
</ul>
<div id="tabs-1">
<p>tab1</p>
</div>
<div id="tabs-2">
<p>tab2</p>
</div>
<div id="tabs-3">
<p>tab3</p>
</div>
</div> </body>
</html>
几点注意事项:
1、代码中是我用的几个文件组合,由于jQuery代码各种混乱,没准有别的组合,或者不同的版本也可以,但是需要注意的是css和js都是必要的。
2、js代码载入的次数和顺序决定程序能否正确执行。一定要先载入jQuery的代码再载入jQuery.ui的代码,我一开始不对就是因为这个问题。
3、jquery.ui.core.min.js和jquery.ui.widget.min.js是tab控件的两个依赖项,若出现问题时可考虑是否是缺少这部分js代码。
使用jQuery的tab控件的更多相关文章
- 扩展easyUI tab控件,添加加载遮罩效果
项目里要用HighChart显示图表,如果返回的数量量太多,生成图表是一个很耗时的过程.tab控件又没有显示遮罩的设置(至少本菜是没有找到), Google了一下,根据另一个兄台写的方法,拿来改造了一 ...
- 基于jQuery 常用WEB控件收集
Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件. Horizontal accordion: jQuery jQuery-Horizonta ...
- Web端的Tab控件在切换Tab时Load数据出错的处理
我们在应用Web端的Tab控件时,不管是Jquery easyui的还是Ext的Tab控件都会遇到一个问题,在Tab1正在加载数据的时候我们切换到Tab2,再切换回来,Load数据的控件就会出错,出错 ...
- 开源框架之TAB控件
我的开源框架之TAB控件 需求 (1)支持iframe.html.json格式的tab内容远程请求 (2)支持动态添加tab (3)支持远程加载完成监听,支持tab激活事件监听 (4)支持relo ...
- 一些基于jQuery开发的控件
基于jQuery开发,非常简单的水平方向折叠控件.主页:http://letmehaveblog.blogspot.com/2007/10/haccordion-simple-horizontal-a ...
- jquery 双向select控件bootstrap Dual listbox
http://www.cnblogs.com/hangwei/p/5040866.html -->jquery 双向select控件bootstrap Dual listboxhtt ...
- 基于Bootstrap的JQuery TreeView树形控件,数据支持json字符串、list集合(MVC5)<二>
上篇博客给大家介绍了基于Bootstrap的JQuery TreeView树形控件,数据支持json字符串.list集合(MVC5)<一>, 其中的两种方式都显得有些冗余.接着上篇博客继续 ...
- 模仿win10样式,基于jquery的时间控件
工作需要,写了一个基于jquery的时间控件,仿win10系统时间控件格式. 目前基本功能都有了,但时间格式只实现少数,但由于结构设计已经充分优化,填充起来非常容易. 这个控件相对网上其他的时间控件, ...
- NVelocity+Bootstrap tab控件 异常之
异常信息:Encountered "tings" at line 54, column 55.Was expecting one of: "(" ... ...
随机推荐
- 下载整个网页的方法,包括样式、图片、和js
扒别人网站,不一定是要干邪恶的事(当然也有干的).有时候我们看到别人网站的功能很酷,想要自己试着实现一下.我们就需要扒一下这个页面,一方面可以线下修改学习,另一方面不会浪费时间在设计页面上,可以更关心 ...
- apache cgi 模块安装
apache安装,请参照:http://httpd.apache.org/docs/2.4/ 安装系统: Fedora release 21 (Twenty One) (x64) 版本:Server ...
- for-else和wihle-else组合用法
当for和else组合一起使用的时候,for循环正常执行完毕,会执行else语句,否则,不会执行else语句 for i in range(10): if i == 2: break else: pr ...
- P1918 保龄球 洛谷
https://www.luogu.org/problem/show?pid=1918 题目描述 DL 算缘分算得很烦闷,所以常常到体育馆去打保龄球解闷.因为他保龄球已经打了几十年了,所以技术上不成问 ...
- [洛谷U22158]策划体验(树上斜率优化)(二分最优决策)
题目背景 OL不在,Clao又在肝少*前线,他虽然觉得这个游戏的地图很烦,但是他认为地图的难度还是太低了,习习中作为策划还不够FM,于是他自己YY了一种新的地图和新的机制: 题目描述 整个地图呈树形结 ...
- jQuery的一些总结(持续更新中...)
本文为原创,转载请注明出处: cnzt 文章:cnzt-p http://www.cnblogs.com/zt-blog/p/6693399.html 1. $.expr[':'] 过滤 ...
- MAC上反编译android apk---apktool, dex2jar, jd-jui安装使用(含手动签名)
前文 介绍了在Windows平台利用强大的APK-Multi-Tool进行反编译apk,修改smali源码后再回编译成apk的流程,最近受人之托,破解个apk,所幸的是所用到的这三个软件都是跨平台的, ...
- 【APUE】【转】守护进程编写
http://blog.csdn.net/zg_hover/article/details/2553321 守护进程(Daemon)是运行在后台的一种特殊进程.它独立于控制终端并且周期性地执行某种任务 ...
- VB6 如何连接MYSQL数据库
1 从官网下载MYSQL的ODBC,选择与自己操作系统对应的版本(前提是你安装了MYSQL) http://dev.mysql.com/downloads/connector/odbc/ 2 安装 ...
- LightOJ - 1317 Throwing Balls into the Baskets 期望
题目大意:有N个人,M个篮框.K个回合,每一个回合每一个人能够投一颗球,每一个人的命中率都是同样的P.问K回合后,投中的球的期望数是多少 解题思路:由于每一个人的投篮都是一个独立的事件.互不影响.所以 ...