我刚刚创建了我的第一个Wordpress插件,该插件创建了一个带有调用回调函数的见证旋转器,可以放置在主题模板文件中。基本功能是..
function thinkup_testimonials(){
if ( is_active_sidebar( 'thinkup-testimonials' ) ) :
echo '<!-- Testimonials -->
<div id="thinkup-testimonials" class="flexslider">
<ul class="testimonials slides">';
dynamic_sidebar('thinkup-testimonials');
echo'</ul></div><!-- testimonial section -->';
endif;
}
因此,用户调用thinkup_testimonials();
他们的模板,一切都很好。
现在的问题是,我希望用户能够以一种简单的方式来控制旋转器中的幻灯片之间的时序(在JS文件中声明)。
我的目标是让他们thinkup_testimonials(9000);
在模板中进行声明,然后将时间设置为9秒。继从@Madara Uchicha的指导这个帖子!我决定尝试#2。将数据回显到页面中的某个位置,然后使用JavaScript从DOM获取信息。因此,我已经修改了上面的函数。
function thinkup_testimonials($settime){
if ( is_active_sidebar( 'thinkup-testimonials' ) ) :
echo '<!-- Testimonials -->
// Creates hidden HTML element with time delay
<input type="hidden" class="tut-timer" value="'. $settime . '">
<div id="thinkup-testimonials" class="flexslider">
<ul class="testimonials slides">';
dynamic_sidebar('thinkup-testimonials');
echo'</ul></div><!-- testimonial section -->';
endif;
}
现在可以使用JS了。
jQuery( document ).ready(function( $ ) {
var timer = $('input.tut-timer').val();
console.log(timer)
$('#thinkup-testimonials').flexslider({
slideshow: true,
animationDuration: 200,
slideshowSpeed: 'timer'
});
});
虽然这似乎至少可以$settime
正确传递变量,并使用console.log()输出它,但是..
if(!isset($settime)){$settime = 5000};
在我的thinkup_testimonials()开头使用;但这会导致致命错误。关于这一点的一些建议也将是很棒的。您可以在这里实时查看它http://www.thinkupdesign.ca/testimonials-plugin/
非常感谢您提供的任何帮助!
您可以使用data-
属性,而不是使用隐藏的输入。
从输入返回的值将是字符串而不是数字,因此您需要注意将什么类型作为值传递给插件选项。
尝试类似的东西:
<ul class="testimonials slides" data-timer="'.$settime.'">
然后在JS中
var $slider = $('#thinkup-testimonials'),
timer = +$slider.data('timer');
$slider.flexslider({
slideshow: true,
animationDuration: 200,
slideshowSpeed: timer /// note you were using string not variable here
});
如果要为用户提供更多灵活性,可以将更多选项作为属性传递,并作为一个对象进行检索,使用$slider.data()
该对象可以扩展默认值:
var sliderDefaults={
slideshow: true
}
var userOpts = $.extend( sliderDefaults, $slider.data());
$slider.flexslider(userOpts );
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句