반응형

SW/JavaScript 120

jQuery, Java Script : Form에 삭제 확인 모달 추가 : 예제, 구현

이 튜토리얼에서는 삭제와 같은 것을 위해 form에 확인 모달 상자를 추가하는 방법입니다. 대부분의 튜토리얼은 한 가지 목적으로 설계된 양식 으로이 작업을 수행하는 방법과 양식에 채워진 엔티티를 삭제하는 방법에 대한 예만 보여줍니다. 즉, 삭제를 위해 제출 버튼이 하나만 있음을 의미합니다 . form에 두 개의 제출 단추가있는 대화 상자를 추가하는 방법을 보여줍니다. 즉, 하나의 제출 단추를 사용하여 엔티티를 편집하고 다른 제출 단추를 사용하여 form을 삭제하는 편집 양식에서 이 예제를 사용할 수 있습니다. HTML Form And Modal Box 먼저 HTML 양식을 만들어 시작하겠습니다. 중요한 부분은 제출 버튼과 JavaScript이므로 이 예제를 매우 기본적입니다. 아래는 모달 상자 내용이 아..

SW/JavaScript 2020.06.08

Java Script, jQuery : 스크립트 동적 로드 : 방법, 예제, 구현

웹 사이트 속도를 높이는 일반적인 방법은 지연 로딩이라는 기술을 사용하는 것입니다. 즉, 처음에 페이지에 필요한 모든 것을 로드하는 대신 필요할 때만 리소스를 로드합니다. 예를 들어 이미지를 느리게 로드 할 수 있으므로 페이지를 올바르게 보는 데 필요한 이미지로만 페이지를 시작할 수 있으며, 보이지 않는 다른 이미지는 바로로드 할 필요가 없습니다. 사용자가 페이지를 아래로 스크롤하면 이미지를 볼 수 있는지 찾고 필요할 때 이미지를 느리게 로드 할 수 있습니다. JavaScript 또는 CSS 파일과 같은 다른 리소스를 사용하여 동일한 작업을 수행 할 수 있으며 스크립트를 언제 사용해야하는지 스크립트에 로드 할 수 있습니다. 과거에 사용한 예는 버튼의 클릭 이벤트에 Disqus 주석을 로드하는 것입니다. ..

SW/JavaScript 2020.06.07

Java Script, jQuery : Adaptive Backgrounds jQuery Plugin : 예제, 구현, 방법

최근에 포함하는 div의 배경색을 변경하는 데 유용한 리소스를 찾았습니다. 이것은 이미지에서 가장 지배적 인 색상을 검색하고 요소 배경을 포함하는 색상을이 색상으로 변경하는 jQuery 플러그인입니다. 단 몇 줄의 Javascript로 멋진 쇼케이스 페이지를 만들 수 있습니다. 이 플러그인을 jQuery Adaptive Background Plugin이라고합니다. 이 jQuery 플러그인을 사용하려면 다음과 같이 div를 감싸는 많은 이미지가 있는 페이지가 있어야합니다. 플러그인이 실행되면 data-adaptive-background 속성을 가진 이미지를 검색하고 이 이미지에서 지배적인 색상을 찾습니다. 다음을 사용하도록 Javascript를 설정하려면 먼저 Github 프로젝트 페이지에서 플러그인을 다..

SW/JavaScript 2020.05.31

Java Script, jQuery : 클립보드 복사 : 예제, 구현, 방법

이 튜토리얼은 이제 구식입니다. Javascript 복사 및 붙여 넣기에서 자세한 정보를 찾을 수있는 기본 브라우저 복사 및 붙여 넣기 기능을 사용하는 것이 좋습니다. 최근 프로젝트에서는 사용자의 클립보드에 텍스트를 복사하는 단추를 만들어야 했습니다. 버튼 클릭 이벤트에서 이것을 만들려고 할 때 Javascript 또는 jQuery로 하고 싶었습니다. 이 문제에 대한 조사를 실시한 결과, 보안 때문에 클립보드에 JavaScript를 복사할 수 없다는 것을 알게 되었습니다. 이는 jQuery가 텍스트를 클립보드에 복사할 수 없다는 것을 의미하기도 했습니다. 그래서 다른 방법을 찾아야 했습니다. 한참 검색해보니 지투브에서 호스팅되는 jQuery 플러그인이 ZeroClipboard입니다. Adobe 플래시와 ..

SW/JavaScript 2020.05.30

Java Script, jQuery : element 크기 변경 : 방법, 예제, 구현

jQuery를 사용하여 요소의 크기를 변경하는 경우 크기를 변경하는 데 사용할 수 있는 두 가지 방법이 있습니다. 먼저 첫 번째 매개 변수를 높이 또는 너비로 전달하고, 두 번째 매개 변수를 값이 되는 .css() 방법을 사용할 수 있습니다. $('.element').css('height', new_height_value); $('.element').css('width', new_width_value); 다른 옵션은 .height() 메서드와 .width() 메서드를 사용하는 것입니다. $('.element').height(new_height_value); $('.element').width(new_width_value); 이 기사에서는 이 두 가지 방법의 차이를 살펴보겠습니다. height() meth..

SW/JavaScript 2020.05.29

Java Script, jQuery : 암호 강도 표시 기능 : 예제, 구현, 방법

대부분의 웹 사이트에서 보안이 가장 큰 문제이므로 웹 사이트를 최대한 안전하게 만드는 것이 중요합니다. 그러나 개발자가 코드를 사용하여 수행할 수 있는 모든 예방 조치에 비해 사용자가 강력한 암호를 가지고 있지 않다는 것입니다. 사용자가 자신의 비밀번호를 입력할 수 있는 시스템을 구축하는 경우, 비밀번호가 얼마나 안전한지 알려주는 것이 좋습니다. 이 튜토리얼에서는 사용자 암호를 확인하고 보안 수준을 알려주는 작은 JQuery 스니펫을 만들 것입니다. The HTML Form 먼저 암호를 변경할 수 있는 간단한 양식을 작성하여 이 튜토리얼을 시작하겠습니다. 여기에 암호 확인 상자가 포함된 암호 입력 상자가 포함됩니다. 사용자가 암호를 잘못 입력하지 않았는지 확인합니다. 암호를 만들 때 문자를 잘못 입력했기..

SW/JavaScript 2020.05.28

Java Script, jQuery : 느린 소셜 미디어 버튼 로드 : 예제, 개념, 방법

웹 사이트 성공을 위해 페이지 로딩 속도가 매우 중요하므로 가능한 한 웹 사이트의 모든 영역을 가속화해야합니다. 현재 대부분의 웹 사이트에서 제공하는 기능 중 하나는 소셜 미디어 버튼으로, 방문자가 좋아하는 소셜 네트워크에서 기사를 쉽게 공유 할 수 있습니다. 또한 방문자가 각 소셜 네트워크에서 페이지가 몇 번 공유되었는지 확인할 수 있습니다. 이러한 소셜 네트워크 버튼의 문제점은 AJAX를 통해 버튼을 표시하는 데 필요한 모든 정보를 얻기 위해 많은 HTTP 요청을 해야 한다는 것입니다. 버튼의 이미지와 페이지가 공유 된 횟수를 가져옵니다. Facebook, Twitter 및 Google Plus에는 주요 소셜 네트워크가 3 개 이상있는 것이 일반적이지만 Pinterest, LinkedIn 및 기타 여..

SW/JavaScript 2020.05.27

Java Script, jQuery : 클릭 이벤트 표시 Disqus

웹 사이트의 로딩 속도를 높이고, 이미지를 압축하고, 웹 호스트를 개선하고, 웹 사이트 코드를보다 효율적으로 만들기 위해 할 수 있는 일이 많이 있습니다. 그러나 이 디자인과 관련하여 한 가지 선택은 각 페이지가 처음로드 될 때 만드는 HTTP 요청의 양을 줄이는 것입니다. 각 페이지에서 HTTP 요청의 양을 조사 할 때 Disqus에서 많은 양의 HTTP 호출이 발생하는 것을 알았습니다. 이것은 모든 웹 사이트에 배치 할 수 있는 주석 시스템이며, 페이지에 몇 줄의 Javascript를 포함시키기만 하면 어떤 사이트에도 쉽게 추가 할 수 있습니다. 사이트에서 Wordpress를 실행중인 경우 Wordpress 플러그인 만 다운로드하면 되므로 사이트에 포함하기가 훨씬 쉽습니다. Disqus는 함께 제공되..

SW/JavaScript 2020.05.26

jQuery, Java Script : 인터랙티브 메트로 스타일 그리드 대시 보드 생성

Windows 8이 새로운 디자인의 첫 번째 그림을 발표 한 이후 메트로 스타일에 열광했습니다. 사람들은 좋아하고, 현대적이며, 깨끗하고, 단순하며, 모바일 장치, 특히 태블릿 장치에서 사용하기가 정말 쉽습니다. 2013년에는이 메트로 스타일을 디자인에 적용하는 더 많은 웹 사이트를보기 시작하는 추세가 될 것입니다. 그러나 웹 사이트의 경우 이것은 좋은 생각입니다.이 스타일링은 다른 웹 사이트 디자인에서 작동합니다. 이 자습서에서는 메트로 스타일 대시 보드를 만들고이를 위해 gridster라는 매우 유용한 jQuery 플러그인을 사용합니다. Gridster Gridster를 사용하면 드래그 앤 드롭 다중 열 그리드를 만들 수 있습니다. 그리드의 모든 레이아웃은 플러그인에 의해 처리되며 각 상자가 얼마나 ..

SW/JavaScript 2020.05.25

jQuery : WordPress 관리 영역에서 jQuery 사용하는 방법, 예제

Wordpress 관리 영역에서 코딩 할 때 Javascript가 필요한 일부 기능을 코딩하는 경우가 있습니다. Wordpress에는 jQuery라는 내장 Javascript 라이브러리가 제공됩니다. Javascript 프레임 워크로 Javascript로 거의 모든 작업을 매우 쉽게 수행 할 수 있습니다. 관리 영역에서 작업 할 때 jQuery는 이미 모든 페이지에 포함되어 있으며 고유 한 Javascript 파일에서 사용할 수 있습니다. 그러나 jQuery로 작업 할 때 일부 사람들이 겪는 일반적인 문제가 있으며 이는 $ 기호를 사용하는 것입니다. 대부분의 사람들은 스크립트 태그를 사용하여 파일을 로드하고 $ (document) .ready () 함수를 사용하여 jQuery 코드를 사용하여 jQuery..

SW/JavaScript 2020.05.24

JavaScript, JQuery : gmaps.js로 Google지도 만들기

GMaps.js 사용 방법 GMaps는 Google지도를 사용하여 사용자에게지도를 표시하기가 매우 쉬운 자바 스크립트 플러그인입니다. 지도, 길 찾기, 정보 상자 등에 대한 포인터를 쉽게 추가 할 수있는 여러 옵션이 있습니다. 이 플러그인은 방대한 옵션이 많기 때문에이 튜토리얼에서는 모든 옵션을 다루지는 않습니다. 가장 많이 사용할 옵션 위주로 다루어 봅니다. 이 플러그인에 대한 모든 옵션을 보려면 Github Repository에서 설명서를 볼 수 있습니다. 문서 GMap.js를 사용하려면 Github에서 최신 버전을 다운로드해야합니다. GMap 다운로드 최신 버전이 나오면 헤드 태그 안에 페이지에 Javascript 파일과 jQuery가 포함됩니다. gmap.js를 페이지에 추가하면 GMaps라는 자..

SW/JavaScript 2020.05.23

jQuery, JavaScript : Mousetrap.js로 키보드 단축키 처리 : 예제, 구현, 개요

Mousetrap.js는 웹 응용 프로그램의 키보드 단축키를 쉽게 설정할 수있는 자바 스크립트 플러그인입니다. 특정 키 푸시에서 실행할 기능을 정의 할 수 있습니다. 단일 키 또는 키 조합 또는 일련의 키로 기능을 설정할 수 있습니다. Mousetrap.js는 github에서 구할 수 있으며 다운로드 할 수 있습니다. 브라우저 지원 Mousetrap.js는 모든 브라우저에서 사용할 수 있으며 다음에서 사용할 수 있도록 지원됩니다. Internet Explorer 6+ Chrome Safari Firefox Opera 사용법 다른 Javascript 파일과 마찬가지로 페이지에 파일을 포함시키기 만하면 새로운 Mousetrap 개체가 만들어집니다. 페이지에 mousetrap.js 파일을 포함 시키면 키보드 ..

SW/JavaScript 2020.05.21

jQuery, Java Script : 자바 스크립트 전체 화면 API : 예제, 구현

전체 화면 API는 전체 웹 컨텐츠를 페이지에 표시 할 수 있는 쉬운 방법입니다. 키보드에서 F11 키를 누르는 것과 매우 유사하지만 개발자가 선택하여 수행 할 수 있습니다. 이미지를 클릭하면 브라우저를 전체 화면으로 볼 수 있습니다. 이 기능의 가장 좋은 점은 전체 페이지일 필요는 없으며 HTML 요소를 전체 화면으로 만들 수 있다는 것입니다. 즉, 전체 페이지를 항상 전체 화면으로 표시하는 대신 전체 화면 API를 이미지에 할당하고 이미지를 클릭하면 이미지를 전체 화면으로 집중할 수 있습니다. 전체 화면 API 지원 불행히도 모든 브라우저가 이 기능을 지원하는 것은 아니므로, 사용하기 전에 방문자 브라우저가 이 기능을 지원하는지 확인해야합니다. 사용하는 브라우저가 지원한다면 사용할 수 있고, 브라우저..

SW/JavaScript 2020.05.20

다른 버전의 jQuery 로드하기 : 방법, 예제, 구현, 개요

어떤 종류의 프론트 웹 개발을 수행했다면 웹 사이트를 개발할 때 jQuery가 얻을 수있는 이점을 이해할 수 있습니다. jQuery의 가장 큰 장점 중 하나는 모든 브라우저에서 동일하게 수행되므로 최신 버전의 크롬에서 수행하는 모든 작업은 IE에서 동일하게 작동한다는 것입니다. jQuery로 수행하는 모든 작업이 다른 브라우저에서 작동한다는 것을 알고 있으므로 이는 jQuery 애니메이션 작업시 큰 이점입니다. JSON 또는 XML jQuery로 작업하더라도 다른 브라우저에서 작업하기가 매우 쉽습니다. 최근 jQuery 블로그에서 jQuery 버전 2에서는 IE8 이하를 지원하지 않을 것이라고 발표했습니다. jQuery 2.0 (2013 년 초, 1.9 이후) : 이 버전은 jQuery 1.9와 동일한 ..

SW/JavaScript 2020.05.19

JavaScript, jQuery : cookie.js : 쿠키 작업하는 방법 : 예제, 방법, 구현, 기능

자바 스크립트에서 쿠키 작업 쿠키는 방문자 컴퓨터에 저장되는 임시 데이터의 변수입니다. 그들은 일반적으로 로그인 양식에 내 사용자 이름을 기억하는 것과 같은 것들에 사용됩니다. 이는 데이터베이스에 정보를 저장하기 위해 로그인하지 않아도 재 방문자에 대한 정보를 저장하는 유용한 방법입니다. 쿠키는 방문자 컴퓨터에 저장된 파일 일 뿐이므로 보안 정보를 저장하는 데 쿠키를 사용해서는 안됩니다. 이 기사에서는 서버 측과 클라이언트 측 모두에서 쿠키를 설정할 수 있습니다.이 기사에서는 Javascript를 사용하여 클라이언트 측에서 쿠키를 설정하는 프로세스를 살펴 보겠습니다. Raw Javascript Javascript에서 쿠키로 작업하는 것은 Javascript의 최고의 기능이 아니며 쿠키 설정 및 가져 오기..

SW/JavaScript 2020.04.06

jQuery : 페이지에 항상 뷰 요소 유지하기 : 예제, 구현

웹 디자인의 일반적인 추세는 페이지를 아래로 스크롤 할 때 내용을 이동시켜 중요한 내용이 항상 화면에 표시되도록하는 것입니다. 많은 웹 사이트에서 원하는 정보를 사용하여이 작업을 수행 할 수 있으며, 일부는 상단 탐색에 사용하고, 일부는이 기능을 사용하여 소셜 미디어 단추를 표시하고, 일부는 메일 목록 구독 상자를 항상 볼 수 있도록합니다. Hongkiat 웹 사이트 웹 디자인 웹 사이트 Hongkiat은 이 기능을 사용하여 로고, 소셜 미디어 공유 버튼 및 검색 상자를 항상 방문자에게 보여줍니다. 이를 통해 방문자는 페이지의 어느 곳에서나 현재 페이지를 항상 공유 할 수 있습니다. 웹 사이트 로고는 홈페이지로 돌아가는 링크이며 검색 상자를 통해 방문자는 항상 페이지의 어느 곳에서든 주제를 검색 할 수 ..

SW/JavaScript 2020.04.03

Web, jQuery : DropKick.js : 드롭 다운을 만드는 방법 : 예제, 구현

오늘의 튜토리얼에서는 jQuery 플러그인을 사용하여 셀렉트 박스의 스타일을 div 및 아이템 리스트를 사용하도록 스타일을 변경합니다. 셀렉트 박스를 div 및 아이템 리스트로 변환하는 이유는 원하는 방식으로 스타일을 쉽게 지정할 수 있기 때문입니다. 일반 셀렉트 박스를 사용하면 맨 위에 선택한 옵션의 스타일을 지정할 수 있지만 셀렉트 박스의 드롭 다운 옵션을 쉽게 스타일 지정할 수는 없습니다. 이들이 아이템 리스트인 경우 선택한 항목에 CSS 클래스를 적용하고 스타일을 변경할 수 있습니다. DropKick.js 맞춤 드롭 다운을 만드는 것은 일반적으로 많은 추가 설정 시간이 필요한 지루한 프로세스입니다. 키보드 탐색과 같은 기본 드롭 다운에 편의성이 없는 경우가 종종 있습니다. DropKick은 지루함..

SW/JavaScript 2020.04.01

jQuery : 첫 번째 엘리먼트의 N번째 값 얻기 : 방법, 예제, 구현

다음은 jQuery 객체에서 첫 번째 요소를 가져오는 간단한 코드입니다. 페이지에서 처음 5개의 단락을 가져오려면 페이지의 모든 단락을 가져와서 시작합니다. var paragraphs = $('p'); 그런 다음 slice () 메서드를 사용하여 첫 번째 엘리멘트 일부 값을 반환합니다. function returnElements( $obj, $value ){ return $obj.slice(0, $value); } var firstFiveParagraphs = returnElements( $('p'), 5 );

SW/JavaScript 2020.03.31

Web, jQuery : 부분 페이지 자동 로드 메소드 : 예제, 구현, 사용 방법

jQuery 로드 메소드 사용 방법 jQuery와 PHP를 사용하여 웹 페이지에 RSS 피드를 표시하는 작은 웹 응용 프로그램을 만드는 방법을 배웁니다. 이를 위해 jQuery AJAX 기능을 사용하여 PHP 프록시에서 데이터를 쉽게 가져 와서 웹 페이지에 표시 할 것입니다. jQuery Ajax 로드 메소드 이 튜토리얼에서는 AJAX Get 함수를 사용하여 파일의 내용을 가져 오는 빠른 방법인 jQuery 로드 메소드를 사용합니다. 그러면 로드 메소드가 1분마다 PHP 페이지의 새 데이터로 자동 실행됩니다. 이 메소드는 URL, 데이터 및 콜백 함수의 3 가지 매개 변수를 사용합니다. .load( url [, data] [, complete(responseText, textStatus, XMLHttpR..

SW/JavaScript 2020.03.30

JavaScript, jQuery : 셀렉트박스 값 가져오기 : 예제, 구현, 방법

다음 jQuery 스니펫을 사용하여 셀렉트 박스에서 선택한 옵션의 값을 가져오겠습니다. 먼저 새 jQuery 함수를 작성합니다. function getSelectedOption(id){ $('#' + id).val(); } 그리고, 셀렉트 박스를 만들어줍니다. Select Red Blue Green Yellow Purple 이제 셀렉트 박스에 대해 선택된 값을 얻기 위해 방금 만든 함수를 호출하기 만하면됩니다. var text = getSelectedOption('selectBox');

SW/JavaScript 2020.03.27
반응형