fg-appendaround

2018-08-08 admin

fg-appendaround是什么

什么是fg-appendaround,A pattern for responsive markup

fg-appendaround介绍、fg-appendaround使用

<main class=“container”>

<div id=“readme” class=“announce instapaper_body md” data-path=“README.md”>

A pattern for responsive markup

  • © 2012, @scottjehl, Filament Group, Inc. MIT/GPL

How To

  1. Insert potential element containers throughout the DOM
  2. give each container a data-set attribute with a value that matches all other containers’ values
  3. Place your appendAround content in one of the potential containers
  4. Configure your CSS to only display one potential container at a time (and display others depending on @media conditions in your CSS)
  5. Call appendAround() on that element when the DOM is ready, and it’ll keep itself in a visibile container at all times

Sample markup

<!-- potential container for appendAround -->
<div class="foo" data-set="foobarbaz"></div>

<ul>
	<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
	<li>Aliquam tincidunt mauris eu risus.</li>
	<li>Vestibulum auctor dapibus neque.</li>
</ul>

<!-- potential container for appendAround -->
<div class="bar" data-set="foobarbaz"></div>

<ul>
	<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
	<li>Aliquam tincidunt mauris eu risus.</li>
	<li>Vestibulum auctor dapibus neque.</li>
</ul>

<!-- initial container for appendAround -->
<div class="baz" data-set="foobarbaz">
	<p class="sample">Sample appendAround Element</p>
</div>

Sample CSS

/* the sample appendaround element */
.sample {
	padding: 1em;
	background: tan;
}

.baz {
	display: block;
}
.foo,
.bar {
	display: none; 
}

@media (min-width: 30em){
	.bar {
		display: block;
	}
	.foo, .baz {
		display: none; 
	}
}

@media (min-width: 50em){
	div.foo {
		display: block;
	}
	div.bar, div.baz {
		display: none; 
	}
}

Sample JavaScript call

$( ".sample" ).appendAround();

</div>

</main>

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-37572.html

文章标题:fg-appendaround

回到顶部