쉽게 로딩 구현할 수 있는 fakeLoader.js가 매우 좋았다 (demo 유)
16815 단어 fakeLoader자바스크립트jQuery로딩우이
로딩 무엇을 사용하고 있습니까?
작년 말부터 웹 어플리케이션을 작성하고 있어, 로데잉이 필요하게 되어, JQuery로 구현하고 있었습니다만 별로 제대로 하지 않고, 고민하고 있었던 것 만큼 fakeLoader.js라고 하는 라이브러리가 매우 좋았으므로 공유하고 싶다고 생각합니다.
fakeLoader.js 개요
다음 js 및 css 파일을 설치하고 로드하고 구현합니다.
설치
fakeLoader.js 공식 페이지
fakeLoader.min.js 설치
fakeLoader.js 구현 데모
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>fakeloade_demo</title>
<link rel="stylesheet" href="assets/css/main.css">
<link rel="stylesheet" href="assets/css/fakeLoader.css">
<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script src="assets/fakeloader/fakeLoader.min.js"></script>
<script src="assets/js/main.js"></script>
</head>
<body>
<div id='fakeloader' class="fakeloader"></div>
<div id='fakeloader_1' class="fakeloader"></div>
<div id='fakeloader_2' class="fakeloader"></div>
<div id='fakeloader_3' class="fakeloader"></div>
<div id='fakeloader_4' class="fakeloader"></div>
<div id='fakeloader_5' class="fakeloader"></div>
<div id='fakeloader_6' class="fakeloader"></div>
<section class="section">
<div class="section__block section__block--scoped">
<h3>fakeloade_demo</h3>
<fieldset class="fieldset fieldset--demo">
<button id="fake_1" class="fieldset__button button button--small">fake_1</button>
<button id="fake_2" class="fieldset__button button button--small">fake_2</button>
<button id="fake_3" class="fieldset__button button button--small">fake_3</button>
<button id="fake_4" class="fieldset__button button button--small">fake_4</button>
<button id="fake_5" class="fieldset__button button button--small">fake_5</button>
<button id="fake_6" class="fieldset__button button button--small">fake_6</button>
</fieldset>
</div>
</section>
</body>
</html>
main.js
$(function(){
//ローディング処理
$(document).ready(function(){
$("#fakeloader").fakeLoader({
timeToHide: 1200,
spinner: "spinner3",
bgColor: "#1abc9c"
});
});
$('#fake_1').on('click',function(){
console.log('fake_1 PUSH!!');
$('#fakeloader_1').fakeLoader({
timeToHide:1200,
bgColor:"#9b59b6",
spinner:"spinner7"
});
});
$('#fake_2').click(function(){
console.log('fake_2 PUSH!!');
$('#fakeloader_2').fakeLoader({
timeToHide:1200,
bgColor:"#e74c3c",
spinner:"spinner2"
});
});
$('#fake_3').click(function(){
console.log('fake_3 PUSH!!');
$('#fakeloader_3').fakeLoader({
timeToHide:1200,
bgColor:"#3498db",
spinner:"spinner4"
});
});
$('#fake_4').click(function(){
console.log('fake_4 PUSH!!');
$('#fakeloader_4').fakeLoader({
timeToHide:1200,
bgColor:"#34495e",
spinner:"spinner3"
});
});
$('#fake_5').click(function(){
console.log('fake_5 PUSH!!');
$('#fakeloader_5').fakeLoader({
timeToHide:1200,
bgColor:"#e67e22",
spinner:"spinner5"
});
});
$('#fake_6').click(function(){
console.log('fake_6 PUSH!!');
$('#fakeloader_6').fakeLoader({
timeToHide:1200,
bgColor:"#1abc9c",
spinner:"spinner6"
});
});
});
구현도 매우 간단하고 풍부한 종류 중에서 선택할 수 있습니다.
데모 페이지를 사용해보십시오. 사용해보십시오.
데모 페이지 & Github
데모 페이시
ㅇㅇㅜㅜㅜㅜㅜ 오 rg /하지만 / 푹신 아아 r
Github(소스)
htps : // 기주 b. 코 m / 후지 야마 유타 / 후 케 케 아데 r_
Reference
이 문제에 관하여(쉽게 로딩 구현할 수 있는 fakeLoader.js가 매우 좋았다 (demo 유)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/Yuta_Fujiwara/items/b24430a3d584d9589c44텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
