图片瀑布流、含分享及分页

最新推荐文章于 2024-11-18 11:52:57 发布

原创最新推荐文章于 2024-11-18 11:52:57 发布 · 267 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#web 前端瀑布流 #JavaScript #Ajax #ViewUI

个人代码专栏收录该内容

13 篇文章

订阅专栏

本文介绍如何使用HTML、CSS和JavaScript实现一个滚动图片墙，并通过瀑布流插件优化布局，支持分页和分享功能。

1、需要在环境下运行

2、支持分享功能

3、每五页为一节点，加入分页。

有什么错误，多指教

去吧，黛杩

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="common.css"/>
<link rel="stylesheet" type="text/css" href="pic_wall.css"/>
<title>滚动图片墙</title>
</head>

<body>
<div class="pic_wall" id="container">
    <div class="wall_list first"> 
        
    </div>
    <div class="wall_list"> 
        
    </div>
    <div class="wall_list"> 
    </div>
    <div class="clearing"></div>
</div>

 
<!--分页开始-->
<div class="list_page">
    <div class="lp_main hidden">
        <a href="pic_wall.html" class="page_element lp_home">首页</a>
        <a href="pic_wall.html" class="page_element lp_pageUp">上一页</a>
        <a href="pic_wall.html" class="page_element lp_pageNum">1</a>
        <a href="pic_wall.html" class="page_element lp_pageNum">2</a>
        <a href="pic_wall.html" class="page_element lp_pageNum">3</a>
        <a href="pic_wall.html" class="page_element lp_pageNum">4</a>
        <a href="pic_wall.html" class="page_element lp_pageNum">5</a>
        <a href="pic_wall.html" class="page_element lp_pageNum">6</a>
        <a href="pic_wall.html" class="page_element lp_pageDown">下一页</a>
        <a href="pic_wall.html" class="page_element lp_end">尾页</a>
        <div class="clearing"></div>
    </div>
</div>
<!--分页结束-->

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/wall.js" type="text/javascript"></script>
<script src="js/core.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8" src="http://static.bshare.cn/b/buttonLite.js#text=%E5%88%86%E4%BA%AB&style=999&img=http%3a%2f%2f192.168.1.29:8080%2fcatcool%2fresources%2ftheme%2fdefault%2fimages%2fbshare.gif&h=18&w=67&=true" ></script> 

<script type="text/javascript">

	
	  var li = '';
	  var opt={
		  uri : 'test.jsp',
		  auto_imgHeight:true, //是否需要自动计算图片的高度
		  insert_type:1,  //单元格插入方式，1为插入最短那列，2为按序轮流插入
		  callback : function(json){//构造html
			  var	htmls ="";
			  var obj = eval(json);
			  
			  for(var i=0;i<obj.length;i++){
				  var html_son="";
				  var obj_son = eval(obj[i].userList);
					for(var k=0;k<obj_son.length;k++){
					  html_son=html_son+"<li><a href='"+obj_son[k].user_href+"' class='user_pic'><img src='"+obj_son[k].user_pic+"' width='45' height='45'/></a><p class='user_speak'><a href='"+obj_son[k].user_href+"'>"+obj_son[k].user_name+":</a>"+obj_son[k].user_text+"</p></li>";
					}
					 htmls = htmls + "<div class='wall_panel'><div class='wl_main'><a href='"+obj[i].href+"' class='wlm_pic'><img src='"+obj[i].src+"' width='202' alt='"+obj[i].name+"'/><span>轻轻点我查看"+obj[i].num+"张图片</span></a><a href='"+obj[i].href+"' class='wlm_title'>"+obj[i].name+"</a><ul class='wl_state'>"+html_son+"</ul><div class='wl_num'><a href='#' class='wln_left' title='收藏'>收藏(<font>18</font>)</a><a href='#' class='wln_center' title='评论'>评论(<font>18</font>)</a><a href='"+obj[i].href+"' class='wln_right bshareDiv' title='"+obj[i].name+"'></a><font class='wln_num'>分享(<span  class='BSHARE_COUNT' ></span>)</font></div></div></div>";
					 
			  }	
			  	  
			  return htmls;	
			  }
	  }
	  $('#container').waterfall(opt);

</script>
</body>
</html>

.pic_wall {
	width: 100%;
	padding-bottom: 30px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #DADADA;
}
.pic_wall .wall_list {
	width: 232px;
	float:left;
	margin-left:14px;
	}
.pic_wall .wall_list.first {
	margin-left:0px;
	}
.pic_wall .wall_list .wall_panel {
	width: 232px;
	margin-bottom:15px;
	background-image: url(images/border_bottom_bk.png);
	background-repeat: repeat-x;
	background-position: left bottom;
	border-top-width: 1px;
	border-right-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-left-style: solid;
	border-top-color: #EAEAEA;
	border-right-color: #DBDBDB;
	border-left-color: #DBDBDB;
	background-color:#fff;
	padding-bottom: 3px;
	}
.pic_wall .wall_list .wall_panel .wl_main {
	padding-top: 15px;
	padding-right: 15px;
	padding-left: 15px;
	padding-bottom: 10px;
}
.pic_wall .wall_list .wall_panel .wl_main:hover {
	padding-top: 13px;
	padding-right: 13px;
	padding-left: 13px;
	padding-bottom: 8px;
	border: 2px solid #fab0d2;
	}
.pic_wall .wall_list .wall_panel .wl_main .wlm_pic {
	position: relative;
	width: 100%;
	display: block;
}
.pic_wall .wall_list .wall_panel .wl_main .wlm_pic span {
	width: 100%;
	color: #fff;
	background-color: #000;
	height: 30px;
	line-height:30px;
	display:block;
	text-align:center;
	filter: Alpha(Opacity=60);
	opacity:0.6;
	position: absolute;
	left: 0px;
	bottom: 0px;
}
.pic_wall .wall_list .wall_panel .wl_main .wlm_pic:hover span {
	color:#FF006F;
	}
.pic_wall .wall_list .wall_panel .wl_main .wlm_title {
	line-height: 20px;
	font-size:14px;
	display:block;
	color: #030303;
	padding-top: 10px;
	padding-bottom: 10px;
}
.pic_wall .wall_list .wall_panel .wl_main .wlm_title:hover {
	color:#FF006F;
	}
.pic_wall .wall_list .wall_panel .wl_main .wl_state {
	width:100%;
	margin-bottom:6px;
}
.pic_wall .wall_list .wall_panel .wl_main .wl_state li{
 	border-top: 1px solid #F1F1F1;
    height: 64px;
    position: relative;
    width: 100%;

}

.pic_wall .wall_list .wall_panel .wl_main .wl_state li .user_pic {
	position: absolute;
	height: 45px;
	width: 45px;
	left: 0px;
	top: 8px;
	border:1px solid #fff;
}
.pic_wall .wall_list .wall_panel .wl_main .wl_state li:hover .user_pic {
	border:1px solid #FF006F;
}

.pic_wall .wall_list .wall_panel .wl_main .wl_state li .user_speak {
	line-height: 22px;
	position: absolute;
	height: 46px;
	overflow:hidden;
	width: 140px;
	right: 10px;
	top: 10px;
}
.pic_wall .wall_list .wall_panel .wl_main .wl_state li .user_speak a{
	color:#FF006F;
	margin-right:6px;
	}
.pic_wall .wall_list .wall_panel .wl_main .wl_num {
	background-image: url(images/list_bk.png);
	background-repeat: no-repeat;
	background-position: center;
	position: relative;
	height: 45px;
	width: 100%;
}
.pic_wall .wall_list .wall_panel .wl_main .wl_num a{
	height: 18px;
	width: 33%;
	line-height: 18px;
	color:#FF006F;
	position: absolute;
	top: 10px;
	}
.pic_wall .wall_list .wall_panel .wl_main .wl_num a:hover{
	color:#f90;
	}
.pic_wall .wall_list .wall_panel .wl_main .wl_num a:hover font{
	color:#f90;
	}
.pic_wall .wall_list .wall_panel .wl_main .wl_num .wln_left {
	left: 0px;
}
.pic_wall .wall_list .wall_panel .wl_main .wl_num .wln_center {
	left: 33%;
	text-align:center;
}
.pic_wall .wall_list .wall_panel .wl_main .wl_num .wln_right {
	right: 0px;
	text-align:right;
	z-index: 2;
	width: 50px;
}
.pic_wall .wall_list .wall_panel .wl_main .wl_num font.wln_num {
	right: 0px;
	top:10px;
	text-align:right;
	position: absolute;
	color:#FF006F
}
.pic_wall .wall_list .wall_panel .wl_main .wl_num font.wln_num span{
	color:#FF97C4
	}
.pic_wall .wall_list .wall_panel .wl_main .wl_num a font{
	color:#FF97C4;
	}
	




/**
分页样式
*/
.list_page {
	height: 60px;
	width: 100%;
	margin-top: 20px;
}
.list_page .lp_main {
	width:550px;
	height: 40px;
	margin-right: auto;
	margin-left: auto;
	overflow:hidden;
	text-align:center;
}
.list_page .lp_main .page_element{
	text-align:center;
	display:inline-block;
	line-height:36px;
	font-size:14px;
	color:#9D9D9D;
	font-weight:600;
	}
.list_page .lp_main .page_element:hover{
	color:#FF006F;
	}
.list_page .lp_main .lp_home {
	background-image:url(images/bk.png);
	background-repeat: no-repeat;
	background-position: -110px -160px;
	height: 40px;
	width: 49px;
	margin-right: 10px;
}
.list_page .lp_main .lp_pageUp {
	background-image: url(images/bk.png);
	background-repeat: no-repeat;
	background-position: -160px -160px;
	height: 40px;
	width: 87px;
	margin-right: 20px;
}
.list_page .lp_main .lp_pageUp:hover {
	background-position: -160px -120px;
	}
.list_page .lp_main .lp_pageNum {
	background-color: #fff;
	height: 35px;
	width: 33px;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #DDDDDD;
	margin-right: 1px;
	color:#000;
}
.list_page .lp_main .lp_pageNum:hover {
	background-color:#FF006F;
	color:#fff;
	}
.list_page .lp_main .lp_pageNum.current {
		background-color:#FF006F;
		color:#fff;
	}	
.list_page .lp_main .lp_pageDown {
	background-image: url(images/bk.png);
	background-repeat: no-repeat;
	background-position: -250px -160px;
	height: 40px;
	width: 87px;
	margin-left: 20px;
}
.list_page .lp_main .lp_pageDown:hover {
	background-position: -250px -120px;
	}
.list_page .lp_main .lp_end {
	background-image: url(images/bk.png);
	background-repeat: no-repeat;
	background-position: -110px -160px;
	height: 40px;
	width: 49px;
	margin-left: 10px;
}

/**
 ************************************************************
 ***@project jquery瀑布流插件
 ***@author hcp0209@gmail.com
 ***@ver version 1.0
 ************************************************************
 */



var WALL_PAGE =0;
var WALL_MAX_PAGE = 5;
var WALL_NODATA = false;
var WALL_NUMBER = 20; //当返回数据不满些数值时将不再向服务器请求数据
(function($){
	
   var 
   //参数
   setting={
      column_width:230,//列宽
	  column_className:'wall_list',//列的类名
	  column_space:'none',//列间距
	  cell_selector:'.wall_area',//要排列的砖块的选择器，context为整个外部容器
	  img_selector:'img',//要加载的图片的选择器
	  auto_imgHeight:true,//是否需要自动计算图片的高度
	  fadein:true,//是否渐显载入
	  fadein_speed:1000,//渐显速率，单位毫秒
	  insert_type:1, //单元格插入方式，1为插入最短那列，2为按序轮流插入
	  uri : '',
	  callback : null,
	  getResource:function(index){ 
	  
	    if(WALL_NODATA==true){
			$(".lp_main").removeClass("hidden");
			 return false;
				 }
	 		APP.showLoading({
					conn : '#'+$container.attr('id')
			})
			$.getJSON(setting.uri, {
				  pageCount : index,
				  key : ''
			}, function(result) {
					if(result.length==0){
					
						waterfall.load_index--;
						WALL_PAGE --;
						WALL_NODATA = true;
						waterfall.$container.html(' <div class="noData lc_class panel_bk"><a href="index.html"></a></div>');
						
						APP.hideLoading();
						return false;
						}
					if(result.length<WALL_NUMBER){
						//如果返回数据不足设定的值时，不再对服务器进行请求
						WALL_NODATA = true;
					}	
					render( setting.callback(result),true);
						APP.hideLoading();
					}
			);
			
	  }  //获取动态资源函数,必须返回一个砖块元素集合,传入参数为加载的次数
	  
	  
   },
   //
   waterfall=$.waterfall={},//对外信息对象
   $container=null;//容器
   waterfall.load_index=0, //加载次数,每滚动一屏后自增
   $.fn.extend({
       waterfall:function(opt){
		  opt=opt||{};  
		  setting=$.extend(setting,opt);
		  $container=waterfall.$container=$(this);
		  waterfall.$columns=creatColumn();
		  render($(this).find(setting.cell_selector).detach(),false); //重排已存在元素时强制不渐显
		  waterfall._scrollTimer2=null;
		  $(window).bind('scroll',function(){
			 clearTimeout(waterfall._scrollTimer2);
			 waterfall._scrollTimer2=setTimeout(onScroll,300);
		  });
		  waterfall._scrollTimer3=null;
		  $(window).bind('resize',function(){
			 clearTimeout(waterfall._scrollTimer3);
			 waterfall._scrollTimer3=setTimeout(onResize,300);
			
		  });
		 
		 
//进入页面即加载第一屏
onScroll();

	   }
	   
   });
   function creatColumn(){//创建列
      waterfall.column_num=calculateColumns();//列数
	  //循环创建列
	  var html='';
	  for(var i=0;i<waterfall.column_num;i++){
		  
	//	 html +='';
	//  此处代码错误，baukh因为此代码会造成原html中的数据总是在最下方，所以将其隐藏，如以后出现问题，可将此代码放开，进行调试。  html+='<div class="'+setting.column_className+'"></div>'; 
	  }
	  $container.prepend(html);//插入列
	
	  return $('.'+setting.column_className,$container);//列集合
   }
   function calculateColumns(){//计算需要的列数
      var num=Math.floor(($container.innerWidth())/(setting.column_width+setting.column_space));
	  if(num<1){ num=1; } //保证至少有一列
	  return num;
   }
   function render(elements,fadein){//渲染元素
      if(!$(elements).length) return;//没有元素
	  
      var $columns = waterfall.$columns;
      $(elements).each(function(i){		
	  	  								
		  if(!setting.auto_imgHeight||setting.insert_type==2){//如果给出了图片高度，或者是按顺序插入，则不必等图片加载完就能计算列的高度了
		     if(setting.insert_type==1){ 
			    insert($(elements).eq(i),setting.fadein&&fadein);//插入元素
			 }else if(setting.insert_type==2){
			    insert2($(elements).eq(i),i,setting.fadein&&fadein);//插入元素	 
		     }
			 
			 return true;//continue
		  }						
		  if($(this)[0].nodeName.toLowerCase()=='img'||$(this).find(setting.img_selector).length>0){//本身是图片或含有图片
		      var image=new Image;
			  var src=$(this)[0].nodeName.toLowerCase()=='img'?$(this).attr('src'):$(this).find(setting.img_selector).attr('src');
			  image.onload=function(){//图片加载后才能自动计算出尺寸
			      image.onreadystatechange=null;
				  if(setting.insert_type==1){ 
				     insert($(elements).eq(i),setting.fadein&&fadein);//插入元素
				  }else if(setting.insert_type==2){
					 insert2($(elements).eq(i),i,setting.fadein&&fadein);//插入元素	 
				  }
				  image=null;
			  }
			  image.onreadystatechange=function(){//处理IE等浏览器的缓存问题：图片缓存后不会再触发onload事件
			      if(image.readyState == "complete"){
					 image.onload=null;
					 if(setting.insert_type==1){ 
					    insert($(elements).eq(i),setting.fadein&&fadein);//插入元素
					 }else if(setting.insert_type==2){
					    insert2($(elements).eq(i),i,setting.fadein&&fadein);//插入元素	 
					 }
					 image=null;
				  }
			  }
			  image.src=src;
		  }else{//不用考虑图片加载
		      if(setting.insert_type==1){ 
				 insert($(elements).eq(i),setting.fadein&&fadein);//插入元素
			  }else if(setting.insert_type==2){
				 insert2($(elements).eq(i),i,setting.fadein&&fadein);//插入元素	 
			  }
			  
		  }	
		  	
	  });
	  
	  
   }
   function public_render(elems){//ajax得到元素的渲染接口
   	  render(elems,true);	
	  
   }
   function insert($element,fadein){//把元素插入最短列
      if(fadein){//渐显
	     $element.css('opacity',0).appendTo(waterfall.$columns.eq(calculateLowest())).fadeTo(setting.fadein_speed,1);
	  }else{//不渐显
         $element.appendTo(waterfall.$columns.eq(calculateLowest()));
	  }
	     initShare();
		 
		//  	baukhShare(".bshareDiv"); //分享所需JS
		
		
   }
   function insert2($element,i,fadein){//按序轮流插入元素
      if(fadein){//渐显
	     $element.css('opacity',0).appendTo(waterfall.$columns.eq(i%waterfall.column_num)).fadeTo(setting.fadein_speed,1);
	  }else{//不渐显
         $element.appendTo(waterfall.$columns.eq(i%waterfall.column_num));
	  }
	  initShare();
	  
	  
   }
   function calculateLowest(){//计算最短的那列的索引
      var min=waterfall.$columns.eq(0).outerHeight(),min_key=0;
	  waterfall.$columns.each(function(i){						   
		 if($(this).outerHeight()<min){
		    min=$(this).outerHeight();
			min_key=i;
		 }							   
	  });
	  return min_key;
   }
   function getElements(){//获取资源
      $.waterfall.load_index++;
      return setting.getResource($.waterfall.load_index);
   }
   waterfall._scrollTimer='';//延迟滚动加载计时器
   function onScroll(){//滚动加载
      clearTimeout(waterfall._scrollTimer);
	   
	  waterfall._scrollTimer=setTimeout(function(){
	      var $lowest_column=waterfall.$columns.eq(calculateLowest());//最短列
		  var bottom=$lowest_column.offset().top+$lowest_column.outerHeight();//最短列底部距离浏览器窗口顶部的距离
				
			
		  
		  var scrollTop=document.documentElement.scrollTop||document.body.scrollTop||0;//滚动条距离
		  var windowHeight=document.documentElement.clientHeight||document.body.clientHeight||0;//窗口高度
		  if(scrollTop>=bottom-windowHeight){
			
			
			  
			  
			  if(WALL_PAGE<WALL_MAX_PAGE){
					getElements();
					WALL_PAGE++;
				  }else{
					  $(".lp_main").removeClass("hidden");
					  }
		  }
	  },100);
	  
   }
   function onResize(){//窗口缩放时重新排列
  /* 去除窗口缩放效果，原因是当缩放时会出错
      if(calculateColumns()==waterfall.column_num) return; //列数未改变，不需要重排
      var $cells=waterfall.$container.find(setting.cell_selector);
	  waterfall.$columns.remove();
	  waterfall.$columns=creatColumn();
      render($cells,false); //重排已有元素时强制不渐显
	  
	 */
   }
})(jQuery);

$(function(){
	
initShare()
	
})

function initShare() {
	var headers = $(".bshareDiv");

	if (typeof (bShare) == 'undefined')
		return false;
	bShare.entries = [];
	$.each(headers, function(i, h) { // 遍历所有文章标题元素
		var a = bShare.addEntry({
			title : $(h).attr('title'), // 获取文章标题
			url : $(h).attr('href'), // 获取文章链接
			summary : $(h).attr('title')
		// 从postBody中获取文章摘要
		})

	});
	bShare.completed = false;
	bShare.start();
}
var APP = {
	SERVERROOT : '/danggui/',
	ajax : function(arg) {
		$("body").append('<div class="postLoading">努力提交中......</div>');
		var w = $(window).width();
		$(".postLoading").css("left", w / 2 - 95);
		$(".postLoading").show();
		$.post(arg.url, arg.data, function(data) {
			if (data.success) {
				if (jQuery.isFunction(arg.callback)) {
					arg.callback(data);
				}
				$(".postLoading").remove();
			} else {
				if (data.state && data.state == 'nologin') {
					alert(data.msg);
					top.location.href = AppUrl
							+ 'userCenter/login.jsp?backUrl='
							+ arg.data.objecturl;
				} else {
					if (data.msg) {
						alert(data.msg);
					} else {
						alert("网络错误，请重试");
					}
				}
				$(".postLoading").remove();
			}
		}, "json");
	},
	/**
	 * @conn : 要把页面加载到哪一个容器，比如传入#mainContent,就是加载到ID为mainContent的容器中
	 * @uri : 访问的地址，从网站根目录开始
	 * 
	 * ///可选项
	 * @data : 加载页时候的参数，也可以跟在uri后边这里传入的data是json对象
	 * @callback : 页面加载成功后的回调函数
	 * @showLoding : json对象，
	 *  ｛ noBorder : true, //默认为false，带边框的loading图标 bigSize : true
	 * //默认为false,加高的loading ｝
	 * 
	 * ,默认为null,是否给容器中显示loading方法
	 * @加载成功后，会自动加载跟页面名称一样的一个JS，用来启动这个页面上的其他UI,加载的这个JS中直接运行的方法也是回调函数
	 */
	loadPage : function(arg) {

		if (arg.uri.indexOf('?') == -1) {
			arg.uri = arg.uri + '?t=' + new Date().getTime();
		} else {
			arg.uri = arg.uri + '&t=' + new Date().getTime();
		}

		$(arg.conn).html('');
		if (arg.conn.indexOf("#") == -1)
			arg.conn = "#" + arg.conn;

		if (arg.showLoading) {// 显示loading
			APP.showLoading({
				conn : arg.conn,
				noBorder : arg.showLoading.noBorder || false,
				bigSize : arg.showLoading.bigSize || false
			})
		}
		$(arg.conn).load(APP.SERVERROOT + arg.uri, arg.data, function() {

			if (jQuery.isFunction(arg.callback)) {
				arg.callback();
			}
			APP.hideLoading();
			var pageName = arg.uri.substring(0, arg.uri.lastIndexOf("."));
			var jsFile = APP.SERVERROOT + pageName + '.js';
			$.getScript(jsFile);
		});
	},
	/***************************************************************************
	 * @页面上所有带有class = ajaxBar 的标签，都会被识别
	 * @标签上必须要有的属性
	 * @href : 从这个地址加载，地址是绝对路径，如，/userCenter/login.html
	 * @conn : 容器的ID，不带#号。要把这个超级链接加载到哪一个容器中去,这里为了避免出现问题，暂时只提供ID的方式
	 * @showLoading : 是否显示loading图标
	 */
	initAjaxBar : function() {
		$(".ajaxBar").unbind('click');
		$(".ajaxBar").click(function() {
			var uri = $(this).attr('href');
			var conn = $(this).attr('conn');
			var hasShowLoading = $(this).attr('showLoading');
			var showLoadingConfig = {};
			var title = $(this).text();

			if (hasShowLoading) {

				showLoadingConfig = {
					noBorder : $(this).attr('noBorder'),
					bigSize : $(this).attr('bigSize')
				}
			}

			APP.loadPage({
				conn : '#' + conn,
				uri : uri,
				data : '',
				showLoading : showLoadingConfig,
				callback : function() {
					APP.initAjaxBar();

				}
			})
			return false;
		})
	},
	ucAjaxBar : function() {

		$(".ucajaxBar").unbind('click');
		var connID = 'ucConn';
		/*
		 * var connTitle = 'ucTitle'; var connTitle = 'ucContent';
		 */

		$(".ucajaxBar").attr('conn', connID);
		$(".ucajaxBar").attr('showLoading', 'true');
		$(".ucajaxBar").attr('bigSize', 'true');
		$(".ucajaxBar")
				.click(
						function() {
							var barTitle = $(this).attr("barTitle");

							var h = '<div class="user_Panle user_con"> <h2 class="up_title color_pink"><span id="ucTitle"></span></h2> <div class="up_body" id="ucContent"></div> <div class="bottom_border"></div></div>';

							$("#user_content").html(h);
							$("#user_content").attr('id', connID);

							var uri = $(this).attr('href');
							var conn = $(this).attr('conn');
							var hasShowLoading = $(this).attr('showLoading');
							var showLoadingConfig = {};
							var title = $(this).attr('title');
							$('#ucTitle').text(title);
							if (hasShowLoading) {

								showLoadingConfig = {
									noBorder : $(this).attr('noBorder'),
									bigSize : $(this).attr('bigSize')
								}
							}
							var connId = '#ucContent';

							APP.loadPage({
								conn : connId,
								uri : uri,
								data : '',
								showLoading : showLoadingConfig,
								callback : function() {
									APP.ucAjaxBar();
								}
							})
							return false;
						})
	},
	getWindow : function() {

	},
	initSearchToggle : function() {
		$("#moreClassicBar").click(function() {
			var status = $("#moreClassic").css('display');

			if (status == 'none') {// 隐藏的，需要显示出来
				$("#moreClassicBar").removeClass('hide');
				$("#moreClassic").show();

			} else {

				$("#moreClassicBar").addClass('hide');
				$("#moreClassic").hide();
			}
		})

	},
	initSiderBar : function() {
		var w = $(window).width();
		$("#site-side-bar").css('right', (w - 1000) / 2 - 50);
		$("#site-side-bar").show();
		$(window).bind(
				'scroll',
				function() {
					var w = $(window).width();
					var scrollTop = document.documentElement.scrollTop
							|| document.body.scrollTop || 0;// 滚动条距离
					if (scrollTop > 178) {
						$("#site-side-bar").css('top', 50)
					} else {
						$("#site-side-bar").css('top', 195)
					}
					$("#site-side-bar").css('right', (w - 1000) / 2 - 50);
				});

	},
	initHeaderTools : function() {
		$(window).bind(
				'scroll',
				function() {
					var scrollTop = document.documentElement.scrollTop
							|| document.body.scrollTop || 0;// 滚动条距离
					if (scrollTop > 178) {
						$("#susHeader").css('position', 'fixed');
						$("#susHeader").css('top', '0');
						$("#susHeader").css('width', '100%');
						$("#susHeader").css('z-index', '999');
					} else {
						$("#susHeader").css('position', '');
						$("#susHeader").css('top', '');
						$("#susHeader").css('width', '');
						$("#susHeader").css('z-index', '');
					}

				})
	},
	initSearchInput : function() {
		var t = '亲，请随便搜搜吧'
		$('.search_text').focus(function() {
			if ($(this).val() == t) {
				$(this).val('')
			}
		}).blur(function() {
			if ($(this).val() == '') {
				$(this).val(t)
			}
		})
	},
	/**
	 * @noBorder : true 默认为 false
	 * @bigSize : true 默认为 false
	 * @conn : 要给哪一个容器添加
	 */
	showLoading : function(arg) {

		var noBorderClass = arg.noBorder ? 'noBorder' : '';
		var bigSize = arg.bigSize ? 'bigSize' : '';
		var html = '<div class="loading ' + noBorderClass + ' ' + bigSize
				+ '"><div class="loadingInner">正在努力加载中......</div></div>';

		$('.loading').remove();
		$(arg.conn).append(html);
		$('.loading').fadeTo('500', 1);
	},
	hideLoading : function() {
		$('.loading').fadeTo('500', 0, function() {
			$(this).remove();
		});
	},
	returnTop : function() {
		$("#site-side-bar").find('.returnTop').attr('href', 'javascript:;');
		$("#site-side-bar").find('.returnTop').attr('title', '返回顶部');

		$("#site-side-bar").find('.returnTop').click(function() {
			if (document.documentElement.scrollTop) {
				document.documentElement.scrollTop = 0;
			} else {
				document.body.scrollTop = 0;
			}
		})
	},
	resetImg : function() {
		$(".dm_content").find("img").each(function() {
			var w = $(this).width();
			if (w > 698) {
				$(this).width(698);
			}

		})

	}
}
var ChooseUserIco = {
	init : function() {
		$(".chooseUserIcoBar").click(function() {
			var h = ChooseUserIco.getHtml();
			$('#chooseIco').html(h);
			$('#chooseIco').show();
			$('#chooseIco').mouseout(function() {
				$('#chooseIco').hide();

			}).mouseover(function() {
				$('#chooseIco').show();
			})
			return false;
		})

	},
	getHtml : function() {
		var h = '';
		for ( var i = 1; i <= 50; i++) {
			h += '<a class="userIco" id="userIco'
					+ i
					+ '" href="javascript:void(0)" onclick="ChooseUserIco.setValue(\'userIco'
					+ i + '\')"><img src="' + APP.SERVERROOT
					+ 'resources/uicon/' + i
					+ '.jpg" width="48" height="48" /></a>';
		}
		return h;
	},
	setValue : function(id) {
		var obj = $("#" + id);
		var icoUri = $(obj).find('img').attr('src');
		$("#userIcoVal").val(icoUri);
		$("#up_img").find('img').attr('src', icoUri);
	}
}
var ECForm = {

	index : 1,
	init : function() {

		if ($("form[inited!=true]").size() == 0) {
			return false;
		}
		$("form[inited!=true]").each(function() {
			var form = $(this);
			var id = "ecform" + ECForm.index++;
			form.attr("inited", true);

			if (!form.attr("id")) {
				form.attr("id", id);
			} else {
				id = form.attr("id");
			}

			// ECForm.dateui(form);
			ECForm.editor(form);
			ECForm.checkImg();
			ECForm.fileui(form);
			ECForm.treeui(form);
			ECForm.validator(id);
		});
	},
	dateui : function(form) {

		var dui = form.find(".ec-dateui");
		dui.attr("readonly", "readonly");
		dui.datepicker({
			dateFormat : "yy-mm-dd"
		});

	},
	validator : function(id) {

		$("#" + id).Validform(
				{
					btnSubmit : ".uf_submit",
					tiptype : function(msg, o, cssctl) {

						// msg：提示信息;
						// o:{obj:*,type:*,curform:*},
						// obj指向的是当前验证的表单元素（或表单对象），type指示提示的状态，值为1、2、3、4，
						// 1：正在检测/提交数据，2：通过验证，3：验证失败，4：提示ignore状态,
						// curform为当前form对象;
						// cssctl:内置的提示信息样式控制函数，该函数需传入两个参数：显示提示信息的对象 和
						// 当前提示的状态（既形参o中的type）;
						if (!o.obj.is("form")) {// 验证表单元素时o.obj为该表单元素，全部验证通过提交表单时o.obj为该表单对象;
							var objtip = o.obj.siblings(".Validform_checktip");
							if (objtip.size() == 0) {
								objtip = o.obj.parent().parent().find(
										".Validform_checktip");

							}
							cssctl(objtip, o.type);
							objtip.text(msg);
						}
					}
				});
	},
	editor : function(form) {
		form.find(".eceditor[inited!=true]").each(function() {
			var editorid = "editor" + ECForm.index++;
			$(this).attr("id", editorid);
			$(this).attr("inited", "true");
			var w = $(this).width();
			var editor_a = new baidu.editor.ui.Editor({
				initialFrameWidth : w,
				minFrameHeight : 150
			}).render(editorid);
		});
	},
	checkImg : function() {
		$(".checkImgBar").click(function() {
			var s = $("#checkImg").attr('src')
			s = s + '&t=' + new Date().getTime();

			$("#checkImg").attr('src', s)
		})
	},
	fileui : function(form) {
		form.find(".upload-image-button").each(
				function() {
					var mxid = ECForm.index++;
					$(this).attr("fid", "f" + mxid);
					$(this).parent().find(".uf_text").attr("fid", "f" + mxid);
					$(this).parent().find(".uf_text").attr("id", "t" + mxid);
					var filename = $(this).attr("filename");
					$(this).parent().append(
							'<input name="' + filename + '" type="file" id="f'
									+ mxid + '" style="display:none"/>');
					$("#f" + mxid).change(
							function() {
								$("#t" + $(this).attr("id").replace("f", ""))
										.val($(this).attr("value"));
							});
					$(this).parent().find(".uf_text").click(function() {
						$("#" + $(this).attr("fid")).get(0).click();
					});
				});
		form.find(".upload-image-button").click(function() {
			$("#" + $(this).attr("fid")).get(0).click();
			return false;
		});
	},
	treeui : function(form) {
		var treeui = form.find('.treePanel');
		treeui.each(function() {

			var ztreeui = $(this).find('.ztree');
			var ztreeinput = $(this).find('input[type=text]');
			var ztreeinputName = ztreeinput.attr('name');
			var checkValue = ztreeinput.attr('checkValue');
			ztreeinput.attr('name', ztreeinputName + '_text');
			$(this).append(
					'<input name="' + ztreeinputName
							+ '" type="hidden" value="' + checkValue + '" />');
			var formID = form.attr("id");
			ztreeui.attr("form", formID);
			ztreeui.attr("valuiName", ztreeinputName);
			ECTree.init({
				uri : ztreeui.attr('uri'),
				treeConn : ztreeui.attr('id'),
				check : ztreeui.attr('check') || '',
				chkStyle : ztreeui.attr('chkStyle') || '',
				radioType : ztreeui.attr('radioType') || '',
				chkboxTypeY : ztreeui.attr('chkboxTypeY') || '',
				chkboxTypeN : ztreeui.attr('chkboxTypeN') || ''
			});

			$("#" + ztreeui.attr('id')).mouseout(function() {
				$(this).hide();
			}).mouseover(function() {
				$(this).show();

			})
			ztreeinput.click(function() {

				$("#" + ztreeui.attr('id')).show();
			})

		});
	}

}
var Fav = {
	post : function(data) {
		APP.ajax({
			url : AppUrl + "plugin/collection!save.action",
			data : data,
			callback : function(json) {
				alert(json);
				var obj = eval(json);
				if (obj.success) {
					alert(obj.msg);
				} else {
					if (obj.state == 'nologin') {
						alert(obj.msg);
						top.location.href = AppUrl
								+ 'userCenter/login.jsp?backUrl='
								+ arg.objecturl;
					} else {
						alert(obj.msg);
					}
				}
			}
		})
	}
}
$(function() {
	APP.initSearchToggle();
	APP.initSiderBar();
	APP.initHeaderTools();
	APP.initSearchInput();
	APP.initAjaxBar();
	APP.resetImg();
	APP.returnTop();
	initShare();
	ChooseUserIco.init();
	ECForm.init();
})