MH Justice Latout Manual
X 24 시간 닫기 X

MH Multi Widget

  1. Shopping
  2. 주문상태
  3. 주문QA
  4. Demo
  5. 메뉴얼
  6. 제작의뢰
  7. XE작품
  8. 가입인사
2 3 4 Next
2 3 4 Next
profile
팔공산
Mar 26 2023
Mh Justice Layout is a one page html5 bootstrap template. This template comes with smooth animations, pop-up video and many more… 1. OnePage로 출력되며 Bootstrap과 Animations를 적용하여 스크롤 되는 순간 각 Section영역 에니메이션이 작동 2. 거의 완벽한 반응형(모바일형)으로 츨력 3. 간단한 설정 한번으로 색상변경 완료 - 밝은 배경, 어두운 배경, 혼합배경을 선택후, 설정 옵션들에서 자신만의 칼라로 변경 가능 4. 상단 메뉴를 자유자재로 선택 가능 • 원페이지 메뉴 - 한페이지내에서 상하로 이동하는 메뉴 • 메인 메뉴 - 레이아웃 설정 메뉴에서 선택한 mid들로 이동(3차 메뉴 까지 지원) • 메인 + 원페이지 - 두가지 메뉴 둘다 적용 5. 다양한 자체 프로그램을 내장 • 아코디언 메뉴 • 아이폰배경 로그인 팝업 • 배경 슬라이드 • 공지사항 팝업창 • 동영상 팝업 플레이어 • 사이트정보 메뉴 팝업창 출력 • 페밀리 메뉴 • 메뉴위치 View • 롤링 배너 • 유튜브 출력 롤링 배너 6. 다양한 위젯, 애드온을 같이 동봉 • 포인트 상태 위젯 • Mh Slide Pro위젯 • Contact 위젯 문의 스킨 • Web Fonts 애드온 • 말풍선(툴팁) 애드온 7. MoonHouse 자료들은 폰트어썸과 Sexy Button 그리고 말풍선(툴팁) 애드온들이 자주 사용됩니다. Web Fonts Addon / 말풍선(툴팁) 애드온을 설치해서 애드온들을 활성화 시켜야 아이콘과 버턴들이 정상적으로 출력됩니다. 페이지기능을 지원하는 Widgets의 경우는 "위젯 케시를 0" 으로 둬야 정상 작동합니다. [적용페이지] • https://moonhouse.co.kr/justice • https://moonhouse.co.kr • https://moonhouse.co.kr/one?l=kr • https://moonhouse.co.kr/youtube • https://moonhouse.co.kr/xemy • https://moonhouse.co.kr/buy - MH Gallery를 제외한 2차 메뉴들 • 지금 보고 있는 페이지 메뉴얼
profile
팔공산
Mar 26 2023
2 3 4 Next
MediaElement.js와 HTML5 video,audio 태그를 이용한 미디어 플레이어 및 유튜브 링크 애드온입니다. 당초에는 유튜브 뮤직을 링크시켜주는 애드온을 찾다고 없어서 시작했는데 일판이 좀 커졌네요. 애드온 이름을 몇번 바꾸다가 최종적으로 미디어플레이어 애드온으로 정했습니다. 폴더 이름은 mytube youtube가 '너튜브"라면 mytube는 '내튜브'...... https://xetown.com/tips/1167281 참조 유튜브 링크가 메인이 아니고 원래는 첨부한 오디오와 비디오 재생이 주 기능입니다. 1. 업로드된 mp3 및 wav 등의 오디오 파일 재생 2. 업로드된 mp4, mov, 3gp 등등의 비디오 파일 재생 제가 만들었지만 어디까지 동작할지는 저도 잘 모릅니다. html5 video,audio가 지원하는 것은 다 될 것으로 추측합니다. 3. 유튜브 링크 4. 유튜브 뮤직 링크 5. 위 4가지 기능이 댓글에서도 동작 6. 유튜브 영상과 오디오의 제목과 설명가져오기 7. 리스트재생(미완성) 목록까지는 가져오지면 UI는 완성하지 못했습니다. 수정해서 사용하시고 잘되면 공유 부탁드립니다. 8. 반응형 플레이어 당초 목적은 모바일에서 찍은 동영상을 업로드하고 다음화면서 재생하는 것이어서 모바일과 데스크탑에 다 어울리는 반응형으로 만들었습니다. 9. 썸네일 만들기 썸네일 애드온 별도로 사용할 필요없습니다. Rhymix에서는 외부이미지로 본문삽입만해도 썸네일이 잘생깁니다. XE에서는 잘 안되는 경우가 종종 있어서 아예 썸네일을 첨부화일로 넣는 기능을 만들었습니다. 나머지 설정은 바꿔가면서 테스트해보면 금방 이해할 수 있는 것들이라 설명을 생략합니다. 포스터기능은 업로드된 동영상을 위한 것입니다. 유튜브 동영상은 preload 기능을 이용하면 플레이하기 전에 썸네일 화면이 보이지만 업로드된 동영상은 플레이되기 전까지는 아무것도 나나타지 않습니다. 처럼 각자의 사이트에 걸맞는 영상을 만들어서 입력해주면 플레이되기 전에도 뭔가를 보여 줄 수 있습니다. 마지막으로 제일 중요한 것은 youtube data api key를 입력해야합니다. 입력하지 않아도 동작에는 문제가 없지만 제목과 설명을 가져오지 못합니다. 구글콘솔에 사이트를 등록하고 youtube data api key를 만들어서 입력하면 됩니다. 자세한 설명은 https://developers.google.com/youtube/registering_an_application?hl=ko 를 참조하십시요. api 키를 입력하면 재생창 상단에 제목이 나타나고 제목을 클릭하면 toggle되면서 설명이 나옵니다. 모바일에서 백그라운드로 가거나 화면을 끈 상태에서도 플레이가 가능합니다. 단 스마트폰 브라우저앱의 알림기능 , 특히 미디어알림기능이 꺼져있으면 동작하지않습니다. https://xetown.com/topics/1166111 참조 mediaelement.js를 가져다 xe(Rhymix)에 붙여서플레이어를 만들고 있습니다. 작업은 거의다 마무리 되어서 좀더 테스트해보고 공개할 예정입니다. 헌데 몇가지 기대이상의 기능들이 있네요. 저도 뭐 js는 그져 가져다 사용하는 입장이라서 아직 내부 기능을 다 이해하지는 못한 상태입니다. 그중에서도 눈에 띄는 점은 모바일 플레이어 기능입니다. 일반적으로 유튜브를 플레이시키면 별도의 플레이어가 있는 것이 아니라서 화면을 끄거나 백그라운드로 들어가면 플레이가 중지됩니다. 하지만 미디어플레이어에 링크해서 플레시키면 플레이어가 뜨네요. 화면을 끄거나 백그라운드로 들어가도 플레이어는 동작합니다. 스마트폰을 꺼서 호주머니 담은 상태에서도 음악감상이 가능합니다. 연결된 블루투스 기계에서 콘트롤도 가능하고... 구태여 유튜브 프리미엄으로 가지 않아도 될 것같습니다... ver : 0.8.1 1. 태그를 사용해서 유튜브를 링크한 경우 여러개의 재생창이 생기면서 발생하던 문제를 수정했습니다. 2. iframe 태그를 사용하던 기존 링크와 호환되게 수정했습니다. 3. 제목과 설명을 유튜브처럼 영상 아랫쪽으로 이동했습니다. ver : 0.8.2 url 및 설명과 제목의 사용여부와 위치를 설정할 수 있게 수정했습니다. [Sample] https://www.youtube.com/watch?v=tifg16jpNmQ
- '템플릿 컴포넌트'입니다. - 미리 완성된 서식(템플릿)을 이용해 문서를 편집할 수 있게 해주는 에디터 컴포넌트입니다. 기본 기능 - 원래는 회원 발송용 뉴스레터 템플릿을 제공하기 위해 만들었던 컴포넌트입니다. GG님의 관리자 메일 모듈과 같이 쓰면 좋습니다.( 0.5 버전 https://xetown.com/rxe_point/278628 , 깃허브에는 0.6도 있습니다ㅎ ) - 그 외에도 컴포넌트 이용자가 템플릿을 직접 만들어 활용할 수 있으므로, 견적서, 증빙서류 등 정해진 서식을 출력할 때 활용하는 것도 좋을 것 같습니다. - 풀 페이지, 헤더, 섹션, 푸터 등 4가지 타입의 템플릿을 제공합니다. - 해당 템플릿을 에디터 내 원하는 위치에 삽입할 수 있으며, 전체 덮어쓰기도 할 수 있습니다. 사용 방법 - CKEditor4 기준으로 설명합니다. - 보라색 부분의 아이콘을 누릅니다. - 팝업창이 뜹니다. - 썸네일 리스트의 원하는 템플릿을 골라 에디터에 '추가'하거나 '덮어쓰기'를 하면 에디터에 이렇게 적용됩니다. (템플릿 요소(li)를 더블클릭하면 에디터 커서 위치에 '추가'가 됩니다) - 물론 이미지나 글 내용을 수정할 수도 있습니다. 템플릿 등록 방법 - 컴포넌트 폴더에 templates 이라는 폴더가 있는데요. 이 안에 템플릿 문서 파일이 있는 하위폴더들이 있습니다. - 하위폴더의 이름은 템플릿들의 이름이기도 합니다. - 각각의 하위폴더에는 기본 제공되는 폴더에 있는 것처럼 index.html, info.xml, thumb.jpg가 있어야 합니다. - index.html은 템플릿의 html 코드를 담고 있습니다. 참고로, 기본 제공되는 템플릿은 뉴스레터 이메일 용으로 제작 중인 것이어서 기본적으로 인라인 스타일을 일괄적용하고 있습니다. - info.xml은 템플릿의 정보를 담고 있습니다. 기존 파일을 열어보시면 아시겠지만, admin, full_page, header, section, footer에 관한 정보가 필수적으로 들어가야 합니다. admin 값이 Y면 관리자만 템플릿을 적용할 수 있습니다. N이면 에디터 이용자 모두가 볼 수 있구요. full_page 값이 Y면 전체 문서에 어울리는 템플릿 유형이라는 뜻입니다. N이면 아니구요. header 값이 Y면 문서의 머리말로 어울리는 템플릿 유형이라는 뜻입니다. N이면 아니구요. section 값이 Y면 문서의 본문으로 어울리는 템플릿 유형이라는 뜻입니다. N이면 아니구요. footer 값이 Y면 문서의 꼬리말로 어울리는 템플릿 유형이라는 뜻입니다. N이면 아니구요. - thumb.jpg는 팝업창에서 출력하는 템플릿 리스트에서 출력할 썸네일입니다. 크기는 대략 120*100px 정도가 좋습니다. => 이렇게 준비하시면 여러분도 템플릿을 등록해서 언제든 꺼내서 사용하실 수가 있게 되는 겁니다. 주의 사항 - 본 템플릿 컴포넌트는 CKEditor4와 FroalaEditor에서 작동합니다. - 단, 프로알라 에디터의 경우에는 요소가 삽입될 경우 요소 앞뒤로 p태그가 자동으로 추가되므로 CKEditor4와 에디터 반영 결과가 다소 다를 수 있습니다. 테스트 환경 - 크롬 66.0.3359.181 / IE 11.48.17134.0 / 엣지 42.17134.1.0 - 라이믹스 1.9.6 / PHP 버전: 7.0.22 ... CKEditor4 - XE 1.9.7 / PHP 버전: 5.5 ... FroalaEditor - 스포어 웹호스팅, 카페24 웹호스팅 히스토리 - 2017년 9월 11일 "신기하네요. 레이아웃 만들기" https://xetown.com/rxe_story/729982 - 2017년 9월 13일 "재미난 녀석을 만들고 있습니다 ... 템플릿 컴포넌트" https://xetown.com/rxe_story/731957 - 2018년 6월 14일 "템플릿 컴포넌트 순항 중ㅎㅎ" https://xetown.com/board/996760 - 2018년 6월 17일 "XE에서 컴파일이 안돼요ㅠ(라이믹스에서는 되구요)" https://xetown.com/qna/998893 데모 - 라이믹스 1.9.6 / CKEditor4 / PHP 7.0.22 https://bit.ly/2IECAeU (들어가서 -> 쓰기 버튼 -> 템플릿 컴포넌트 아이콘을 클릭하면 컴포넌트 팝업창이 뜸) 문하우스에서 만든 템플릿들 - https://moonhouse.co.kr/index.php?mid=xemy&search_target=tag&search_keyword=MH+%ED%85%9C%ED%94%8C%EB%A6%BF
2 3 4 Next
2 3 4 Next

지도 바로가기 - 스케치북 리스트스킨

게시판 제목 종료일 위치 글쓴이 날짜 조회수 지도
강원 정동진 모래시계공원 file
정동진 모래시계공원 팔공산 2024.03.20 3
전라 쏠비치 진도 file
쏠비치 진도 팔공산 2024.03.20 3
서울 서울 이순신장군 동상 file
서울 이순신장군 동상 팔공산 2024.03.20 2
충청 충주 중앙탑 file
충주 중앙탑 팔공산 2024.03.20 3
대구 [D - 249] 앞산공원 전망대 file
2024-12-31 앞산공원 전망대 팔공산 2023.03.29 27

 

Mh_Multi Widget 특징

 

It's a multi widget that we've been creating since the XE super window, so you can output widgets in almost any form.

 

mhmulti-001.jpg

 

 

[업그레이드 내용]

•문서내의 모든 이미지를 썸네일로 출력 기능 추가(선택가능)

Screenshot 2020-10-05 at 13.00.27.jpg

 

 1. Mh_multi Widget 에 총 5가지 Skin이 포함되어 있으며 Skin 마다 각각 고유의 형테로 구성    

    • 완벽히 위젯별로 작동합니다.

       - 동일 Skin 으로 한페이지에 다수의 위젯을 생성할시 위젯설정에 "위젯 NO"를 다르게 적용

       mhmulti016.jpg 

 

  2. 거의 완벽한 반응형(모바일형)으로 츨력이 가능

    • 함께 배포되는 mhstyle 위젯스타일 적용시

       - https://moonhouse.co.kr/xetip/469297

     mhmulti-008.jpg

 

  3. 간단한 설정 으로 색상변경 가능

    • 총 9가지 색상 선택

     mhmulti-009.jpg

    • 위젯 타이틀, 게시물 제목, Hover 테두리, more색상등 변경

     line.jpg

    • 설정 옵션들에서 자신만의 컬러로 변경 가능 

 

  4. 거의 완벽한 설정으로 각 위젯이 카멜레온처럼 변형이 가능 

    • 페이지기능으로 Total게시판 기능으로 활용

       - ajax 기능으로 화면 리플레쉬 없이 작동합니다.

    • 모든 항목을 추가, 제외 가능 - 썸네일, 테두리, 위젯타이틀, 제목, 내용, 글쓴이, 날짜등

    • 모든 항목의 색상 지정 가능 - 테두리, 제목, 내용, 바탕색, Hover색상등

 

  5. 썸네일 클릭시 3가지 형태로 츨력가능 

    • 기본적으로 게시판으로 연결

    • Right Box 형식으로 출력

     mhmulti-010.jpg

    • Zoom 형식으로 출력

     mhmulti-011.jpg 

 

  6. 다양한 설정

    • 대상 모듈의 대상 분류 srl값으로도 출력 가능

    • 내용글 세로 칸 수를 지정해서 공간의 여백을 최소화

    • 댓글 출력가능

     mhmulti-012.jpg

    • 그룹별, 포인트별, 레벨별로 출력 가능

     2021-09-23 123907.jpg

    • 모듈명, 분류명 출력 가능

     mhmulti-014.jpg

    • 확장값 출력 가능

     mhmulti-015.jpg

 

  7. MoonHouse 자료들은 폰트어썸과 Sexy Button 그리고 말풍선(툴팁) 애드온들이 자주 사용됩니다.

      Web Fonts Addon  /  말풍선(툴팁) 애드온을 설치해서 애드온들을 활성화 시켜야 아이콘과 버턴들이 정상적으로 출력됩니다.

      페이지기능을 지원하는 Widgets의 경우는 "위젯 케시를 0" 으로 둬야 정상 작동합니다.

 

Shoping Demo Manual Q&A

 

Mh_Multi Widget 메뉴얼

 

1. 총 5가지 Skins

 

 1. Sketchbook5 Webzin 형태

     mhmulti-002.jpg

 

 2. Sketchbook5 List 형태

     mhmulti-003.jpg

     

    •SketchBook5 게시판스킨 - 문하우스 수정버전 Pro 와 연동하여 날짜지정 종료/진행중/종료임박/오늘종료 버턴을 출력할 수 있습니다.

       - https://moonhouse.co.kr/xetip/506303

     mhmulti-004.jpg

 

 3. chameleon 형태

     mhmulti-005.jpg

 

 4. Smart 형태

     mhmulti-006.jpg

 

 5. Scroll - 공지사항형태

     mhmulti-007.jpg

Mh Product Sales

This area displays Product Sales made by Moonhouse.

Mh Justice Layout

Mh Justice Layout is a one page html5 bootstrap template.
This template comes with smooth animations, pop-up video and many more…

1. As soon as onePage is operated and the bootstrap and animations are applied, the animation is output in each section.

2. Almost perfect response (mobile)

3. Built-in various self-programming programs
• accordion menu
• iPhone background login pop-up
• Background slide
• Notice pop-up window

Read more

Mh Multi Sale

It's a multi widget that we've been creating since the XE super window, so you can output widgets in almost any form.

1. Works perfectly per widget. - Old versions create multiple widgets on one page with the same skin, causing problems with page function or multiple places

2. Add shortcut to on the title bar the top of the two.

3. can print out the source, without using a using the image output rightbox.

Read more