广告

WordPress在文章中添加jQuery滑块

Demo演示:http://www.webdesignerwall.com/demo/jquery/
Demo下载:http://www.webdesignerwall.com/file/jquery-tutorials.zip
更多:http://www.blook.org.cn/480.htm

使用方法分3步走:
第一步:在主题样式表中添加以下CSS样式:因你要实现的效果而添加不同的样式,这里用Demo中的accordion效果演示
注意下面的http://www.waisir.com/images/arrow-square.gif,请将demo中的arrow-square.gif上传到相应目录,然后引用即可,不上传只是样式不完整,不影响功能。目录下的其他文件都不用上传.本案例中只需要上传arrow-square.gif图片

.accordion {
width: 100%;
border-bottom: solid 1px #c4c4c4;
}
.accordion h3 {
background: #e9e7e7 url(http://www.waisir.com/images/arrow-square.gif) no-repeat right -51px;
padding: 7px 15px;
margin: 0;
font: bold 120%/100% Arial, Helvetica, sans-serif;
border: solid 1px #c4c4c4;
border-bottom: none;
cursor: pointer;
}
.accordion h3:hover {
background-color: #e3e2e2;
}
.accordion h3.active {
background-position: right 5px;
}
.accordion p {
background: #f7f7f7;
margin: 0;
padding: 10px 15px 20px;
border-left: solid 1px #c4c4c4;
border-right: solid 1px #c4c4c4;
}

 

第二步:添加页头脚本。在主题中找到header.php,并在<head>标签下添加以下内容:

<!–jquery bigin–>
<script type=”text/javascript”
src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js“>
</script>
<script type=”text/javascript”>
$(document).ready(function(){

$(“.accordion h3:first”).addClass(“active”);
$(“.accordion p:not(:first)”).hide();

$(“.accordion h3″).click(function(){
$(this).next(“p”).slideToggle(“slow”)
.siblings(“p:visible”).slideUp(“slow”);
$(this).toggleClass(“active”);
$(this).siblings(“h3″).removeClass(“active”);
});

});
</script>
<!–jquery end–>

第三步:就是如何使用了,在写文章的时候,切换到html编辑模式,在需要滑动的地方添加如同下面的格式的代码:
其中<div>是最外层的类样式,<h3>是小标题,<p>是滑动内容,其他的内容根据自己需要而定

 

<div>
<h3>Question One Sample Text</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
<h3>This is Question Two</h3>
<p><embed src=”http://player.youku.com/player.php/sid/XMjY2NTAwMzEy/v.swf” quality=”high” width=”480″ height=”400″ align=”middle” allowScriptAccess=”sameDomain” type=”application/x-shockwave-flash”></embed></p>
<h3>Another Questio here</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
<h3>Sample heading</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
<h3>Sample Question Heading</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
</div>

下面是示例:

 

栏目一

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.

栏目二 Dota

Another Questio here

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.

Sample heading

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.

Sample Question Heading

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.

4 thoughts on “WordPress在文章中添加jQuery滑块

    • 这个目前还不是插件,对服务器也没有配置要求的.请注意以下事项:你的测试失败很可能是你的页头文件找错了.导致你测试的页面根本就没有运行相应脚本.请检查以上问题并确保客户端没有禁用js脚本. 第二个建议你在本地生成一个html文件进行测试,或者直接下载demo文件.

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>