728x90
300x250

[Javascript(jQuery)] 바코드 생성하기

이번에 소개할 내용은 바코드 생성을 위한 소스코드를 소개하려고 한다.

 

1. 소스코드

바코드 개발에 사용될 수 있는 코드이다. jQuery로 작성된 바코드이다.

<html>
<head>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="jquery-barcode.js"></script>
</head>
<body>

     <div id="bcTarget1" style="margin-top:30px;"></div>
     <div id="bcTarget2" style="margin-top:30px;"></div>
     <div id="bcTarget3" style="margin-top:30px;"></div>
     <div id="bcTarget4" style="margin-top:30px;"></div>
     <div id="bcTarget5" style="margin-top:30px;"></div>
</body>

<script type="text/javascript">
         $("#bcTarget1").barcode("1234567890128", "code128");
         $("#bcTarget2").barcode("1234567890128", "ean13",{barWidth:2, barHeight:30});
         $("#bcTarget3").barcode("1234567", "int25",{barWidth:2, barHeight:30});
         $("#bcTarget4").barcode("1234567890128", "code128",{barWidth:1, barHeight:70,showHRI:true,bgColor:"red"});         
         $("#bcTarget5").barcode("1234567890128", "datamatrix",{showHRI:false,bgColor:"yellow"});
</script>

</html>

 

2. 태스트 화면(시연 화면)

시연화면이다.

그림 1. 바코드의 예(입문 / 종류)

* [첨부(Attachments)]

barcode_jquery.zip
0.04MB
210309_HTML_jQuery_Based_Barcode_guideline.zip
0.22MB

 

[Apache License v2.0을 적용 받는다.]

* 맺음글(Conclusion)

jQuery 기반의 바코드를 생성하는 방법에 대해서 HTML 태그를 통하여 알아보았다.

* 참조자료(Reference)

1. jQuery, https://jquery.com, Accessed by 2021-03-09, Last Modified 2021-03-09.

2. Barcode-Coder: BARCODE : JQUERY PLUGIN TO CREATE BARCODE ONLINE (barcode-coder.com), https://barcode-coder.com/en/barcode-jquery-plugin-201.html, Accessed by 2021-03-09, Last Modified 2021-03-09.

반응형
저작자표시 비영리 동일조건

'소프트웨어(SW) > W3C - HTML5, Javascript' 카테고리의 다른 글

[W3C] Unicorn - W3C 통합 검사기  (7) 2018.07.26
[Javascript] 클립보드 제어(복사)  (9) 2013.12.26
[Javascript / HTML] Modal 창 - 폼 전송처리시 새창 팝업처리 방지  (10) 2013.12.25
[jQuery] show, hide  (9) 2013.12.11
[jQuery] jQuery CDN(배포) 안내  (9) 2013.12.09
728x90
300x250
[W3C] Unicorn - W3C 통합 검사기

 

이번에 소개할 것은 W3C에서 제공하는 HTML/CSS에 대한 표준 검사기입니다.

 

 

그림 1. Validator - W3C

 

이 웹 사이트에 접속해서 URI를 검사하면 해당 사이트가 웹 표준을 준수한 프로그램인지 확인할 수 있습니다.
CSS와 HTML에 대해서 표준 형태를 검사합니다.

 

1. 참고자료(Reference)


1. https://validator.w3.org/unicorn/?ucn_lang=ko, Accessed by 2018-07-26
2. https://validator.w3.org/docs/, Accessed by 2018-07-26
3. https://jigsaw.w3.org/css-validator/, Accessed by 2018-07-26

 

반응형
저작자표시 비영리 동일조건

'소프트웨어(SW) > W3C - HTML5, Javascript' 카테고리의 다른 글

[Javascript(jQuery)] 바코드 생성하기  (9) 2021.03.09
[Javascript] 클립보드 제어(복사)  (9) 2013.12.26
[Javascript / HTML] Modal 창 - 폼 전송처리시 새창 팝업처리 방지  (10) 2013.12.25
[jQuery] show, hide  (9) 2013.12.11
[jQuery] jQuery CDN(배포) 안내  (9) 2013.12.09
728x90
300x250

[Javascript] 클립보드 제어(복사)

 

<script>

window.clipboardData.setData("Text", "클립보드로 복사할 글");

</script>

 

이와 같이 간단하게 구현할 수 있습니다.

clipboardData.setData( x , y )를 통해 사용할 수 있습니다.

 

이 명령은 텍스트를 클립보드로 저장시키는 명령입니다.

 

 

참고)

 

사전적 의미의 클립보드 : 컴퓨터에서 임시 저장 공간으로 사용하기 위해 확보된 메모리 영역.
반응형
저작자표시

'소프트웨어(SW) > W3C - HTML5, Javascript' 카테고리의 다른 글

[Javascript(jQuery)] 바코드 생성하기  (9) 2021.03.09
[W3C] Unicorn - W3C 통합 검사기  (7) 2018.07.26
[Javascript / HTML] Modal 창 - 폼 전송처리시 새창 팝업처리 방지  (10) 2013.12.25
[jQuery] show, hide  (9) 2013.12.11
[jQuery] jQuery CDN(배포) 안내  (9) 2013.12.09
728x90
300x250

[Javascript / HTML] Modal 창 - 폼 전송처리시 새창 팝업처리 방지

 

form target을 _self로 설정했음에 불구하고, 전송처리(submit)할 때, 새창 뜨는 것에 대해 팝업 처리를 하지 않고 현재 창에서 새로고침(Refresh)가 되는 방법에 대해 소개하고자 합니다.

 

1. Javascript로의 처리

window.name = "dialogPopup";

form.target = "dialogPopup";

form.submit();

 

 

2. Base target(자체 선언)을 이용하는 방법

<base target="_self" />

 

두 작업 다 Head 사이에 선언해야 합니다.

이상입니다.

반응형
저작자표시

'소프트웨어(SW) > W3C - HTML5, Javascript' 카테고리의 다른 글

[W3C] Unicorn - W3C 통합 검사기  (7) 2018.07.26
[Javascript] 클립보드 제어(복사)  (9) 2013.12.26
[jQuery] show, hide  (9) 2013.12.11
[jQuery] jQuery CDN(배포) 안내  (9) 2013.12.09
[jQuery] Treeview Library - 추천 라이브러리  (8) 2013.12.05
728x90
300x250

[jQuery] Show(), Hide()

 

CSS에서 Show, Hide는

 

Display:none;

Display:block;

 

이와 같은 사항으로 표현합니다.

 

jQuery에서는

 

Show(), Hide() 명령어로서 이와 같은 기능을 수행할 수 있습니다.

 

다음은 응용예제입니다.

Show()와 Hide() 제어에 관한 예제입니다.

 

<script>

     $(document).ready(function(){
            $("#ckDiv").hide()

$("#button_sub").click(function(){

if($("#ckDiv").css("display") != "none"){

$("#ckDiv").show();

}else{

$("#ckDiv").hide();

}

});

});

</script> 

 

<div id="ckDiv">

야호

</div>

 

<input id="button_sub" type="submit" values="제어"> 

 

 

이상입니다.

반응형
저작자표시

'소프트웨어(SW) > W3C - HTML5, Javascript' 카테고리의 다른 글

[Javascript] 클립보드 제어(복사)  (9) 2013.12.26
[Javascript / HTML] Modal 창 - 폼 전송처리시 새창 팝업처리 방지  (10) 2013.12.25
[jQuery] jQuery CDN(배포) 안내  (9) 2013.12.09
[jQuery] Treeview Library - 추천 라이브러리  (8) 2013.12.05
[jQuery] javascript 연계 - 체크박스 (전체선택/해제) 기능  (9) 2013.12.03
728x90
300x250

[jQuery] jQuery CDN(배포) 안내

 

CDN이라는 정의는 Contents Delivery Network라는 뜻으로 네티즌에게 영화, 뮤직비디오 등 대용량의 콘텐츠를 빠르고 안정적으로 전달하고자 등장한 서비스라고 볼 수 있다.

jQuery라는 라이브러리를 웹에서는 자주 사용하기 때문에, 조그마한 js(자바스크립트)의 파일이지만, 대량의 사용자가 접속한다고 가정했을 때, Traffic을 잡아먹을 수 있다고 판단돼서 서비스하는 것 같다. 둘째로 개인 서버에 비해 배포 속도가 빠르므로, 사용자는 빠르게 이용할 수 있다는 점이 있다.

 

jQuery 공식채널에서는 MaxCDN에서 지원하는 CDN 서비스를 제공한다.

 

1. jQuery CDN

 

http://code.jquery.com/

 

 

2. Microsoft CDN

 

http://ajax.microsoft.com/ajax/jquery/jquery-1.10.2.js

http://ajax.microsoft.com/ajax/jquery/jquery-1.10.2.min.js

http://ajax.microsoft.com/ajax/jquery/jquery-2.0.3.js

http://ajax.microsoft.com/ajax/jquery/jquery-2.0.3.min.js

 

3. Google Ajax API CDN

 

http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js

http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js

http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.js

http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js

 

 

 

반응형
저작자표시

'소프트웨어(SW) > W3C - HTML5, Javascript' 카테고리의 다른 글

[Javascript / HTML] Modal 창 - 폼 전송처리시 새창 팝업처리 방지  (10) 2013.12.25
[jQuery] show, hide  (9) 2013.12.11
[jQuery] Treeview Library - 추천 라이브러리  (8) 2013.12.05
[jQuery] javascript 연계 - 체크박스 (전체선택/해제) 기능  (9) 2013.12.03
[Javascript] 현재 페이지 Refresh 방법 - (3가지)  (6) 2013.12.01
728x90
300x250

[jQuery] Treeview Library

 

 

jQuery로 만든 Treeview입니다. 품질이 매우 우수합니다.

외국에서 만들었는데 ASP.NET뿐만 아니라 다양한 PHP 등 다양한 웹 프로그래밍 언어에서 사용하기에는 안성맞춤인 거 같습니다.

이상입니다.

 

jquery.treeview.zip

 

제작자 홈페이지 : http://bassistance.de/jquery-plugins/jquery-plugin-treeview/

제작자 : Jörn Zaefferer

 

 

반응형
저작자표시

'소프트웨어(SW) > W3C - HTML5, Javascript' 카테고리의 다른 글

[jQuery] show, hide  (9) 2013.12.11
[jQuery] jQuery CDN(배포) 안내  (9) 2013.12.09
[jQuery] javascript 연계 - 체크박스 (전체선택/해제) 기능  (9) 2013.12.03
[Javascript] 현재 페이지 Refresh 방법 - (3가지)  (6) 2013.12.01
[jQuery] 하이퍼링크 예제를 통한 {속성 Get, Set에 관한 설명}  (5) 2013.12.01
728x90
300x250

[jQuery] javascript 연계 - 체크박스 (전체선택/해제) 기능

 

이걸 왜 구현했느냐면, jQuery 상에서 다양한 방법을 찾아보았으나, Attr만 가지고 구현할 때의 100%의 동작이 아니고, 버그로 인해 일부 동작하지 않은 것을 확인하였습니다.

그래서 원시적인 방법이지만, Checkbox를 Cnt와 Last 값을 비교하여 Javascript의 원래 동작 기능을 연계하여 전체선택 / 해제 기능을 구현했습니다. 

<script>

 

function toggleChecked() {
            var i = 0;
            var Last = (($("table[id=test']").find("input[type=checkbox]").length) / 3);
            var cnt = 0;


            i = 1;
            while (i <= Last) {
                if (document.getElementById("chk_" + i).checked) {
                    cnt++;
                }
                i++;
            }


            if (cnt == Last) {
                i = 1;
                while (i <= Last) {
                   
                    document.getElementById("chk_" + i).checked = false;
                    i++;
                }
            } else {
                i = 1;
                while (i <= Last) {
                    document.getElementById("chk_" + i).checked = true;
                    i++;
                }
            }

 }

 

</script>

 

빨간 부분이 일부에서 3을 곱해버리는 현상이 생겨서 나눗셈으로 단순하게 처리했는데, 환경에 맞게 계산을 대입하면 될거라고 봅니다.

 

<table id="test"> 

     <tr>

          <td><input id="chk_1" type="checkbox">  <td>

      </tr>

     <tr>

          <td><input id="chk_2" type="checkbox">  <td>

      </tr>

     <tr>

          <td><input id="chk_3" type="checkbox">  <td>

      </tr>

</table>

 

 

반응형
저작자표시

'소프트웨어(SW) > W3C - HTML5, Javascript' 카테고리의 다른 글

[jQuery] jQuery CDN(배포) 안내  (9) 2013.12.09
[jQuery] Treeview Library - 추천 라이브러리  (8) 2013.12.05
[Javascript] 현재 페이지 Refresh 방법 - (3가지)  (6) 2013.12.01
[jQuery] 하이퍼링크 예제를 통한 {속성 Get, Set에 관한 설명}  (5) 2013.12.01
[Javascript] 비밀번호 - 정규식 표현 (탬플릿)  (6) 2013.11.28

+ Recent posts

티스토리툴바