다양한 웹 개발 프로세스에서 대화 상자 및 프롬프트 박스의 처리는 매우 일반적인 인터페이스 처리 기술입니다. 잘 사용하면 사용자에게 좋은 페이지 경험을 제공 할 수 있습니다. 부트 스트랩 개발도 마찬가지입니다. 우리는 종종 팝업 대화 상자 레이어를 사용하여 추가, 편집 및 세부 사항보기와 같은 인터페이스에 데이터를 표시합니다. 삭제할 때 프롬프트 확인란이 사용될 수 있습니다. 작업이 성공하면 더 풍부한 프롬프트 상자를 사용하여 처리 할 수 있습니다. 이 기사는 주로 부트 스트랩 개발에 사용되는 이러한 기술 포인트를 비교합니다.
1. 부트 스트랩 대화 상자 사용
일반적인 부트 스트랩에는 기본 상태가있는 작은 대화 상자, 중간 범위 대화 상자 및 풀 사이즈 대화 상자를 포함한 여러 크기의 대화 상자가 있습니다. 부트 스트랩의 대화 상자 인터페이스는 매우 친절합니다. ESC 키를 사용하거나 마우스로 다른 빈 공간을 클릭하면 대화 상자가 자동으로 숨겨집니다.
다음은 기본 소형 대화 상자 인터페이스 코드와 같은 정의가 다릅니다.
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- data-toggle = "validator"encType = "multipart/form-data"> <div> <div> <div> <div> <label> 부모 ID </label> <div> <select id = "pid"name = "pid"type = "text"placeholder = "div> </div> <div> <div> <div> <div> <div> <입력 ID = "이름"이름 = "이름"유형 = "text"자리 표시기 = "이름 ..."/> </div> </div> <div> <label> label> 비고 </label> <div> <textArea id = "name ="note "placeholder ="note ... "> </textArea> </div> </div> </div> </div> </div> </div> </div> </div> </div> < <입력 유형 = "hidden"id = "id"name = "id"/> <버튼 유형 = "제출"> 확인 </button> <버튼 유형 = "버튼"data-dismiss = "modal"> 취소 </button> </div> </div> </div> </div> </div>
대략적인 인터페이스는 다음과 같습니다.
다음과 같이 위의 코드에서 대화 스타일 코드에주의하십시오.
<div>
다른 두 가지 크기의 데이터베이스 인 경우 여기에서만 수정하면됩니다. 아래에 표시된 두 가지 코드는 다음과 같습니다.
<div>
게다가
<div>
인터페이스 요소의 레이아웃을 기반으로 채택 할 대화 상자 정의의 크기를 결정할 수 있지만 이러한 대화 상자의 호출 방법은 일관됩니다.
대화 상자 인터페이스는 다음과 같습니다.
// show는 고객 $ ( "#btnselectCustomer")를 선택할 수 있습니다. show ();
닫는 대화 상자 인터페이스는 다음과 같습니다.
$ ( "#add"). Modal ( "Hide");
일반적으로, 우리가 팝업하는 대화 상자는 데이터 저장과 유사한 제출 작업을 수행 할 수있는 양식입니다. 따라서 양식의 데이터를 확인해야합니다. 오류가 있으면 인터페이스에서 상기시켜야 할 수도 있습니다. 따라서 페이지가 초기화되면 양식의 확인 규칙을 초기화해야합니다. 다음은 정기적 인 양식 초기화 작업입니다.
// 관련 이벤트 함수 bindevent () {// 양식 정보가 verification $ ( "#ffadd")를 전달하는지 판단합니다. }, label.closest ( '. Form-Group'). removeClass ( 'has-error'); }, submithandler : function (form) {$ ( "#add"). modal ( "hide"); Portrait $ ( '#file-portrait'). FileInput ( '업로드'); 팝업 레이어를 닫으십시오. 처리 할 관리자. ");});}}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}); }}}); }}}); }}그러나 일반적으로 이러한 코드는 많이 반복되므로 기능을 캡슐화하고 일부 코드를 재사용하여 더 간단한 처리 코드를 사용하지만 목표를 달성 할 수 있습니다.
// 관련 이벤트 함수 bindevent () {// 레코드 추가 및 편집 레코드 formValidate ( "ffadd", function (form) {$ ( "#add"). modal ( "hide"); // 구성 매개 변수를 배경 var var var var var postdata = $ ( "#ffadd"). serializearray (); $. $. 그것."); }); }); }); }2. 확인 대화 상자 처리를 삭제합니다
1) Bootbox 플러그인 사용
위의 정기 대화 상자 외에도 간결한 확인 대화 상자가 종종 발생합니다. 위의 코드를 사용하여 확인 대화 상자를 작성하는 데 사용될 수 있지만 일반적으로 그렇게 번거롭지 않아도됩니다. 플러그인 부트 박스의 확인 대화 상자를 사용하여 처리 할 수 있습니다.
Bootbox.js는 부트 스트랩 프레임 워크를 사용할 때 대화 상자를 신속하게 만들 수있는 작은 JavaScript 라이브러리로 필요한 DOM 요소 또는 JS 이벤트 처리기를 작성, 관리 또는 삭제하는 데 도움이 될 수 있습니다.
bootbox.js는 세 가지 방법을 사용하여 기본 JavaScript를 모방 한 일부 방법을 설계합니다. 그들의 정확한 방법 서명은 각각이 레이블을 사용자 정의하고 기본값을 지정하기 위해 다양한 매개 변수를 가져갈 수 있도록 유연하지만 종종 동일합니다.
bootbox.alert (메시지, 콜백)
bootbox.prompt (메시지, 콜백)
bootbox.confirm (메시지, 콜백)
필요한 유일한 매개 변수는 경고입니다. 메시지입니다. 사용자의 응답을 결정하기 위해 콜백을 확인하고 신속하게 통화해야합니다. 알람 콜백을 호출 할 때에도 사용자가 대화 상자를 거부 할 때 결정됩니다. 우리의 랩핑 메소드는 모국어가 유용한 것처럼 차단할 수 없기 때문입니다. 동기보다는 비동기 적입니다.
이 세 가지 방법은 공개 방법의 1/4을 호출하며, 이는 자신의 사용자 정의 대화 상자를 사용하여 만들 수 있습니다.
bootbox.dialog (옵션)
자세한 API 도움말 설명서는 http://bootboxjs.com/documentation.html을 참조하십시오
알리다
bootbox.alert ( "Hello World!", function () {example.show ( "Hello World Callback");});확인하다
bootbox.confirm ( "당신은 확실합니까?", function (result) {example.show ( "확인 결과 :"+result);});또는 코드 :
bootbox.confirm ( "선택한 레코드를 삭제합니까?", function (result) {if (result) {// 마지막 쉼표를 마지막으로 제거, ids = ids.substring (0, ids.length -1); // 데이터를 var var var var var var var var var {ids : ids}; (JSON) {var data =. }});즉각적인
bootbox.prompt ( "이름은 무엇입니까?", function (result) {if (result === null) {example.show ( "Prompt Admiss");} else {example.show ( "hi <b>"+result+"</b>");}});사용자 정의 대화 상자
코드와 인터페이스를 사용하는 효과는 다음과 같습니다.
bootbox.dialog (…)
[2)
2) Sweetalert 플러그인 사용
위의 효과는 부트 스트랩 스타일과 매우 일치하지만 인터페이스는 약간 단조로운 것입니다. 위의 효과는 내가 좋아하는 것이 아니라 아래에 볼 수 있듯이 더 아름다운 효과를 만났습니다.
이 효과는 플러그인 sweetalert (http://t4t5.github.io/sweetalert/)를 소개하여 구현됩니다.
SWAL ({제목 : "조작 프롬프트", 텍스트 : NewTips, 유형 : "경고", showcancelbutton : true, succivbuttoncolor : "#dd6b55", cancelbuttontext : "cancel", 컨퍼런스 비트 톤 텍스트 : "예, execute delete!", closeOnfirm : true}, function () {delfunction ();};위의 유사한 인터페이스 효과가있는 구현 코드는 다음과 같습니다.
일반적으로 팝업 코드는 아래와 같이 매우 간단하게 만들 수 있습니다.
3. 정보 프롬프트 상자 처리
위의 두 처리는 팝업 대화 상자를 사용하여 구현되며 인터페이스를 차단합니다. 일반적으로, 우리는 정보 프롬프트가 추가 작업에 영향을 미치지 않거나 적어도 매우 짧은 자동 실종 효과를 제공하기를 희망합니다.
따라서 Jnotify 플러그인 및 토스트 플러그인을 소개합니다.
1) Jnotify 프롬프트 상자 사용
Jnotify 프롬프트 상자, 우수한 jQuery 결과 프롬프트 박스 플러그인. 양식을 제출 한 후 Ajax를 통해 배경에 응답하고 결과를 반환하고 전경에 반환 정보를 표시합니다. Jnotify는 운영 결과 정보를 매우 우아하게 표시 할 수 있습니다. Jnotify는 JQuery 기반 정보 프롬프트 플러그인으로, 작동 성공, 작동 실패 및 운영 알림의 세 가지 정보 프롬프트 방법을 지원합니다. Jnotify 브라우저는 호환성이 매우 우수하며 프롬프트 컨텐츠 변경을 지원하며 프롬프트 상자의 위치 위치를 지원하며 플러그인 매개 변수를 구성 할 수 있습니다.
jsuccess (메시지, {옵션}); Jerror ( "작업 실패, 다시 시도하십시오 !!");Jnotify 매개 변수의 상세 구성 :
AutoHide : True, // 프롬프트 막대 클릭 오브 오리를 자동으로 숨길 것인지 : false, // 마스크 레이어를 클릭하여 프롬프트 바 최소값 : 200, // 최소 너비 시간 시간 : 1500, // 디스플레이 시간 : 밀리 초 시드 쇼티미플 렉트 : 200, // MILLISECONDS hiDETIMEFFERT : // THINGS TOUNE : // 실망 : 15, // 프롬프트 막대가 표시되고 숨겨진 수평 위치 : "오른쪽", // 수평 위치 : // 수평 위치 : 왼쪽, 중심, 오른쪽 배전부 : // 수직 위치 : 상단, 중앙, 바닥 쇼버 레이 : // 마스크 레이어 색상 방향 레이를 표시 할 것인지, // 마스크의 색상을 설정하는지 // 0.3, 0.3, 0.3, 0.3. onclosed : fn // 프롬프트 상자를 닫고 함수를 실행 한 후 다른 jnotify를 다시 호출 할 수 있습니다. 위에서 언급했듯이 세 호출은 순서대로 호출됩니다.
아래는 스크립트 클래스에서 캡슐화 한 공개 방법입니다.
// 오류 또는 프롬프트 메시지 표시 (JNOTIFY 관련 파일 필요) 함수 샤워러 (팁, 시간 마모, 자동 히드) {jerror (팁, {AutoHide : AutoHide : AutoHide : true, // v2.0 timeshown : timeshown || 1500, 'center', vertical position : 'top', showoverlay : aforoverlay :#a colorlay :#a colorlay :#a colorlay :#a colorlay {// v2.0 alert ( 'jnofity가 완료되었습니다!');} // 프롬프트 기능 쇼 팁 표시 (팁, timeshown, autohide) {jsuccess (Autohide : Autohide : autohide : v2.0 timeshown : timeshown | | worizationation : ' showOverlay : true, colorOverlay : '#000', oncompleted : v2.0 // alert ( 'jnofity가 완료되었습니다!');};이런 식으로 Ajax의 우편 메소드를 사용하면 다른 요구에 따라 프롬프트 할 수 있습니다.
var postdata = $ ( "#ffadd"). serializearray (); $ .post (url, postdata, function (json) {var data = $ .parsejson (json); if (data.success) {// portrait의 업로드 처리 추가 $ ( '##file-portrait'). FileInput ( 'upload'); // 1. 팝업 레이어를 닫습니다. 샤워러 (저장 실패 : " + data.errormessage, 3000); error (function () {"이 함수를 사용할 권한이 없으시면 관리자에게 연락하여 처리하십시오 ");2) Toast 플러그인 사용
Toasts는 그놈/으르렁 거리 스타일의 비 블로킹 페이지 메시지 알림을 만들기위한 JavaScript 라이브러리입니다. , TOASTR는 성공, 오류, 경고 및 프롬프트의 네 가지 알림 모드를 설정할 수 있습니다. 프롬프트 창과 애니메이션 효과의 위치는 에너지 수에 의해 설정 될 수 있습니다. 공식 웹 사이트에서는 사용하기에 매우 편리한 JS를 생성 할 매개 변수를 선택할 수 있습니다.
플러그인 주소는 다음과 같습니다. http://codeseven.github.io/toast/
경고, 위험, 성공, 프롬프트 대화 상자 정보, 효과는 다음과 같습니다.
사용 JS 코드는 다음과 같습니다.
// 경고를 보여주기, astr.warning ( '내 이름은 이니고 몬토야입니다. 당신은 내 아버지를 죽였습니다. 죽을 준비를했습니다!') // 성공을 보여주십시오. astsuccess ( '캐슬을 습격하는 재미! toast.clear ()
이 플러그인의 매개 변수 정의는 다음과 같습니다.
// 기본 값을 사용하는 경우 다음 생성 Toast.Options = { "CloseButton": False, // 닫기 버튼 "Debug": 거짓, // 디버그 모드 "위치 클래스": "Toast-Top-full-Width", // "300", "100" // 애니메이션 시간이 사라지는 "시간 초과": "5000", // 디스플레이 시간 "ExtendedTimeout": "1000", "1000", // 확장 디스플레이 시간 "showing": "swing", // "HideEasing": "linear", "showmethod", "fadein", "fadein", "fadein", "fadein", "fadein", "fadein" // 사라질 때 애니메이션 메소드}; // 성공은 $ ( "#success")를 바인딩하라는 프롬프트 (function () {toast.Success ( "성공 축하");})를 클릭합니다.위의 것은 프로젝트에서 대화 상자 및 프롬프트 박스의 처리 및 최적화에 대한 나의 경험을 요약 한 것입니다. 모든 사람이 웹 인터페이스를 배우고 개선하는 것이 도움이되기를 바랍니다. 더 많은 정보를 알고 싶다면 Wulin.com 웹 사이트에주의를 기울이십시오!