My Coding World

웹사이트를 만들다보면 작은 구석의 이미지를 클릭하면 화면에 나름 꽉차게 보이는 화면을 구성하고 싶을때가 있지요. 사용자에게 편의를 제공하는게 좋은 프로그램이니까요~ 그럴때 이미지를 클릭하면 화면에 크게 나오게 하는 소스를 정리해 봤어요. 일단 Jquery를 불러와야 하니까 CDN 사이트에서 가져와 보면 위의 3.x minified 가져오면 소스는 아래와 같지요. 그리고 스타일도 정해줘야 합니다. 아래와 같이 하면 됩니다. 높이 기준으로 100%로 설정되어 있지요. 이제 HTML에 DIV 요소를 넣고 띄워주는 구문이 필요합니다. 실제 HTML (처음에 띄워주는 것으로 코드를 넣어봤어요) 마지막으로 script 구문으로 제이쿼리의 위력을 선보여야 하겠지요? 이렇게 하고 실행하면 실제 구현한 화면을 보면.....

이걸 몰랐을때는 전부 하나하나 요소마다 input의 속성 중 disabled를 코딩했는데, 이걸 안 다음부터는 간단하게 처리했다. 혹시 모를 제2의 내 자신을 위해 간단하 코드를 공유해 보고자 한다. $(document).ready(function(){ // 조회화면 구현시 적용함 input을 모두 disabled 하기 // $("div *").disable(); $("div *").find("input,textarea").prop("disabled",true); }); }); 너무 간단하지만, 몰랐을때는 시간을 많이 허비했다. 역시 배워야 한다. 그리고 실행해야 한다.

아래와 같은 코드로 프로그램을 작성할때, 이런 경우는 왜 실행이 안되고 오류가 발생하지? 그때마다 콘솔창 엄청 보면서 디버깅하는 나날이 이어지고 있네요. 고수들의 글을 구글링해서 내 프로그램에 넣어보며 만족한 기분도 있지만, 해결이 안되서 삽질만 수시간 하다가 알고 보면 너무나 간단한 것이었을때의 허탈함이란.... 흠... 코딩하는 사람들의 숙명같은 것 같아요..... 제이쿼리를 쓰면서 $(document).ready(function() 이 함수안에 들어간 함수를 호출할 수 있을까? 이런 생각을 해봤는데, 참고할 좋은 내용이 있어 기록해 둡니다. 위에서 function doFunc() 부분을 $(document).ready() 내부로 넣고 button_02 를 클릭하면, ( 크롬 콘솔 출력 기준으로 ) ..

제이쿼리를 사용해서 책갈피기능... 웹페이지에서 내가 원하는 위치로 휘리릭 버튼을 누르면 이동하는 기능이죠. 간단히 구현이 가능합니다. 아래코드가 구현의 핵심인데요, 첫번째 이동할 곳의 내용들... 두번째 이동할 곳의 내용들... 세번째 이동할 곳의 내용들... 위의 코드로 구현하면 됩니다. 간단히 부연설명을 하면, 본문의 Html에 당연히 버튼을 만들어야 겠지요. 이동1 이동2 이동3 이동1~이동3 버튼을 누르면 화면의 스크롤이 해당 문구 div테그쪽으로 이동하는 것입니다. 부트스트랩을 이용해서 class에 이상한 내용들이 있는데, 무시해도 좋습니다. 버튼을 이쁘게 꾸미기 위해서 그렇게 만든것이니까요. 그럼 잘 활용하시길 바래요~

제이쿼리 이용해서 이미지 파일열기 후 화면에 이미지 보여주기 이미지를 화면에 뿌려줄때 파일열기를 이용해서 직관적으로 실행하고 싶을때, 제이쿼리의 강력한 기능으로 비교적 쉽게 구현이 가능하네요. 실무에 적용해서 실제 사용해 봤습니다. 삭제 버튼을 누르면 불러온 이미지가 사라지게 되는것이지요. 이미지등록 : 삭제

제이쿼리 이용해서 메뉴를 접었다 폈다 하기 많은 웹들을 보면서 좋은, 그리고 편리한 기능인 메뉴를 접었다 폈다 할 수 있는 기능을 과연 제이쿼리로 구현할 수 있을지 자료도 검색하면서 배우는 중입니다. 개발자들이 올려놓은 좋은 자료들을 공유해서 함께 문제를 해결해 보자구요.~~ 위의 '더보기'를 클릭하면 아래의 리스트가 나오는 것을 제이쿼리 html 그리고 css 3가지를 이용해서 만드는 과정입니다. 1번째 html 코드 더보기 V 가계부 날씨 네이버 예약 네이버 캐스트 네이버 클라우드 만화 / 웹툰 매거진캐스트 메모 뮤직 부동산 영화 오디오클립 오피스 웹소설 자동차 2. css 파일 .more { display:block; width: 55px; height: 16px; background-image:u..

radio버튼을 클릭시 동작하는 웹 jQuery로 구현하기 웹을 더욱 동적으로 만드는 방법이 뭘까요? 누를때마다 뭔가 바로 바로 동작하는 힘, 그것이 바로 웹의 강력한 힘이 아닐까 싶네요. 엑셀로 많은 좋은 기능등을 만들어서 서로 공유해서 사용하는데 한계를 느낄 수 있습니다. 웹은 공공재라서 서로 더 발전시키고 더 키워나가는 재미가 솔솔하잖아요. 제이쿼리의 강력한 기능을 하나 소개합니다. 라디오버튼을 누를때 동작하는 웹? 상상해도 즐겁네요. 원리는 아래의 코드가 핵심입니다. 제이쿼리의 고유코드겠지요. $(document).ready(function() { $("input:radio[name=separate_date]").click(function() { process_list(); }) }); 출고일과 ..

제이쿼리 그리고 PHP 그리고 다시 자바스크립트 그리고 자바의 값을 php로 전달해서 그 값을 받는 방법에 대한 설명입니다. 보통은 PHP를 사용해서 프로그램을 할 경우 aaa.php?name=hong&age=17 .... 위와 같이 표현합니다. 하지만, javascript와 함께 사용할때는 서버 언어와 클라이언트 언어의 한계때문에 서로 전송하는데 간단하지 않아요. 이것들 때문에 맨붕에 자주 빠집니다. 서로 통신할 수 있는 환경.... 웹 개발하면서 자주 부딪히는 부분이죠. 아래의 코드가 힌트가 되어줄 것입니다. 3가지 언어의 콜라보가 돋보이네요~ // jQuery 라이브러리를 사용. $("#comment-submit").click(function() { // comment-submit 버튼이 눌러지면 ..