浏览 3815 次
|
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2010-12-02
最后修改：2010-12-02
1、 效果：
2、 filmstrip-1.0 插件使用方法： 第一步：导入css和js <link href="css/filmstrip-1.0.css" rel="stylesheet" type="text/css"></link> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="filmstrip-1.0.js"></script> 第二步：调用插件 1）、静态数据使用：
<script type="text/javascript">
$(function(){ // 文档就绪
$("#filmstrip").filmstrip({
speed : 3000,// 滚动速度
width : 500,
height : 320,
timeout:60, data:{"totalCount":6,"result":['images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg','images/5.jpg','images/6.jpg']}
});
});
</script>
2）、动态url请求数据使用：
<script type="text/javascript">
$(function(){
// 文档就绪
$("#filmstrip").filmstrip({
url:'data.json'
});
});
</script>
3）、后台数据交互使用： 如果是在java环境使用，要有json-lib库 Java示例代码：
import java.util.ArrayList;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionMapping;
import org.apache.struts.actions.DispatchAction;
public class ImageDate extends DispatchAction
{
public void buildImgshow(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response)
throws Exception {
List<String> result = new ArrayList<String>();
result.add("images/1.jpg");
result.add("images/2.jpg");
result.add("images/3.jpg");
result.add("images/4.jpg");
result.add("images/5.jpg");
result.add("images/6.jpg");
JSONObject temp = new JSONObject();
temp.put("totalCount", result.size());
temp.put("result", JSONArray.fromObject(result));
response.setContentType("text/plain;charset=UTF-8");
response.getWriter().write(temp.toString());
response.flushBuffer();
}
public static void main(String[] args) {
List<String> result = new ArrayList<String>();
result.add("images/1.jpg");
result.add("images/2.jpg");
result.add("images/3.jpg");
result.add("images/4.jpg");
result.add("images/5.jpg");
result.add("images/6.jpg");
JSONObject temp = new JSONObject();
temp.put("totalCount", result.size());
temp.put("result", JSONArray.fromObject(result));
System.out.println(temp.toString());
}
}
运行结果：
{"totalCount":6,"result":["images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg","images/5.jpg","images/6.jpg"]}
使用时将2）中的url修改为访问后台方法的路径就可以了，这里只简单介绍在java中的后台代码处理，其他语言原理相同，重要的是传输到前台组件的json格式的数据，格式必须是给出的样式
以上三种方式都必须有一个前提，那就是在页面中有： <body> <div id="filmstrip"></div>//看到这个id是不是和上面jquery取的id相同 </body> 3、 speed:3000, //图片切换速度，默认3000ms width : 500, //图片展示区域宽度 height : 320, //图片展示区域高度 timeout:60,//url请求方式下的超时时间，默认60s，一般不用设置 url:'data.json'//json 数据请求路径url data: 'json格式的数据' //json格式的数据 注意：这里注意在1.4中，jQuery使用了更严格的方法来解析json。 所有的内容都必须使用双引号。 可以参考：http://hi.baidu.com/proglife/blog/item/c5384e03c8991384d53f7cca.html filmstrip-1.0 只是简易的版本，如果有什么建议或者需要可以email我。 Email：seyaa-ls@hotmal.com 或者540367164@qq.com 声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2010-12-07
能给个详细点的使用文档么？
|
| 返回顶楼 | |
|
发表时间：2010-12-07
randomterror 写道 能给个详细点的使用文档么？
附件中有文档的 |
| 返回顶楼 | |
