باستخدام علامات التبويب JQuery مع تخطيط علامات التبويب الخاصة بي لها فجوة ضخمة قبل أن تبدأ
https://stackoverflow.com/questions/769891
-
12-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russianسؤال
لدي حاليا تخطيط موقع عمود 2، مع تذييل / رأس، عمود يساري عرض ثابت يحتوي على قائمة، وعمود اليد اليمنى الذي يأخذ بقية المساحة المتوفرة. يحتوي عمود Lefthand الخاص بي على قائمة "أضعاف"، ويبدو أنه عندما يكون لدي علامات تبويب في عمود اليد اليمنى، يبدأ النص ضمن علامة التبويب المحددة فقط بعد انتهاء نهاية القائمة LEFHAND.
لقد حاولت استخدام واضحة: كلاهما؛ قبل بدء تشغيل علامات التبويب التي تسبب تبويب علامات التبويب بأكملها للتحول إلى أسفل، وتبدأ بعد انتهاء قائمة LEFHAND.
هنا هو الرمز الذي أستخدمه حاليا:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta name="generator" content="HTML Tidy for FreeBSD (vers 1st August 2003), see www.w3.org">
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js">
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.6/jquery-ui.min.js">
</script>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
#container{
margin: 0;
background-color: #FFF;
}
#header{
background-color: #666;
border-bottom: 1px solid #333;
}
#header h1{
margin: 0;
padding: .5em;
}
#nav{
float: left;
width: 160px;
margin-left: 10px;
padding-top: 1em;
}
#nav p { margin-top: 0; }
#content{
padding: 0;
margin: 0 0 0 180px;
}
#footer{
clear: both;
background-color: #666;
padding: 1em;
text-align: right;
border-top: 1px solid #333;
}
#header, #footer {
font-size: large;
text-align: center;
padding: 0.3em 0;
}
.menu { margin: 10px; height: 100px; font-size: 8pt; font-family: verdana; }
.menu ul { margin: 0pt; padding: 0pt; position: relative; z-index: 500; list-style-type: none; width: 125px; }
.menu li { background-color: #cccc99; float: left; }
.menu li.sub { background-color: #cccc99; }
.menu table { position: absolute; border-collapse: collapse; top: 0pt; left: 0pt; z-index: 100; font-size: 1em; margin-top: -1px; }
.menu a, .menu a:visited { border: 1px solid #ffffff; display: block; text-decoration: none; height: 2em; line-height: 2em; width: 125px; color: #000000; padding-left: 1em; font-weight: normal; font-style: normal; font-variant: normal; text-transform: none; }
.menu b { float: right; margin-right: 5px; }
* html .menu a, * html .menu a:visited { width: 125px; }
* html .menu a:hover { color: #ccff66; background-color: #999966; position: relative; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; text-transform: none; }
.menu li:hover { position: relative; }
.menu a:active, .menu a:focus { color: #ccff66; background-color: #999966; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; text-transform: none; }
.menu li:hover > a { color: #ccff66; background-color: #999966; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; text-transform: none; }
.menu li ul { padding: 2em; visibility: hidden; position: absolute; top: -2em; left: 7em; background-color: transparent; }
.menu li:hover > ul { visibility: visible; }
.menu ul a:hover ul ul { visibility: hidden; }
.menu ul a:hover ul a:hover ul ul { visibility: hidden; }
.menu ul a:hover ul a:hover ul a:hover ul ul { visibility: hidden; }
.menu ul a:hover ul { visibility: visible; }
.menu ul a:hover ul a:hover ul { visibility: visible; }
.menu ul a:hover ul a:hover ul a:hover ul { visibility: visible; }
.menu ul a:hover ul a:hover ul a:hover ul a:hover ul { visibility: visible; }
.footer
{
text-align: center;
font-family: Arial, sans-serif;
font-size: 11px;
color: #CCCCCC;
}
.ui-wrapper { border: 1px solid #383838; }
.ui-wrapper input, .ui-wrapper textarea { border: 0; }
.ui-tabs-hide {
display: none !important;
}
.ui-tabs-nav, .ui-tabs-panel {
font-family: Arial, sans-serif;
font-size: 13px;
color: #CCCCCC;
background-color: #242424;
}
.ui-tabs-panel a {
color: #FFD100;
cursor: pointer;
outline: none;
}
.ui-tabs-nav {
list-style: none;
margin: 0;
padding: 0 0 0 3px;
}
.ui-tabs-nav:after { /* clearing without presentational markup, IE gets extra treatment */
display: block;
clear: both;
content: " ";
}
.ui-tabs-nav li {
float: left;
margin: 0 0 0 2px;
}
.ui-tabs-nav a, .ui-tabs-nav a span {
color: #FFD100;
float: left; /* fixes dir=ltr problem and other quirks IE */
padding: 0 12px;
}
.ui-tabs-nav a {
margin: 5px 0 0; /* position: relative makes opacity fail for disabled tab in IE */
padding-left: 0;
background-position: 100% 0;
text-decoration: none;
white-space: nowrap; /* @ IE 6 */
outline: 0; /* @ Firefox, prevent dotted border after click */
}
.ui-tabs-nav a:link, .ui-tabs-nav a:visited {
color: white;
}
.ui-tabs-nav .ui-tabs-selected a {
position: relative;
top: 1px;
z-index: 2;
margin-top: 0;
background-position: 100% -23px;
}
.ui-tabs-nav a span {
padding-top: 1px;
padding-right: 0;
height: 20px;
background-position: 0 0;
line-height: 20px;
}
.ui-tabs-nav .ui-tabs-selected a span {
color: white;
font-weight: bold;
padding-top: 0;
height: 27px;
background-position: 0 -23px;
line-height: 27px;
}
.ui-tabs-nav .ui-tabs-selected a:link, .ui-tabs-nav .ui-tabs-selected a:visited,
.ui-tabs-nav .ui-tabs-disabled a:link, .ui-tabs-nav .ui-tabs-disabled a:visited { /* @ Opera, use pseudo classes otherwise it confuses cursor... */
cursor: text;
}
.ui-tabs-nav a:hover, .ui-tabs-nav a:focus, .ui-tabs-nav a:active,
.ui-tabs-nav .ui-tabs-unselect a:hover, .ui-tabs-nav .ui-tabs-unselect a:focus, .ui-tabs-nav .ui-tabs-unselect a:active { /* @ Opera, we need to be explicit again here now... */
cursor: pointer;
}
.ui-tabs-disabled {
opacity: .4;
filter: alpha(opacity=40);
}
.ui-tabs-nav .ui-tabs-disabled a:link, .ui-tabs-nav .ui-tabs-disabled a:visited {
color: #000;
}
.ui-tabs-panel {
padding: 10px;
background: #242424; /* declare background color for container to avoid distorted fonts in IE while fading */
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("#tabs > ul").tabs();} );
</script>
<title></title>
</head>
<body>
<div id="container">
<div id="header">
Header
</div>
<div id="nav">
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Page1</a></li>
<li><a href="#">Page2</a></li>
<li><a href="#">Page3</a></li>
<li><a href="#">Page4</a></li>
<li><a href="#">Page5</a></li>
<li><a href="#">Page6</a></li>
<li><a href="#">Page7</a></li>
<li><a href="#">Page8</a></li>
<li><a href="#">Page9</a></li>
<li><a href="#">Page10</a></li>
<li><a href="#">Page11</a></li>
<li><a href="#">Page12</a></li>
</ul>
</div>
</div>
<div id="content">
<div class="main">
<h1>Main Body Here</h1><br>
<div id="tabs">
<ul>
<li><a href="#one"><span>One</span></a></li>
<li><a href="#two"><span>Two</span></a></li>
<li><a href="#three"><span>Three</span></a></li>
</ul>
<div id="one">
Tab One Here
</div>
<div id="two">
Tab Two Here
</div>
<div id="three">
Tab Three Here
</div>
</div>
</div>
</div>
<div id="footer" class="footer">
Footer
</div>
</div>
</body>
</html>
أي مساعدة ستظل. شكرا.
ملاحظة: jQuery 1.3، jquery-ui 1.6
المحلول
جرب هذا:
.ui-tabs-nav { height:2em; }
نصائح أخرى
تطهير، بشكل افتراضي، ينطبق بشكل حدوي على مستوى العالم. هذا ما يسبب الخطأ الذي تراه - يأتي #NAV قبل علامات التبويب الموجودة في المحتوى، بحيث يكون واضحا: كلاهما سيقوم بمسحه (كنت في الواقع استخدام واضح: كلاهما على .tabs :: بعد ذلك، ولكن
من أجل "احتواء" واضحة واحتفظ بها من التفاعل مع العناصر من مكان آخر في الصفحة، تحتاج إلى تعويم الحاوية أيضا. في هذه الحالة، سيكون ذلك div.content. أضف تعويم: يترك ذلك، وعرض: 100٪ لجعله يمتد عرض div # الرئيسي، وستحصل على السلوك المرغوب فيه - ستكون بطاقات التبويب أسفل علامات التبويب على الفور.
(هذا أحد الأسباب، بالمناسبة، أن استراتيجية "تعويم كل شيء تقريبا" تعمل وكذلك - لا يزال بإمكانها استخدامها بطريقة عاقلة على الرغم من إفراط على الرغم من تفعيلها بشكل كبير.)
يكرر:
قم بتحرير بعض الوقت عندما بدأت في استخدام JQUERY UI، فإن CSS التي جاءت مع التنزيل كانت تسبب تقويماتي في تقديمها بنسبة 150٪ الحجم الذي كنت أتوقعه. من خلال موقعهم، اضطررت إلى تغيير أحجام الخطوط والماشاد إلى CSS ثم إعادة تنزيل كل شيء. إذا كان التباعد خارج، فإنه يبدو أنه قد يكون هناك بعض الحشو تطبق في مكان ما.
كان لدي نفس المشكلة في البداية، ولكن تغيير ui.tabs.css مثل أدناه عملت:
.ui- علامات التبويب {الحشو: .2EM؛ التكبير: 1؛ الخط الحجم: 80٪! }
