잡동사니

이번에 개발 중인 시스템입니다. 생산공장에서 사용합니다. 생산 제품의 검사 정보를 수집, 통계, 분석하는 웹 프로그램입니다. 개발시작: 2013년 05월 서버 개발언어: PHP, Javascript 서버 개발프레임웍: XE, jQuery(jQGrid, jQPlot) - opensource 서버 데이터베이스: MySQL 클라이언트 개발언어: Visual Basic 6 시스템 구성 1. 클라이언트PC에서 바코드 스캔 및 제품 검사 2. 서버 Database로 데이터 전송 3. 서버에서 데이터 조회 공정별 검사 시스템의 측정 결과를 Database 서버로 전송 하면 Database 서버에서 측정 결과를 볼 수 있습니다. 그림 설명은 아래 사이트를 참고하세요. http://simulz.kr/xe/board_ph..

jQuery의 Mobile을 사용하면 스마트폰용으로 디자인을 할 수 있다. IE9에서는 이미지가 깔끔하게 나오지 않고 효과도 볼 수 없다. 구글 크롬에서 완벽하게 테스트 해볼 수 있다. 아래 페이지는 BOINCSTATS 통계 보기를 모바일용으로 꾸민것이다. http://simulz.kr/dev/boinc/create_user_img_mobile.php Input의 type값을 search로 설정하면 아래처럼 내용 삭제 버튼이 추가 된다. Select에 data-native-menu="false" 속성을 추가하면 아래처럼 바꿀 수 있다.

jQuery를 사용하여 FND 계산기를 만들었다. 미리보기 http://simulz.kr/dev/elec/7seg/ 기능 100% 버튼위에서 마우스 휠을 돌리면 확대·축소, 누르면 원래대로 FND 색상 설정 FND 추가·삭제 UI 테마 변경 추가할 기능 포트 순서 변경 결과 값 저장 등등등

준비물: (jQuery) 연결하기 블로그 이미지 그래프 카운터를 자동 새로고침 해보기. 아래 자바스크립트코드를 SCRIPT에 삽입하거나 JS 파일로 저장하여 연결한다. $(document).ready(function($){ var refresh_StatGraph = function() { var time = new Date().getTime(); var StatGraph = $("img[src*=StatGraph]"); //StatGraph.fadeOut('slow'); StatGraph.attr('src','/plugins/StatGraph/count/count.php?owner=개인번호&time='+time); //StatGraph.fadeIn('slow'); } self.setInterval(ref..

준비물: (jQuery) 연결하기 다음뷰 추천 플래시를 작은 것으로 바꾸고 그 아래에 표시되는 관련글을 삭제할 수 있다. 아래 자바스크립트 코드를 SCRIPT 태그로 감싸거나 JS 파일로 저장해서 연결한다. $(document).ready(function($){ var daumview = $('.blogger-news-widget'); $('.blogger-news-widget').html(daumview.html().replace('recombox1.swf', 'recombox3.swf').replace('400','67')); $('.article iframe[src*=daum]').remove(); }); var daumview = $('.blogger-news-widget'); 객체 재사용을 위해..

준비물: (jQuery) 연결하기 브라우저 기본 보안 설정으로는 현재 페이지의 호스트가 아닌 다른 서버에 HTTP 요청을 할 수 없다. 하지만 JSONP를 사용하면 보안 설정을 바꾸지 않고도 원격 데이터를 가져올 수 있다. 이 블로그에서는 게시물 아래 인기순 Top 글 목록에 적용되어있다. 데이터를 보내줄 원격 도메인 쪽에 JSON 형식으로 출력하도록 PHP 스크립트 코드를 작성한다. $json['key'] 에 저장된 자료는 자바스크립트에서 data.key 형식으로 가져올 수 있다. json_encode() 배열을 JSON 형식으로 인코딩한다. 데이터를 보여줄 곳에 스크립트를 작성한다.$.getJSON("http://simulz.com?callback=?", function(data) { $(select..

준비물: (jQuery) 연결하기 비표준 태그를 jQuery 플러그인으로 부드럽게 깜빡이는 효과를 줄 수 있다. 자바스크립트 연결하기 제작자 원문: http://www.bugzappy.com/cyclic-fade-jquery-plugin/ 적용하기$(selector).cyclicFade(); $(selector).cyclicFade(); selector로 지정한 요소들에 .cyclicFade() 플러그인 메서드를 적용한다. 편리한 방법으로는 HTML을 작성할 때 적용을 원하는 요소에 class='cyclicfade' 처럼 임의의 클래스를 지정해주고 $('.cyclicfade').cyclicFade(); 처럼 사용하면 cyclicfade 클래스를 가진 모든 요소에 적용이 된다. 다양한 옵션을 줄 수 있다...

준비물: (jQuery) 연결하기 미리보기 http://simulz.com/tag 관련글 (jQuery) 태그 목록 섞기 (jQuery) 티스토리 태그 목록 컬러풀하게~ 이번엔 버튼으로 섞어보자. 버튼을 누르면 글자 색상, 크기가 임의로 지정되고 순서가 섞이게 된다. 이전 글(관련글 참고)에서 작성한 코드를 재사용하기 위해 함수 안에 넣는다. var tag_random = function() { var taglogli = $('.taglog li'); taglogli.find('a').each(function() { $(this).css('color', getRandomRGB).css('font-size', getRandomNumber(8,24)+'pt'); }); taglogli.shuffle(); }..

준비물: (jQuery) 연결하기 이 블로그에 적용되어 있다.HTML에서 로딩 메시지 코드를 추가한다. 문서 상단에 추가할 수록 빨리 보인다. 바로 밑에 넣어도 된다. 로딩 중... CSS에 추가한다. #loading { border: 1px #000 solid; background-color: #eee; font-size:20pt !important; color:#000; text-align:center; top: 50%; left: 50%; padding-top: 10px; margin: -100px 0 0 -50px; width: 200px; height: 100px; z-index:10; position: absolute; } width, height를 알맞게 바꾼 후, margin의 top, l..

준비물: (jQuery) 연결하기 미리보기 http://simulz.com/tag 관련글: (jQuery) 티스토리 태그 목록 컬러풀하게~ 새로고침할 때마다 목록이 섞인다. ABC, 가나다였던 태그 목록을 랜덤 정렬로 변경해보았다. $.shuffle Plugin http://mktgdept.com/jquery-shuffle 위 사이트에서 js 파일을 내려 받고 사이트나 블로그에 업로드 한다. HTML HEAD에 아래 코드를 추가하여 JS를 연결한다. $('.taglog li').shuffle(); $('.taglog li') taglog 클래스를 가진 요소의 자식 중에서 li 요소들을 선택한다. $.shuffle(selector) 처럼 사용 가능하다.

준비물: (jQuery) 연결하기 미리보기 http://simulz.com/tag 새로고침 할 때마다 색상과 크기가 변한다. 많아야 5가지 색상과 크기뿐이었던 태그 목록을 랜덤 색상, 크기로 변경해보았다. 목록 섞기: (jQuery) 태그 목록 섞기 var getRandomRGB = function() { return '#' + Math.floor(Math.random()*16777216).toString(16); } var getRandomNumber = function(f, t) { var num = -1; while(f > num) num = Math.floor(Math.random() * (t+1)); return num; } $('.taglog li a').each(function() { $(t..

준비물: (jQuery) 연결하기 달력의 토요일을 아래처럼 파란색으로 변경해보자. $('.tt-calendar tr :nth-child(7)').removeClass('cal_day3').css('color','#0000ff'); $('.tt-calendar tr') tt-calendar 클래스를 가진 요소의 자식 중에서 tr 요소의 자식 요소들을 선택 :nth-child(index) 7번째 자식 요소(tr의 자식은 td)를 선택 .removeClass(class) 필요없는 내용이지만 확실히 해주려고... cal_day3 클래스를 제거한다. .css(key, value) color 속성의 값을 #0000ff 로 지정한다.

준비물: (jQuery) 연결하기 $('.recentPost li:odd, .recentComment li:odd, .searchList li:odd').css('background-color','#eeeeee'); $(selector, selector, ···) ,(쉼표) 를 사용하여 여러 요소들을 선택한다. 예제에서는 recentPost 클래스를 갖고 있는 요소의 자식 중에서 li 요소의 홀수번째 선택, recentComment 클래를 갖고 있는 요소의 자식 중에서...(쓰기 귀차니즘), searchList 클래스를...(역시 귀차니즘) 그 다음 .css(key, value) bacground-color 속성에 #eeeeee 값을 지정했다.

준비물: (jQuery) 연결하기 티스토리 사용자 중 테터데스크에 노출 되는 글에 첨부된 그림이 없으면 아래의 기본 이미지가 뜬다. 원하는 이미지로 변경을 해보자. $('img[src*=imgempty.png]').attr('src', 'http://cfs.tistory.com/custom/blog/2/20343/skin/images/imgempty.png'); img 요소 중 src 속성에 imgempty.png가 포함된 요소들을 찾아서. .attr() 메서드로 src 속성을 두번째 인자 값으로 변경한다. 이 블로그에 적용 되어있다. http://simulz.com 아래 그림으로 바뀌는 것을 볼 수 있다. (이 글은 제외)

프로그램 바로가기 http://simulz.kr/dev/ps3/trophycard/ ※ 이 사이트에 PSN ID를 등록하고 싶다면 먼저 http://cafe.naver.com/ps3friend 카페에 가입을 하세요! (추천인: 시뮬즈) PS3 게이머라면 트로피라는 것을 다 알 것이라 믿는다. 백금, 금, 은, 동 트로피 숫자를 카드 이미지 안에 표시해주는 사이트가 있다. 이 사이트는 트로피 카드 이미지를 조회하고 순위를 볼 수 있도록했다. 트로피 순위 조회 사이트의 기능으로는 · PSN ID로 정보 조회 및 트로피 카드 업데이트 · ID별 게임 목록 보기(완료율, 트로피 수) · 게임별 회원 목록 보기 · ID, 트로피 수, 업데이트날짜 순으로 정렬하기 · UI 테마 바꾸기 어제 밤새도록 적용한 것이 테..

아래 사이트에는 24가지의 UI 테마가 있다. http://jqueryui.com/themeroller/ 방문자마다 원하는 테마를 설정해서 보게 하려면 아래 페이지에서 플러그인을 연결하면 된다. http://jqueryui.com/docs/Theming/ThemeSwitcher 필요한 것은 jQuery Core와 Cookie 플러그인이다. 관련글: (jQuery) 연결하기 아래처럼 사용하면 쿠키 플러그인이 내장되어 있으니 따로 연결하지 않아도 된다. 때때로 적용이 안 되는 문제가 발생할 수 있다. 연속으로 테마를 바꿀 때는 적용이 잘 되지만, 링크를 통해 페이지를 갱신하거나 처음 테마를 적용할 때는 일부 객체에 테마 적용이 안 되는 현상이 있다. 해결 방법은 jQuery ready 메서드 내에 본문을 숨..

프로그램 소개: http://simulz.com/462 DIV 재정렬 테이블에서 주로 쓰는 정렬 기능을 DIV에 적용했다. var cctv_sort_checked = function() { var row_checked = $('#list div').has(':checked').get(); var row_unchecked = $('#list div').has(':not(:checked)').get(); $('#list').empty(); $.each(row_checked, function(index, row_checked) { row_checked.sortKey = parseFloat($(row_checked).attr('id').replace(/^[^\d.]*/,'')); }); $.each(row_un..

프로그램 소개: http://simulz.com/462 마우스 스크롤 줌인, 줌아웃 버튼 위에서 마우스 휠을 돌리면 CCTV가 확대·축소 된다. $("↕100%").insertAfter('#reset').hide(); var numWidth = 320; var numHeight = 240; $('#cctv_zoominout').click(function() { numWidth = 320; numHeight = 240; cctv_resize(this); }).mousewheel(function(objEvent, intDelta){ if (intDelta > 0){ if(numWidth >= 1280) return false; numWidth += 160; numHeight += 120; } else if ..

http://api.jquery.com/category/version/1.4/ jQuery 1.4 API Cheat Sheet .add( selector, context ) selectorA string containing a selector expression to match additional elements against. contextAdd some elements rooted against the specified context. .addClass( function(index, class) )function(index, class)A function returning one or more space-separated class names to be added. Receives the index ..

프로그램 소개: http://simulz.com/462 툴팁, 마우스 오버 효과 var $tooltip = $('').appendTo('body'); var positionTooltip = function(event) { var tPosX = event.pageX; var tPosY = event.pageY + 20; $tooltip.css({top: tPosY, left: tPosX}); }; var mouseOver = function(event) { $(this).addClass('hover'); var cctvName = $(this).text().replace(/\d+\./, ''); var action = ' 추가'; if ($(this).is('.checked')) { action = '서 ..

프로그램 소개: http://simulz.com/462 초기화 버튼 토글 var toggleResetButton = function() { if($('#list :checked').length) { $('#reset').attr('disabled', false); } else { $('#reset').attr('disabled', true); } } if($('#list :checked').length) ID가 list인 객체에 속해있는 체크박스 중 속성이 checked인 객체들이 있으면, jQuery는 객체가 없어도 값을 반환하므로 .length로 검사해야 한다. $('#reset').attr('disabled', false); ID가 reset인 객체(BUTTON)의 disabled 속성을 제거한다.

프로그램 소개: http://simulz.com/462 프리셋으로 선택하기 미리 설정된 CCTV들을 자동으로 선택한다. $('#left_foot button').click(function(){ $('#list :checkbox').attr('checked',false).parent().removeClass('checked'); $.each(cctv_preset(this.id), function() { $('#c' + this).attr('checked',true).parent().addClass('checked'); }); toggleResetButton(); }); $('#left_foot button') ID가 left_foot인 객체에 속해있는 하위 엘레멘트인 button 객체들을 가리킨다. .cl..

프로그램 소개: http://simulz.com/462 CCTV 직접 선택하기 DIV 영역 또는 체크박스를 클릭하면 선택이 된다. $('#list div').click(function(event) { var $check = $(this); if($check.is(':not(.checked)')) { $check.addClass('checked').find(':not(:checked)').attr('checked',true); }else if($check.is('.checked')) { $check.removeClass('checked').find(':checked').attr('checked',false); } mouseOver.call(this, event); toggleResetButton(); })..

1 text Key1=Value1&Key2=Value2 처럼 보내기 $(document).ready(function() { $('form').submit(function() { $.post('query.php', $(this).serialize(), function(data) { // 받은 데이터를 처리 }); return false; }); }); .serializeArray() 는 항목을 배열로 넘길 때 사용한다. 다른 항목은 생략... 위와 같은 폼을 서버로 보낸다고 할 때 .serialize()로 보내면 서버에서는 $_REQUEST['c0'], $_REQEUST['c1'], $_REQUEST['다른항목'] 처럼 따로 처리를 해야 한다. .serializeArray()로 배열로 만들고 변수에 담아서..

HTML $('Selector').load('html.html'); // 전체 코드를 가져옴 $('Selector').load('html.html Selector2'); // Selector2로 매치된 부분만 가져옴 간단한 내용을 추가할 때 좋다. 자바스크립트 $.getScript('script.js'); 자바스크립트 파일을 인클루드 한다. 와 같은 역할을 한다. JSON $.getJSON('json.json', function(data) { $.each(data, function(entryIndex, entry) { // entry['key'] 로 값 불러옴 }); }); 속도가 빠르고 편리하지만 오류를 찾기 힘들다. XML $.get('xml.xml', function(data) { $(data).e..

기존의 복잡한 자바스크립트 코드를 대체할 jQuery 라이브러리를 소개한다. jQuery 사이트: http://jquery.com/ 문서: http://docs.jquery.com/Main_Page API추천 사이트 http://remysharp.com/jquery-api/ jQuery 연결하기 jQuery를 사용하기 위해 JS 파일을 자신의 웹서버에 올려놓고 연결해도 되지만 관리의 편리함과 트래픽 감소를 위해 Google AJAX Libraries API에서 연결하는 것을 추천한다. Google AJAX Libraries API http://code.google.com/intl/ko-KR/apis/ajaxlibs/ 여기서 jQuery 항목은 아래 페이지에서 볼 수 있다. http://code.googl..