jQuery Easyui Tabs扩展根据自定义属性打开页签
当前位置： >
> jQuery Easyui Tabs扩展根据自定义属性打开页签jQuery Easyui Tabs扩展根据自定义属性打开页签更新：&&&&编辑：loudei&&&&来源：原创投稿&&&&人气：加载中...&&&&字号：|标签：&&&&&&&&&&&&
easyui是一个轻量级的后台管理系统框架，各种组件均有，简单方便，现在已经有版的License了。
&script type="text/javascript" &
* @author {kexb} easyui-tabid切换页面
$.extend($.fn.tabs.methods, {
getTabById: function (jq, id) {
var tabs = $.data(jq[0], 'tabs').
for (var i = 0; i & tabs. i++) {
var tab = tabs[i];
if (tab.panel('options').id == id) {
selectById: function (jq, id) {
var tabs = $.data(jq[0], 'tabs').
for (var i = 0; i & tabs. i++) {
tab = tabs[i];
if (tab.panel('options').id == id) {
if (tab != undefined) {
var curTabIndex = $("#tabs").tabs("getTabIndex", tab);
$('#tabs').tabs('select', curTabIndex);
existsById: function (jq, id) {
return jq.tabs('getTabById', id) !=
2.点击事件open法子
function Open(text, url, id) {
var tabId = ReplaceAll(url, '/','');
var h = ComputGridHeight();
if (url == "null" || url == "" || url == "") {
if ($("#tabs").tabs("existsById", tabId)) {
$("#tabs").tabs("selectById", tabId);
if (url.indexOf("?") & 0) {
url += "?_menuId=" +
url += "&_menuId=" +
$('#tabs').tabs('add', {
title: text,
closable: true,
content: createTabContent(url, h),
以上所述是给大家介绍的
Tabs扩展页签 ，，愿望对大家有所,如果大家有任何疑问请给我留言，会及时回复大家的。在此也非常感谢大家的支持！
评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
分类选择您可能在找这些帮设计师节省1,085,543,232小时JavaScript（57）
使用easyui-tabs时布局的时候发觉第一个标签的标题总是被遮挡，但是点击一下第二个标签再点击一个标签又恢复想要的效果了。例如：
那么解决方法就可以是，加载完成后让它先选中第二个标签，再选择第一个标签，但这会出现一个问题，就是页面加载完成后会出现闪跳现象，即从第二标签页闪跳回第一标签页。找了很久，找到了另一个解决方法。
easyui-tabs默认情况下标签是可以无限多的，所以他在.tabs样式中设置了width:50000正因为这个宽度太长了，导致很容易超出父类容器的边界，而出现未知错误，那么我们屏蔽掉该属性。
easyui.css
但是这也导致了另一个问题，那就是标签不可能再是无限多了，其tabs的长度就是父类的长度。鱼与熊掌不可兼得，大家自我取舍吧。
最后，我认为真正影响效果展示的可能是如下代码：
ul, menu, dir {
list-style-type:
-webkit-margin-before: 1
-webkit-margin-after: 1
-webkit-margin-start: 0
-webkit-margin-end: 0
-webkit-padding-start: 40
我是在谷歌浏览器下进行的测试，所以很可能是谷歌的内核webkit的padding-start:40px导致的。
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：404852次
积分：6593
积分：6593
排名：第3567名
原创：275篇
转载：20篇
评论：110条
(1)(2)(1)(15)(1)(5)(1)(5)(4)(4)(6)(4)(4)(7)(7)(4)(4)(6)(4)(6)(10)(11)(7)(19)(10)(21)(13)(11)(17)(14)(6)(11)(1)(7)(18)(28)温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
& &div id="tabs" class="easyui-tabs" fit="true" border="false"&&/div&父页面：&//创建tab标签& & & & & & function CreateTab(title, url) {& & & & & & & & if ($('#tabs').tabs('exists', title)) {& & & & & & & & & & $('#tabs').tabs('select', title);& & & & & & & & } else {& & & & & & & & & & var content = '&iframe scrolling="auto" frameborder="0" &src="' + url + '" style="width:100%;height:100%;"&&/iframe&';& & & & & & & & & & $('#tabs').tabs('add', {& & & & & & & & & & & & title: title,& & & & & & & & & & & & content: content,& & & & & & & & & & & & closable: true& & & & & & & & & & });& & & & & & & & }& & & & & & }方法二：子页面：&//创建tab标签& & & & function CreateTab(title, url) { & & & & &&& & & & & & if (parent.$('#tabs').tabs('exists', title)) {& & & & & & & & parent.$('#tabs').tabs('select', title);& & & & & & } else {& & & & & & & & var content = '&iframe scrolling="auto" frameborder="0" &src="' + url + '" style="width:100%;height:100%;"&&/iframe&'; & & & & & && & & & & & & &parent.$('#tabs').tabs('add', {& & & & & & & & & & title: title,& & & & & & & & & & content: content,& & & & & & & & & & closable: true& & & & & & & & });& & & & & & }& & & & }
阅读(653)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
在LOFTER的更多文章
loftPermalink:'',
id:'fks_',
blogTitle:'easyui 创建tab标签',
blogAbstract:'方法一：父页面html：& &div id=\"tabs\" class=\"easyui-tabs\" fit=\"true\" border=\"false\"&&/div&父页面：&//创建tab标签& & & & & & function CreateTab(title, url) {& & & & & & & & if ($(\'#tabs\').tabs(\'exists\', title)) {',
blogTag:'easyui,tab标签,创建',
blogUrl:'blog/static/',
isPublished:1,
istop:false,
modifyTime:0,
publishTime:5,
permalink:'blog/static/',
commentCount:0,
mainCommentCount:0,
recommendCount:0,
bsrk:-100,
publisherId:0,
recomBlogHome:false,
currentRecomBlog:false,
attachmentsFileIds:[],
groupInfo:{},
friendstatus:'none',
followstatus:'unFollow',
pubSucc:'',
visitorProvince:'',
visitorCity:'',
visitorNewUser:false,
postAddInfo:{},
mset:'000',
remindgoodnightblog:false,
isBlackVisitor:false,
isShowYodaoAd:false,
hostIntro:'',
hmcon:'0',
selfRecomBlogCount:'0',
lofter_single:''
{list a as x}
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}