Layui 프레임워크의 레이어 상위-하위 페이지 상호작용에 대한 자세한 설명
이 글에서는 주로 Layui 프레임워크에서 레이어 상위-하위 페이지 상호 작용 방법을 예제 형식으로 분석하고 레이어가 여러 iframe을 팝업하여 상위를 찾는 작업 방법을 분석합니다. 페이지가 필요하신 분들은 참고하시면 도움이 될 것 같습니다.
이 문서의 예에서는layui 프레임워크에서 레이어 상위 페이지와 하위 페이지 간의 상호 작용 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 사항은 다음과 같습니다.
layer는 최근 몇 년 동안 인기를 끌고 있는 웹 탄력적 레이어 구성 요소입니다. 공식 웹사이트 주소는 http://layer.layui.com/You입니다. 공식 웹사이트에서 최신 버전을 다운로드할 수 있습니다.
레이어가 iframe 레이어로 새 창(하위 페이지)을 표시할 때 하위 페이지에서 상위 페이지의 요소 및 기능에 액세스하는 방법.
1. 상위 페이지 요소 값에 액세스
var parentId=parent.$("#id").val();//访问父页面元素值
2. 상위 페이지 메소드에 액세스
var parentMethodValue=parent.getMethodValue();//访问父页面方法
3. 팝업 하위 페이지 창을 닫는 방법
var index = parent.layer.getFrameIndex(window.name); //获取窗口索引 parent.layer.close(index);//关闭弹出的子页面窗口
4.
parent.location.reload(); // 父页面刷新
첨부 파일: 상위 페이지를 찾기 위해 레이어에서 여러 iframe을 팝업하는 방법
상위 페이지:
function aa(){ var index = parent.layer.getFrameIndex(window.name); var iframeName = 'layui-layer-iframe'+index; openDialog1('选择XXX', '${ctx}/*****,'800px', '500px',iframeName); } function openDialog1(title,url,width,height,target){ top.layer.open({ type: 2, area: [width, height], title: title, maxmin: true, //开启最大化最小化按钮 content: url , btn: ['确定', '关闭'], yes: function(index, layero){ var body = top.layer.getChildFrame('body', index); var iframeWin = layero.find('iframe')[0]; //得到iframe页的窗口对象,执行iframe页的方法:iframeWin.method(); var inputForm = body.find('#inputForm'); var top_iframe; if(target){ top_iframe = target;//如果指定了iframe,则在改frame中跳转 }else{ top_iframe = top.getActiveTab().attr("name");//获取当前active的tab的iframe } inputForm.attr("target",top_iframe);//表单提交成功后,从服务器返回的url在当前tab中展示 if(iframeWin.contentWindow.doSubmit(top_iframe) ){ top.layer.close(index);//关闭对话框。 top.window[iframeName].frames.location.reload();//刷新父亲 } }, cancel: function(index){ } }); } //子页面回调方法 function addRecord(name,chainName){ alert(name); }
하위 페이지
function doSubmit(iframeName) { var sel=$("tbody tr td input.i-checks:checked"); var size = sel.size(); if(size==0){ top.layer.alert('请至少选择一条数据!', {icon: 0, title:'警告'}); return false; }else{ for(var i=0;i<size;i++){ top.window[iframeName].addRecord(sel[i].name,sel[i].value); } return true; } }
관련 권장 사항:
iframe에서 dom 요소를 가져오는 기본 js-- 부모와 자식 페이지가 서로의 DOM 요소를 가져오는 방법
javascript 부모-자식 페이지 통신에 대한 자세한 설명 example_javascript 기술
layui에서 트리 모양의 값 전달 문제에 대한 솔루션
위 내용은 Layui 프레임워크의 레이어 상위-하위 페이지 상호작용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

AI Hentai Generator
AI Hentai를 무료로 생성하십시오.

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











Microsoft Word에서 페이지를 복사하고 서식을 그대로 유지하고 싶으십니까? 특정 문서 레이아웃이나 형식의 복사본을 여러 개 만들려는 경우 Word에서 페이지를 복제하면 시간을 절약하는 유용한 기술이 될 수 있으므로 이는 현명한 아이디어입니다. 이 가이드는 템플릿을 만들거나 문서의 특정 페이지를 복사하는 등 Word에서 페이지를 복사하는 단계별 프로세스를 안내합니다. 이 간단한 지침은 처음부터 시작하지 않고도 페이지를 쉽게 다시 만들 수 있도록 고안되었습니다. Microsoft Word에서 페이지를 복사하는 이유는 무엇입니까? Word에서 페이지를 복사하는 것이 매우 유용한 데에는 다음과 같은 몇 가지 이유가 있습니다. 복사하려는 특정 레이아웃이나 형식의 문서가 있는 경우. 전체 페이지를 처음부터 다시 만드는 것과는 달리

layui는 양식의 모든 필드 데이터를 직접 가져오는 방법, 단일 양식 요소의 값을 가져오는 방법, formAPI.getVal() 메서드를 사용하여 지정된 필드 값을 가져오는 방법, 양식 데이터를 직렬화하는 방법 등 양식 데이터를 가져오는 다양한 방법을 제공합니다. 이를 AJAX 요청 매개변수로 사용하면 양식 제출 이벤트를 수신하여 데이터를 가져옵니다.

Layui 로그인 페이지 점프 설정 단계: 점프 코드 추가: 로그인 양식 제출 버튼 클릭 이벤트에 판단을 추가하고, 로그인 성공 후 window.location.href를 통해 지정된 페이지로 점프합니다. 양식 구성 수정: 숨겨진 입력 필드를lay-filter="login"의 양식 요소에 추가합니다. 이름은 "redirect"이고 값은 대상 페이지 주소입니다.

"CSS를 올바르게 표시하기 위해 Laravel 페이지의 오류를 처리하는 방법, 구체적인 코드 예제가 필요합니다." Laravel 프레임워크를 사용하여 웹 애플리케이션을 개발할 때 페이지가 CSS 스타일을 올바르게 표시하지 못하는 문제에 직면할 때가 있습니다. 비정상적인 스타일을 렌더링하는 페이지입니다. 이 글에서는 Laravel 페이지가 CSS를 올바르게 표시하지 못하는 문제를 해결하는 몇 가지 방법을 소개하고 개발자가 이 일반적인 문제를 해결하는 데 도움이 되는 특정 코드 예제를 제공합니다. 1. 파일 경로를 확인하세요. 먼저 CSS 파일의 경로를 확인하세요.

제목: 3초 만에 페이지 점프 구현 방법: PHP 프로그래밍 가이드 웹 개발에서 페이지 점프는 일반적으로 HTML이나 JavaScript 방식에서 페이지로 점프하기 위해 메타 태그를 사용합니다. 그러나 일부 특정 경우에는 서버 측에서 페이지 점프를 수행해야 합니다. 이 기사에서는 PHP 프로그래밍을 사용하여 3초 내에 지정된 페이지로 자동으로 이동하는 기능을 구현하는 방법을 소개하고 구체적인 코드 예제도 제공합니다. PHP를 사용하는 페이지 점프의 기본 원리는 일종의 것입니다.

Layui 프레임워크의 반응형 레이아웃 기능을 사용하면 적응형 레이아웃을 구현할 수 있습니다. 단계에는layui 프레임워크 참조가 포함됩니다. 적응형 레이아웃 컨테이너를 정의하고layui-container 클래스를 설정합니다. 반응형 중단점(xs/sm/md/lg)을 사용하여 특정 중단점 아래의 요소를 숨깁니다. 그리드 시스템(layui-col-)을 사용하여 요소 너비를 지정합니다. 오프셋(layui-offset-)을 통해 간격을 만듭니다. 반응형 유틸리티(layui-invisible/show/block/inline)를 사용하여 요소의 가시성과 표시 방식을 제어합니다.

질문:layui와 ElementUI 중 어느 것이 더 좋나요? 답변: 프로젝트 요구 사항에 따라 다릅니다. Layui는 더 포괄적이고 사용자 정의가 가능하며 대규모 프로젝트에 적합한 반면 ElementUI는 더 가볍고 아름답고 사용하기 쉽습니다. 구체적인 선택 이유는 다음과 같습니다. Layui 선택: 구성 요소 모양과 동작을 높은 수준으로 사용자 정의할 수 있는 광범위한 기능과 모듈을 제공합니다. 광범위한 기능과 확장성이 필요한 대규모 프로젝트에 적합합니다. 더 작은 크기와 더 빠른 로딩 속도. 구성 요소는 머티리얼 디자인 원칙, 높은 미적 특성을 따르며 기성 구성 요소를 많이 제공하여 개발 복잡성과 시간을 줄입니다.

layui를 실행하려면 다음 단계를 수행합니다. 1.layui 스크립트를 가져옵니다. 3.layui 구성 요소를 사용합니다.(선택 사항) 5.스크립트 호환성을 확인하고 기타 고려 사항에 주의합니다. 이러한 단계를 통해layui의 기능을 사용하여 웹 애플리케이션을 구축할 수 있습니다.
