(jQuery UI) Theme Switcher 사용하기

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

PC&웹/웹프로그래밍 2010. 1. 27. 00:54

(카운터) 블로그용 페이지 카운터 개발, 적용 실험 중...

오래전에 아래 사이트에서 서비스 됐던 블로그 페이지 카운터(Blog Page Counter)를 써본 블로거들이 많이 있을 것이다. http://n-3.net/count/ 일정 시간 후 메인 페이지로 이동한다. ESC를 누르면 색생을 바꿔볼 수있다. 너무 유용하고 기능성 있는 블로그 플러그인이라 꼭 다시 서비스 되기를 기다렸는데... 이런 서비스는 트래픽이 엄청나기 때문에 개인이 하기에 매우 힘들다. · 단순한 카운팅용이라 해도 페이지 경로, 사용자, 누적 카운트는 필수 정보이다. 이 외에는 · 접속자의 모든 정보를 기록을 임시 보관하는 테이블이 필요하다. 임시 기록이므로 삭제되기 전에 통계를 내는 작업을 해야 한다. · IP별로 하루 1회 증가시키려면 방문자 기록용 테이블이 필요하다. · 로봇을 제외 하..

PC&웹/웹프로그래밍 2010. 1. 24. 19:40

김치 참치 김밥

집에서 만들어 먹는 김밥... 김치와 참치를 추가했다. 참치는 역시 동①참치 김, 밥, 계란 후라이, 햄, 단무지, 당근, 시금치, 맛살은 기본으로 들어가는 재료이다. 때때로 소고기도 넣는다. 밥은 힘을 빼서 말아야 한다. 압축되면...씹기가 참~ 힘들다. 잘 넘어가지 않기도··· 그래도 잘 안된다... 밥 자체가 잘 되야 하는데... 김밥 가게는 어찌 그렇게 잘 씹히지;;; 가게에서 파는 것처럼 참치를 듬뿍 넣어야 맛있는데 그럴려면 잘 씹혀야 하고 맛도 좋아야 하기 때문에 마요네즈를 참치에 발라줘야 한다. 아래 사진은 절약 모드···결국, 마요네즈에 찍어 먹었다.

취미/요리 2010. 1. 22. 22:35

(jQuery) 의정부시 CCTV 소스 강좌 - DIV 재정렬

프로그램 소개: 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..

PC&웹/웹프로그래밍 2010. 1. 22. 12:58

(jQuery) 의정부시 CCTV 소스 강좌 - 마우스 스크롤 확대·축소

프로그램 소개: 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 ..

PC&웹/웹프로그래밍 2010. 1. 22. 12:28

jQuery 1.4에서 바뀐 것들

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 ..

PC&웹/웹프로그래밍 2010. 1. 22. 11:24

(jQuery) 의정부시 CCTV 소스 강좌 - 툴팁, 마우스 오버 효과

프로그램 소개: 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 = '서 ..

PC&웹/웹프로그래밍 2010. 1. 21. 16:17

(jQuery) 의정부시 CCTV 소스 강좌 - 초기화 버튼 토글

프로그램 소개: 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 속성을 제거한다.

PC&웹/웹프로그래밍 2010. 1. 21. 15:55

(jQuery) 의정부시 CCTV 소스 강좌 - 프리셋 선택하기

프로그램 소개: 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..

PC&웹/웹프로그래밍 2010. 1. 21. 15:27

(jQuery) 의정부시 CCTV 소스 강좌 - 직접 선택하기

프로그램 소개: 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(); })..

PC&웹/웹프로그래밍 2010. 1. 21. 14:54

김치 치즈 볶음밥 #2

tsblog.simulz.kr/351 에서 소개한 김치 치즈 볶음밥을 좀 더 향상시켜 보았습니다. 맛: 김치의 매콤함과 치즈의 고소함 치즈: 믿을 수 있는 치즈 가루를 사용해야 합니다. 묻지마 치즈 사용으로 인한 구토, 배탈, 설사는 알아서 하세요. 조리 재료: 일반 김치 조각, 피자 치즈, 계란 후라이, 옥수수 통조림, 야채 계란 후라이를 따로 합니다. 맛소금, 후추 등을 뿌려 주면 더욱 맛있습니다. 김치와 밥 등으로 일반적인 볶음밥을 한 다음, 피자 치즈를 위에 뿌리고 전자레인지로 가열을 합니다. 녹을 때까지... 완료 되면 그 위에 계란 후라이와 옥수수를 추가하면 됩니다. 때때로 새우와 같이 볶거나 계란 후라이에 케찹을 뿌려 먹기도 합니다. 점점 잡볶밥이 되는 듯한...

취미/요리 2010. 1. 20. 13:07

(jQuery) 서버에 데이터 전송하기

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()로 배열로 만들고 변수에 담아서..

PC&웹/웹프로그래밍 2010. 1. 20. 00:35

(jQuery) 외부 파일 불러오기

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..

PC&웹/웹프로그래밍 2010. 1. 20. 00:08

쓰기 편한 키보드 모음...

키보드 제품이 너무 다양해서 다나와 같은 비교 사이트에서도 원하는 조건대로 검색하기가 쉽지 않다. 조건 검색을 하더라도 대부분 키 모양, 배열에서 좌절을 하게 된다. 문제 있는 키보드들 작게, 이쁘게 만들려다 보니 키 레이아웃은 엉망이 된다. · 기능키가 모여있는 키보드 F1~F12가 모두 붙어 있는 키보드들은 보지 않고는 원하는 키를 누르기가 쉽지 않다. 그 아랫줄의 1~0 숫자키와 같은 상황이다. 숫자는 그나마 기본 자리 기능키는 F1~F4, F5~F8, F9~F12 세 그룹으로 떨어져 있어야 원하는 키를 보지 않고도 쉽게 누를 수 있다. · 8형 엔터키 옛~날에나 쓰던 8형 구형 엔터키들은 대충 누를 때는 편리하다. 그러나 대부분 새끼 손가락으로 누르게 되며 주로 기본 자리와 같은 엔터키 아래쪽을 ..

PC&웹/정보&기술 2010. 1. 19. 10:34

SyntaxHighlighter 구문강조 미리보기

HTML, PHP, JavaScript, CSS 구문 강조 결과를 보자. 아래는 HTML 구문강조이다. text TEXT TEXT TEXT HTML과 JavaScript, CSS가 같이 작성 되었는데 HTML만 구문강조가 되어있다. 태그를 인식해서 자동 변환이 필요할 것 같다. 아래는 PHP 구문강조이다. 내장 함수 중 일부만 구문강조가 된다. 각종 문법 및 사용자 정의 함수도 구문 강조가 필요하다. 아래는 JavaScript 구문강조이다. $(function(){ var i=''; var a=Array(); function a() { alert(''); } }); 내장함수 일부가 구문 강조 되지 않는다. 아래는 CSS 구문강조이다. @charset "utf-8"; /* TEXT */ html, body..

PC&웹/정보&기술 2010. 1. 18. 20:14

(구문강조) 티스토리에 SyntaxHighlighter 3.0 적용하기

본문에 소스를 첨부할 때 텍스트로만 보여지던 것을 구문별로 강조하고 라인 번호를 추가하고 복사, 인쇄를 할 수 있도록 해줍니다. 링크로 연결하기 항상 최신 버전의 SyntaxHighlighter 서비스를 이용할 수 있습니다. HTML/CSS 편집 페이지에서 HTML HEAD에 아래 소스를 추가합니다. 필요 없는 구문의 JS 파일은 삭제해도 됩니다. 구문별 JS 파일 보기 http://alexgorbatchev.com/wiki/SyntaxHighlighter:Brushes CSS파일로 테마를 변경할 수 있습니다. http://alexgorbatchev.com/wiki/SyntaxHighlighter:Themes:Default 직접 설치하기 구문 강조할 항목을 추가하려면 JS 파일을 편집해서 업로드 하면 됩..

PC&웹/정보&기술 2010. 1. 18. 19:30

1398 분류 전체보기