호스팅 색인기 GIF의 드루팔

2012 12시 44분 년 9 월 25 일에 Drupion 지원에 의해 제출

그것은 당신이 쉽게 완전히 다른 페이지를로드하여 관객들에게 불편을 초래하지 않고 페이지에 대한 자세한 정보를 표시 할 수 있기 때문에 모달 창은 우수한 디자인 기능입니다. 내가 별도의 전체 페이지로드를받을만한 정도로 부피가 아니다 자세한 정보를 표시 할 위치 나는 조동사를 사용합니다.

그림 1 : 다음은 뷰에 의해 생성 된 제목의 링크가 있습니다 방아쇠를 추가 콘텐츠와 모달 창을 클릭하면.

그림 2는 그림 1과 같이 링크를 클릭하면 모달 창에 추가 정보가 나타납니다.

쉽게 드루팔에서 조동사를 생성하는 일반적인 방법에는 두 가지가 있습니다. 먼저, 일반적인 방법은 ColorBox 또는 Lightbox2 모듈을 사용하는 것이다. 두 모듈은 몇 가지 내장 기능을 가지고 사이트 빌더 수준에서 구성 할 수 있습니다.

더 테마 제어 및 모달의 내용, 모달 창 작동 방식에 대한 지식을 얻기 위해, 나는 얼 마일 '(혼돈의 일명 멀린) 카오스 도구, 또는 모달 창조의 CTools 방법에 돌입했다. 여기에 내가했던 방법이다.

이 튜토리얼은 당신이 할 수있는 모듈을 구축 할 필요가 드루팔 7의 이해의 선진 수준에 중간이 필요합니다.

우리는 우리의 모듈 이름을 것 1. "행복한"그래서 드루팔이 사이트 / 모든 / 모듈 / 행복이라는 설치하려면 내부 디렉토리를 생성합니다.

'행복'디렉토리 내부, 두 개의 빈 파일 'happy.module'만들 'happy.info을.' 또한, 다운로드하고 CTools 모듈과 뷰 모듈을 가능하게한다. CTools 모달 대한 의존성, 및 조회이 예에 대한 의존이다.

또한, 모듈 디렉토리 내부의 모달 사용자 정의에 대해 다음을 추가 :

내 "happy.js", 예를 들어 '사이트 / 모든 / 모듈 / 행복 /의 JS / happy.js')와 A "JS"폴더에 있습니다.
"happy.css"내, 예를 들어,있는 "CSS"디렉토리 '사이트 / 모든 / 모듈 / CSS / happy.css').
(원하는 경우) GIF를 색인기를 사용자 정의 AJAXs에 대한 이미지 디렉토리, 예를 들어, '사이트 / 모든 / 모듈 / 행복 / 이미지 / [이미지 이름] .JPG'
우리의 사용자 정의에 대한 테마 디렉토리는 '사이트 / 모든 / 모듈 / 행복 / 테마'에 템플릿을 뷰, 해당 디렉토리 내부의 전망 템플릿이 튜토리얼에 따라 추가로 배치됩니다.

2. 'happy.info'파일 모듈을 구성합니다.

열기, 파일에 아래를 붙여 저장 :

이름 = 해피
설명 CTools 프레임 워크를 사용 모달 윈도우를 생성하기위한 예시 = 모듈.
코어 = 7.x의
패키지 = 사용자 인터페이스
PHP = 5.2.4
종속성 [] =의 ctools
종속성 [] =보기

사이드 참고 :이 예제의 목적을 위해, 우리는 클릭하면 모달 창 내부의 노드 콘텐츠를 열 노드에 대한 링크 목록을 generat라는하는 뷰를 사용하고 있습니다. 따라서, 예를 들면, 시청 종속성이다.

3. 'happy.module'을 열고 저장 한 후, 상단에있는 표준 드루팔 모듈 비계를 놓습니다.

4. 첫 번째 단계는 모달 창이 나타나면 모달 링크가 열립니다 메뉴 경로를 정의하는 것입니다.

여기에 고급 점의 몇 가지 다음과 같습니다 CTools 모듈은 요청 경로의 자리로 "%의 ctools_js"를 식별합니다. CTools는 사용자의 브라우저의 자바 스크립트 기능에 따라 "nojs" "JS"또는로 그 자리 인수를 대체합니다. "페이지 콜백은"우리는 다음을 정의하는 기능입니다. 무거운의 대부분이 일어나는 곳이다. 마지막으로,이 예에서 접근 제한이 없습니다. 즉 익명 사용자가 TRUE로 설정되어있는 '페이지 콜백'이후 모달의 콘텐츠에 액세스 할 수있다.

5. '페이지 콜백'기능을 정의합니다 :

이 복잡하게 나타납니다 만, 위의 기능은 직선적이다. 사용자의 브라우저가 자바 스크립트를 지원하지 않는 경우 CTools에 의해 우리의 결정에 따라, 우리는 그들에게 비 자바 스크립트의 컨텐츠를 제공 할 것입니다. 그렇지 않으면, 우리는 CTools 모달을 해고하고 그들에게 노드의 티저보기 모드를 제공합니다.

6. 다음으로, 우리는 부모의 페이지로드로 모달 창에 대한 설정을 삽입해야합니다.

이 드루팔은 페이지의 콘텐츠 렌더링 후크 기능의 수를 할 수 있습니다. 다음 코드는 작동 예 후크 등 hook_node_view합니다 ($ 노드 -> 콘텐츠 객체 부분을 수정), hook_block_view, hook_field_load 등이 포함됩니다

이 예제의 목적을 위해, 나는 클릭하면 모달 내부 노드의 티저를 표시 노드 제목의보기를 생성하고있다. 이를 위해, 내가보기 후크, hook_views_pre_render ()를 사용 :

이 모달를 만들 때 쓸 수있는 많은입니다. 요약하면, 우리는 CTools JS 파일을 모두로드 할 수 있습니다. 그런 다음, 우리는 크기와 (이 예에서 $의 happy_style)을 CTools 구성 배열을 사용하여 모달의 기능을 정의합니다. 그리고 마지막으로, 우리는 모달 내용을 테마에 필요한 설정, 자바 스크립트 파일 및 CSS 파일을 주입.

7. 모달 창이 표시 트리거 링크를 정의합니다.

지금까지 우리는 모달 내부에 표시 할 페이지 및 콘텐츠를 정의하고, 우리는 모달의 초기 스타일을 정의했습니다. 이제, 우리는 모달 창이 열립니다 트리거를 정의해야합니다. 정말 필요한 모든 것은 특정 CTools 클래스와 링크입니다. 내가보기를 사용하고 있기 때문에, 나는 연결 가능한 제목의 내 목록에 대한 뷰 템플릿을 정의하기 위하여려고하고있다. 그런 식으로, 나는 CTools 인식 트리거 할 뷰 내부의 링크를 수정할 수 있습니다.

또는, hook_preprocess 후크를 사용하여 테마 층에 모달를 트리거하거나, 사이트의 테마 디렉토리 내부의 전망 템플릿 내부의 링크를 정의 할 수 있습니다.

나는 같은 모듈 디렉토리 내부의 사용자 정의 모듈의 모든 기능을 선호. 그것은 청소기입니다. 따라서, 나는 행복한 모듈 디렉토리 내부의 전망 템플릿을 만들 수 선택했다.

여기에 가장 좋은 방법입니다. 먼저 주제와 뷰 템플릿을 등록 :

이 선언 한 후에는 A [module_dir] / 테마 디렉토리를 생성하고 배치해야한다 '뷰 - 뷰 - 필드 - happy.tpl.php'파일을 내부. 초기 내용의 뷰 모듈의 테마 디렉토리 안에있는 뷰 모듈의 기본 "뷰 - 뷰 - fields.tpl.php"템플릿의 내용을 사용합니다.

나는 hook_theme를 등록하고 hook_theme 내부하는 뷰 템플릿을 선언했기 때문에, 나는 내가 만든 제목 링크의 최종 디스플레이와 다툰보기 'hook_preprocess_view ()를 사용할 수 있습니다 :

이 시점에서, 변수 $ ctools_link의 의견보기 필드에 나에게 사용할 수 있습니다 - happy.tpl.php 파일. 해당 템플릿의 내부에서, 단순히 줄을 추가합니다 :

9. 자바 스크립트 파일.

우리는 CTools 모달을 만들기위한 PHP의 타스을 모두 달성했다. 이제 우리는 자바 스크립트에 우리의 관심을 켜십시오.

당신은 ctools_ajax_example 모듈 내부의 기본 CTools 모달 JS 파일을 시작할 수 있지만 나는 모든 당신이 시작하는 데 필요한 선언, 당신을 위해 해당 파일을 단순화했다.

다음은 사이트 / 모든 / 모듈 / 행복 /의 JS / happy.js 파일의 내용이다 :

10. 이제 모달 스타일을 할 준비가되었습니다.

'사이트 / 모든 / 모듈 / 행복 / CSS / happy.css'스타일 취향에 모달 창을 사용하여.

이 시점에서 자세한 내용 드루팔 7의 CTools 모달을 만들었습니다, 당신의 CTools 모듈 내부의 광범위한 도움말 HTML 파일 소모 될 때까지 구글을 피하기 '사이트 / 모든 / 모듈 / ctools가 / 도움말 / modal.html을.'

드루팔 7 행복 Modaling!

이 비디오를 시청!

Choose Hosting

Top 3

호스팅 색인기 GIF의 드루팔

관련 기사