wdScrollTab move to static

This commit is contained in:
thinkgem
2024-07-21 20:26:48 +08:00
parent 474fee2943
commit 9317d0e6bb
10 changed files with 1514 additions and 0 deletions

View File

@@ -0,0 +1,190 @@
.tabpanel {
border: solid 1px #8DB2E3;
width: 100%;
height: 100%;
}
.tabpanel_tab_content {
width: 100%;
height: 38px;
line-height: 21px;
background-color: #F9F9F9;
border-bottom: 1px solid #e5e5e5;
overflow: hidden;
white-space: nowrap;
position: relative;
}
.tabpanel_tab_content .tabpanel_move_content {
width: 0px;
min-height: 35px;
overflow: hidden;
}
.tabpanel_move_content_scroll {
margin-left: 18px;
margin-right: 18px;
}
.tabpanel_mover {
width: 5000px;
margin: 0;
padding: 0;
position: relative;
}
.tabpanel_mover li {
width: 105px;
/*line-height: 20px;*/
padding: 9px 16px 9px 5px;
background-color: #f4f6f8;
float: left;
position: relative;
list-style-type: none;
cursor: pointer;
border-right: 1px solid #ddd;
overflow: hidden;
}
.tabpanel_mover li .refresher {
display: none;
}
.tabpanel_mover li .closer {
background: transparent url(../image/tab-close.png) no-repeat;
position: absolute;
right: 5px;
top: 14px;
width: 11px;
height: 11px;
cursor: pointer;
}
.tabpanel_mover li .closer:hover {
background: transparent url(../image/tab-close.gif) no-repeat;
}
.tabpanel_mover li .title {
/* font-size: 13px; */
padding-left: 5px;
overflow: hidden;
*height: 20px;
*line-height: 20px;
*margin-top: 2px;
white-space: nowrap;
text-overflow: ellipsis;
}
.tabpanel_mover li .title i{
font-size: 18px;
vertical-align: middle;
margin-top: -3px;
opacity: 0.8
}
.tabpanel_mover li div {
color: #23508E;
}
.tabpanel_mover li .icon_title {
font-size: 12px;
color: #23508E;
padding-left: 25px;
background-repeat: no-repeat;
background-position: 5px 4px;
overflow: hidden;
*height: 20px;
*line-height: 20px;
*margin-top: 2px;
*background-position: 5px 1px;
}
.tabpanel_mover li.active {
background-color: #eaedf1;
}
.tabpanel_tab_content .tabpanel_left_scroll {
background: transparent url(../image/scroll-left.gif) no-repeat 0 0;
position: absolute;
width: 18px;
height: 24px;
left: 0px;
top: 8px;
cursor: pointer;
z-index: 10;
}
.tabpanel_tab_content .tabpanel_right_scroll {
background: transparent url(../image/scroll-right.gif) no-repeat 0 0;
position: absolute;
width: 18px;
height: 24px;
right: 0px;
top: 8px;
cursor: pointer;
z-index: 10;
}
.tabpanel_tab_content .tabpanel_scroll_over {
background-position: -18px 1px;
}
.tabpanel_tab_content .tabpanel_left_scroll_disabled {
background-position: 0 0;
opacity: .5;
-moz-opacity: .5;
filter: alpha(opacity = 50);
cursor: default;
}
.tabpanel_right_scroll_disabled {
background-position: -36px 0;
opacity: .5;
-moz-opacity: .5;
filter: alpha(opacity = 50);
cursor: default;
}
.display_none {
display: none;
}
.disabled {
color: gray;
}
.tabpanel_tab_content .tabpanel_tab_spacer {
height: 2px;
font-size: 1px;
line-height: 1px;
margin-top: -1px;
}
.tabpanel_content {
background-color: #FFF;
overflow: hidden;
position: relative;
/* transition:all 50ms; */
}
.tabpanel_content .html_content {
width: 100%;
height: 100%;
/* background-color:#FFF; */
position: absolute;
z-index: 0;
left: 0;
top: 0;
}
.div_RightMenu{position:absolute;list-style:none;width:130px;z-index:999999;display:none;}
.div_RightMenu div{background:#eee;position:relative;font-size:13px;}
.div_RightMenu ul{position:relative;background:#fff;border:1px solid #ddd;left:-2px;top:-2px;margin:0;padding:1px 0;border-radius:3px;}
.div_RightMenu ul li{list-style:none;padding:5px 12px;cursor:pointer;text-align:left;}
.div_RightMenu ul li.RM_mouseover{background-color:#e1e3e9;}
.div_RightMenu ul li i{width:18px;color:#666;}
.skin-dark .div_RightMenu div,
.skin-dark .div_RightMenu ul {background-color:#1a1a1a;border-color: #414141;color:#c6c6c6;}
.skin-dark .div_RightMenu ul li.RM_mouseover{background-color:#3e3e3e;border-color:#3e3e3e;color:#eee;}

View File

@@ -0,0 +1,59 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>sample</title>
<style type="text/css">
html, body {
width : 100%;
height : 100%;
padding : 0;
margin : 10px;
overflow : hidden;
font-family:"Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
}
.jcTab { width:100%; height:100%;}
</style>
<link href="../css/TabPanel.css" rel="stylesheet" type="text/css"/>
<script src="../../jquery/jquery-3.7.0.min.js"></script>
<script src="../../jquery/jquery-migrate-3.4.0.min.js"></script>
<script src="../js/TabPanel.js"></script>
<script>
var tabpanel;
var jcTabs = [
'<iframe src="http://jeesite.com" width="100%" height="100%" frameborder="0"></iframe>',
'1', '2', '3'
];
$(document).ready(function(){
tabpanel = new TabPanel({
renderTo:'tab',
width: 800,
height: 400,
//border:'none',
active : 0,
//maxLength : 10,
items : [
{id:'toolbarPlugin1',title:'首页',html:jcTabs[0],closable: false},
{id:'toolbarPlugin2',title:'不能关闭',html:jcTabs[1],closable: false},
{id:'toolbarPlugin3',title:'能关闭',html:jcTabs[2],closable: true}
]
});
});
function addTab(){
tabpanel.addTab({
title: '新页签',
html: new Date(),
closable: true,
disabled: false
});
}
</script>
</head>
<body>
<div>
<div id="tab"></div>
<button onclick="addTab()">新增页签</button>
</div>
</body>
</html>

View File

@@ -0,0 +1,219 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>wdScrollTab docs</title>
<style>
#wrapper {
width: 1000px;
margin: 0 auto;
line-height: 1.6;
}
#sidebar {
float: left;
width: 300px;
}
#left-col {
width: 680px;
float: right;
}
</style>
</head>
<body>
<div id="page" class="fix">
<div id="wrapper" class="fix">
<!-- /nav -->
<div id="container" class="fix">
<div id="left-col">
<div id="content">
<div class="content">
<a name="config"></a><h2>Config</h2>
<table class="items-list"><tr><td><a href="index.html#config_active">active</a></td><td><a href="index.html#config_autoresizable">autoResizable</a></td><td><a href="index.html#config_border">border</a></td><td><a href="index.html#config_height">height</a></td><tr><td><a href="index.html#config_heightresizable">heightResizable</a></td><td><a href="index.html#config_items">items</a></td><td><a href="index.html#config_renderto">renderTo</a></td><td><a href="index.html#config_width">width</a></td><tr><td><a href="index.html#config_widthresizable">widthResizable</a></td></table> <div class="list">
<a name="config_active"></a>
<h3>active</h3>
<p class="padded"><span class="datatype">Number</span> &nbsp; Active tab index. Base on 0.</p>
<a name="config_autoresizable"></a>
<h3>autoResizable</h3>
<p class="padded"><span class="datatype">Boolean</span> &nbsp; Whether panel resizes itself according to content.</p>
<a name="config_border"></a>
<h3>border</h3>
<p class="padded"><span class="datatype">Boolean</span> &nbsp; To show border or not.</p>
<a name="config_height"></a>
<h3>height</h3>
<p class="padded"><span class="datatype">String</span> &nbsp; Initialization height.</p>
<pre class="brush:js;">//heigh config
height : '200px'// or '100%'.</pre>
<a name="config_heightresizable"></a>
<h3>heightResizable</h3>
<p class="padded"><span class="datatype">Booean</span> &nbsp; Whether end user can change panel height by mouse dragging.</p>
<a name="config_items"></a>
<h3>items</h3>
<p class="padded"><span class="datatype">Array</span> &nbsp; Tab items array.</p>
<a name="config_renderto"></a>
<h3>renderTo</h3>
<p class="padded"><span class="datatype">String or JQuery object</span> &nbsp; To specify where tab panel will be placed. It could be a DOM id or jquery object.</p>
<a name="config_width"></a>
<h3>width</h3>
<p class="padded"><span class="datatype">String</span> &nbsp; Initialization width.</p>
<pre class="brush:js;">// width config, in px or percentage.
width : '200px'// or '100%'.</pre>
<a name="config_widthresizable"></a>
<h3>widthResizable</h3>
<p class="padded"><span class="datatype">Boolean</span> &nbsp; Whether end user can change panel width by mouse dragging.</p>
</div>
<a name="method"></a><h2>Method</h2>
<table class="items-list"><tr><td><a href="index.html#addtab">addTab</a></td><td><a href="index.html#getactiveindex">getActiveIndex</a></td><td><a href="index.html#getactivetab">getActiveTab</a></td><td><a href="index.html#getclosable">getClosable</a></td><tr><td><a href="index.html#getcontent">getContent</a></td><td><a href="index.html#getdisable">getDisable</a></td><td><a href="index.html#gettabposision">getTabPosision</a></td><td><a href="index.html#gettabscount">getTabsCount</a></td><tr><td><a href="index.html#gettitle">getTitle</a></td><td><a href="index.html#kill">kill</a></td><td><a href="index.html#refresh">refresh</a></td><td><a href="index.html#setclosable">setClosable</a></td><tr><td><a href="index.html#setcontent">setContent</a></td><td><a href="index.html#setdisable">setDisable</a></td><td><a href="index.html#setrenderwh">setRenderWH</a></td><td><a href="index.html#settitle">setTitle</a></td></table> <div class="list">
<a name="addtab"></a>
<h3>addTab(item)</h3>
<p class="padded"> To add a new tab.</p>
<p class="padded"><table cellspacing="3" width="90%" class="parameter-table"><tr><td width="10%"><i>Object</i></td><td width="10%"><b>item</b></td><td width="80%"> Object for item profile.</td></tr></table></p>
<pre class="brush:js;">//to add a new tab
addTab({id:"newtabid",
title:"I am new" ,
html:"some new message goes here",
closable: true,
disabled:false,
icon:"image/new.gif"
});</pre>
<a name="getactiveindex"></a>
<h3>getActiveIndex()</h3>
<p class="padded"> To get index of active tab.</p>
<p class="padded">Return <span class="datatype">Number</span> - index of active tab.</p>
<p class="padded"><table cellspacing="3" width="90%" class="parameter-table"></table></p>
<a name="getactivetab"></a>
<h3>getActiveTab()</h3>
<p class="padded"> To get active tab.</p>
<p class="padded">Return <span class="datatype">Object</span> - Profile of active tab.</p>
<p class="padded"><table cellspacing="3" width="90%" class="parameter-table"></table></p>
<a name="getclosable"></a>
<h3>getClosable(id)</h3>
<p class="padded"> To determine whether tab is closable or not.</p>
<p class="padded"><table cellspacing="3" width="90%" class="parameter-table"><tr><td width="10%"><i>String</i></td><td width="10%"><b>id</b></td><td width="80%"> item id.</td></tr></table></p>
<a name="getcontent"></a>
<h3>getContent(id)</h3>
<p class="padded"> To get tab inner html.</p>
<p class="padded"><table cellspacing="3" width="90%" class="parameter-table"><tr><td width="10%"><i>String</i></td><td width="10%"><b>id</b></td><td width="80%"> item id.</td></tr></table></p>
<a name="getdisable"></a>
<h3>getDisable(id)</h3>
<p class="padded"> To determine whether tab is disabled or not.</p>
<p class="padded"><table cellspacing="3" width="90%" class="parameter-table"><tr><td width="10%"><i>String</i></td><td width="10%"><b>id</b></td><td width="80%"> item id.</td></tr></table></p>
<a name="gettabposision"></a>
<h3>getTabPosision(id)</h3>
<p class="padded"> To get tab index.</p>
<p class="padded">Return <span class="datatype">Number</span> - index of tab.</p>
<p class="padded"><table cellspacing="3" width="90%" class="parameter-table"><tr><td width="10%"><i>String</i></td><td width="10%"><b>id</b></td><td width="80%"> item id.</td></tr></table></p>
<a name="gettabscount"></a>
<h3>getTabsCount()</h3>
<p class="padded"> To get how many tabs are in the panel.</p>
<p class="padded">Return <span class="datatype">Number</span> - Number of tabs .</p>
<p class="padded"><table cellspacing="3" width="90%" class="parameter-table"></table></p>
<a name="gettitle"></a>
<h3>getTitle(id)</h3>
<p class="padded"> To get tab title.</p>
<p class="padded"><table cellspacing="3" width="90%" class="parameter-table"><tr><td width="10%"><i>String</i></td><td width="10%"><b>id</b></td><td width="80%"> item id.</td></tr></table></p>
<a name="kill"></a>
<h3>kill(id)</h3>
<p class="padded"> To close tab.</p>
<p class="padded"><table cellspacing="3" width="90%" class="parameter-table"><tr><td width="10%"><i>String</i></td><td width="10%"><b>id</b></td><td width="80%"> item id.</td></tr></table></p>
<a name="refresh"></a>
<h3>refresh(id)</h3>
<p class="padded"> To refresh tab content.</p>
<p class="padded"><table cellspacing="3" width="90%" class="parameter-table"><tr><td width="10%"><i>String</i></td><td width="10%"><b>id</b></td><td width="80%"> item id.</td></tr></table></p>
<a name="setclosable"></a>
<h3>setClosable(id,&nbsp True)</h3>
<p class="padded"> To enable or disable end user to close tab.</p>
<p class="padded"><table cellspacing="3" width="90%" class="parameter-table"><tr><td width="10%"><i>String</i></td><td width="10%"><b>id</b></td><td width="80%"> Item id.</td></tr><tr><td width="10%"><i>Booleaan</i></td><td width="10%"><b>True</b></td><td width="80%"> for closable, false for not.</td></tr></table></p>
<a name="setcontent"></a>
<h3>setContent(id,&nbsp title)</h3>
<p class="padded"> To set tab title.</p>
<p class="padded"><table cellspacing="3" width="90%" class="parameter-table"><tr><td width="10%"><i>String</i></td><td width="10%"><b>id</b></td><td width="80%"> Item id.</td></tr><tr><td width="10%"><i>String</i></td><td width="10%"><b>title</b></td><td width="80%"> Tab inner html.</td></tr></table></p>
<a name="setdisable"></a>
<h3>setDisable(id,&nbsp True)</h3>
<p class="padded"> To enable or disable tab.</p>
<p class="padded"><table cellspacing="3" width="90%" class="parameter-table"><tr><td width="10%"><i>String</i></td><td width="10%"><b>id</b></td><td width="80%"> Item id.</td></tr><tr><td width="10%"><i>Booleaan</i></td><td width="10%"><b>True</b></td><td width="80%"> for disabled, false for enabled.</td></tr></table></p>
<a name="setrenderwh"></a>
<h3>setRenderWH(wh)</h3>
<p class="padded"> To set width and height of the panel.</p>
<p class="padded"><table cellspacing="3" width="90%" class="parameter-table"><tr><td width="10%"><i>Object</i></td><td width="10%"><b>wh</b></td><td width="80%"> width and height.</td></tr></table></p>
<pre class="brush:js;">//To set tab height and width
setRenderWH({width:'200px', height:'400px'});</pre>
<a name="settitle"></a>
<h3>setTitle(id,&nbsp title)</h3>
<p class="padded"> To set tab title.</p>
<p class="padded"><table cellspacing="3" width="90%" class="parameter-table"><tr><td width="10%"><i>String</i></td><td width="10%"><b>id</b></td><td width="80%"> Item id.</td></tr><tr><td width="10%"><i>String</i></td><td width="10%"><b>title</b></td><td width="80%"> Tab title.</td></tr></table></p>
</div>
</div>
<div class="page-nav fix">
<span class="previous-entries">
</span>
<span class="next-entries">
</span>
</div>
<!-- page nav -->
</div>
</div>
<!-- end leftcol -->
<div style="position: relative; display: block;" class="dbx-group" id="sidebar">
<div style="clear: both;">
</div>
<div style="position: relative; display: block;" id="links" class="dbx-box dbx-box-open dbxid3">
<h3 title="click-down and drag to move this box" style="position: relative; display: block;" class="dbx-handle dbx-handle-cursor">API</h3>
<div class="dbx-content">
<div class="index">
<ul>
<li class="class"><a href="index.html">TabPanel</a>
<ul>
<li class="group"><a href="index.html#config">Config</a>
<ul>
<li class="config"><a href="index.html#config_active">active</a></li>
<li class="config"><a href="index.html#config_autoresizable">autoResizable</a></li>
<li class="config"><a href="index.html#config_border">border</a></li>
<li class="config"><a href="index.html#config_height">height</a></li>
<li class="config"><a href="index.html#config_heightresizable">heightResizable</a></li>
<li class="config"><a href="index.html#config_items">items</a></li>
<li class="config"><a href="index.html#config_renderto">renderTo</a></li>
<li class="config"><a href="index.html#config_width">width</a></li>
<li class="config"><a href="index.html#config_widthresizable">widthResizable</a></li>
</ul>
</li>
<li class="group"><a href="index.html#method">Method</a>
<ul>
<li class="config"><a href="index.html#addtab">addTab</a></li>
<li class="config"><a href="index.html#getactiveindex">getActiveIndex</a></li>
<li class="config"><a href="index.html#getactivetab">getActiveTab</a></li>
<li class="config"><a href="index.html#getclosable">getClosable</a></li>
<li class="config"><a href="index.html#getcontent">getContent</a></li>
<li class="config"><a href="index.html#getdisable">getDisable</a></li>
<li class="config"><a href="index.html#gettabposision">getTabPosision</a></li>
<li class="config"><a href="index.html#gettabscount">getTabsCount</a></li>
<li class="config"><a href="index.html#gettitle">getTitle</a></li>
<li class="config"><a href="index.html#kill">kill</a></li>
<li class="config"><a href="index.html#refresh">refresh</a></li>
<li class="config"><a href="index.html#setclosable">setClosable</a></li>
<li class="config"><a href="index.html#setcontent">setContent</a></li>
<li class="config"><a href="index.html#setdisable">setDisable</a></li>
<li class="config"><a href="index.html#setrenderwh">setRenderWH</a></li>
<li class="config"><a href="index.html#settitle">setTitle</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<span style="display: block; width: 0pt; height: 0pt; overflow: hidden;" class="dbx-box dbx-dummy dbx-offdummy">
</span>
</div>
<!--/sidebar -->
</div>
<!-- /container -->
</div>
<!-- /wrapper -->
</div>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 172 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,26 @@
(function($) {
window.TabPanel = window.TabPanel || {};
if (window.lang == 'en'){
TabPanel.i18n = $.extend({}, TabPanel.i18n, {
closeTab: '<i class="fa fa-close"></i> Close',
refreshTab: '<i class="fa fa-refresh"></i> Refresh',
closeOther: '<i class="fa fa-expand"></i> Close Other',
closeLeft: '<i class="fa fa-angle-double-left"></i> Close Left',
closeRight: '<i class="fa fa-angle-double-right"></i> Close Right',
closeAll: '<i class="fa fa-minus"></i> Close All',
detachTab: '<i class="fa fa-share"></i> Detach Tab'
});
} else if (window.lang == 'ja_JP'){
TabPanel.i18n = $.extend({}, TabPanel.i18n, {
closeTab: '<i class="fa fa-close"></i> 閉じる',
refreshTab: '<i class="fa fa-refresh"></i> 更新',
closeOther: '<i class="fa fa-expand"></i> 他を閉じる',
closeLeft: '<i class="fa fa-angle-double-left"></i> 左側を閉じる',
closeRight: '<i class="fa fa-angle-double-right"></i> 右側を閉じる',
closeAll: '<i class="fa fa-minus"></i> 閉じる全体',
detachTab: '<i class="fa fa-share"></i> 新しい窓が'
});
}
})(jQuery);