부트 스타프를 기반으로 한 Dailog

부트 스트립 소개

Twitter의 Bootstrap은 현재 인기있는 프론트 엔드 프레임 워크입니다.

Bootstrap은 HTML, CSS 및 JavaScript를 기반으로합니다. 단순하고 유연하여 웹 개발을 더 빨리 만듭니다. Twitter 디자이너 Mark Otto와 Jacob Thornton이 개발 한이 회사는 CSS/HTML 프레임 워크입니다.

Bootstrap은 동적 CSS 언어로 작성된 우아한 HTML 및 CSS 사양을 제공합니다. Bootstrap은 출시 이후 인기가 있었으며 NASA의 MSNBC의 Breaking News를 포함하여 Github에서 인기있는 오픈 소스 프로젝트였습니다. WEX5 프론트 엔드 오픈 소스 프레임 워크와 같이 국내 모바일 개발자에게 더 친숙한 프레임 워크는 성능 최적화를위한 부트 스트랩 소스 코드를 기반으로합니다.

1.1. 키워드를 문서화하십시오

부스트랩 모달 박스 oaodailog

1.2. 사용 시나리오

버튼이 웹 페이지에서 클릭되면 사용자는 확인을 자극해야하며 사용자는 계속 실행할 수 있거나 사용자가 취소 버튼을 클릭하여 실행을 취소 할 수 있습니다.

웹 페이지에서 보려면 클릭하고 팝업 상자를 사용하여 표시된 데이터를 표시 해야하는 경우 OaoDailog를 사용할 수 있습니다.

1.3. 도식 다이어그램

Boostrap3.0, jQuery1.9에 기초한 모달

1.4. 사용 지침

Oaodailog가 필요한 이유는 무엇입니까?

에이. Boostrap3.0에서 제공 한 모달이므로 모달 디바일 숨겨진 코드는 먼저 페이지에 정의되어야합니다. 사용자는 DIV에 표시 할 컨텐츠를 작성합니다. 페이지에 여러 모달 상자가있는 경우 여러 개의 숨겨진 모달 상자 DIV 숨겨진 코드를 작성해야하며 의심 할 여지없이 중복됩니다.

비. 기본 모달에 확인 및 취소 버튼이 없으므로 물론 모달 상자의 숨겨진 디그리에 두 개의 버튼을 쓸 수 있지만 확인 버튼을 클릭 한 후 수행 된 작업을 모니터링하려면 JS를 작성해야합니다. 동시에 확인 버튼으로 수행되는 작업은 팝업시 사용자가 클릭 한 데이터와 관련이 있습니다. 데이터가 전달되는 방법, 부트 스트랩은 우리에게 제공하지 않습니다.

기음. Oaodailog 버전 1.0.0은 주로 부트 스트랩의 모달 상자와 중복 코드의 불편한 사용 문제를 해결합니다.

생식 이미지 :

시작하세요

1. Oaodailog.js를 소개하십시오

암호:

 <script type = "text/javaScript"src = "$ {ctx} /static/jquery/jqueryapi/oaodialog/oao.dialog.js"charset = "utf-8"> </script>

2. 팝업 상자를 표시하는 코드를 호출하십시오

암호:

 oao.dialog ({제목 : "프롬프트 상자 삭제", 내용 : "실제로 삭제 된 후에는 삭제 후 복원되지 않습니다!"

이것은 확인 팝업 박스를 사용하는 기본적이고 일반적인 방법입니다.

1.5. API

OAO.dialog () :이 메소드는 팝업 상자를 생성하는 메소드입니다. 전달 된 매개 변수는 JSON 객체입니다. 물론, 당신은 아무것도 전달할 수없고 빈 팝업 박스가 팝업 될 수 있습니다. 다음은 각 매개 변수의 의미와 기본값을 설명합니다.

• oao.dialog.close () : 모달 상자를 닫습니다

1.6. 지원되는 기능 1. 현재 팝업 박스의 내용은 텍스트 및 정적 HTML 만 지원하며 URL 요청을 지원하지 않습니다.

2. 현재 두 개의 버튼 만 표시 할 수 있으며 사용자 정의 버튼은 지원되지 않습니다.

3. 팝업 박스의 현재 위치와 크기는 사용자 정의를 지원하지 않습니다.

4. 현재 한 번에 하나의 팝업 박스 만 팝업 할 수 있으며 팝업 박스에서 다른 모달 상자를 팝업하는 데 도움이되지 않습니다 (Bootstrap Modal은 기본 레이어에서 지원되지 않음).

계속 지켜봐 주시면 다음 버전에서 만나요.

 /* !! Shanghai ICP No. 13024515-1 Shanghai Yixin E-Commerce Co., Ltd. ** 이것은 Gnu LGPL, 버전 2.1 이상에 따라 라이센스가 부여됩니다. function (settings) {var defaultsettings = {제목 : "프롬프트", 내용 : ", okval :"확인 ","확인 ", cancalval :"cancel ", ok : function () {$ ("#oaomodal ");}, cance () {$ ("#oaomodal ") = $ .extend ({}, defaultsettings, settings || {}); return oao.settings;} oao.initContent = function () {var modelhtml = "<div id =/"oaomodal/"class =/"modal fade delete_modal/"tabindex =/"-1/"role =/"lo. "/"lo. aria-labelledby =/"mymodallabel/"aria-hidden =/"true/"> "+"<div class =/"modal-dialog/"> "+"<div class =/"modal-content/"> "+"<div class =/"modal-header/"<<button type =/"button =/"close/"date/"div class =/"div class =/"date/"divics =/"divisis. aria-label =/"close/"> <span aria-hidden =/"true/"> × </span> </button> "+"<h4 class =/"modal-title/"> </h4> "+"</div> "+"<div class =/"modal-body/"style =/"text-align :/"> "+"+"+"+"+"+" 클래스 =/"modal-footer/"> "+"<버튼 유형 =/"버튼/"class =/"btn-default modalcancel/"> </button> "+"<버튼 유형 =/"button/"class =/"btn btn-primary modalok/"> </button> "</div>"</div> "+"+"+"+"+" $ modelhtml = $ (modelhtml); $ ( ". modalok", $ modelhtml) .text (oao.settings.okval); $ ( ". modalcancel", $ modelhtml) .text (oao .settings.cancalval); $ ( ". Modal-Title", $ modelhtml) .text (oao.settings.title); $ ( ". modal-body", $ modelhtm l) .html (oao.settings.content); if (! oao.settings.ok) {$ ( ". modalok", $ modelhtml) .remove ();} if (! oao. settings.cancel) {$ ( ". modalcancel", $ modelhtml) .remove ();} $ ( "body"). Append ($ modelhtml);} // method 팝업 대화 상자의 경우 OAO.dialog = function (settings) {settings = oao.init (settings); oao.initContent (); // call method $ ( '#oaomodal'). on ( 'hidden.bs.modal', function (e) {if (oao.settings.close) {oao.settings.close ();} $ ( "#oaomodal"). remain ();}) if (ooao.settings.ok) {$ ( "#oaomodal .modalok"). click (settings.ok); if (ooao.cancel) { "$######oomodal .ModalCancel "). 클릭 (settings.cancel);} $ ("#oaomodal "). modal ( 'show'). css ({"margin-top ": function () {return (return (this). height ()/ 2-200) ;;}); function () {$ ( "#oaomodal"). modal ( 'hide');}