1、需要在环境下运行
2、支持分享功能
3、每五页为一节点，加入分页。
有什么错误，多指教
去吧，黛杩
baukh789
- 浏览: 27757 次
- 性别:
- 来自: 西安
-
最新评论
-
baukh789：
该文过期已升级为GridManagerhttp://gridm ...
listManager使用详解 -
baukh789：
已升级为GridManagerhttp://gridmanag ...
listManager使用详解 -
zzjmates：
popmyjoshion 写道你好，我看了你的文章，感觉您即使 ...
2015随手一笔 -
popmyjoshion：
你好，我看了你的文章，感觉您即使算不上前端大神级别的也算得上大 ...
2015随手一笔 -
inchinav5：
...
评论列表，提交，分页
<!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();
})
分享到：
发表评论
-
GridManager表格插件
2016-08-17 17:59 1579GridManager.js gitHub:https: ... -
表格插件
2015-05-13 19:04 603最近写了个关于列表 ... -
简易tabs切换
2014-06-26 16:15 782把很常用的tbas切换功能封装成一个小插件，喜欢的可以拿去 ... -
选择联系人插件
2014-06-10 10:59 709基于easyui的联系人选择控件。 个人代码，请勿喷。 ... -
HTML5 上传 进度条
2014-06-10 10:50 798项目中用到一个HTML5上传功能，带进度条实现。 进度条 ... -
实线斜线拖拽
2014-03-21 10:47 0实线斜线拖拽 -
一个时间铀
2013-11-16 10:37 777自适应宽，可调控时间轴，功能不完善，待优化。 -
图表生成及下拉框美化插件使用总结
2013-08-05 10:11 1233之前使用到highcharts插件及chosen插件，使用 ... -
评论列表，提交，分页
2013-06-28 10:49 920基于jquery的AJAX列表、评论、分页。 在原有ja ... -
带头像、邮箱提醒、ajax验证的form表单
2013-06-26 15:04 3853页面是简单用个table拼出来的、包含以下功能： 1、表 ... -
JS仿3D效果
2013-06-18 21:36 1065在苹果网上看到的效果，自已写JS练习了下。图片用的原网站上 ... -
仿IE收藏夹
2013-04-18 18:42 783一个小东西，仿的IE的一个小UI -
幻灯插件
2013-04-12 21:33 894基于jQuery大众型slider实现，只需在使用时更改CSS ...
相关推荐
瀑布流布局，也称为Pinterest布局，是一种常见的网页设计模式，尤其适用于内容丰富的应用，如图片分享、网络直播或文章展示，因为它能够以美观且易于浏览的方式排列内容。 1. **瀑布流组件**： 这个项目中提到的...
在Android开发中，"图片瀑布流例子"是一个常见的应用场景，特别是在电商、社交或者分享类应用中，用户常常会看到一种类似蘑菇街、美丽说或Pinterest的界面布局，这种布局被称为瀑布流（Waterfall Layout）或者无限...
【jQuery无限滚动加载图片瀑布流代码】是一种网页设计技术，用于实现动态加载页面内容，特别是图片，当用户滚动页面到底部时，更多内容会自动加载，无需点击分页按钮。这种技术大大提升了用户体验，尤其在内容丰富的...
在查询中，你可以使用LIMIT和OFFSET来分页获取图片，以实现瀑布流的逐页加载。例如，每次请求时增加OFFSET值，以获取下一批图片。 返回的图片数据需要转换成JSON格式，因为jQuery可以方便地处理JSON数据。在PHP中，...
ashx测试图片瀑布流源码 源码描述： 一、源码特点 1、ashx测试图片瀑布流 二、菜单功能 1、瀑布流、ashx分页、图片瀑布流 三、注意事项 1、开发环境为Visual Studio 2015，无数据库，使用.net 4.0开发。
为了增加互动性和分享性，许多瀑布流应用会集成社交分享功能。这通常涉及到API接口的调用，如Facebook、Twitter、微信等社交平台的分享SDK。用户可以方便地将看到的内容一键分享到自己的社交网络，提高网站的曝光度...
瀑布流布局，也被称为Masonry布局，是一种网页设计布局方式，常见于图片分享网站和电商产品展示页面。这种布局的特点是元素逐行排列，每行中的元素宽度不固定，但高度自适应，使得整体视觉效果像瀑布一样从上至下...
瀑布流布局，也被称为Masonry布局，是一种常用于图片展示的网页设计模式，尤其在社交媒体、电子商务网站和图片分享平台中极为常见。这种布局方式以其独特的视觉效果，使得页面充满动态感，用户在浏览时可以享受到...
瀑布流布局，也被称为Masonry布局，是一种网页布局方式，常用于展示图片或者内容，如花瓣网就是一个典型的例子。这种布局方式的特点是每个元素（通常是图片）的宽度一致，但高度不固定，使得页面呈现出类似瀑布的...
Vuewaterfall2是一款基于Vue.js框架的瀑布流组件，它主要设计用于实现宽高自适应的瀑布流布局，同时支持PC和移动设备。这个组件的一大特点是它的滚动加载功能，能够根据用户滚动页面的行为动态加载更多内容，从而...
【dede瀑布流无限加载】是一种在网页设计中常见的页面元素加载方式，尤其适用于内容丰富的网站，如电商产品展示或图片分享平台。这种方式允许用户在滚动页面时，新内容自动加载，无需点击“加载更多”按钮，提高了...
瀑布流布局，又称Masonry布局，是一种常见的网页布局方式，尤其在电商网站、图片分享社区等展示大量元素的页面中广泛应用。它模仿了瀑布流水的效果，使得内容块自上而下依次排列，每一列的元素根据浏览器窗口大小...
瀑布流布局，又称Masonry布局，是目前网页和移动应用设计中非常流行的一种展示方式，尤其在Pinterest、花瓣等社交分享平台中广泛应用。它通过自适应屏幕大小，使得内容能够以一种美观且易于浏览的方式呈现，用户可以...
瀑布流布局，又称“Pinterest”布局，是一种在网页或移动应用中常见的展示方式，尤其在电商、图片分享等场景下尤为常见。它通过将内容以多列的方式排列，每列的高度根据内容自身高度动态调整，形成一种参差不齐、...
瀑布流布局，也被称为Masonry布局，是一种网页布局方式，常用于图片展示，它使得页面上的元素能够像瀑布一样从上到下自然流动，每行的元素数量根据内容大小自动调整，形成一种错落有致的视觉效果。这种布局方式在...
瀑布流布局，也被称为Pinterest布局，是Android应用中常见的用于展示信息流的一种设计方式，尤其在社交、电商、图片分享类应用中广泛采用。这种布局的特点是内容元素以多列形式垂直排列，每列宽度不固定，使得界面...
`images`目录可能包含了示例图片，用于展示瀑布流的效果。最后，`js`目录可能包含了一个或多个JavaScript文件，其中包含了处理AJAX请求、解析返回数据以及更新页面内容的逻辑。 综上所述，JSP、AJAX和瀑布流布局...
瀑布流布局，又称Masonry布局，是一种常见的网页布局方式，常用于图片展示、商品列表等场景，其特点是页面中的元素会像瀑布一样自上而下流下来，每一列的高度不固定，新元素会自动填充到最短的一列下方，形成一种...