complexcoding
جمعه 02 فروردین 1392, 03:49 صبح
دوستان سلام
دوستان مشكل اين كد Html چيه كه به هم ريخته اجرا مي شه؟ مربوط به ايجاد تب هستش.
<style>/* override the root element to enable scrolling */
.css-panes {
height: 410px;
width: 702px;
position:relative;
overflow:hidden;
clear:both;
background-color: transparent;
}
/* override single pane */
.css-panes div {
float:left;
display:block;
width:660px;
font-size:14px;
background-color: transparent;
}
/* our additional wrapper element for the items */
.css-panes .items {
width:20000em;
position:absolute;
clear:both;
margin:0;
padding:0;
border:0;
}
.css-panes .less, .css-panes .less a {
color:#999 !important;
font-size:11px;
}
</style>
<script>// wait until document is fully scriptable
$(function() {
// select #flowplanes and make it scrollable. use circular and navigator plugins
$(".css-panes").scrollable({ circular: true, mousewheel: true }).navigator({
// select #flowtabs to be used as navigator
navi: ".css-tabs",
// select A tags inside the navigator to work as items (not direct children)
naviItem: 'a',
// assign "current" class name for the active A tag inside navigator
activeClass: 'current',
// make browser's back button work
history: true
});
});</script>
<!-- "Previous" action -->
<button class="prev">« Previous</button>
<!-- "Next" action -->
<button class="next">Next »</button>
<!-- tabs work as navigator for scrollable -->
<ul id="tabs" class="css-tabs navi">
<li><a id="t1" class="current" href="#story">The Story</a></li>
<li><a id="t2" href="#features">Features</a></li>
<li><a id="t3" href="#plugins">Plugins</a></li>
<li><a id="t4" href="#demos">Demos</a></li>
</ul>
<!-- tab panes -->
<div id="flowpanes">
<!-- wrapper for scrollable items -->
<div class="items">
<!-- the items -->
<div id="t1" class="current" href="#story"> [ any HTML here ]</div>
<div id="t2" href="#features"> [ any HTML here ]</div>
<div id="t3" href="#plugins"> [ any HTML here ]</div>
<div id="t4" href="#demos"> [ any HTML here ]</div>
</div>
</div>
دوستان مشكل اين كد Html چيه كه به هم ريخته اجرا مي شه؟ مربوط به ايجاد تب هستش.
<style>/* override the root element to enable scrolling */
.css-panes {
height: 410px;
width: 702px;
position:relative;
overflow:hidden;
clear:both;
background-color: transparent;
}
/* override single pane */
.css-panes div {
float:left;
display:block;
width:660px;
font-size:14px;
background-color: transparent;
}
/* our additional wrapper element for the items */
.css-panes .items {
width:20000em;
position:absolute;
clear:both;
margin:0;
padding:0;
border:0;
}
.css-panes .less, .css-panes .less a {
color:#999 !important;
font-size:11px;
}
</style>
<script>// wait until document is fully scriptable
$(function() {
// select #flowplanes and make it scrollable. use circular and navigator plugins
$(".css-panes").scrollable({ circular: true, mousewheel: true }).navigator({
// select #flowtabs to be used as navigator
navi: ".css-tabs",
// select A tags inside the navigator to work as items (not direct children)
naviItem: 'a',
// assign "current" class name for the active A tag inside navigator
activeClass: 'current',
// make browser's back button work
history: true
});
});</script>
<!-- "Previous" action -->
<button class="prev">« Previous</button>
<!-- "Next" action -->
<button class="next">Next »</button>
<!-- tabs work as navigator for scrollable -->
<ul id="tabs" class="css-tabs navi">
<li><a id="t1" class="current" href="#story">The Story</a></li>
<li><a id="t2" href="#features">Features</a></li>
<li><a id="t3" href="#plugins">Plugins</a></li>
<li><a id="t4" href="#demos">Demos</a></li>
</ul>
<!-- tab panes -->
<div id="flowpanes">
<!-- wrapper for scrollable items -->
<div class="items">
<!-- the items -->
<div id="t1" class="current" href="#story"> [ any HTML here ]</div>
<div id="t2" href="#features"> [ any HTML here ]</div>
<div id="t3" href="#plugins"> [ any HTML here ]</div>
<div id="t4" href="#demos"> [ any HTML here ]</div>
</div>
</div>