MH Justice Latout Manual
X 24 시간 닫기 X

MH Multi Widget

  1. Shopping
  2. 주문상태
  3. 주문QA
  4. Demo
  5. 메뉴얼
  6. 제작의뢰
  7. XE작품
  8. 가입인사
XE 1.8 버전대 기본레이아웃인 Xedition을 사용자가 편집이 편리하도록 수정한 버전 [v5 업데이트 내용] 1. 스마트폰에 적용가능하게 css 수정 했습니다. - toggle들 히든, 졸졸이스토커 히든, wing영역히든, 하단 메뉴와 위젯 히든 등... [v4 업데이트 내용] 1. 본문의 가로폭 크기를 지정 할 수 있습니다 - 1200px(기본), 980px(예전형) 2. 'SocialXE 모듈' 설치시 로그인박스에 SNS로그인 기능 추가 3. 개인정보 팝업의 위치를 수정 - 잘 보이게 ^.^! [v3 업데이트 내용] 1. Font Awesome icon 정상적으로 작동 되게끔 수정 - 이전버전 에서 누락됨 2. 상단 토글영역 추가 - 전체메뉴, Html메뉴 3. Wing영역 위젯, 베너 추가 확장 4. 사이트 개인정보알림 메뉴 추가 - 화면 중앙 팝업으로 출력 [v2 업데이트 내용] 1. Sub형태시 Body 우측에 졸졸이메뉴 추가 - 메뉴, 이미지, html선택가능 2. 사용자정의 단계별로 정리 [특징] 1. 배경색상과 텍스트색상을 변경가능 2. 상단영역 이미지와 사용가능 3. Wing영역과 하단영역에 위젯추가 가능(토글기능 가능) 4. 최하단에 페밀리사이트 추가가능 단순하게 특징을 적었지만 위의 적용만으로도 많은 편집이 가능합니다. 참고로 Demo버전은 삭제 했습니다. p.s xedition_MH 폴더를 새로 만들어 적용을 하셔도 되고 xedition을 사용중이시라면 _MH를 삭제하고 기본 폴더에 그대로 적용하셔도 됩니다.(쉬운설치를 실행하면 기본으로 돌아갑니다)
위의 이미지에서 보는 것과 같이 마우스클릭시 6개의 원형메뉴가 레이아웃에 나타나게 하는 방법입니다. 적용할 레이아웃을 고릅니다. 1. ../conf/info.xml을 열어서 아래의 메뉴항목을 추가합니다. <var name="roundmenu" type="select"> <title xml:lang="ko">★원형 메뉴사용</title> <title xml:lang="en">★Total Bottom User</title> <description xml:lang="ko">하단 원형 메뉴를 출력합니다</description> <description xml:lang="en">Bottom User</description> <options value=""> <title xml:lang="ko">출력안함</title> <title xml:lang="en">Not Display</title> </options> <options value="Y"> <title xml:lang="ko">출력</title> <title xml:lang="en">Display</title> </options> </var> <var name="rm_text0" type="text"> <title xml:lang="ko"> ┖ 버턴메뉴명</title> <title xml:lang="en"> ┖ Button Menu</title> <description xml:lang="ko">버턴메뉴명을 작성하세요.</description> <description xml:lang="en">Button Menu Name</description> </var> <var name="rm_b_color" type="text"> <title xml:lang="ko"> ┖ 버턴색상</title> <title xml:lang="en"> ┖ Button Color</title> <description xml:lang="ko">버턴색상을 지정하세요(기본 블랙)</description> <description xml:lang="en">Button Menu Colore(Basic black(#000000))</description> </var> <var name="rm_text1" type="text"> <title xml:lang="ko"> ┖ 1번 메뉴</title> <title xml:lang="en"> ┖ 1 Menu</title> <description xml:lang="ko">1번 메뉴명을 작성하세요.</description> <description xml:lang="en">1 Menu Name</description> </var> <var name="rm_url1" type="text"> <title xml:lang="ko"> ┖ 1번 메뉴 url</title> <title xml:lang="en"> ┖ 1 Menu Url</title> <description xml:lang="ko">1번 메뉴 주소를 적어세요.</description> <description xml:lang="en">1 Menu Url</description> </var> <var name="rm_text2" type="text"> <title xml:lang="ko"> ┖ 2번 메뉴</title> <title xml:lang="en"> ┖ 2 Menu</title> <description xml:lang="ko">2번 메뉴명을 작성하세요.</description> <description xml:lang="en">2 Menu Name</description> </var> <var name="rm_url2" type="text"> <title xml:lang="ko"> ┖ 2번 메뉴 url</title> <title xml:lang="en"> ┖ 2 Menu Url</title> <description xml:lang="ko">2번 메뉴 주소를 적어세요.</description> <description xml:lang="en">2 Menu Url</description> </var> <var name="rm_text3" type="text"> <title xml:lang="ko"> ┖ 3번 메뉴</title> <title xml:lang="en"> ┖ 3 Menu</title> <description xml:lang="ko">3번 메뉴명을 작성하세요.</description> <description xml:lang="en">3 Menu Name</description> </var> <var name="rm_url3" type="text"> <title xml:lang="ko"> ┖ 3번 메뉴 url</title> <title xml:lang="en"> ┖ 3 Menu Url</title> <description xml:lang="ko">3번 메뉴 주소를 적어세요.</description> <description xml:lang="en">3 Menu Url</description> </var> <var name="rm_text4" type="text"> <title xml:lang="ko"> ┖ 4번 메뉴</title> <title xml:lang="en"> ┖ 4 Menu</title> <description xml:lang="ko">4번 메뉴명을 작성하세요.</description> <description xml:lang="en">4 Menu Name</description> </var> <var name="rm_url4" type="text"> <title xml:lang="ko"> ┖ 4번 메뉴 url</title> <title xml:lang="en"> ┖ 4 Menu Url</title> <description xml:lang="ko">4번 메뉴 주소를 적어세요.</description> <description xml:lang="en">4 Menu Url</description> </var> <var name="rm_text5" type="text"> <title xml:lang="ko"> ┖ 5번 메뉴</title> <title xml:lang="en"> ┖ 5 Menu</title> <description xml:lang="ko">5번 메뉴명을 작성하세요.</description> <description xml:lang="en">5 Menu Name</description> </var> <var name="rm_url5" type="text"> <title xml:lang="ko"> ┖ 5번 메뉴 url</title> <title xml:lang="en"> ┖ 5 Menu Url</title> <description xml:lang="ko">5번 메뉴 주소를 적어세요.</description> <description xml:lang="en">5 Menu Url</description> </var> <var name="rm_text6" type="text"> <title xml:lang="ko"> ┖ 6번 메뉴</title> <title xml:lang="en"> ┖ 6 Menu</title> <description xml:lang="ko">6번 메뉴명을 작성하세요.</description> <description xml:lang="en">6 Menu Name</description> </var> <var name="rm_url6" type="text"> <title xml:lang="ko"> ┖ 6번 메뉴 url</title> <title xml:lang="en"> ┖ 6 Menu Url</title> <description xml:lang="ko">6번 메뉴 주소를 적어세요.</description> <description xml:lang="en">6 Menu Url</description> </var> 2. ../layout.html에 아래 코드를 적당한 곳에 추가합니다. <block cond="$layout_info->roundmenu == 'Y'"><include target="roundmenu.html" /></block> 3. roundmenu.html파일을 아래와 같이 만듭니다. <style> .menu { width:80px; height: 80px; box-sizing: border-box; font-size:12px; } .menu-open { display: none; } .menu-open-button { border:5px double #ffffff; border-radius: 50%; width: 50px; height: 50px; margin-left: 0px; position: absolute; color: #FFFFFF; text-align: center; line-height: 50px; -webkit-transform: ranslate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition: -webkit-transform ease-out 200ms; transition: -webkit-transform ease-out 200ms; transition: transform ease-out 200ms; transition: transform ease-out 200ms, -webkit-transform ease-out 200ms; } .menu-open-button { z-index: 12; cursor: pointer; box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14); } .menu-open:checked + .menu-open-button { -webkit-transition-timing-function: linear; transition-timing-function: linear; -webkit-transition-duration: 200ms; transition-duration: 200ms; -webkit-transform: scale(0.8, 0.8) translate3d(0, 0, 0); transform: scale(0.8, 0.8) translate3d(0, 0, 0); } .menu-item { background: #555555; border-radius: 50%; width: 49px; height: 49px; line-height: 49px; position: absolute; color: #FFFFFF; text-align: center; text-decoration:none; margin:3px; z-index: 11;} .menu-item:hover { background: #EEEEEE; color: #3290B1; } .menu-open:checked ~ .menu-item { -webkit-transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33); transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33); } .menu-open:checked ~ .menu-item:nth-child(3) { transition-duration: 180ms; -webkit-transition-duration: 180ms; -webkit-transform: translate3d(0.08361px, -74.99997px, 0); transform: translate3d(0.08361px, -74.99997px, 0); } .menu-open:checked ~ .menu-item:nth-child(4) { transition-duration: 280ms; -webkit-transition-duration: 280ms; -webkit-transform: translate3d(60.9466px, -32.47586px, 0); transform: translate3d(60.9466px, -32.47586px, 0); } .menu-open:checked ~ .menu-item:nth-child(5) { transition-duration: 380ms; -webkit-transition-duration: 380ms; -webkit-transform: translate3d(60.9466px, 32.47586px, 0); transform: translate3d(60.9466px, 32.47586px, 0); } .menu-open:checked ~ .menu-item:nth-child(6) { transition-duration: 480ms; -webkit-transition-duration: 480ms; -webkit-transform: translate3d(0.08361px, 74.99997px, 0); transform: translate3d(0.08361px, 74.99997px, 0); } .menu-open:checked ~ .menu-item:nth-child(7) { transition-duration: 580ms; -webkit-transition-duration: 580ms; -webkit-transform: translate3d(-60.86291px, 32.62064px, 0); transform: translate3d(-60.86291px, 32.62064px, 0); } .menu-open:checked ~ .menu-item:nth-child(8) { transition-duration: 680ms; -webkit-transition-duration: 680ms; -webkit-transform: translate3d(-60.03006px, -32.33095px, 0); transform: translate3d(-60.03006px, -32.33095px, 0); } .bluer { background-color: #669AE1; box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14); text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12); } .bluer:hover { color: #669AE1; text-shadow: none; } .greenr { background-color: #70CC72; box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14); text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12); } .greenr:hover { color: #70CC72; text-shadow: none; } .redr { background-color: #FE4365; box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14); text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12); } .redr:hover { color: #FE4365; text-shadow: none; } .purpler { background-color: #C49CDE; box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14); text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12); } .purpler:hover { color: #C49CDE; text-shadow: none; } .oranger { background-color: #FC913A; box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14); text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12); } .oranger:hover { color: #FC913A; text-shadow: none; } .lightbluer { background-color: #62C2E4; box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.14); text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.12); } .lightbluer:hover { color: #62C2E4; text-shadow: none; } </style> <block cond="!$layout_info->rm_b_color">{@ $layout_info->rm_b_color = 'black'}</block> <div class="menu" style="margin:0px 0px 0px 0px;"> <input type="checkbox" href="#" class="menu-open" name="menu-open" id="menu-open" /> <label class="menu-open-button" for="menu-open" style="background: {$layout_info->rm_b_color};"> <span>{$layout_info->rm_text0}</span> </label> <a href="{$layout_info->rm_url1}" class="menu-item bluer">{$layout_info->rm_text1}</a> <a href="{$layout_info->rm_url2}" class="menu-item greenr">{$layout_info->rm_text2}</a> <a href="{$layout_info->rm_url3}" class="menu-item redr">{$layout_info->rm_text3}</a> <a href="{$layout_info->rm_url4}" class="menu-item purpler">{$layout_info->rm_text4}</a> <a href="{$layout_info->rm_url5}" class="menu-item oranger">{$layout_info->rm_text5}</a> <a href="{$layout_info->rm_url6}" class="menu-item lightbluer">{$layout_info->rm_text6}</a> </div> style="margin:0px 0px 0px 0px;" 이곳에 원형메뉴가 위치할 적당한 수치를 입력하세요.
Prev 25 26 27 Next
profile
팔공산
Oct 15 2018
sejin7940님이 2015년에 만드신 카카오링크/카카오스토리 (sejin7940_kakao link)애드온이 최근에 카카오톡 링크 V2 API 로 업데이트 되면서 아래 문구가 뜨면서 작동이 되지를 않더군요. " 최신 버전의 카카오톡 링크가 적용되지 않은 앱(또는 서비스)에서 공유하기를 하였습니다. 해당 앱을 업데이트 하거나 최신 버전의 카카오톡 링크를 적용하도록 앱 개발사에 요청해 주세요. " 그래서 필요에 의해서 수정하면서 올려봅니다. 이름을 그대로 사용하기가 그래서 살짝 이름 변경했습니다. 사용법은 sejin7940님의 것을 그대로 가져 왔으며, 카카오링크만 적용 했으며, PC / 스마트폰 모두 작동합니다. 새 애드온에는 불가피하게 카카오사이트에 가입하고 API 키 발급과정이 필요합니다. 1. API 키 발급방법 1) https://developers.kakao.com 에 가입 2) 앱만들기 에서, 앱 이름을 정하신 후 (큰 의미 없습니다) 3) Javascript 키 값을 기억을 해두세요 ( 애드온 설정에 기재하셔야합니다) 4) 좌측 설정->일반 을 누른후, '플랫폼 추가' 버튼을 클릭하고 웹 클릭 후 , 사이트 도메인 기재하시고 저장 << 주의 >> 사이트도메인은 www 포함한 도메인, www 뺀 도메인 두가지 다 기재해주세요! 5) 설치된 애드온에서, mh_kakao_link 애드온 설정 누르신 후 javascript key 입력하고, 사이트 이름 입력 (카카오링크 하단에 나타날 이름입니다) 하시면 됩니다. 그 후 해당 애드온을 사용으로 체크하시면 됩니다 "https://developers.kakao.com/docs/js/kakaotalklink#스크랩-템플릿-보내기" 참고로 수정했습니다. p.s 참고로 문서페이지와 게시판에서만 작동합니다.(위젯페이지에서는 작동 안합니다)
Prev 25 26 27 Next
게시글 주소 : http://www.zeroboard.com/16076277 엮인글 주소 : http://www.zeroboard.com/16076277/trackback 소마세월 안녕하세요 소마세월 입니다. 각종 브라우저 에서 다 되게 한다고 고생했네요 고민좀 했네요 놀면서 만들었네요 =ㅁ=;; 각종 브라우저 라고 해봤자.. IE6, IE7, firefox2, firefox3 뿐입니다만.. 다른 브라우저 갖고 계신분들 테스트 해주세요~~ =ㅁ=; 아직 어설프지만.... 세로 메뉴형 레이아웃을 올립니다. 저번것인 가로형에 덮어 씌우시면 됩니다. 좋다 싶으면 추천 팍팍~ 미리보기 사이트 배포된 레이아웃 미리보기 레이아웃 사용 설명 이 레이아웃은 사용상 아무런 제약이 없습니다.. 마음대로 수정 후 사용하셔도 됩니다....... 재 배포하신다면 흠좀무.... 다운로드 : SOMA_Any_Color.rar 다운로드된 파일을 압축 풀어주세요 아래 그림과 같이 layouts 디렉토리에 업로드 하시면 됩니다. 아래 그림과 같이 세로형 롤 오버 메뉴 레이아웃 입니다. 같은 레이아웃으로 색상 변경 만으로 다른 색의 레이아웃을 만드실 수 있습니다. 설정 방법 로고타이틀 : 중첩 이미지 중 최상단에 표현 됩니다. 로고이미지 : 중첩 이미지 중 로고타이틀 밑에 표현 됩니다. 타이틀 배경색 : 레이아웃의 테마 색상 입니다. 메뉴 배경색 : 테마 색상에 비례해 메뉴의 색상 밝기를 조절 하실수 있습니다. 메뉴 배경색이 30 일 경우 메뉴 배경색이 60 일 경우 메뉴 배경색이 -10 일 경우 색상 선택방법 닫기 포토샵의 왼쪽에 색상 있죠? 거기 클릭.. 하단에 보시면 #ffffff 가 선택 색상입니다. 복사후에 레이아웃 색생에 넣어 주시면 됩니다. 여러색의 레이아웃을 사용 하시려면 레이아웃을 여러개 만들어야 하는건 아시죠? 그런 후 메뉴 마다 레이아웃을 따로 설정 하시면 됩니다. 어려운점 있으시면 댓글로 질문하세요... 참... 왼쪽 메뉴...미흡한 부분이 있습니다. 색상이. 삐져 나와요.. =ㅁ=;;; 아... 좀더 만져야 하는데 귀차니즘으로.. 이정도면 뭐~ 라는 생각으로 =ㅁ=;; PS 사실 이 레이아웃은 단일 색상 레이아웃 이었습니다. 레이아웃 이름 보시멵 SOMA BLUE BOX 레이아웃 ver 0.1 라고 되어 있을꺼에요.. 원래 푸른색 계열의 레이아웃을 만드려고 했는데.. 만들다 보니까.. 투명PNG 사용법을 깨닫게 되었고.. 레이아웃 자체가 변화된 것이랍니다... 레이아웃 이름은 그럴려니 하고 넘어가 주세요.. =ㅁ=; 이 게시물을.. 주 홈페이지 : http://soma.pe.kr 리뉴얼중 : http://kyhlove.igear.biz 첨부 : SOMA_Any_Color.rar (39.4KB)(27)
Prev 25 26 27 Next

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

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

 

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