本文将介绍如何在网页中使用webwidget_scroller_tab组件，包括样式引入、脚本加载、配置参数设置及组件的基本操作。通过实例演示，帮助开发者快速掌握此组件的使用方法。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<title>wid.html</title>
<link rel="stylesheet" href="./plugin/Travel_tab/css/webwidget_scroller_tab.css" type="text/css" />
<script type='text/javascript' src='./js/jquery-1.7.1.js'></script>
<script type='text/javascript' src='./plugin/Travel_tab/js/webwidget_scroller_tab.js'></script>
<script type="text/javascript">
$(function() {
$(".webwidget_scroller_tab").webwidget_scroller_tab({
scroller_time_interval: '5000',
scroller_window_padding: '10',
scroller_window_width: '1280',
scroller_window_height: '730',
scroller_head_text_color: '#fff',
scroller_head_current_text_color: '#000',
directory: 'images'
});
$(".webwidget_scroller_tab1").webwidget_scroller_tab({
scroller_time_interval: '5000',
scroller_window_padding: '10',
scroller_window_width: '1280',
scroller_window_height: '730',
scroller_head_text_color: '#fff',
scroller_head_current_text_color: '#000',
directory: 'images'
});
});
</script>
</head>
<body>
<div class="webwidget_scroller_tab">
<div class="tabContainer">
<ul class="tabHead">
<li class="currentBtn"><a>NUM1</a></li>
<li><a>NUM2</a></li>
<li><a>NUM3</a></li>
</ul>
</div>
<div class="tabBody">
<ul>
<li class="tabCot">
<div class="webwidget_scroller_tab1">
<div class="tabContainer">
<ul class="tabHead">
<li class="currentBtn"><a>NUM11</a></li>
<li><a>NUM12</a></li>
<li><a>NUM13</a></li>
</ul>
</div>
<div class="tabBody">
<ul>
<li class="tabCot">11</li>
<li class="tabCot">12</li>
<li class="tabCot">13</li>
</ul>
</div>
</div>
</li>
<li class="tabCot">2</li>
<li class="tabCot">3</li>
</ul>
</div>
</div>
</body>
</html>
<html>
<head>
<title>wid.html</title>
<link rel="stylesheet" href="./plugin/Travel_tab/css/webwidget_scroller_tab.css" type="text/css" />
<script type='text/javascript' src='./js/jquery-1.7.1.js'></script>
<script type='text/javascript' src='./plugin/Travel_tab/js/webwidget_scroller_tab.js'></script>
<script type="text/javascript">
$(function() {
$(".webwidget_scroller_tab").webwidget_scroller_tab({
scroller_time_interval: '5000',
scroller_window_padding: '10',
scroller_window_width: '1280',
scroller_window_height: '730',
scroller_head_text_color: '#fff',
scroller_head_current_text_color: '#000',
directory: 'images'
});
$(".webwidget_scroller_tab1").webwidget_scroller_tab({
scroller_time_interval: '5000',
scroller_window_padding: '10',
scroller_window_width: '1280',
scroller_window_height: '730',
scroller_head_text_color: '#fff',
scroller_head_current_text_color: '#000',
directory: 'images'
});
});
</script>
</head>
<body>
<div class="webwidget_scroller_tab">
<div class="tabContainer">
<ul class="tabHead">
<li class="currentBtn"><a>NUM1</a></li>
<li><a>NUM2</a></li>
<li><a>NUM3</a></li>
</ul>
</div>
<div class="tabBody">
<ul>
<li class="tabCot">
<div class="webwidget_scroller_tab1">
<div class="tabContainer">
<ul class="tabHead">
<li class="currentBtn"><a>NUM11</a></li>
<li><a>NUM12</a></li>
<li><a>NUM13</a></li>
</ul>
</div>
<div class="tabBody">
<ul>
<li class="tabCot">11</li>
<li class="tabCot">12</li>
<li class="tabCot">13</li>
</ul>
</div>
</div>
</li>
<li class="tabCot">2</li>
<li class="tabCot">3</li>
</ul>
</div>
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
