mootools_dwClickable：使用MooTools 1.2整个块可单击

mootools

I recently received an email from a reader who was really impressed with Block Clickable, a jQuery script that took the link within a list item and made the entire list item clickable. I thought it was a neat script so I took a few minutes and ported it to MooTools.

最近，我收到了一封来自读者的电子邮件，他对jQuery脚本Block Clickable印象深刻，该脚本将一个列表项中的链接带到了整个列表项中，并且可以单击。 我认为这是一个简洁的脚本，所以花了几分钟时间将其移植到MooTools。

View Demo 查看演示 Download 下载

XHTML (The XHTML)

<ul class="block-list">
	<li>Clicking this block will take you to <a href="https://davidwalsh.name">DavidWalsh.name</a></li>
	<li>Clicking this block will take you to <a href="http://scriptandstyle.com">Script&Style.com</a>.</li>
	<li>Clicking this block will take you to <a href="http://bandwebsitetemplate.com">BandWebsiteTemplate.com</a></li>
	<li>Clicking this block will take you to <a href="http://mootools.net">MooTools.net</a></li>
</ul>

You see an unordered list with list items containing a link.

您会看到一个无序列表，其中包含链接的列表项。

CSS (The CSS)

.block-list	{ padding:0; margin:0; list-style-type:none; width:500px; }
.block-list li	{ padding:20px; background:#bfd0ed; border-top:3px solid #033289; }
.block-list li:hover	{ background:#e3ecfa; cursor:pointer; }

Here you can define styles for the list item. The :hover state is important -- you need to treat the list item as though it's a link when the mouse hovers over the link.

您可以在此处为列表项定义样式。 ：hover状态很重要-当鼠标悬停在链接上方时，您需要将列表项视为链接。

MooTools 1.2 JavaScript类 (The MooTools 1.2 JavaScript Class)

var dwClickables = new Class({
	
	//implements
	Implements: [Options],

	//options
	options: {
		elements: $$('li'),
		selectClass: '',
		anchorToSpan: false
	},
	
	//initialization
	initialize: function(options) {
		//set options
		this.setOptions(options);
		//set clickable
		this.doClickables();
	},
	
	//a method that does whatever you want
	doClickables: function() {
		
		//for all of the elements
		this.options.elements.each(function(el) {
			
			//get the href
			var anchor = el.getElements('a' + (this.options.selectClass ? '.' + this.options.selectClass : ''))[0];
			
			//if we found one
			if($defined(anchor)) {
				
				//add a click event to the item so it goes there when clicked. 
				this.setClick(el,anchor.get('href'));
				
				//modify anchor to span if necesssary
				if(this.options.anchorToSpan) {
					var span = new Element('span',{
						text: anchor.get('text')
					}).replaces(anchor);
				}
			}
			
		},this);
	},
	
	//ads the click event
	setClick: function(element,href) {
		
		element.addEvent('click', function() {
			window.location = href;
		});
	}
	
});

The class accepts three options:

该类接受三个选项：

• elements: A list of elements to make clickable

  elements ：可点击元素列表

• selectClass: If you have more than one link in the item, you can designate which link to choose my the selectClass

  selectClass ：如果项目中有多个链接，则可以指定哪个链接来选择selectClass

• anchorToSpan: Since the link borrows the anchor's href attribute, you don't necessarily need the link. This settings directs the class to change the anchor to a SPAN tag if anchorToSpan is set to true.

  anchorToSpan ：由于该链接借用了锚点的href属性，因此您不一定需要该链接。 如果anchorToSpan设置为true，则此设置指示类将锚更改为SPAN标记。

MooTools 1.2的用法 (The MooTools 1.2 Usage)

window.addEvent('domready', function() {
	
	var clix = new dwClickables({
		elements: $$('.block-list li'),
		anchorToSpan: true
	});
	
});

Just as you would with any other MooTools class, you instantiate the class and pass in the desired options.

就像处理任何其他MooTools类一样，您可以实例化该类并传递所需的选项。

I really enjoyed creating this class. It plays nice with search engines and implements the list item / click functionality flawlessly.

我真的很喜欢创建这个课程。 它与搜索引擎配合使用，可以完美地实现列表项/单击功能。

View Demo 查看演示 Download 下载

Any suggestions?

有什么建议？

翻译自: https://davidwalsh.name/dwclickable-entire-block-clickable-mootools

mootools