mootools_使用MooTools ScrollSpy通过JSON / AJAX加载更多项目

mootools

Last July I wrote an epic dominant unbelievable fantastic outstanding awesome NetTuts post called Create a Twitter-Like "Load More" Widget Using CSS, HTML, JSON, and jQuery or MooTools where I used a MooTools/AJAX/JSON system for loading additional items when the user clicks a "Load More" link. The functionality is sweet but I see room for improvement. If a user scrolls down toward the end of the container, why not load more items for them automatically? Armed with the premier MooTools scrolling plugin, ScrollSpy, we can do so.

去年7月，我写了一个史诗般的 优势 令人难以置信的 梦幻般的 优秀真棒NETTUTS帖子名为创建一个类似Twitter的“加载更多”的Widget使用CSS，HTML，JSON和jQuery或MooTools的 ，我使用MooTools的/ AJAX / JSON系统加载额外的项目时用户单击“加载更多”链接。 功能不错，但我认为仍有改进的余地。 如果用户向下滚动到容器的末端，为什么不为他们自动加载更多物品？ 有了首要的MooTools滚动插件ScrollSpy ，我们可以做到这一点。

View Demo 查看演示 Download ScrollSpy 下载ScrollSpy

HTML (The HTML)

   
   

	
    
    

	
    
    

     
     Load More
    
    

   
   

As you can see, the page starts with very little HTML. Obviously this isn't solution which will work without JavaScript enabled. Making this system work without JavaScript wouldn't be too difficult...but we'll skip that in this tutorial.

如您所见，该页面以很少HTML开头。 显然，这不是在未启用JavaScript的情况下无法解决的解决方案。 在没有JavaScript的情况下使该系统正常工作并非难事...但是在本教程中我们将跳过它。

CSS (The CSS)

#posts	{ height:300px; overflow:scroll; }

The CSS from my original NetTuts stays the same -- we simply added the #posts selector properties.

我最初的NetTutsCSS保持不变-我们只是添加了#posts选择器属性。

MooTools JavaScript (The MooTools JavaScript)

Quite a bit gets added to the original tutorials so I'll point out each change individually:

原始教程中添加了很多内容，因此我将分别指出每个更改：

/* via @appden, Scott Kyle, http://appden.com/javascript/fun-with-custom-events-on-elements-in-mootools/ */
Native.implement([Element, Window, Document, Events], {
	oneEvent: function(type, fn) {
		return this.addEvent(type, function() {
			this.removeEvent(type, arguments.callee);
			return fn.apply(this, arguments);
		});
	}
});

The code above represents a function that gets run only once per element. We'll use this in a moment.

上面的代码表示一个函数，每个元素仅运行一次。 稍后我们将使用它。

//NEW!
var spy;
var spyContainer = $('posts');
var spyAct = function() {
	var min = spyContainer.getScrollSize().y - spyContainer.getSize().y - 150 /* tolerance */;
	spy = new ScrollSpy({
		container: spyContainer,
		min: min,
		onEnter: function() {
			loadMore.fireEvent('click');
		}
	});
};
//wait for first load...
window.oneEvent('load',function() {
	spyAct();
});

We create the ScrollSpy listener to keep track of scrolling. If the user scrolls within 150 pixels of the bottom, we fire a virtual click on the "Load More" link.

我们创建ScrollSpy侦听器来跟踪滚动。 如果用户滚动到底部的150像素以内，我们将虚拟点击“加载更多”链接。

//Request.JSON above....
onSuccess: function(responseJSON) {
	//reset the message
	loadMore.set('text','Load More');
	//increment the current status
	start += desiredPosts;
	//add in the new posts
	postHandler(responseJSON);
	//spy calc!
	spyAct();
},
//more below....

Lastly, we call the worker function on the JSON request's success event. Here's the entire MooTools JavaScript snippet:

最后，我们在JSON请求的成功事件上调用worker函数。 这是整个MooTools JavaScript代码段：

/* via @appden, Scott Kyle, http://appden.com/javascript/fun-with-custom-events-on-elements-in-mootools/ */
Native.implement([Element, Window, Document, Events], {
	oneEvent: function(type, fn) {
		return this.addEvent(type, function() {
			this.removeEvent(type, arguments.callee);
			return fn.apply(this, arguments);
		});
	}
});


//safety closure
(function($) {
	//domready event
	window.addEvent('domready',function() {
		//settings on top
		var domain = 'https://davidwalsh.name/';
		var initialPosts = 
   
   ;
		var start = 
   
   ;
		var desiredPosts = 
   
   ;
		var loadMore = $('load-more');
		//NEW!
		var spy;
		var spyContainer = $('posts');
		var spyAct = function() {
			var min = spyContainer.getScrollSize().y - spyContainer.getSize().y - 150 /* tolerance */;
			spy = new ScrollSpy({
				container: spyContainer,
				min: min,
				onEnter: function() {
					loadMore.fireEvent('click');
				}
			});
		};
		//wait for first load...
		window.oneEvent('load',function() {
			spyAct();
		});
		//function that creates the posts
		var postHandler = function(postsJSON) {
			postsJSON.each(function(post,i) {
				//post url
				var postURL = '' + domain + post.post_name;
				//create the HTML
				var postDiv = new Element('div',{
					'class': 'post',
					events: {
						click: function() {
							window.location = postURL;
						}
					},
					id: 'post-' + post.ID,
					html: '' + post.post_title + '
' + post.post_content + 'Read more...
'
				});
				//inject into the container
				postDiv.inject($('posts'));
			});
			
		};
		
		//place the initial posts in the page
		postHandler(initialPosts);
		
		//ajax!
		var request = new Request.JSON({
			url: 'load-more.php', //ajax script -- same page
			method: 'get',
			link: 'cancel',
			noCache: true,
			onRequest: function() {
				//add the activate class and change the message
				loadMore.addClass('activate').set('text','Loading...');
			},
			onSuccess: function(responseJSON) {
				//reset the message
				loadMore.set('text','Load More');
				//increment the current status
				start += desiredPosts;
				//add in the new posts
				postHandler(responseJSON);
				//spy calc!
				spyAct();
			},
			onFailure: function() {
				//reset the message
				loadMore.set('text','Oops! Try Again.');
			},
			onComplete: function() {
				//remove the spinner
				loadMore.removeClass('activate');
			}
		});
		//add the "Load More" click event
		loadMore.addEvent('click',function(){
			//begin the ajax attempt
			request.send({
				data: {
					'start': start,
					'desiredPosts': desiredPosts
				}
			});
		});
	});
})(document.id);

PHP (The PHP)

The following PHP loads more items. My example uses WordPress posts:

以下PHP加载更多项目。 我的示例使用WordPress帖子：

/* settings */
session_start();
$number_of_posts = 5; //5 at a time
$_SESSION['posts_start'] = $_SESSION['posts_start'] ? $_SESSION['posts_start'] : $number_of_posts;

/* loading of stuff */
if(isset($_GET['start'])) {
	/* spit out the posts within the desired range */
	echo get_posts($_GET['start'],$_GET['desiredPosts']);
	/* save the user's "spot", so to speak */
	//$_SESSION['posts_start']+= $_GET['desiredPosts'];
	/* kill the page */
	die();
}

/* grab stuff */
function get_posts($start = 0, $number_of_posts = 5) {
	/* connect to the db */
	$connection = mysql_connect('localhost','username','password');
	mysql_select_db('blogname',$connection);
	$posts = array();
	/* get the posts */
	$query = "SELECT post_title, post_content, post_name, ID FROM wp_posts WHERE post_status = 'publish' ORDER BY post_date DESC LIMIT $start,$number_of_posts";
	$result = mysql_query($query);
	while($row = mysql_fetch_assoc($result)) {
		preg_match("/
(.*)/",$row['post_content'],$matches);
		$row['post_content'] = strip_tags($matches[1]);
		$posts[] = $row;
	}
	/* return the posts in the JSON format */
	return json_encode($posts);
}

View Demo 查看演示 Download ScrollSpy 下载ScrollSpy

一些想法 (A Few Thoughts)

• This type of system only works well if you remember how many items were last loaded. Making the user start from the default number is annoying as hell.
  仅当您记得上次加载了多少个项目时，这种类型的系统才能很好地工作。 让用户从默认数字开始令人讨厌。
• I've found that listening for scrolling is browsers is shotty -- sometimes browsers simply don't fire the scroll event properly, which makes the "Load More" link all the more important.
  我发现监听滚动是浏览器的不足之处-有时浏览器根本无法正确触发滚动事件，这使得“加载更多”链接变得更加重要。

If you want an in-depth description of the system, please read the original post at NetTuts.

如果您想对系统进行深入的描述，请阅读NetTuts上的原始文章 。

Cool functionality though, huh?

功能很酷吧？

翻译自: https://davidwalsh.name/mootools-scrollspy-load

mootools