호스팅 색인기 GIF의 드루팔

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

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

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

드루팔에서 호스팅 색인기 GIF의 드루팔

그림 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라는하는 뷰를 사용하고 있습니다. 따라서, 예를 들면, 시청 종속성이다.

색인기 GIF 드루팔와 모듈을 구성 호스팅

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!

이 비디오를 시청!

관련 기사

멀티 사이트 드루팔 호스팅하나 개 이상의 드루팔 사이트를 실행하는 경우, 당신은 관리를 단순화 할 수 있고 멀티 사이트 기능을 사용하여 사이트를 업그레이드 할 수 있습니다. 멀티 사이트는 하나의 드루팔을 공유 할 수 있습니다 ...
Webfm 모듈 드루팔 호스팅나는 사용자가 비디오, 오디오, 이미지, 문서 및 텍스트를 포함한 미디어 콘텐츠의 다양한 다른 유형을 업로드 할 수 있도록하는 웹 사이트 아카이브를 만드는 오전. 나는에 사용자가 쉽게 만들고 싶어 ...
드루팔은 SSL을 사용하여 호스팅HTTPS는 HTTP 요청과 응답을 암호화하는 프로토콜입니다. 이 경우 누군가가 당신의 컴퓨터와 당신이 요청하는 서버 사이의 네트워크를 손상 할 수 있었다 보장 ...
면 처리 검색 아파치 SOLR의 드루팔 호스팅참고 : 더그 반에 추가 특별한 감사를 마지막으로이 블로그 게시물을 게시 할 동기를 제공! 초기 드루팔 8에 대한 검색 API 및 SOLR 관련 모듈은 초기 알파에 있던 2016에서 ...
여러 사이트를 호스팅 드루팔시스템 관리자 나 개발자가 다중 사이트 구성에서 동일한 서버에 여러 사이트를 호스트하기 위해 선택할 수 많은 이유가있다. 예를 들어, 이러한 구성은 수 ...