jQuery UI를 사용하여 대화 상자 표시

15012 단어 HTMLJavaScriptjquery.ui
jQuery UI를 사용하여 수수께끼 놀이를 만들다.텍스트 상자에 정답을 입력하고 보내기 버튼을 누르면 정답 또는 부정확한 대화상자가 표시됩니다.
처음 사용jQuery했으며Javascript 지금까지도 잘 만지지 않아서 발자취를 기록하고 있습니다.
먼저 html 서류를 작성하고 디자인을 정리한다.
quiz.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>ワイのホームページ</title>
    <link rel='stylesheet' href='../static/style.css'>
  </head>

  <body>
    <li><a href='javascript:quiz()'>クイズ</a></li><br>
    <h2 style='text-align: center;'>ITクイズ～基礎編～</h2>
    <div style='display: inline-flex;'>
      <p class="q_sentences">１．OSI参照モデルにおいて、下層に信頼性の高いデータ転送サービスを提供し担保することで、クライアント-サーバー間のデータ通信をエラー無く行うようにする層のことを何というか。</p>
      <form>
        <input type="text" class="entrybox" id='entrybox'>
        <input type="button" class="ans_btn" id="btn_action" value="送信する">
      </form>
    </div>

  </body>

</html>
이런 느낌.

참고로 이 정답은 전송층입니다.여기서부터 입력표에 정답을 입력하고 보내기 버튼을 누르면 정답 대화상자가 표시됩니다.부정확한 답을 입력한 후 처음으로 알림을 표시합니다.두 번째 정답을 입력하면 정답 대화 상자, 두 번째 정답을 입력하면 정답이 표시됩니다.
기본 대화 상자가 지루하기 때문에 jQuery UI를 사용합니다.우선 제목 부분에서 js 라이브러리와 js 파일을 만들어서 가져옵니다.
quiz.html
<head>
<title>ワイのホームページ</title>
    <link rel='stylesheet' href='../static/style.css'>
    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!-- jQuery UI -->
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    <!-- jsファイル -->
    <script type="text/javascript" src='quiz.js'></script>
  </head>
js 파일을 먼저 읽으면 식별할 수 없음jQuery.나는 그곳을 눈치채지 못하고 한 시간 정도 빠져들었다.
다음은 대화상자의 메시지 부분이 되는 글을 html 파일에 추적하여 숨깁니다.
quiz.html
<div id="truedialog" style="display: none">正解です！！</div>
<div id="hintdialog" style='display: none'>不正解。ヒント：第4層</div>
<div id="falsedialog" style="display: none">不正解。 正解は、「トランスポート層」です。</div>
그리고 js 파일 편집하기
quiz.js
$(function(){
  var num = 0; // クリック回数初期化
  $('#btn_action').click(function(){ // ボタンをクリックした時
    $(this).data('click', ++num); // ボタンのクリック回数を数える
    var click =$(this).data('click'); // クリック回数のデータをを入れる
    inputtext = $('#entrybox').val(); // 入力した文字を受け取る
    if (click==1){ // クリックが1回目の時
      if (inputtext=="トランスポート層"){ // 正解の時
        $("#truedialog").dialog({
          modal: true, //モーダル表示, 表示中はほかの操作不可
          title: "答え",
          buttons: { "確認": function() {$(this).dialog("close");}} //閉じます
        });
      } else { // 不正解の時
        $("#hintdialog").dialog({
          modal: true, //モーダル表示, 表示中はほかの操作不可
          title: "ヒント",
          buttons: { "確認": function() {$(this).dialog("close");}} //閉じます
        });
      }
    }
    else if (click>=2){ // クリックが2回目以降の時
      if (inputtext=="トランスポート層"){
        $("#truedialog").dialog({
          modal: true,
          title: "答え",
          buttons: { "確認": function() {$(this).dialog("close");}}
        });
      } else {
        $("#falsedialog").dialog({
          modal: true,
          title: "答え",
          buttons: { "確認": function() {$(this).dialog("close");}}
        });
      }
    }
  });
})
data() HTML 요소에 부여된 데이터 속성을 취득, 설정, 변경 등입니다.dialog()은jQuery에서 대화상자를 표시하는 방법으로, 자변량option은이 문장에서 공식적으로 참고한 일본어 버전으로 상세하게 설명하였다.
대화상자 디스플레이에 페이지의 클릭 등 조작을 하지 않기 위해 모드 디스플레이 기능이 설치되어 있습니다.대화 상자의 정보를 확인한 후 확인 버튼을 눌러 삭제합니다.
하면, 만약, 만약...

두 번째 틀렸을 때.

정답 입력 후

참고 문헌
https://webllica.com/jquery-ui-file-load/
https://webllica.com/jquery-ui-dialog/
https://itsakura.com/jquery-dialog
https://qiita.com/ma_me/items/81d3b6e9aed1d68496e6
http://stacktrace.jp/jquery/ui/widgets/dialog.html
https://iwb.jp/jquery-click-distinction/
m5camera의 이미지 URL 가져오기
Shufoo!embed로 PDF 전단지 표시

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage