mootools弹框_使用MooTools ElementFilter进行复选框过滤

mootools弹框

When I first wrote MooTools ElementFilter, I didn't think much of it. Fast forward eight months later and I've realized I've used the plugin a billion times. Hell, even one of the "big 3" search engines is using it for their maps application. There's one more place I'd like to use it. My employer uses a basic SPAM filtering system which allows me to see emails that were incorrectly (or correctly) caught in SPAM, click a checkbox, and click a "Deliver" button. The problem is that it will catch a bunch of valid emails with very similar subject lines, so I have to hunt down all of the emails, check the email's checkbox, and keep searching. Inefficient to say the least. That's why I've used ElementFilter to find LABEL elements with the given search text and automatically check their checkboxes.

当我第一次编写MooTools ElementFilter时 ，我没有想到太多。 快进八个月后，我意识到我已经使用了十亿次该插件。 地狱，甚至“三大”搜索引擎之一都将其用于他们的地图应用程序。 我想再使用一个地方。 我的雇主使用基本的SPAM过滤系统，该系统使我可以查看被SPAM错误(或正确)捕获的电子邮件，单击复选框，然后单击“传递”按钮。 问题在于它将捕获大量主题行非常相似的有效电子邮件，因此我必须查找所有电子邮件，选中电子邮件的复选框，然后继续搜索。 至少可以说效率低下。 这就是为什么我使用ElementFilter来查找具有给定搜索文本的LABEL元素并自动选中其复选框的原因。

View Demo 观看演示

样本HTML (The Sample HTML)

<ul id="my-list">
<li><input type="checkbox" id="chkADDRESS" /> <label for="chkADDRESS">ADDRESS</label></li>
<li><input type="checkbox" id="chkAPPLET" /> <label for="chkAPPLET">APPLET</label></li>
<li><input type="checkbox" id="chkAREA" /> <label for="chkAREA">AREA</label></li>
<li><input type="checkbox" id="chkA" /> <label for="chkA">A</label></li>
<li><input type="checkbox" id="chkBASE" /> <label for="chkBASE">BASE</label></li>
<li><input type="checkbox" id="chkBASEFONT" /> <label for="chkBASEFONT">BASEFONT</label></li>
<li><input type="checkbox" id="chkBIG" /> <label for="chkBIG">BIG</label></li>
<!-- ... more ... -->
</ul>

I've used a simple list of HTML elements for my example. Having 100 "VIAGRA!!!" labels really wouldn't be helpful.

我在示例中使用了一个简单HTML元素列表。 拥有100个“ VIAGRA !!!” 标签确实没有帮助。

MooTools JavaScript (The MooTools JavaScript)

/* usage */
window.addEvent('domready',function() {
	var myFilter = new ElementFilter('search-term', '#my-list label', {
		trigger: 'keyup',
		cache: true,
		onShow: function(element) {
			$(element.get('for')).checked = true;
		},
		onHide: function(element) {
			$(element.get('for')).checked = false;
		}
	});
});

If you aren't familiar with ElementFilter, be sure to read the original post. The only code specific to my purpose is in the onShow and onHide methods. Awesome!

如果您不熟悉ElementFilter，请务必阅读原始文章 。 专用于我的目的的唯一代码是在onShow和onHide方法中。 太棒了！

View Demo 观看演示

Give it a shot. I'll be bribing my IT team to put something like this in place. It will make managing SPAM much easier!

试一试。 我将贿赂我的IT团队以放置类似的内容。 这将使垃圾邮件管理更加容易！

翻译自: https://davidwalsh.name/checkbox-filter

mootools弹框