mootools_使用MooTools 1.2分配锚点ID

mootools

One of my favorite uses of the MooTools JavaScript library is the SmoothScroll plugin. I use it on my website, my employer's website, and on many customer websites. The best part about the plugin is that it's so easy to implement.

MooTools JavaScript库最喜欢的用途之一是SmoothScroll插件。 我在我的网站,雇主网站和许多客户网站上使用它。 关于插件的最好的部分是它很容易实现

I recently ran into a situation where the customer wanted the feature on a super-tight budget. We set them up with PHP includes which was a great help in allowing me to add the smoothscroll.js JavaScript file to every page, but in order to use SmoothScroll, every anchor needs an ID. Of course, their previous developer (we only moved their old content into a new system -- didn't update the HTML code) didn't add an ID attribute to each anchor because there wasn't a reason to. Unfortunately, their thousands of pages were loaded with anchors so we didn't have time to add id attributes to them.

我最近遇到了这样一种情况,客户希望以超紧凑的预算购买该功能。 我们使用PHP include对其进行了设置,这对于允许我将smoothscroll.js JavaScript文件添加到每个页面是一个很大的帮助,但是为了使用SmoothScroll,每个锚都需要一个ID。 当然,他们的先前开发人员(我们仅将其旧内容移至新系统中-没有更新HTML代码)没有向每个锚点添加ID属性,因为没有理由。 不幸的是,他们的数千个页面都加载了锚点,因此我们没有时间向他们添加id属性。

Using some MooTools 1.2 magic, I figured out a way to make this work in no-time.

通过使用一些MooTools 1.2魔术,我找到了一种使这项工作立即完成的方法。

window.addEvent('domready',function() { 
	//makes sure anchors have ids
	$$('.content a').each(function(el) {
		if(el.get('name') && !el.get('id'))
		{
			el.set('id',el.get('name'));
		}
	});
	
	//smooooooth scrolling enabled
	new SmoothScroll({ duration:700 }, window); 
});

Before enabling SmoothScroll, I look for all anchors and add an ID attribute that mirrors the anchor's name. Quick fix to a potentially big problem.

在启用SmoothScroll之前,我将寻找所有锚点并添加一个反映锚点名称的ID属性。 快速解决潜在的大问题。

Note: If you're good with regular expressions, please share a PHP-compliant regular expression that would find all anchors and add an ID attribute that mirrors the anchor's name. You will achieve immortality on my site!

注意:如果您对正则表达式比较满意,请共享一个符合PHP的正则表达式,该表达式将查找所有锚点,并添加一个反映锚点名称的ID属性。 您将在我的网站上获得永生!

翻译自: https://davidwalsh.name/assign-anchor-ids-mootools

mootools

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值