노숙자 확인 HTML. 작업 경고, 프롬프트 및 확인. Javascript의 사용자 상호 작용. jQuery를 사용하여 확인 대화 상자 바꾸기
확인() 메소드
verify() 메서드는 Alert() 메서드에서 생성된 경고 창과 유사하지만 확인 및 취소라는 두 개의 버튼이 포함된 확인 창을 표시합니다. 목록 11.3에서는 확인 창을 만드는 방법을 보여 주지만 이 스크립트는 확인 버튼과 취소 버튼을 구별하지 않습니다. 아무 버튼이나 누르면 창이 닫힙니다(그림 11.5).
쌀. 11.5. 확인 작업
목록 11.3. 확인 작업
확인 작업
verify("본인 확인입니다.");
이 장을 읽은 후에는 이 방법을 사용하여 확인 및 취소 버튼을 클릭할 때 스크립트가 다르게 반응하도록 만드는 방법을 배우게 됩니다.
Andrey Vladimirovich Popov가 쓴 Windows 2000/XP용 Windows Script Host 책에서 발췌Run 메서드 intWindowStyle 매개 변수는 시작할 응용 프로그램의 창 유형을 설정합니다(표 1.13). 표 1.13. 창 유형(intWindowStyle) 매개 변수 Visual Basic 상수 설명 0 vbHide 현재 창을 숨기고 다른 창을 활성화합니다(표시하고 포커스를 제공) 1 vbNormalFocus 활성화 및
Fulton Hal의 프로그래밍 언어 [언어 이데올로기, 응용 이론 및 실제] 책에서 발췌삭제 방법 force 매개변수가 false이거나 지정되지 않은 경우 삭제 방법을 사용하면 읽기 전용 속성이 있는 디렉터리를 삭제할 수 없습니다. force를 true로 설정하면 해당 디렉터리가 즉시 삭제됩니다.Delete 메서드를 사용할 때 지정된 디렉터리가 삭제되었는지 여부는 중요하지 않습니다.
Klimov Alexander P.의 .NET Compact Framework에서 PDA 및 스마트폰 프로그래밍 책에서 발췌이동 방법 필수 대상 매개 변수는 이동할 디렉터리를 지정합니다. 디렉토리 이름에는 와일드카드가 허용되지 않습니다. 참고 Move 메서드 대신 MoveFolder 개체 메서드를 사용할 수 있습니다.
Linux 및 UNIX: 쉘 프로그래밍 책에서 발췌. 개발자 가이드. 작성자: 테인슬리 데이비드복사 방법 필수 대상 매개변수는 복사할 파일을 지정합니다. 파일 이름에는 와일드카드를 사용할 수 없습니다. 덮어쓰기 매개변수는 대상(overwrite=true)이라는 기존 파일을 덮어쓸지 여부를 결정하는 부울 변수입니다.
RuBoard 팀의 PascalABC.NET 언어 설명 책에서삭제 방법 force 매개변수가 false이거나 지정되지 않은 경우 삭제 방법을 사용하면 읽기 전용 속성이 있는 파일을 삭제할 수 없습니다. force를 true로 설정하면 해당 파일을 즉시 삭제할 수 있습니다. 참고Delete 메서드 대신 DeleteFile 메서드를 사용할 수 있습니다.
작가의 책에서8.3.1. 주입 방법 주입 방법은 Smalltalk 언어에서 Ruby에 도입되었습니다(Ruby 1.8에서 처음 등장했습니다). 처음에는 이해하기 쉽지 않지만 그 동작은 흥미롭습니다. 이는 우리가 종종 목록을 돌아다니며 그 과정에서 일부 결과를 "축적"하고 싶어한다는 사실을 반영합니다. 물론 가장
작가의 책에서8.3.3. 분할 방법 "세상에는 두 가지 유형의 사람이 있습니다. 사람을 여러 유형으로 나누는 사람과 그렇지 않은 사람." partition 방법은 사람을 참조하지 않지만(Ruby에서는 객체로 표현할 수 있지만) 집합을 두 부분으로 나눕니다.partition이 호출될 때 블록이 주어지면 평가됩니다.
작가의 책에서11.1.10. 초기화_복사 메소드 dup 또는 clone 메소드를 사용하여 객체를 복사하는 경우 생성자가 호출되지 않습니다. 모든 상태 정보가 복사되는데, 이 동작이 필요하지 않다면 어떻게 될까요? 예를 살펴보겠습니다: class Document attr_accessor:title, :text attr_reader:timestamp def 초기화(title, text) @title, @text = title, text @timestamp =
작가의 책에서11.1.11. 할당 메소드 드물지만 생성자를 호출하지 않고(초기화 메소드를 우회하여) 객체를 생성해야 하는 경우가 있습니다. 예를 들어, 객체의 상태는 전적으로 해당 액세스 방법에 의해 결정될 수 있습니다. 그런 다음 새 메서드(초기화를 호출함)를 호출할 필요가 없습니다.
작가의 책에서11.3.2. const_get 메소드 const_get 메소드는 자신이 속한 모듈이나 클래스에서 주어진 이름을 가진 상수 값을 가져옵니다.str = "PI"Math.const_get(str) # 값은 Math::PI입니다. 때때로 우아하지 않은 것으로 간주되는 eval 메소드를 호출하지 마십시오. 이 접근 방식은 관점에서 볼 때 더 저렴합니다.
작가의 책에서11.3.5. def 키워드를 제외하고, 클래스나 객체에 메소드를 추가하는 유일한 일반적인 방법은 Define_method 메소드를 사용하는 것인데, 이 메소드를 사용하면 런타임에 이 작업을 수행할 수 있습니다.물론 Ruby에서는 거의 모든 일이 런타임. 만약에
작가의 책에서11.3.6. const_missing 메소드 const_missing 메소드는 method_missing 메소드와 유사합니다. 알 수 없는 상수에 액세스하려고 하면 이 메서드가 호출됩니다. 물론 정의된 경우입니다. 매개변수로 상수를 참조하는 기호가 전달됩니다.
작가의 책에서Lockbits 메서드 .NET Compact Framework 2.0에는 이미지 픽셀 배열을 조작하는 데 사용할 수 있는 LockBits 메서드에 대한 제한된 지원이 도입되었습니다. 이 메서드의 ImageLockMode 열거형은 ReadWrite, ReadOnly 및 WriteOnly 값을 허용합니다. PixelFormat 열거형은 다음을 지원합니다.
저자의 책에서 저자의 책에서Method Zip 메소드 설명 T. function Zip(두 번째: TSecond의 시퀀스; resultSelector: (T,TSecond)->Res): Res의 시퀀스; 각 시퀀스의 한 요소를 사용하여 지정된 함수를 사용하여 두 시퀀스를 연결합니다.
작가의 책에서메소드 포함 메소드 설명 T의 시퀀스 시퀀스에 대한 메소드가 제공됩니다. function Contains(value: T): boolean; 기본 동등 비교기를 사용하여 지정된 요소가 시퀀스에 포함되어 있는지 여부를 확인합니다. 함수 포함(값: T; 비교자: IEqualityComparer): 부울;
이 글에서는 세 가지 흥미로운 메소드, 즉 Alert(), verify() 및 Prompt() 메소드를 배우게 됩니다. 그들은 모두 사용자와 상호 작용하도록 설계되었습니다.
이 세 가지 메서드는 모두 창 개체(브라우저 창)에 속합니다. 그리고 다음과 같이 호출할 수 있습니다: window.method_name(); 그러나 JavaScript를 사용하면 이 창 개체를 지정하지 않고 단순히 메서드 이름을 작성할 수 있습니다.
Alert() 메소드부터 시작하겠습니다. 이 메소드는 사용자의 브라우저 창에 지정된 메시지를 표시합니다. 이 창은 전체 페이지 위에 나타나며 사용자가 확인 버튼을 클릭할 때까지 닫히지 않습니다.
설명을 위해 Alert() 메서드를 사용하여 메시지를 표시해 보겠습니다.
Var today_is = "월요일"; Alert("오늘" + today_is);
메서드 내에서 html 태그 없이 어떤 문자열이든 지정할 수 있습니다. 여기에서는 처리되지 않고 있는 그대로 표시됩니다.
표시하려는 줄이 매우 길고 새 줄을 만들고 싶다면 여기에 html 태그가 있습니다.
작동하지 않습니다. 여기서는 "\n" 문자를 사용해야 합니다.
Alert("루오오오오옹\nStringgggggg");
이 방법은 코드에서 오류를 찾는 데 자주 사용됩니다.
코드 처리 과정은 위에서 아래로 진행되므로, 오류를 잡기 위해서는 오류가 있을 것으로 예상되는 영역에 간단히 Alert() 메서드를 작성하면 됩니다. 그리고 경고()가 작동하면 작성된 줄까지 오류가 없습니다.
다음으로 한 줄 이상 아래로 이동해야 합니다. 변경 사항을 저장하고, 브라우저에서 페이지를 다시 새로 고치고, 경고()가 작동하는지 확인하면 해당 행까지 오류가 없습니다. 그렇지 않고 작동하지 않으면 오류는 다음 위치에 있습니다. 현재 위치한 줄 위의 줄입니다. 이것이 코드에서 오류를 찾는 방법입니다.
확인() 메소드이 방법은 질문에 대한 답변을 확인하는 데 사용됩니다. 답변 옵션은 예(확인) 또는 아니오(취소)의 두 가지뿐입니다. 사용자가 예라고 대답하면 메서드는 true를 반환하고, 그렇지 않으면 false를 반환합니다.
예를 들어, verify() 메서드를 사용하여 사용자에게 "페이지를 떠나시겠습니까?"라고 묻는 창을 표시합니다. 사용자가 '예'라고 대답하면, Alert() 메소드를 통해 "사용자가 페이지를 떠나고 싶어합니다"라는 메시지를 표시하고, 그렇지 않으면 "사용자가 페이지를 떠나고 싶지 않습니다"라는 또 다른 메시지를 표시합니다.
Var user_answer = verify("정말로 페이지에서 나가시겠습니까?"); if(user_answer) Alert("사용자가 페이지에서 나가기를 원합니다."); else Alert("사용자는 \n페이지를 떠나고 싶어하지 않습니다.");
이것이 verify() 메소드의 작동 방식입니다. 그것은 다른 경우에 사용될 수 있습니다. 예를 들어, 사이트에서 무언가를 제거하기 전에 사용자에게 자신의 행동에 확신이 있는지 물어보는 것이 일반적입니다. 또는 양식을 보내기 전에 사용자에게 "모든 항목을 올바르게 작성하셨나요?"라고 물어볼 수도 있습니다. 사용자가 '예'라고 대답하면 양식이 전송되고, 그렇지 않으면 전송되지 않습니다.
프롬프트() 메서드우리가 배울 마지막 방법은 프롬프트() 방법입니다. 이 방법은 다른 두 가지 방법보다 덜 자주 사용됩니다. 이를 통해 사용자로부터 일부 정보를 받아 텍스트 필드에 입력할 수 있습니다.
결과적으로, Prompt() 메서드는 사용자가 확인 버튼을 클릭한 경우 입력한 문자열을 반환하고, 사용자가 취소 버튼을 클릭한 경우 null을 반환합니다.
매개변수로서, 즉 이 메소드의 괄호 안에 사용자가 입력해야 할 정보가 무엇인지 알 수 있도록 표시 줄이나 질문을 작성할 수 있습니다.
예를 들어, 사용자에게 "이름이 무엇입니까?"라는 질문에 대답하도록 요청해 보겠습니다. 사용자가 입력한 이름은 Alert() 메소드를 사용하여 화면에 표시됩니다.
Var name = 프롬프트("당신의 이름은 무엇입니까?"); Alert("당신의 이름은 " + 이름 입니다);
브라우저에서 페이지를 저장하고 엽니다.
물론, 프롬프트() 메소드에서 텍스트 필드에 어떤 정보라도 입력할 수 있습니다. 이 정보는 숫자나 기타 특수 문자의 경우에도 문자열로 반환됩니다.
예를 들어, 사용자에게 두 개의 숫자를 입력한 다음 이를 곱하라고 요청해 보겠습니다. 숫자를 곱하는 일종의 계산기가 있을 것입니다.
Var x = 프롬프트("첫 번째 숫자를 입력하세요:"); var y = 프롬프트("두 번째 숫자를 입력하세요:"); //입력된 숫자를 문자열형에서 숫자형으로 변환 x = Number(x); y = 숫자(y); document.write(x + " * " + y + " = " + (x * y));
입력된 숫자는 문자열이므로 올바른 곱셈 결과를 얻으려면 이러한 숫자를 문자열 유형에서 일반 숫자로 변환하는 Number() 함수를 통해 전달해야 합니다.
글쎄, 그게 다야. 이제 경고(), 확인() 및 프롬프트()라는 세 가지 메서드를 더 알게 되었습니다. 실제로 안전하게 사용할 수 있습니다.
기본 브라우저 설정을 아름답게 만들고 관리하는 방법에 대한 일련의 튜토리얼을 계속하면서 오늘은 사용하기 쉬운 jQuery 플러그인을 사용하여 브라우저 간 확인 대화 상자를 개발하도록 초대합니다. 클릭 후 수행될 텍스트, 버튼 및 작업을 선택할 수 있습니다.
HTML 코드
처음에는 확인 창에 초점을 맞춰야 하지만 먼저 사용할 페이지에 대해 조금 설명하겠습니다. 플러그인의 소스 코드를 보려면 이 단계를 건너뛰고 기사의 jQuery 부분까지 아래로 스크롤하세요.
Index.php
CSS3로 jQuery 확인 대화 상자 교체 | 튜토리얼진 데모
문서 상단에는 의 Cuprum 글꼴, jQuery.confirm.css(대화 상자의 계단식 스타일 시트) 및 페이지의 계단식 스타일 시트인 styles.css가 포함되어 있습니다.
문서 본문 맨 아래에는 jQuery 라이브러리인 jquery.confirm.js(기본 플러그인 파일)와 버튼 클릭 이벤트를 수신하고 플러그인을 실행하는 script.js가 포함되어 있습니다. 오늘 튜토리얼의 마지막 단계에서는 이 두 파일에 대해 설명하겠습니다.
웹 사이트에 확인 창을 포함하려면 다운로드한 아카이브에서 jquery.confirm 폴더를 복사하고 코드 헤드에 jquery.confirm.css를 포함하고 코드 앞에 jquery.confirm.js 파일을 포함해야 합니다. 문서 본문 + jQuery 라이브러리를 끝내는 태그입니다.
대화 상자 자체는 HTML 코드 두 줄에 지나지 않습니다. 아래에서는 대화 상자를 표시하기 위해 플러그인에 의해 삽입된 코드를 볼 수 있습니다.
대화 상자 코드 예
코드는 문서 본문에 추가됩니다. confirmOverlay는 페이지의 나머지 부분 위에 표시되어 대화 상자가 표시되는 동안 페이지 요소와의 상호 작용을 방지합니다. h1, p 및 div 확인 버튼은 플러그인 설정에 지정된 구조에 따라 배열됩니다. 이 기사의 뒷부분에서 이에 대해 자세히 알아볼 것입니다.
CSS 코드
대화 상자의 디자인은 jquery.confirm.css 파일에 포함되어 있습니다. 이렇게 하면 완성된 프로젝트에 통합하기가 훨씬 더 쉬워지며 스타일이 페이지에 이미 있는 스타일과 섞이지 않도록 스타일이 지정됩니다.
jquery.confirm.css
#confirm오버레이(
너비:100%;
높이:100%;
위치:고정;
상단:0;
왼쪽:0;
배경:url("ie.png");
배경: -moz-linear-gradient(rgba(11,11,11,0.1), rgba(11,11,11,0.6)) 반복-x rgba(11,11,11,0.2);
배경:-웹킷-그라디언트(선형, 0% 0%, 0% 100%, from(rgba(11,11,11,0.1)), to(rgba(11,11,11,0.6))) 반복-x rgba(11,11,11,0.2);
Z-색인:100000;
}
#확인상자(
background:url("body_bg.jpg") 반복-x 왼쪽 하단 #e5e5e5;
너비:460px;
위치:고정;
왼쪽:50%;
상단:50%;
여백:-130px 0 0 -230px;
테두리: 1px 솔리드 rgba(33, 33, 33, 0.6);
Moz-box-shadow: 0 0 2px rgba(255, 255, 255, 0.6) 삽입;
-webkit-box-shadow: 0 0 2px rgba(255, 255, 255, 0.6) 삽입;
상자 그림자: 0 0 2px rgba(255, 255, 255, 0.6) 삽입;
}
#confirmBox h1,
#confirmBox p(
글꼴:26px/1 "Cuprum", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
background:url("header_bg.jpg") 반복-x 왼쪽 하단 #f5f5f5;
패딩: 18px 25px;
텍스트 그림자: 1px 1px 0 rgba(255, 255, 255, 0.6);
색상:#666;
}
#confirmBox h1(
글자간격:0.3px;
색상:#888;
}
#confirmBox p(
배경:없음;
글꼴 크기:16px;
줄 높이:1.4;
패딩 상단: 35px;
}
#confirm버튼(
패딩:15px 0 25px;
텍스트 정렬:가운데;
}
#confirmBox.버튼(
디스플레이:인라인 블록;
색상: 흰색;
위치:상대적;
높이: 33px;
글꼴: 17px/33px "Cuprum", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
여백-오른쪽: 15px;
패딩: 0 35px 0 40px;
텍스트 장식:없음;
테두리:없음;
}
#confirmBox .button:마지막 자식(여백 오른쪽:0;)
#confirmBox .버튼 범위(
위치:절대;
상단:0;
오른쪽:-5px;
배경:url("buttons.png") 반복 없음;
너비:5px;
높이:33px
}
#confirmBox .blue(배경 위치:왼쪽 상단;텍스트 그림자:1px 1px 0 #5889a2;)
#confirmBox .blue 범위(배경 위치:-195px 0;)
#confirmBox .blue:hover(배경 위치:왼쪽 하단;)
#confirmBox .blue:hover 범위(배경 위치:-195px 하단;)
#confirmBox .gray(배경 위치:-200px 상단;텍스트 그림자:1px 1px 0 #707070;)
#confirmBox .gray 범위(배경 위치:-395px 0;)
#confirmBox .gray:hover( 배경 위치:-200px 하단;)
#confirmBox .gray:hover 범위(배경 위치:-395px 하단;)
이는 새로운 CSS3를 활용합니다. #confirmOverlay 정의에서는 투명한 PNG 형식으로 제공되는 폴백과 함께 CSS3 그라데이션(Firefox, Safari 및 Chrome에서만 작동)을 사용합니다.
다음으로 중앙에 위치한 #confirmBox 디스플레이에 내부 상자 그림자(Photoshop의 내부 광선과 유사한 것)를 추가했습니다. 또한 Google의 글꼴 디렉토리에서 추가된 Cuprum 글꼴을 사용했습니다.
텍스트 그림자와 함께 버튼 스타일을 볼 수 있습니다. 슬라이딩 도어를 사용하여 구현됩니다. 현재 파란색과 회색의 두 가지 디자인 유형이 있습니다. 코드에 새 선언을 추가하여 새 버튼 색상을 추가할 수 있습니다.
jQuery
플러그인의 소스 코드로 넘어가기 전에 먼저 좀 더 자세히 살펴보겠습니다. script.js에서 플러그인이 실행되는 것을 볼 수 있습니다.
Script.js
$(문서).ready(함수())(
$(".item .delete").click(function())(
Var elem = $(this).closest(".item");
$.확인((
"title": "삭제 확인",
"message": "이 항목을 삭제하려고 합니다.
나중에 복원할 수 없습니다! 계속하다?"
"버튼" :(
"예" :(
"클래스": "파란색",
"액션": 함수())(
elem.slideUp();
}
},
"아니요" :(
"클래스": "회색",
"action": function()() // 이 경우에는 할 일이 없습니다. action 속성을 생략할 수도 있습니다.
}
}
});
예제에서 div .deleted를 클릭하면 스크립트는 플러그인에 정의된 $.confirm 함수를 실행합니다. 다음은 대화 상자의 제목, 설명, 버튼 개체입니다. 각 버튼에는 CSS 클래스 이름과 작업 매개변수가 있습니다. 액션은 버튼을 클릭했을 때 실행되는 함수입니다.
이제 흥미로운 부분을 살펴보겠습니다. jquery.confirm.js에서 대화 상자의 소스 코드를 볼 수 있습니다.
Jquery.confirm.js
$.confirm = 함수(매개변수)(
If($("#confirmOverlay").length)(
// 페이지에 이미 확인이 표시되어 있습니다.
거짓을 반환;
}
Var 버튼HTML = "";
// 버튼에 대한 마크업 생성:
If(!obj.action)(
obj.action = function())();
}
});
Var 마크업 = [
"
"
",params.message,"
","
",
버튼HTML,
"
].가입하다("");
$(markup).hide().appendTo("body").fadeIn();
Var 버튼 = $("#confirmBox .button"),
나는 = 0;
$.each(params.buttons,function(이름,obj)(
버튼.eq(i++).click(함수())(
// 작업 속성을 호출하는 경우
// 클릭이 발생하고 확인이 숨겨집니다.
Obj.action();
$.confirm.hide();
거짓을 반환;
});
});
}
$.confirm.hide = 함수())(
$("#confirmOverlay").fadeOut(function())(
$(this).remove();
});
}
우리 플러그인은 $.confirm() 메소드를 정의합니다. 이 메서드는 입력한 데이터를 처리하고 마크업을 구성한 다음 이를 모두 페이지에 추가합니다. #confirmOverlay div는 CSS 선언을 통해 고정된 위치를 가지므로 이를 브라우저의 중앙에 배치한 다음 사용자가 페이지를 스크롤할 때 이동하는 프로세스를 남겨둡니다.
마크업을 추가한 후 스크립트는 버튼 클릭 이벤트에 대한 이벤트 레버를 배포하여 누른 버튼에 해당하는 작업을 수행합니다.
이것으로 대화 상자를 마칩니다!
요약해보자
jquery.confirm.css 파일을 사용하여 대화 상자의 모양을 편집할 수 있습니다. 대화 상자의 메시지 속성은 HTML 코드를 사용하므로 여기에 이미지나 아이콘을 추가할 수 있습니다.
플러그인을 사용하여 오류 메시지 상자를 구현할 수도 있습니다. 작업 속성을 설정하지 않고 버튼 하나만 추가하면 됩니다.
주목! 숨겨진 텍스트를 볼 수 있는 권한이 없습니다.
그리고 다시 한번, JavaScript 언어에 관한 또 다른 주제에 오신 것을 환영합니다. 여기서 우리는 경고, 프롬프트, 확인 방법을 분석할 것입니다. 이러한 메소드는 Javascript 언어에 내장되어 있으며 사용자와 상호 작용하는 데 도움이 됩니다.
경고는 특정 정보가 포함된 창을 브라우저 화면에 표시합니다. 이 창은 사용자가 확인을 클릭할 때까지 스크립트를 일시 중지합니다.
프롬프트는 일반적으로 확인을 클릭하기 전에 특정 텍스트 필드에 대답해야 하는 질문을 사용자에게 묻는 창을 표시합니다. 사용자는 취소 키를 눌러 아무것도 입력할 수도 없습니다.
또한 확인은 사용자가 더 이상 텍스트 필드에 아무것도 입력할 수 없고 확인 또는 취소만 클릭할 수 있는 창을 표시합니다.
이제 짧은 소개를 마친 후 위의 모든 사항을 실제로 고려해 보겠습니다.
경고, 프롬프트, 확인
Alert("안녕하세요, 사용자 여러분!" );
var nameUser = 프롬프트("당신의 이름은?" , "name" );
var userAnswer = verify("정말로 사이트에서 나가시겠습니까?" );
결과적으로 브라우저 페이지를 새로 고치면 사용자를 환영하는 창이 표시됩니다. 확인을 클릭하면 이름을 묻는 다음 창이 나타납니다. 이 메소드에는 두 개의 매개변수가 있습니다. 첫 번째 매개변수는 필수이며 표시될 제목을 담당합니다. 우리의 경우 사용자 이름 질문입니다. 두 번째 매개변수는 텍스트 필드에 기본적으로 표시되는 값을 담당합니다. 이름을 입력하고 확인을 클릭하면 이름이 nameUser 변수에 저장됩니다. 취소 버튼을 클릭하면 변수에 null이 기록됩니다.
마지막으로 사용자에게 사이트를 떠날 것인지 묻는 창입니다. 동의하는 경우 부울 값 true가 변수에 배치되고, 거부하는 경우 그에 따라 false가 됩니다. 이것이 이러한 방법에 대해 알아야 할 전부입니다. 다음 강의에서 뵙겠습니다!
표준 브라우저 도구의 대안으로 이 튜토리얼에서는 사용하기 쉬운 jQuery 플러그인 형태로 확인 대화 상자를 제공하기 위한 크로스 브라우저 솔루션을 구축합니다. 버튼을 클릭할 때 수행될 텍스트, 버튼 및 동작을 변경할 수 있습니다.
대부분의 노력은 확인 대화 상자에 집중되지만 먼저 데모에 사용될 페이지에 대해 몇 마디 말씀드리겠습니다. 플러그인 코드를 보고 싶은 사람들은 즉시 jQuery 섹션까지 아래로 스크롤할 수 있습니다.
index.phpjQuery를 사용하여 확인 대화 상자 바꾸기 | 사이트 웹사이트 " target="_blank"> " alt="" width="250" /> 데모 jQuery를 사용하여 확인 대화 상자 바꾸기
우리 페이지의 헤더 섹션에는 글꼴이 포함되어 있습니다 구리 Google Font, 확인 대화 상자의 스타일이 포함된 jquery_confirm.css 및 데모 페이지의 스타일이 포함된 styles.css에서 가져옵니다.
jQuery 라이브러리는 페이지 본문 섹션 하단에 포함되어 있습니다. , 기본 플러그인 코드가 포함된 jquery_confirm.js 및 이벤트 핸들러에 대한 코드가 포함된 script.js 딸깍 하는 소리, 데모 페이지에서 플러그인을 실행하는 데 사용됩니다.
사이트에서 확인 대화 상자를 사용하려면 소스 아카이브에서 jquery_confirm 폴더를 복사하고 페이지 제목 섹션에 jquery_confirm.css를 포함하고 닫는 태그 앞에 jquery_confirm.js를 붙여넣어야 합니다. 몸, jQuery 라이브러리도 있습니다.
확인 대화 상자 자체는 HTML 코드 몇 줄에 지나지 않습니다. 다음은 대화 상자를 표시하기 위해 플러그인을 생성하는 코드입니다.
대화 코드 예창 제목
프로세스 설명
설마이 코드는 문서에 추가됩니다. 요소 확인오버레이확인 대화 상자(모달 창)가 열려 있는 동안에는 페이지 콘텐츠의 나머지 부분 위에 표시되어 상호 작용을 방지합니다. 강요 h1, 피그리고 확인버튼플러그인에 전달된 인수에 따라 채워집니다. 추가 설명은 강의 본문 아래에 제공됩니다.
확인 대화 상자의 스타일은 파일에 있습니다. jquery_confirm.css. 따라서 플러그인은 기존 프로젝트에 쉽게 연결할 수 있으며 페이지 스타일과 교차할 가능성을 제거하는 방식으로 구축됩니다.
jquery_confirm.css#confirmOverlay( 너비:100%; 높이:100%; 위치:고정; 위쪽:0; 왼쪽:0; 배경:url("ie.png"); 배경: -moz-linear-gradient(rgba(11,11 ,11,0.1), rgba(11,11,11,0.6)) 반복-x rgba(11,11,11,0.2); 배경:-웹킷-그라디언트(선형, 0% 0%, 0% 100%, from(rgba(11,11,11,0.1)), to(rgba(11,11,11,0.6)))peat-x rgba(11,11,11,0.2); z-index:100000; ) # verifyBox( 배경:url("body_bg.jpg") 반복-x 왼쪽 하단 #e5e5e5; 너비:460px; 위치: 고정; 왼쪽:50%; 위쪽:50%; 여백:-130px 0 0 -230px; 테두리: 1px 솔리드 rgba(33, 33, 33, 0.6); -moz-box-shadow: 0 0 2px rgba(255, 255, 255, 0.6) 삽입; -webkit-box-shadow: 0 0 2px rgba(255, 255, 255, 0.6) 삽입; 상자 그림자: 0 0 2px rgba(255, 255, 255, 0.6) 삽입; ) #confirmBox h1, #confirmBox p( 글꼴:26px/1 "Cuprum","Lucida Sans Unicode"," 루시다 그란데", 산세리프; 배경:url("header_bg.jpg") 반복-x 왼쪽 하단 #f5f5f5; 패딩: 18px 25px; 텍스트 그림자: 1px 1px 0 rgba(255, 255, 255, 0.6); 색상 :#666; ) #confirmBox h1( 문자 간격:0.3px; 색상:#888; ) #confirmBox p( 배경: 없음; 글꼴 크기:16px; 줄 높이:1.4; 패딩 상단: 35px; ) #confirmButtons( 패딩:15px 0 25px; 텍스트 정렬:center; ) #confirmBox .button( 디스플레이 :inline-block; 배경:url("buttons.png") 반복 없음; 색상: 흰색; 위치: 상대; 높이: 33px; 글꼴:17px/33px "Cuprum","Lucida Sans Unicode", "Lucida Grande" , sans-serif; 여백 오른쪽: 15px; 패딩: 0 35px 0 40px; 텍스트 장식: 없음; 테두리: 없음; ) #confirmBox .button:last-child( margin-right:0;) #confirmBox .button 범위 ( 위치: 절대; 상단:0; 오른쪽:-5px; 배경:url("buttons.png") 반복 없음; 너비:5px; 높이:33px ) #confirmBox .blue( 배경 위치: 왼쪽 상단; 텍스트- 그림자:1px 1px 0 #5889a2;) #confirmBox .blue 범위(배경 위치:-195px 0;) #confirmBox .blue:hover(배경 위치:왼쪽 하단;) #confirmBox .blue:hover 범위(배경 위치 :-195px 하단;) #confirmBox .gray( 배경 위치:-200px 상단;텍스트 그림자:1px 1px 0 #707070;) #confirmBox .gray 범위(배경 위치:-395px 0;) #confirmBox .gray: hover( 배경 위치:-200px 하단;) #confirmBox .gray:hover 범위( 배경 위치:-395px 하단;)
여러 CSS3 규칙이 사용됩니다. #confirmOverlay 정의에서는 CSS3 그래디언트를 지정합니다(이는 Firefox, Safari 및 Chrome 브라우저에서만 사용할 수 있습니다).
화면 중앙에 위치한 #confirmBox에는 인상적인 내부 그림자가 추가되었습니다(포토샵의 내부 광선과 유사). 또한 사용되는 글꼴 구리, Google 글꼴에 포함되어 있습니다.
버튼은 CSS 스프라이트를 사용합니다. 회색과 파란색의 두 가지 디자인 옵션을 사용할 수 있습니다. 버튼에 자신만의 스타일을 추가할 수도 있습니다.
jQuery플러그인 코드를 살펴보기에 앞서, 사용법을 먼저 살펴보겠습니다. 플러그인은 scripts.js 파일에서 호출됩니다.
script.js$(document).ready(function())( $(".item .delete").click(function())( var elem = $(this).closest(".item"); $.confirm(( "title " : "삭제 확인", "message" : "항목을 삭제하기로 결정하셨습니다.
삭제한 후에는 복원할 수 없습니다! 계속할까요?", "buttons" : ( "예" : ( "class" : "blue", "action": function() ( elem.slideUp(); ) ), "No" : ( "class" : "gray ", "action": function()() // 이 경우에는 아무것도 하지 않습니다. 이 옵션은 간단히 생략할 수 있습니다. ) ) )); )); ));
요소에 있을 때 div.delete를 누르면 스크립트가 함수를 실행합니다. $.확인, 플러그인에 의해 정의됩니다. 대화 상자 제목, 설명 및 버튼 개체를 플러그인에 전달합니다. 각 버튼은 CSS 클래스 이름과 속성을 갖습니다. 행동. 버튼을 눌렀을 때 실행되는 기능을 설정하는 속성입니다.
이제 우리 수업의 가장 흥미로운 부분으로 넘어갈 수 있습니다. jquery_confirm.js 파일에는 표준 확인 대화 상자 대신 플러그인을 위한 코드가 포함되어 있습니다.
jquery_confirm.js(function($)( $.confirm = function(params)( if($("#confirmOverlay").length)( // 확인 대화 상자가 이미 페이지에 표시되어 있습니다. return false; ) var 버튼HTML = ""; $.each (params.buttons,function(name,obj)( // 버튼 마크업 생성: 버튼HTML += ""+name+""; if(!obj.action)( obj.action = function())(); ) ));var markup = [ "", "", "",params.title,"", "
",params.message,"
", "", 버튼HTML, "" ].join(""); $(markup).hide().appendTo("body").fadeIn(); var 버튼 = $("#confirmBox .button"), i = 0; $.each(params.buttons,function(name,obj)( 버튼.eq(i++).click(function())( // 버튼을 클릭하면 액션 함수를 호출하고 // 닫습니다. 확인 대화 상자. obj .action(); $.confirm.hide(); return false; )); )); ) $.confirm.hide = function())( $("#confirmOverlay").fadeOut(function( ))( $(this ).remove(); )); ) ))(jQuery);우리 플러그인은 $.confirm() 메소드를 정의합니다. 메서드는 전달된 인수를 읽고 마크업을 구성한 다음 이를 페이지에 추가합니다. 왜냐하면 div#confirmOverlay는 위치가 고정되어 있습니다. 즉, 화면 중앙에 위치하며 사용자가 페이지를 스크롤하더라도 해당 위치를 유지합니다.
마크업을 추가한 후 스크립트는 대화 상자 버튼에 대해 적절한 작업을 수행하는 이벤트 핸들러를 설치합니다.
준비가 된!
결론파일을 수정하여 대화상자 스타일을 변경할 수 있습니다. jquery_confirm.css. 대화 상자 메시지 속성은 HTML 텍스트를 허용하므로 대화 상자에 표시하기 위해 이미지와 아이콘을 추가할 수 있습니다.
플러그인을 사용하여 경고를 표시할 수도 있습니다. 작업 속성 없이 버튼 하나만 전달하면 됩니다.
