>  기사  >  웹 프론트엔드  >  content_javascript 기술을 자동으로 채우는 Fixie.js 플러그인

content_javascript 기술을 자동으로 채우는 Fixie.js 플러그인

WBOY
WBOY원래의
2016-05-16 17:52:21820검색

Fixie.js는 HTML 문서의 내용을 자동으로 채우는 오픈 소스 도구입니다.
공식 웹사이트 주소: http://fixiejs.com/
Fixie.js 다운로드 주소fixie_jb51 .rar

Fixie를 사용하는 이유는 무엇인가요?
웹사이트를 디자인할 때 최종적으로 채워지는 콘텐츠를 결정할 수 없기 때문에 페이지의 표시 효과를 미리보기 위해 페이지에 lorem ipsum(Lorem ipsum에 대한 정보)을 추가해야 하는 경우가 많습니다.
문제는 지루한 콘텐츠를 너무 많이 추가하면 HTML 문서가 부풀어 오르고 복사-붙여넣기와 수동 편집의 순환에 빠지게 된다는 것입니다.
Fixie.js는 이 문제를 해결하기 위해 탄생했습니다. 의미론적 HTML5 태그를 구문 분석함으로써 Fixie는 태그 요소 유형과 일치하는 콘텐츠를 자동으로 채워 HTML 문서를 간결하고 효율적으로 만들 수 있습니다.

사용 지침:
1단계: 문서에 fixie.js 추가
본문 끝 태그 앞에



2단계: 여기에는 두 가지 방법이 있습니다.

1 콘텐츠를 채워야 하는 곳에 `class="fixie"`를 설정하세요.
예를 들어 p 태그의 내용을 먼저 채우면 `

`를 직접 설정하면 끝입니다.
2. `fixie.init`을 통해 내용 채우기
CSS 선택기를 통해 채울 요소를 선택하고

fixie.init(( [".array", "#of > .selectors", ".that", ".should", "#be > .populated", ".with", ".lorem"])
또는
fixie.init(".string , #of > .comma, .separated, .selectors, .that, .should, #be > .populated, .with, .lorem")
명령을 사용하면
을 자동으로 채울 수 있습니다.

fixie.init(':empty')
를 실행하면 문서의 모든 빈 요소를 채울 수 있습니다.

지원 요소
Fixie는 태그에 따라 채워집니다. 유형을 이해해야 할 몇 가지 범주가 있습니다.
- `

` - `h2 - h6`과 동일하게 몇 단어의 텍스트를 추가합니다.
- `

` - 텍스트 단락 채우기
- `
` - 여러 문단 채우기 텍스트(여러 문단)
- `
` - 위와 동일
- `< ;/img>` - 표시된 크기로 사진을 입력하세요
- `` - 임의의 링크를 입력하세요(광고로 의심되나요?)


기본 이미지 패딩 수정
`fixie.setImagePlaceholder(source)`를 실행하세요.
예를 들어 Flickr에서 이미지를 다운로드하여 채우려면
fixie.setImagePlaceholder('http ://flickholdr.com/${w}/${h}/canon').init();
컨테이너에 class="fixie" 추가
모두 컨테이너 내부의 빈 하위 요소(자손 및 자손 참고)가 영향을 받습니다.
아래 지침 참조

코드 복사 코드는 다음과 같습니다.

Hello




Fixie는 P 태그에 "Hello" 텍스트를 유지하지만 a 태그의 내용을 채웁니다.

### Fixie for Rails
[fixie-rails](https://github.com/csexton/fixie-rails)

패딩 내용 강조


.fixie{ border:4px를 추가할 수 있습니다. 단색 빨간색 }
을 CSS로 변환하여 패딩 콘텐츠와 실제 콘텐츠를 구분합니다.

## 승인
말도 안되는 소리, 더 이상 번역이 필요하지 않습니다.

설명 예:


코드 복사 코드는 다음과 같습니다.



Fixie.js 샘플<br><br><style> ; <br>본체{ <BR>글꼴 계열: Helvetica, arial, sans-serif <BR>폭:800px <BR>여백:150px 자동; 400px; <BR>높이:300px; <BR>float:right; <BR>여백: 20px; <BR>.fixie{ color: red;} <BR></style> 🎜></head> <BR><body> <BR><article> <BR><h1 class="fixie"></h1><--제목은 여기에 입력됩니다. -- > <BR><p> <a class="fixie"></a>에서 확인하세요.<!--연결은 여기에 채워지지만 외부 P 태그는 채워지지 않습니다. 비어 있지 않기 때문에 비어 있어야 합니다.-> <BR>소스를 확인하는 것을 잊지 마세요.</p><br><section class="fixie"<!-- 섹션의 하위 요소가 채워집니다. > <br><img/> <BR><ul><BR>< p></p> <BR> <BR></section> <BR><h2 class="fixie"</h2> section class="fixie">< /section> <BR></article> <BR><BR><script type="text/javascript" src="fixie.js"></script> ; <BR><script> <BR>// 기본 이미지 소스를 Flickr <BR>fixie.setImagePlaceholder('http://flickholdr.com/${w}/${h}/fixie').init로 변경합니다. () <BR></script> <BR></html> <BR>디스플레이 효과<BR> <br><br><BR><BR>작가: 시샨<BR></style>
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사:Javascript 마우스 및 휠 events_javascript 기술에 대한 간략한 토론다음 기사:Javascript 마우스 및 휠 events_javascript 기술에 대한 간략한 토론

관련 기사

더보기