동해둘리의 IT Study

jQuery 를 이용하여 barcode 를 화면에 출력하는 소스를 소개드립니다 아래 사이트에서 OpenSource로 공개하고 있구요 barcode-coder.com 아래와 같이 여러가지 타입의 바코드를 출력할 수 있구요. 아래와 같이 바코드 폭/넓이/배경색 등등을 조절할 수 있는 옵션이 주어집니다. 아래와 같이 두줄만 삽입하면 사용할 수가 있습니다. 필오한 소스코드는 아래 링크에서 다운로드 받으시면 됩니다. 아래에 예제소스를 공개합니다.

IT공부방/jQuery, ajax, java 2018. 3. 20. 10:53

blueimp jQuery FileUpload 를 사용하여 파일업로드를 할 때에, 인자값을 전달할 수 있습니다. 바로 아래의 formData 를 이용하는 방법인데요 $('#fileupload').fileupload({ url: url, autoUpload: true, dataType: 'json', done: function (e, data) { $.each(data.result.files, function (index, file) { //$('').text(file.name).appendTo('#files'); }); }, formData: {sUserVAlue: 'NO'} }).on('fileuploaddone', function (e, data) { $.each(data.result.files, f..

IT공부방/jQuery, ajax, java 2016. 10. 1. 18:08

페이지 내에있는 특정 엘리먼트를 모두 선택하여, 각각의 엘리먼트에 원하는 동작을 하고 싶을 때 사용하는 함수이다. $("button").click(function(){ $("li").each(function(){ alert($(this).text()) });}); Coffee Milk Soda 위와 같이 코딩했을 경우, 페이지 내의 모든 li 엘리먼트가 each 함수에 의해 하나씩 선택이되며, 각각에대하여 alert() 함수가 실행되게 된다. 이는, 모든 엘리먼트를 선택하는 데에도 사용하지만,특정 엘리먼트 중에서 특정 id 를 가진 엘리먼트를 제외할때도 사용할 수 있습니다. $("li").each(function(){ if (this.id != "exception") { alert($(this).text..

IT공부방/jQuery, ajax, java 2016. 9. 17. 13:49

Audio / Video 재생을 위한 jQuery 플러그인인 jPlayer 를 이용하여 MP4 타입의 동영상을 플레이 할 경우, 아래와 같이 mp4 키를 이용하여 코딩하면 오류가 발생합니다. $(document).ready(function(){ $("#jquery_jplayer_1").jPlayer({ ready: function () { $(this).jPlayer("setMedia", { title: "my title", mp4: "http://www.bbhq.com/vfiles/mine.mp4", poster: "http://www.bbhq.com/vfiles/mine.png" }); }, swfPath: "/jp", supplied: "mp4" }); jplayer 에서는 mp4 키를 제공하지 않..

IT공부방/jQuery, ajax, java 2016. 9. 14. 17:11

jQuery 함수 중에서, Prepend() 함수는 특정 엘리먼트 바로 앞에 원하는 엘리먼트를 넣는 함수이다 $("button").click(function(){ $("p").prepend("Prepended text"); }); This is a paragraph. 예를 들어, 위와같이 코딩했을경우, 태그 바로 앞쪽에 Prepended text 가 삽입되게 됩니다. 온라인에서 바로 확인하려면 아래 링크를 클릭하시면 됩니다. http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_html_prepend

IT공부방/jQuery, ajax, java 2016. 9. 14. 16:32

jQuery 플러그인 중에서, Audio / Video 재생시 사용할 수 있는 플러그인이 jPlayer 입니다 가장 큰 장점은 Internet Explorer 5 버전에서조차 실행할 수 있다는 것입니다. 아래 코드는 jPlayer 가 제공하는 샘플코드 중에서, 불필요한 부분은 제거하고, 가장 단순한 형태로 편집한 jPlayer 샘플입니다 playstopmutemax volume repeat Update RequiredTo play the media you will need to either update your browser to a recent version or update your Flash plugin. jPlayer 를 다운로드 받은후에 압축을 해제해보면, example 폴더나 dist 폴더 등..

IT공부방/jQuery, ajax, java 2016. 9. 12. 10:28

이미지를 퍼센트 %로 줄여서 보여주는게 아니라, jQuery 를 이용하여 이미지의 크기를 실제로 줄여버리는 코드참고 http://www.jqueryscript.net/demo/Dynamic-Image-Resizing-Plugin-with-jQuery/example/

IT공부방/jQuery, ajax, java 2016. 9. 8. 16:36

jQuery FileUpload Plugin 파일업로드시 업로드 위치 동적변경하기 https://github.com/blueimp/jQuery-File-Upload 에서 구할 수 있는 jQuery blueimp Fileupload Plugin 을 사용하면, 파일업로드를 아주 쉽게 구현할 수 있습니다. 기본적으로 설치하여 사용하는 방법은 얼마전에 올린 아래 포스팅을 참고하시기 바랍니다.http://doolyit.tistory.com/38 오늘 포스팅의 주제는, 파일업로드를 할때... 동적으로 파일업로드되는 위치를 변경하는 방법입니다.예를 들자면, 로그인한 사용자에 따라서 별도로 업로드 폴더를 생성해야 하는 경우 사용할 수 있겠죠.... jQuery File Upload Plugin 을 사용하는 경우, Up..

IT공부방/jQuery, ajax, java 2016. 8. 30. 16:47

향후, 참고를 위해 좋은 자료가 있는 포스팅을 기록으로 남김니다. 자료출처 : http://cafe.naver.com/jjdev/1714 [step1] mysql database:ksmart member table [step2] nodejs server 코드 // mysql dbms연결var mysql = require('mysql');var client = mysql.createConnection({ user:'root', password:'java1234', database:'ksmart'});var http = require('http');var express = require('express');var app = express();app.use(express.static('public'));app..

IT공부방/jQuery, ajax, java 2016. 8. 5. 17:28

1. addClass() 함수 특정한 엘리먼트에 동적으로 class 속성을 부여하는 함수 This is a heading This is a paragraph.This is another paragraph. Add a class name to the first p element 웹상에서 바로 확인하기 http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_html_addclass 2. appendTo() 함수 지정한 엘리먼트의 끝에 지정된 엘리먼트를 붙인다. $("Hello World!").appendTo("p"); 위 코드의 경우, 페이지내의 모든 P 엘리먼트의 끝에 Hello World! 이 코드를 붙인다. 웹상에서 바로 확인하기 http://www..

IT공부방/jQuery, ajax, java 2016. 7. 30. 18:42

웹페이지 내의 각 엘리먼트에 움직임을 줄 수 있는 jQuery plugin 을 소개합니다. 위 사이트에서 보듯이 GSGD 에서 개발하여 오픈소스로 제공하며, CDN 도 제공하고 있습니다. 아래 코드가 기능데모 코드입니다. 그대로 복사해서 테스트 해보셔도 되고, 첨부파일 다운로드 받아서 example 폴더에 있는 example.html 파일을 실행시켜보면 간단하게 기능을 확인할 수 있습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 6..

IT공부방/jQuery, ajax, java 2016. 7. 26. 12:46

1. resize 함수 브라우저의 윈도우 크기가 변할때 마다 호출되는 함수 $(window).resize(function(){ $('span').text(x += 1); }); 아래에, 테스트 URL 이 있음 http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_resize 보통, 페이지가 로드될때 onload 함수가 먼저 실행되므로, onload 함수에서 원하는 페이지 크기를 설정하고 resize 함수에도 같은 페이지 크기를 설정해 놓으면, 로드되는 순간부터 윈도우 크기가 변하는 모든 순간에도, 원하는 페이지 크기가 유지되게 된다. 아래 코드는, 로드되는 페이지가 화면에 꽉차가 할때 사용되는 코드이다. 이때, CSS 에서 marign 과..

IT공부방/jQuery, ajax, java 2016. 7. 25. 14:59

1. preventDefault 함수 해당 엘리먼트에 발생한 이벤트로 인해 동작하는 URL 오픈을 중지시킨다. $("a").click(function(e){ e.preventDefault(); this.GoToProcess() }); 위의경우, a 엘리먼트가 Click 된 경우 a 태그로 인해 링크하게될 URL 을 열지 않도록 처리하는 기능을 한다. 그 대신에, 특정 동작을 진행하고자 할때 preventDefault() 사용한 후,그 뒤에 하고자하는 동작을 코딩하면 된다. 2. bind 함수 해당 엘리먼트에 이벤트 핸들러 기능을 부여한다. $("p").bind("click", function(){ alert("The paragraph was clicked."); }); 위의 경우, p 엘리먼트에 clic..

IT공부방/jQuery, ajax, java 2016. 7. 22. 18:58

1. offset 함수 jQuery 의 offset 함수는 대상이 시작되는 x좌표와 y좌표 값을 리턴한다. 2. width 함수 대상 엘리먼트의 폭을 반환한다. $("button").click(function(){ alert($("div").width()); }); 3. mouseenter 함수 / mouseleave 함수 마우스포인터가 해당 객체위로 올라왔을 경우에 호출된다. 바로 확인하려면 아래 링크 클릭!!!http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_mouseenter_mouseleave 4. click 함수 해당객체에 마우스클릭이 일어났을 때 호출된다. 바로 확인하려면 아래링크 클릭!!!http://www.w3school..

IT공부방/jQuery, ajax, java 2016. 7. 22. 17:51

jQuery 함수 사용방법을 알아보기 전에, jQuery 에 대하여 간략하게 정리해보면 다음과 같다. 1. 개요 1) JavaScript 라이브러리 이다 2) JavaScript 로 만들어놓은 기능(코드)의 집합이다 3) 여전히 문법은 JavaScript 기반이다 4) jQuery = CSS 의 선택자 (태그, 아이디, 클래스 등등) + JavaScript 기능 + 확장기능 2. 사용방법 1) jQuery 기능이 들어있는 코드파일이 필요하다 2) http://www.jquery.com 에서 다운로드 받거나 링크하여 사용한다. 3 jQuery 함수 1) 모든 jQuery 구문은 항상 jQuery 함수로 부터 시작된다. jQuery("#div").css("background-color", "red"); 위 ..

IT공부방/jQuery, ajax, java 2016. 7. 21. 16:58

ajax 는 Asynchronous Javascript and Xml 의 약자인데, 비동기식 자바스크립트와 XML 이라고 보면된다 javascript 의 XMLHttpRequest 를 이용하여 직접 구현하여도 되지만, jQuery 를 이용하는 것이 훨씬 더 간단하게 구현할 수 있다. 가장 큰 특징은 현재 페이지에서 페이지의 이동/전환없이, 특정 이벤트를 통해 서버와 http 통신을 할 수 있다는 것이며, 이를 통해 현재 페이지의 일부분을 업데이트 할 수 있다는 것이다. function ajaxAct() { $.ajax ({ type : "GET", // GET 또는 POST url : 'updatetest.htm', // 서버측에서 가져올 페이지 data : 'a=1&b=2&c=3', // 서버측에 전달..

IT공부방/jQuery, ajax, java 2016. 7. 21. 11:19