중간 크기의 플로팅 동작 메뉴 생성 방법
인기 플로팅 액션 메뉴 특히 Medium.com이이 기능을 유행에 이은 이후로 계속 증가하고 있습니다. 간단히 말해 플로팅 액션 메뉴 팝업 때를 일부 텍스트를 선택하십시오 웹 페이지에. 메뉴가 선택 항목 근처에 나타납니다., 다른 행동을 보여주는 선택한 텍스트를 빠르게 서식 지정, 강조 표시 또는 공유 할 수있는 기능.
이 자습서에서는 선택한 텍스트 스 니펫에 대한 작업 메뉴 웹 페이지에. Google 액션 메뉴를 통해 사용자는 선택한 텍스트를 트윗하십시오. 추종자들에게.
1. HTML 만들기
그만큼 시동기 HTML은 간단합니다., 우리는 단지 필요합니다. 일부 텍스트 사용자가 선택할 수 있습니다. 데모에서는 “수사슴과 헌터” 취침 이야기 샘플 텍스트로.
수사슴과 헌터
수사슴은 한때 ...
...
2. 액션 메뉴 템플릿을 만듭니다.
나는 HTML 코드 추가 액션 메뉴에 속한다. 내부 요소. 내부에 무엇이든 태그, 그것 표현되지 않을 것이다. 브라우저에 의해 문서에 추가 될 때까지 JavaScript 사용.
불필요한 공간을 남기지 마십시오. 내부 태그는 문서에 삽입 된 액션 메뉴 레이아웃을 방해 할 수 있습니다. 네가 원한다면, 추가 버튼 추가 내부 #shareBox 추가 옵션.
3. CSS를 만듭니다.
CSS는 #shareBox 인라인 컨테이너 이렇게 간다.
#shareBox width : 30px; 높이 : 30px; 위치 : 절대;
그만큼 위치 : 절대; 규칙은 저희를 permited 우리가 원하는 곳 어디에서나 메뉴를 배치하십시오. 페이지에.
나는 또한 스타일을 내부 작업 버튼 #shareBox 배경색과 이미지 그리고 ::후 의사 요소 I 아래쪽 화살표에 삼각형이 추가되었습니다..
#shareBox> 버튼 너비 : 100 %; 높이 : 100 %; 배경색 : # 292A2B; 국경 : 없음; border-radius : 2px; 개요 : 없음; 커서 : 포인터; 배경 이미지 : url ( 'share.png'); background-repeat : no-repeat; 배경 위치 : 중심; background-size : 70 %; #shareBox> button :: after 위치 : 절대; 콘텐츠 : "; border-top : 10px solid # 292A2B; border-left : 10px 투명, border-right : 10px solid 투명, left : 5px, 30px;
4. JS로 이벤트 핸들러 추가하기
자바 스크립트로 이동하려면 이벤트 처리기 추가 그 마우스 숙어 과 마우스 업 ~에 대한 사건 시작과 끝을 붙잡다 텍스트 선택.
당신은 또한 연구를 할 수 있습니다. 다른 선택 이벤트 와 같은 selectstart 그들을 사용하고 마우스 이벤트 대신 (이상적이지만 아직은 브라우저 지원이별로 좋지 않다).
또한 참조 추가 ~로 요소를 사용하여 querySelector () 방법.
document.addEventListener ( 'mousedown', onMouseDown); document.addEventListener ( 'mouseup', onMouseUp); var temp = document.querySelector ( '# shareBoxTemplate'); function onMouseDown () function onMouseUp ()
5. 이전 선택 지우기
에서 마우스 숙어 이벤트, 우리는 청소를해라., 즉, 이전의 선택 및 소속 액션 메뉴를 클리어한다.
function onMouseDown () document.getSelection (). removeAllRanges (); var shareBox = document.querySelector ( '# shareBox'); if (shareBox! == null) shareBox.remove ();
그만큼 getSelection () 메소드는 선택 목적 텍스트의 범위를 나타내는 현재 사용자와 removeAllRange () 방법모든 범위를 삭제합니다. 똑같은 선택 따라서 개체 이전 선택을 지우는 중.
6. 작업 메뉴 표시
그것은 마우스 업 이벤트, 우리가 할 때 텍스트가 선택되었는지 확인한다. 추가 조치 취하기.
function onMouseUp () var sel = document.getSelection (), txt = sel.toString (); if (txt! == "") var range = sel.getRangeAt (0); if (range.startContainer.parentElement.parentElement.localName === "article"|| range.startContainer.parentElement.localName === "article") // 기사의 일부 텍스트를 선택했습니다.
선택한 텍스트 문자열 가져 오기 ~를 부름으로써 toString () 방법 선택 목적. 선택한 텍스트가 비어 있지 않으면 계속 진행하십시오. 첫 번째 범위를 얻는다. ~로부터 선택 목적.
범위 는 선택된 부분 문서의 일반적으로 사용자는 단일 선택 (ctrl / cmd 키를 누름으로써) 다중이 아니기 때문에, 선택 영역에서 (인덱스 0에서) 첫 번째 범위 객체를 getRangeAt (0).
범위를 찾았 으면 선택 영역이 시작된 장소에서 시작되었는지 확인합니다. 기사 안에. 그만큼 startContainer 범위의 속성은 DOM 노드를 반환합니다. 선택이 시작된 곳.
때때로 (당신이 단락에서 선택), 그 가치는 단지 텍스트 노드, 이 경우에 부모 요소 될거야 부모의 요소는 (이 게시물의 샘플 코드에서).
다른 시간, 당신이 선택할 때 여러 단락에 걸쳐, 그만큼 startContainer 될거야 부모 노드는 . 따라서 두 가지 비교 두 번째 만약 위 코드의 조건.
일단 만약 상태가 지났을 때, 액션 메뉴 가져 오기 템플릿에서 가져 와서 문서에 추가하십시오.. 아래 코드를 입력하십시오. 두 번째 안에 만약 성명서.
document.body.insertBefore (document.importNode (temp.content, true), temp);));
그만큼 importNode () 방법 외부 문서에서 노드를 반환합니다. (우리의 경우, ). 두 번째 매개 변수가 호출되면참된), 가져온 요소 / 노드는 그 자식 요소들과 함께.
삽입 할 수 있습니다. #shareBox 문서 본문 어디서나, 템플릿 요소 앞에 추가했습니다..
7. 액션 메뉴를 배치하십시오.
액션 메뉴를 배치하고 싶습니다. 바로 위에 & 선택한 지역의 중간에. 이렇게하려면, 직사각형 값을 얻는다. 선택한 영역의 getBoundingClientRect () 요소의 크기와 위치를 반환하는 메서드.
그런 다음 상단 과 왼쪽 ~의 값 #shareBox 직사각형 값을 기반으로. 새로운 계산 상단 과 왼쪽 가치, 나는 ES6 템플릿 리터럴.
var rect = range.getBoundingClientRect (); var shareBox = document.querySelector ( '# shareBox'); shareBox.style.top = 'calc ($ rect.top px - 38px)'; shareBox.style.left = 'calc ($ rect.left px + calc ($ rect.width px / 2) - 30px)';
8. 기능 추가
선택한 텍스트 근처에 액션 메뉴를 추가 했으니 이제 선택한 텍스트를 만들 차례입니다. 메뉴 옵션에서 사용 가능 그래서 우리는 그것에 대해 어떤 행동을 취할 수있다..
선택한 텍스트를 공유 버튼의 맞춤 속성 전화 한 'shareTxt' 추가하고 마우스 숙어 이벤트 리스너를 버튼에 추가.
var shareBtn = shareBox.querySelector ( 'button'); shareBtn [ 'shareTxt'] = txt; shareBtn.addEventListener ( 'mousedown', onShareClick, true);
그만큼 참된 매개 변수 addEventListener () 그 마우스 숙어 버블 링 이벤트.
내부 onShareClick () 이벤트 핸들러, 우리는 선택한 텍스트를 짹짹에 삽입 ~에 액세스하여 shareTxt 버튼의 속성.
function onShareClick () window.open ( 'https://twitter.com/intent/tweet?text=$ this.shareTxt'); this.remove (); document.getSelection (). removeAllRanges ()
일단 버튼이 클릭 됨, 그것은해야 할 일을하고 나서 페이지에서 스스로 제거합니다. 그것도있을거야. 선택을 취소하십시오 문서에.
소스 코드 및 데모
아래의 Codepen 데모에서 테스트 액션 메뉴가 작동하는 방식. 또한 전체 소스 코드 우리 Github repo에서.
