mootools 选择器_选择下拉菜单，MooTools和CSS打印

最新推荐文章于 2020-07-29 09:14:01 发布

culuo8053

最新推荐文章于 2020-07-29 09:14:01 发布

阅读量185

点赞数

文章标签：列表 css python javascript html ViewUI

原文链接：https://davidwalsh.name/print-select-options

版权

mootools 选择器

I know I've harped on this over and over again but it's important to enhance pages for print. You can do some things using simple CSS but today's post features MooTools and jQuery. We'll be taking the options of a SELECT element and generating a list in case the user prints the page.

我知道我已经一遍又一遍地强调了这一点，但是增强打印页面很重要。您可以使用简单CSS来做一些事情，但是今天的帖子具有MooTools和jQuery。我们将采用SELECT元素的选项并生成一个列表，以防用户打印页面。

View Demo 观看演示

XHTML (The XHTML)


<label for="websites">Which is your favorite website?</label>
<select name="websites" id="websites">
	<option value="davidwalsh.name" selected="selected">David Walsh Blog</option>
	<option value="scriptandstyle.com">Script & Style</option>
	<option value="csstricks.com">CSS Tricks</option>
	<option value="mootools.net">MooTools</option>
</select>

Just a normal select list, nothing special.

只是一个普通的选择列表，没什么特别的。

CSS (The CSS)


@media screen { 
	.print-select   { display:none; }
}
@media print { 
	.print-select   { padding:10px; /* width:40%; */ border:1px solid #ccc; }
}

Simple -- show the generated options DIV only during print.

简单-仅在打印过程中显示生成的选项DIV。

MooTools JavaScript (The MooTools JavaScript)


(function($) {
	window.addEvent('domready',function() {
		$$('select').each(function(select) {
			//get options
			var options = select.getElements('option');
			//create div
			var div = new Element('div',{
				'class': 'print-select',
				html: '<p><strong>Options</strong></p>'/*,
				style: 'width:' + (select.getSize().x - 20) + 'px' //subtracting padding */
			}).inject(select,'after');
			//create list
			var list = new Element('ul'), items = '';
			options.each(function(option) {
				items += '<li>' + option.get('text') + (option.selected ? ' <em>(selected)</em>' : '') + '</li>';
			});
			list.set('html',items);
			//list into div
			list.inject(div);
		});
	});
})(document.id);

The script grabs every SELECT element in the page and generates a list of the SELECT's options -- it even notes which element(s) are selected!

该脚本将抓取页面中的每个SELECT元素，并生成SELECT选项的列表-甚至会记录选择了哪些元素！