[최초 Intro.js] 설치 응용 프로그램 시작 시 자습서
8756 단어 JavaScript
컨디션
Rails 5.2.4.1
Intro.js 소개
Javascript의 프로그램 라이브러리입니다.
프로그램 시작 등을 위한 튜토리얼입니다.
이런 동작을 하다.
공식 홈페이지: https://introjs.com/
절차.
1. 필요한 파일 다운로드 및 구성
2. 튜토리얼을 표시하려는 화면에서 파일 읽기
3. 자습서 번호와 메시지 삽입
4. 튜토리얼을 시작하는 함수 호출
순서대로 보다.
1. 필요한 파일 다운로드 및 구성
https://github.com/usablica/intro.js/tags
여기를 클릭하고 업데이트 날짜의 최신'Tags'의'zip'을 클릭하세요.PC에서 zip 파일을 다운로드합니다.
다운로드한 후 zip 파일을 오른쪽 단추로 누르면'모두 펼치기'가 됩니다.
확장된 폴더에서 "intro.js"및 "introjs.css"를 찾습니다.
"intro.js"는 "/assets/javascripts/intro.js"입니다.
"introjs.css"는 "/assets/stylesheets/introjs.css"입니다.
각 파일을 복사하면 구성이 완료됩니다.
2. 튜토리얼을 표시하려는 화면에서 파일 읽기
표시할 화면의 HTML 파일을 엽니다.
헤드 부분에서 아래의 내용을 보충합니다.
×××.html.erb<head>
...
...
<script src="js/intro.js"></script>
<link rel="stylesheet" href="css/introjs.css" type="text/css">
</head>
※ 이때'src='와'href='내의 경로는 편집할 필요가 없습니다.
파일을 이것으로 읽습니다.
3. 자습서 번호와 메시지 삽입
왼쪽 상단에 나타난 빨간색 원의 숫자와 설명문을 아까와 같은 파일에 기술하다.
×××.html.erb<div data-intro="説明のテキストを入力します" data-step="1">
<div data-intro="説明のテキストを入力します" data-step="2">
4. 튜토리얼을 시작하는 함수 호출
마지막으로 설정한 설명문을 표시합니다.
"body 탭 닫기"전에 다음 내용을 추가합니다.
×××.html.erb...
</div>
<script>
jQuery(function(){
introJs().start();
});
</script>
</body>
</html>
견본
실제 동작을 확인할 수 있는 HTML 파일입니다.<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="js/intro.js"></script>
<link rel="stylesheet" href="css/introjs.css" type="text/css">
</head>
<body>
<div class="icons clearfix">
<div class="box">
<div class="col-xs-2 col-md-1 left icon">
<img src="/assets/log.jpg" data-intro="過去の記録が見れます" data-step="1">
</div>
<div class="col-xs-2 col-md-1 right icon" data-intro="110番通報します" data-step="2">
<img src="/assets/police.jpg">
</div>
</div>
<div class="col-xs-4 col-md-2 center icon">
<img src="/assets/microphone.jpg">
</div>
<div class="box">
<div class="col-xs-2 col-md-1 left icon" data-intro="ボイス「録音を開始します」ON/OFF" data-step="3">
<img src="/assets/sound.jpg">
</div>
<div class="col-xs-2 col-md-1 right icon" data-intro="N国党に通報します" data-step="4">
<img src="/assets/nkoku.png">
</div>
</div>
</div>
<script>
jQuery(function(){
introJs().start();
});
</script>
</body>
</html>
Reference
이 문제에 관하여([최초 Intro.js] 설치 응용 프로그램 시작 시 자습서), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/tuozhen389/items/13b7c7b53d527391bcb3
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Javascript의 프로그램 라이브러리입니다.
프로그램 시작 등을 위한 튜토리얼입니다.
이런 동작을 하다.
공식 홈페이지: https://introjs.com/
절차.
1. 필요한 파일 다운로드 및 구성
2. 튜토리얼을 표시하려는 화면에서 파일 읽기
3. 자습서 번호와 메시지 삽입
4. 튜토리얼을 시작하는 함수 호출
순서대로 보다.
1. 필요한 파일 다운로드 및 구성
https://github.com/usablica/intro.js/tags
여기를 클릭하고 업데이트 날짜의 최신'Tags'의'zip'을 클릭하세요.PC에서 zip 파일을 다운로드합니다.
다운로드한 후 zip 파일을 오른쪽 단추로 누르면'모두 펼치기'가 됩니다.
확장된 폴더에서 "intro.js"및 "introjs.css"를 찾습니다.
"intro.js"는 "/assets/javascripts/intro.js"입니다.
"introjs.css"는 "/assets/stylesheets/introjs.css"입니다.
각 파일을 복사하면 구성이 완료됩니다.
2. 튜토리얼을 표시하려는 화면에서 파일 읽기
표시할 화면의 HTML 파일을 엽니다.
헤드 부분에서 아래의 내용을 보충합니다.
×××.html.erb<head>
...
...
<script src="js/intro.js"></script>
<link rel="stylesheet" href="css/introjs.css" type="text/css">
</head>
※ 이때'src='와'href='내의 경로는 편집할 필요가 없습니다.
파일을 이것으로 읽습니다.
3. 자습서 번호와 메시지 삽입
왼쪽 상단에 나타난 빨간색 원의 숫자와 설명문을 아까와 같은 파일에 기술하다.
×××.html.erb<div data-intro="説明のテキストを入力します" data-step="1">
<div data-intro="説明のテキストを入力します" data-step="2">
4. 튜토리얼을 시작하는 함수 호출
마지막으로 설정한 설명문을 표시합니다.
"body 탭 닫기"전에 다음 내용을 추가합니다.
×××.html.erb...
</div>
<script>
jQuery(function(){
introJs().start();
});
</script>
</body>
</html>
견본
실제 동작을 확인할 수 있는 HTML 파일입니다.<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="js/intro.js"></script>
<link rel="stylesheet" href="css/introjs.css" type="text/css">
</head>
<body>
<div class="icons clearfix">
<div class="box">
<div class="col-xs-2 col-md-1 left icon">
<img src="/assets/log.jpg" data-intro="過去の記録が見れます" data-step="1">
</div>
<div class="col-xs-2 col-md-1 right icon" data-intro="110番通報します" data-step="2">
<img src="/assets/police.jpg">
</div>
</div>
<div class="col-xs-4 col-md-2 center icon">
<img src="/assets/microphone.jpg">
</div>
<div class="box">
<div class="col-xs-2 col-md-1 left icon" data-intro="ボイス「録音を開始します」ON/OFF" data-step="3">
<img src="/assets/sound.jpg">
</div>
<div class="col-xs-2 col-md-1 right icon" data-intro="N国党に通報します" data-step="4">
<img src="/assets/nkoku.png">
</div>
</div>
</div>
<script>
jQuery(function(){
introJs().start();
});
</script>
</body>
</html>
Reference
이 문제에 관하여([최초 Intro.js] 설치 응용 프로그램 시작 시 자습서), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/tuozhen389/items/13b7c7b53d527391bcb3
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
https://github.com/usablica/intro.js/tags
여기를 클릭하고 업데이트 날짜의 최신'Tags'의'zip'을 클릭하세요.PC에서 zip 파일을 다운로드합니다.
다운로드한 후 zip 파일을 오른쪽 단추로 누르면'모두 펼치기'가 됩니다.
확장된 폴더에서 "intro.js"및 "introjs.css"를 찾습니다.
"intro.js"는 "/assets/javascripts/intro.js"입니다.
"introjs.css"는 "/assets/stylesheets/introjs.css"입니다.
각 파일을 복사하면 구성이 완료됩니다.
2. 튜토리얼을 표시하려는 화면에서 파일 읽기
표시할 화면의 HTML 파일을 엽니다.
헤드 부분에서 아래의 내용을 보충합니다.
×××.html.erb<head>
...
...
<script src="js/intro.js"></script>
<link rel="stylesheet" href="css/introjs.css" type="text/css">
</head>
※ 이때'src='와'href='내의 경로는 편집할 필요가 없습니다.
파일을 이것으로 읽습니다.
3. 자습서 번호와 메시지 삽입
왼쪽 상단에 나타난 빨간색 원의 숫자와 설명문을 아까와 같은 파일에 기술하다.
×××.html.erb<div data-intro="説明のテキストを入力します" data-step="1">
<div data-intro="説明のテキストを入力します" data-step="2">
4. 튜토리얼을 시작하는 함수 호출
마지막으로 설정한 설명문을 표시합니다.
"body 탭 닫기"전에 다음 내용을 추가합니다.
×××.html.erb...
</div>
<script>
jQuery(function(){
introJs().start();
});
</script>
</body>
</html>
견본
실제 동작을 확인할 수 있는 HTML 파일입니다.<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="js/intro.js"></script>
<link rel="stylesheet" href="css/introjs.css" type="text/css">
</head>
<body>
<div class="icons clearfix">
<div class="box">
<div class="col-xs-2 col-md-1 left icon">
<img src="/assets/log.jpg" data-intro="過去の記録が見れます" data-step="1">
</div>
<div class="col-xs-2 col-md-1 right icon" data-intro="110番通報します" data-step="2">
<img src="/assets/police.jpg">
</div>
</div>
<div class="col-xs-4 col-md-2 center icon">
<img src="/assets/microphone.jpg">
</div>
<div class="box">
<div class="col-xs-2 col-md-1 left icon" data-intro="ボイス「録音を開始します」ON/OFF" data-step="3">
<img src="/assets/sound.jpg">
</div>
<div class="col-xs-2 col-md-1 right icon" data-intro="N国党に通報します" data-step="4">
<img src="/assets/nkoku.png">
</div>
</div>
</div>
<script>
jQuery(function(){
introJs().start();
});
</script>
</body>
</html>
Reference
이 문제에 관하여([최초 Intro.js] 설치 응용 프로그램 시작 시 자습서), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/tuozhen389/items/13b7c7b53d527391bcb3
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<head>
...
...
<script src="js/intro.js"></script>
<link rel="stylesheet" href="css/introjs.css" type="text/css">
</head>
왼쪽 상단에 나타난 빨간색 원의 숫자와 설명문을 아까와 같은 파일에 기술하다.
×××.html.erb
<div data-intro="説明のテキストを入力します" data-step="1">
<div data-intro="説明のテキストを入力します" data-step="2">
4. 튜토리얼을 시작하는 함수 호출
마지막으로 설정한 설명문을 표시합니다.
"body 탭 닫기"전에 다음 내용을 추가합니다.
×××.html.erb...
</div>
<script>
jQuery(function(){
introJs().start();
});
</script>
</body>
</html>
견본
실제 동작을 확인할 수 있는 HTML 파일입니다.<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="js/intro.js"></script>
<link rel="stylesheet" href="css/introjs.css" type="text/css">
</head>
<body>
<div class="icons clearfix">
<div class="box">
<div class="col-xs-2 col-md-1 left icon">
<img src="/assets/log.jpg" data-intro="過去の記録が見れます" data-step="1">
</div>
<div class="col-xs-2 col-md-1 right icon" data-intro="110番通報します" data-step="2">
<img src="/assets/police.jpg">
</div>
</div>
<div class="col-xs-4 col-md-2 center icon">
<img src="/assets/microphone.jpg">
</div>
<div class="box">
<div class="col-xs-2 col-md-1 left icon" data-intro="ボイス「録音を開始します」ON/OFF" data-step="3">
<img src="/assets/sound.jpg">
</div>
<div class="col-xs-2 col-md-1 right icon" data-intro="N国党に通報します" data-step="4">
<img src="/assets/nkoku.png">
</div>
</div>
</div>
<script>
jQuery(function(){
introJs().start();
});
</script>
</body>
</html>
Reference
이 문제에 관하여([최초 Intro.js] 설치 응용 프로그램 시작 시 자습서), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/tuozhen389/items/13b7c7b53d527391bcb3
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
...
</div>
<script>
jQuery(function(){
introJs().start();
});
</script>
</body>
</html>
실제 동작을 확인할 수 있는 HTML 파일입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="js/intro.js"></script>
<link rel="stylesheet" href="css/introjs.css" type="text/css">
</head>
<body>
<div class="icons clearfix">
<div class="box">
<div class="col-xs-2 col-md-1 left icon">
<img src="/assets/log.jpg" data-intro="過去の記録が見れます" data-step="1">
</div>
<div class="col-xs-2 col-md-1 right icon" data-intro="110番通報します" data-step="2">
<img src="/assets/police.jpg">
</div>
</div>
<div class="col-xs-4 col-md-2 center icon">
<img src="/assets/microphone.jpg">
</div>
<div class="box">
<div class="col-xs-2 col-md-1 left icon" data-intro="ボイス「録音を開始します」ON/OFF" data-step="3">
<img src="/assets/sound.jpg">
</div>
<div class="col-xs-2 col-md-1 right icon" data-intro="N国党に通報します" data-step="4">
<img src="/assets/nkoku.png">
</div>
</div>
</div>
<script>
jQuery(function(){
introJs().start();
});
</script>
</body>
</html>
Reference
이 문제에 관하여([최초 Intro.js] 설치 응용 프로그램 시작 시 자습서), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/tuozhen389/items/13b7c7b53d527391bcb3텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
