我正在尝试使用内容面板切换器(http://code.google.com/p/jquery-content-panel-switcher/)和Swipejs(http://swipejs.com/)。我能够让这两个独立工作,但是当我将swipejs代码放在其中一个内容面板中时,代码就会中断。我假设必须与jQuery发生冲突,但我对jQuery很新,而且我仍然坚持要调试这个问题。以下是我目前的代码。谢谢你的帮助。
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/jquery.content-panel-switcher.js'></script>
<script type='text/javascript'>
$(document).ready(function() {
jcps.fader(300, '#switcher-panel', '.set1');
jcps.slider(500, '#switcher-panel2', '.set2');
});
</script>
<table>
<tr>
<td>
<div class="block mid margin_auto">
<div class="header">
<div class="nav_buttons">
<a id="set1panel1" class="switcher set1">Home</a>
<a id="set1panel2" class="switcher set1">Photography</a>
<a id="set1panel3" class="switcher set1">Design</a>
</div>
</div>
<div id="switcher-panel"></div>
<!-- Dummy Data -->
<div id="set1panel1-content" class="switcher-content set1 show">
<h2>Set 1 Panel 1</h2>
Set 1 Panel 1 content goes here.....
<div id='mySwipe' style='max-width:500px;margin:0 auto' class='swipe'>
<div class='swipe-wrap'>
<div><b>0</b></div>
<div><b>1</b></div>
<div><b>2</b></div>
<div><b>3</b></div>
<div><b>4</b></div>
<div><b>5</b></div>
</div>
</div>
<div style='text-align:center;padding-top:20px;'>
<button onclick='mySwipe.prev()'>prev</button>
<button onclick='mySwipe.next()'>next</button>
</div>
</div>
<div id="set1panel2-content" class="switcher-content set1">
<h2>Set 1 Panel 2</h2>
Set 1 Panel 2 content goes here.....
</div>
<div id="set1panel3-content" class="switcher-content set1">
<h2>Set 1 Panel 3</h2>
Set 1 Panel 3 content goes here.....
</div>
</div>
</td>
<td>
<div class="block mid margin_auto">
<div class="header">
<div class="nav_buttons">
<a id="set2panel1" class="switcher set2">Experience</a>
<a id="set2panel2" class="switcher set2">Sports</a>
<a id="set2panel3" class="switcher set2">Hobbies</a>
</div>
</div>
<div id="switcher-panel2"></div>
<!-- Dummy Data -->
<div id="set2panel1-content" class="switcher-content set2 show">
<h2>Set 2 Panel 1</h2>
Set 2 Panel 1 content goes here.....
<div id='mySwipe2' style='max-width:500px;margin:0 auto' class='swipe'>
<div class='swipe-wrap'>
<div><b>A</b></div>
<div><b>B</b></div>
<div><b>C</b></div>
<div><b>D</b></div>
<div><b>E</b></div>
</div>
</div>
<div style='text-align:center;padding-top:20px;'>
<button onclick='mySwipe.prev()'>prev</button>
<button onclick='mySwipe.next()'>next</button>
</div>
</div>
<div id="set2panel2-content" class="switcher-content set2">
<h2>Set 2 Panel 2</h2>
Set 2 Panel 2 content goes here.....
</div>
<div id="set2panel3-content" class="switcher-content set2">
<h2>Set 2 Panel 3</h2>
Set 2 Panel 3 content goes here.....
</div>
</div>
</td>
</tr>
</table>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src='js/swipe.js'></script>
<script>
// pure JS
var elem = document.getElementById('mySwipe');
window.mySwipe = Swipe(elem, {
startSlide: 0,
// auto: 3000,
// continuous: true,
// disableScroll: true,
// stopPropagation: true,
// callback: function(index, element) {},
// transitionEnd: function(index, element) {}
});
// with jQuery
// window.mySwipe = $('#mySwipe').Swipe().data('Swipe');
</script>
<script>
// pure JS
var elem = document.getElementById('mySwipe2');
window.mySwipe2 = Swipe(elem, {
startSlide: 0,
// auto: 3000,
// continuous: true,
// disableScroll: true,
// stopPropagation: true,
// callback: function(index, element) {},
// transitionEnd: function(index, element) {}
});
// with jQuery
// window.mySwipe = $('#mySwipe').Swipe().data('Swipe');
</script>
答案 0 :(得分:0)
冲突发生在两个插件的技术之间,而不是jquery中的任何内容。
两个大问题:
1)当调用setup()函数时,元素div#mySwipe(2)需要在页面上可见。滑动需要这样才能计算幻灯片的宽度。滑动启动时调用setup(),在切换浏览器选项卡时,也会在页面调整大小和某些浏览器中触发。您也可以自己调用mySwipe.setup()
内容面板的CSS,隐藏了.switcher-content中的所有内容。两个滑动div都属于这样一个类。
您可以通过在内容面板之后初始化滑动来解决此问题,但由于问题二,这将是一个短期修复。
2)内容面板似乎通过显示div工作,并根据需要从切换器内容div复制内容。如果您在内容面板后初始化滑动,您实际上将初始化面板副本上的滑动,一旦您导航到另一个面板,此副本将丢失,当您向后导航时,您将再次刷卡。
您需要做的是:
这三项任务需要更改所选插件的代码。
要调试问题,我建议使用各种浏览器开发工具。使用inspect元素工具可以让你看到插件正在生成的html,也就是说,当它是一个隐藏的div时,你会看到swipe将宽度设置为0而不是3000。通过Javascript调试,您可以在滑动代码的设置方法中查看原因。