jqueryEasyui实现tab页
2015-10-30 08:43
537 查看
html代码如下:
javascript代码如下:
<body> <div style="margin-bottom:10px"> <a href="#" class="easyui-linkbutton" onclick="addTab('google','http://www.google.com')">google</a> <a href="#" class="easyui-linkbutton" onclick="addTab('jquery','http://jquery.com/')">jquery</a> <a href="#" class="easyui-linkbutton" onclick="addTab('easyui','http://jeasyui.com/')">easyui</a> </div> <div id="tt" class="easyui-tabs" style="width:400px;height:250px;"> <div title="Home"> </div> </div> </body>
javascript代码如下:
<script> function addTab(title, url){ if ($('#tt').tabs('exists', title)){ $('#tt').tabs('select', title); } else { var content = '<iframe scrolling="auto" frameborder="0" src="'+url+'" style="width:100%;height:100%;"></iframe>'; $('#tt').tabs('add',{ title:title, content:content, closable:true }); } } </script>
相关文章推荐
- 夺命雷公狗jquery---54通过ajax的底层实现返回json格式的数据
- 夺命雷公狗jquery---53--jQuery里的ajax的底层实现POST请求
- 夺命雷公狗jquery---52--jQuery里的ajax的底层实现GET请求
- 夺命雷公狗jquery---51-each遍历图片
- 夺命雷公狗jquery---50获取div元素并且通过each方法遍历
- 夺命雷公狗jquery---49单选,反选,全不选实战数据库信息
- 夺命雷公狗jquery---48扩展jquery插件库
- 夺命雷公狗jquery---47---$符号控制权替换
- 夺命雷公狗jquery---46查找操作
- 夺命雷公狗jquery---45包裹操作
- 夺命雷公狗jquery---44替换
- 夺命雷公狗jquery---43滚动公告栏案例
- 夺命雷公狗jquery---42克隆
- jQuery实现的仿百度分页足迹效果代码
- jQuery实现的个性化返回底部与返回顶部特效代码
- 基于jQuery实现的美观星级评论打分组件代码
- jQuery密码强度检测插件passwordStrength用法实例分析
- jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码
- jQuery+Ajax实现无刷新分页
- 解决jquery中动态新增的元素节点无法触发事件问题的两种方法