출처
css 파일 참조
<link rel="stylesheet" href="<c:url value="/commons/fontawesome/css/all.css"/>">
css
.fa {
vertical-align: middle;
}
html
<i class="fa fa-plus-circle fa-2x" aria-hidden="true" style="margin-left: 5px;"></i> <i class="fa fa-minus-circle fa-2x" aria-hidden="true"></i>
출처
ajax
// ajax demo
$('#math_class_tree')
.on('changed.jstree', function (e, data) {
console.log('select node id / ' + data.node.id);
})
.jstree({
'core' : {
'data' : {
"url" : function(node) {
console.log('node.id = ' + node.id);
return "json.mat";
},
"data" : function(node) {
return {
'cmd' : 'mat_class_table',
'subcmd' : 'tree',
'id' : node.id
};
},
"dataType" : "json",
"success" : function(data, status, res, parent) {
console.log("test");
}
}
}
});
JQuery UI - Datepicker
출처 : Datepicker | jQuery UI
JQuery UI datepicker 한국어 적용 - 제타위키
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="<c:url value="/resources/js/jquery-1.12.0.js"/>"></script>
<script type="text/javascript" src="<c:url value="/resources/js/jquery-ui.js"/>"></script>
<link rel="stylesheet" href="<c:url value="/resources/css/jquery-ui.css"/>">
<title>Insert title here</title>
<script>
// Datepicker 오늘 날짜 설정
function setDatepickerToday(datepicker) {
var d = new Date();
datepicker.datepicker("setDate", new Date(d.getFullYear(), d.getMonth(), d.getDate()) );
}
// 한글화 설정
$.datepicker.setDefaults({
dateFormat: 'yy-mm-dd',
prevText: '이전 달',
nextText: '다음 달',
monthNames: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
monthNamesShort: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],
dayNames: ['일', '월', '화', '수', '목', '금', '토'],
dayNamesShort: ['일', '월', '화', '수', '목', '금', '토'],
dayNamesMin: ['일', '월', '화', '수', '목', '금', '토'],
showMonthAfterYear: true,
yearSuffix: '년'
});
$( function() {
// datepicker 생성
$( "#datepicker" ).datepicker({
// 날짜를 선택했을 경우 이벤트 발생
onSelect: function (dateText, inst) {
alert('날짜선택 = ' + dateText);
}
});
// 오늘 날짜 설정
setDatepickerToday($( "#datepicker" ));
});
</script>
</head>
<body>
<p>날짜 : <input type="text" id="datepicker"></p>
</body>
</html>EJS Embedded JavaScript
출처 : EJS - JavaScript Templates
Getting Started with EJS
JSON Text를 JSON Object로 변환하기 :: Outsider's Dev Story
JSON Data
ejs.zip{"title":"Cleaning Supplies","supplies":["mop","broom","duster"]}
List Template
<h1><%= title %></h1>
<ul>
<% for(var i=0; i<supplies.length; i++) {%>
<li><%= supplies[i] %></li>
<% } %>
</ul>
DEMO
<html>
<head>
<!-- EJS -->
<!-- <script type="text/javascript" src="resources/js/ejs_production.js"></script> -->
<script type="text/javascript" src="resources/js/ejs.js"></script>
<script type="text/javascript" src="resources/js/view.js"></script>
</head>
<body>
<p id="ejs_list">Some text here</p>
<script type="text/javascript">
new EJS({url: 'template/list.ejs'}).update('ejs_list', 'template/list.json');
</script>
</body>
</html>
실행결과
pagination.js 파일
// 페이지 생성 함수
// 인자1 : JQuery 객체 - 페이지 정보를 출력될 객체
// 인자2 : 전체 페이지수
// 인자3 : 현재 페이지수
// 인자4 : 페이지 호출시 호출할 함수
function genPageNum(id_pagenum, totalPage, curPage, event) {
// 블럭에 표시 페이지수
var block_size = 10;
// 초기화
id_pagenum.empty();
// 현재 블럭
var block = Math.floor((curPage-1) / block_size);
// 현재 블럭의 시작 페이지
var block_start_pagenum = 10 * block;
// 현재 블럭에서 마지막 페이지
var loop_count = block_size;
// 현재 블럭에서 마지막 페이지 구하기
if (block == Math.floor(totalPage / block_size) && (totalPage % block_size) > 0) {
loop_count = totalPage % block_size;
}
// 이전블럭 표시 (curPage > 10 이상이면 표시)
if (curPage > block_size) {
id_pagenum.append(
"[<b><a href='javascript:listDevice("+
(block * block_size) +
", last_device_type);'>Prev</a></b>]");
}
// 페이지 수 만큼 반복
for (pagenum = 1; pagenum <= loop_count; pagenum++) {
// 현재 페이지 처리
if ((pagenum + (block * block_size)) == curPage) {
id_pagenum.append(
"<b><font color=\"red\">"+(pagenum + (block * block_size))+"</font></b>");
}
// 현재 페이지 외 처리
else {
id_pagenum.append(
"[<b><a href='javascript:pagination__page_move("+
(pagenum + (block * block_size)) +
"," + event+ ");'>"+
(pagenum + (block * block_size)) +
"</a></b>]");
}
}
// 다음블럭 처리
if (block < Math.floor(totalPage / block_size)) {
id_pagenum.append(
"[<b><a href='javascript:pagination__page_move("+
(1 + ((block+1) * block_size)) +
"," + event+ ");'>Next</a></b>]");
}
}
// 페이지 선택시 호출 되는 함수
function pagination__page_move(pagenum, event) {
if (event!=undefined) {
event(pagenum);
}
}
인자4에 전달될 함수 예제
function stock_page_move(pagenum) {
listDevice(pagenum, last_device_type);
}
페이지 자동 생성 함수 호출
genPageNum($('#pagenum', currentDoc), result.totalPage, result.CurPage, stock_page_move);Dialog close전에 Dialog 활성화 여부 확인 후 닫기
if ($('#popupHoList').is(':visible'))
$("#popupHoList").dialog('close');
jQuery 사용
출처 : 제이쿼리(jQuery) 기본 :: 갱짱.study
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
.ready() 메소드
출처 : jQuery ready와 load의 차이 - 오중호랑이의 비밀로그
.ready() 메소드 - 문서의 DOM이 모두 로드 되었을때 실행
$(document).ready(function(){
alert('Hello World !!!');
});
셀렉터(Selector)
출처 : 박종명의 아름다운 개발 since 2010.06 - 자주 쓰는 JQUERY 기능 - 셀렉터(SELECTOR) 편
Category: Selectors
All Selector (“*”)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<title>Insert title here</title>
</head>
<body>
<div id="AngularJS">AngularJS</div>
<div class="BackboneJS">Backbone.js</div>
<div name="Emberjs">Emberjs</div>
<span name="ExtJS">ExtJS</span>
<script>
$(function(){
$('*').css('font-weight', 'bold'); // 모두 선택
});
</script>
</body>
</html>
ID Selector (“#id”)
<script>
$(function(){
$('#AngularJS').css('font-weight', 'bold'); // AngularJS
});
</script>
Class Selector (“.class”)
<script>
$(function(){
$('.BackboneJS').css('font-weight', 'bold'); // BackboneJS
});
</script>
Attribute Equals Selector [name=”value”]
<script>
$(function(){
$('div[name="Emberjs"]').css('font-weight', 'bold'); // Emberjs
});
</script>
Attribute Not Equal Selector [name!=”value”]
<script>
$(function(){
$('div[name!="Emberjs"]').css('font-weight', 'bold'); // AngularJS, Backbone.js
});
</script>
:first Selector
<script>
$(function(){
$('div:first').css('font-weight', 'bold'); // AngularJS
});
</script>
:last Selector
<script>
$(function(){
$('div:last').css('font-weight', 'bold'); // Emberjs
});
</script>
:eq() Selector
<script>
$(function(){
$('div:eq(2)').css('font-weight', 'bold'); // Emberjs
});
</script>
.text() .html() - 내용 가져오기, 내용 변경하기
출처 : jQuery 3강 - html() vs text() 함수 차이점 알아보기 + val() 함수
.text() .html() - 내용 가져오기
text 메소드는 html 테그를 제외한 텍스트 내용만 가져오고, html 메소드는 html 테그까지 포함된 내용을 가져옮
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<title>Insert title here</title>
<script>
$(document).ready(function(){
alert($('#AngularJS').text()); // AngularJS
alert($('#AngularJS').html()); // <a href="http://angularjs.org/">AngularJS</a>
});
</script>
</head>
<body>
<div id="AngularJS"><a href="http://angularjs.org/">AngularJS</a></div>
<div class="BackboneJS">Backbone.js</div>
<div name="Emberjs">Emberjs</div>
<span name="ExtJS">ExtJS</span>
</body>
</html>
.text() .html() - 내용 변경하기
<script>
$(document).ready(function(){
$('#AngularJS').html('<a href="https://blog.outsider.ne.kr/975">Angular.js는 왜 좋은가? :: Outsider\'s Dev Story</a>');
$('.BackboneJS').text('백본js');
});
</script>
.show() .hide() - 보이기, 숨기기
출처 : 48.jQuery - show()와 hide로 숨기기 및 보이기
jQuery객체.is(":visible") 호출로 현재 보여지고 있는지 숨겨져 있는지 확인 가능
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<title>Insert title here</title>
<script>
function doShow() {
if ($('#AngularJS').is(":visible")) {
$('#AngularJS').hide(); // 숨기기
$('#button1').text('보이기');
} else {
$('#AngularJS').show(); // 보이기
$('#button1').text('숨기기');
}
}
</script>
</head>
<body>
<div id="AngularJS">AngularJS</div>
<div class="BackboneJS">Backbone.js</div>
<div name="Emberjs">Emberjs</div>
<span name="ExtJS">ExtJS</span>
<p><button id="button1" onclick="javascript:doShow()">숨기기</button></p>
</body>
</html>
.addClass() .removeClass() .hasClass() - 클래스 추가, 삭제, 포함 여부 확인하기
출처 : 클래스 추가 및 삭제하기 - EVERDEVEL
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<title>Insert title here</title>
<style type="text/css">
.div_hide {
display: none;
}
</style>
<script>
function doShow() {
if ($('#AngularJS').hasClass("div_hide")) {
$('#AngularJS').removeClass('div_hide');
$('#button1').text('보이기');
} else {
$('#AngularJS').addClass('div_hide');
$('#button1').text('숨기기');
}
}
</script>
</head>
<body>
<div id="AngularJS">AngularJS</div>
<div class="BackboneJS">Backbone.js</div>
<div name="Emberjs">Emberjs</div>
<span name="ExtJS">ExtJS</span>
<p><button id="button1" onclick="javascript:doShow()">보이기</button></p>
</body>
</html>
.css() - CSS 변경
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function(){
$('body').css('background-color', 'red');
});
</script>
.attr() - 속성을 제어
출처 : 즐거움을 찾자 Find Fun!! :: jQuery API 정복 - attr(), 속성을 제어하기
인자에 개수에 따라 2가지로 용도로 사용 - 하나의 인자만 있으면 속성값을 가져오는 것이고, 2개의 인자를 사용 하면 속성값을 설정함
속성값 설정시 속성이름이 존재하지 않는 경우 속성이 추가됨
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<title>Insert title here</title>
<style type="text/css">
.div_hide {
display: none;
}
</style>
<script>
function doGetAttr() {
alert($('#AngularJS').attr('name')); // js_framework_1
}
function doSetAttr() {
$('#AngularJS').attr('hangul', '알골라JS'); // 속성 추가
}
</script>
</head>
<body>
<div id="AngularJS" name="js_framework_1">AngularJS</div>
<div class="BackboneJS">Backbone.js</div>
<div name="Emberjs">Emberjs</div>
<span name="ExtJS">ExtJS</span>
<p><button onclick="javascript:doGetAttr();">속성값 조회</button></p>
<p><button onclick="javascript:doSetAttr();">속성값 설정</button></p>
</body>
</html>
.find() 자식 노드 선택자
출처 : find(expr) - jQuery 日本語リファレンス
지정 요소의 모든 하위 요소에서 조건식에 맞는 요소를 선택
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<title>Insert title here</title>
<script>
function doFind() {
$('#js_framework').find('.BackboneJS').css('color','red');
}
</script>
</head>
<body>
<div id="js_framework">
<div id="AngularJS">AngularJS</div>
<div class="BackboneJS">Backbone.js</div>
<div name="Emberjs">Emberjs</div>
</div>
<p><button onclick="javascript:doFind();">Find 메소드 호출</button></p>
</body>
</html>
.append() - 마지막 자식 요소 추가
출처 : jQuery API 정복 - 마지막 자식 요소 추가, append() - jyhyun
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<title>Insert title here</title>
<script>
function doAppend() {
$('#js_framework').append('<span name="ExtJS">ExtJS</span>'); // 마지막 요소 추가
}
</script>
</head>
<body>
<div id="js_framework">
<div id="AngularJS">AngularJS</div>
<div class="BackboneJS">Backbone.js</div>
<div name="Emberjs">Emberjs</div>
</div>
<p><button onclick="javascript:doAppend();">마지막 요소 추가</button></p>
</body>
</html>
.clone() - 요소 복사하기
출처 : jQuery API 정복 - 요소 복사하기, clone() - jyhyun
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<title>Insert title here</title>
<script>
function doClone() {
//
var row = $('#tr_dumy').clone();
row.attr('id', 'tr_fw');
//
row.find('#js_name').text('Emberjs');
//
$('#js_framework').append(row); // 마지막 요소 추가
}
</script>
</head>
<body>
<table id="js_framework" border="1">
<tr id='tr_fw'>
<td>AngularJS</td>
<td>Angular.js는 구글이 만든 MV*(Model - View - Whatever) 자바스크립트 프레임워크</td>
</tr>
<tr id='tr_fw'>
<td>Backbone.js</td>
<td>Model-Collection-View 기반으로 구현하는 Javascript 웹 애플리케이션 프레임웍</td>
</tr>
</table>
<table style="display:none;">
<tr id="tr_dumy">
<td id="js_name"></td>
<td id="js_contents"></td>
</tr>
</table>
<p><button onclick="javascript:doClone();">clone 테스트</button></p>
</body>
</html>
-
1. alert
브라우져의 팝업으로 값을 확인하는 명령어
alert('Hello World !!!!');2. console.log - 로그값 확인
브라우져의 개발자모드를 이용해서 콘솔창에서 로그값 확인 가능
console.log('나 로그');3. 변수
변수 선언
var value1;
변수 대입
value1 = 2;
4. 상수
상수 const 키워드 사용
const const1 = 1'
5. 데이터 타입
6. 배열
배열의 속성
length 속성 : 배열의 개수 반환
배열의 요소 추가
push
unshift
배열의 요소 삭제
pop() 마지막 요소 삭제, 반환값으로 삭제된 값 반환
shift() 첫번째
배열의 요소 접근
배열의 index는 0 부터 시작
<html>
<head>
</head>
<body>
<script type="text/javascript">
var colors = ["white", "black", "yellow"];
document.write("배열의 개수 = " + colors.length + "<br>");
document.write("배열의 두번째 요수 = " + colors[1] + "<br>");
</script>
</body>
</html>
7. 산술연산자
8. 문자열 연산자
if문
var date = new Date();
var hour = date.getHours();
if(hour < 11) {
alert("아침");
}
else if(hour < 15) {
alert("점심");
}
else {
alert("저녁");
}switch문
var input = Number(prompt('숫자를 입력하세요.', '숫자'));
switch(input % 2) {
case 0:
alert("짝수입니다.");
break;
case 1:
alert("홀수입니다.");
break;
default:
alert("숫자가 아닙니다.");
break;
}삼항 연산자
var input = prompt('숫자 입력', '');
var number = Number(input);
(number > 0) ? alert('자연수') : alert('자연수아님');10. 반복문
while 반복문
value = 0;
while(value < 5) {
alert(value + '번째 반복');
value++;
}do while 반복문
var value = 0;
do {
alert(value + '번째 반복문');
value++;
} while(value < 5);for 반복문
var array = ['포도', '사과', '바나나', '망고'];
for(var i=0; i<array.length; i++) {
alert(array[i]);
}for in 반복문
배열의 요소 만큼 반복
var array = ['포도', '사과', '바나나', '망고'];
for(var i in array) {
alert(array[i]);
}try {
addalert("bad call");
} catch(e) {
alert(e.message);
}12. 함수
출처 : Javascript : 함수(function) 다시 보기
함수선언식 function declaration
function sum(src1, src2) {
return src1 + src2;
}
alert( sum(1, 2) ); // 결과 3
익명 함수표현식 anonymous function
var sum = function (src1, src2) {
return src1 + src2;
}
alert( sum(1, 2) ); // 결과 3
즉시실행함수 IIFF, Immediately Invoked Function Expression
(function() {
/* 실행코드 */
})();
함수 변수로 전달
// 전달될 함수
var sum = function (src1, src2) {
return src1 + src2;
}
// 첫번째 인자로 함수가 전달됨
function sum2(function_name, src1, src2, src3 ) {
var result = 0;
result = function_name(src1, src2);
result = function_name(result, src3);
return result;
}
alert( sum2( sum, 1, 2, 3) ); // 결과 6
13. 구조체
// 구조체
var user = {
name : '이순신',
user_id : 'lee',
age : 10
}
// (.)점으로 구조체 멤버에 접근
alert(user.name); // 이순신
구조체 내 함수
var user = {
name : '이순신',
user_id : 'lee',
age : 10,
getName : function() {
return this.name;
},
setName : function(name) {
this.name = name;
}
}
alert(user.getName());
user.setName('김유신');
alert(user.getName());
구조체 외부에서 함수 추가
var user = {
name : '이순신',
user_id : 'lee',
age : 10
}
user.getAge = function() {
return this.age;
}
alert(user.getAge());7. 객체
- 1
- 2
- 3
8. this 키워드
-
9. 내장 객체
출처 : JavaScript - 내장 객체의 종류 - 늑대의 기억 저장소
window : 브라우저 창이 열릴 때 마다 하나씩 만들어지는 객체, 브라우저 창 안에 존재하는 모든 요소의 최상위 객체.
document : 웹 문서마다 하나씩 만들어지는 객체로 <body> 태그에 의해 만들어진다. HTML 문서에 대한 정보를 가지고 있다.
history : 현재 창에서 사용자의 방문 기록을 저장하고 있는 객체
location : 현재 문서에 대한 URL 정보를 가지고 있는 객체
navigator : 현재 사용하는 브라우저에 대한 정보를 가지고 있는 객체.
screen : 현재 사용하는 화면에 대한 정보를 다루는 객체
10. Number 객체
-
11. Math 객체
출처 : Math 개체(JavaScript) - MSDN - Microsoft
JavaScript Math Reference - W3Schools
즐거움을 찾자 Find Fun!! :: JavaScript 수학 객체 Math
Math 주요 메소드
12. Date 객체
출처 : Date - JavaScript | MDN - Mozilla Developer Network
JavaScript Date Reference - W3Schools
Date 개체(JavaScript) - MSDN - Microsoft
JavaScript Date Object - The Computer Technology
Data 객체 생성
var d = new Date(); // 인자가 없는 경우 객체가 생성된 시간 var d = new Date(milliseconds); var d = new Date(dateString); var d = new Date(year, month, day, hours, minutes, seconds, milliseconds);
현재 월 확인
var curdate = new Date() var month = curdate.getMonth() document.write(month + "
")
동적으로 Option 추가
$.each(result.data.list, function(index, data)
{
try {
var row = $('#row_item').clone();
row.appendTo('.uio_text');
// JQuery에서 Select에 추가
var findItem = $("select[name='item_list'] option[value='"+data.tml+"']");
if (data.tml!=undefined && $("select[name='item_list'] option").index(findItem)<0) {
$("select[name='item_list']").append("<option value='"+data.tml+"'>"+data.tml+"</option>");
}
} catch(err) {
alert(err.message);
}
});선택된 Value 구하기
var item_id = $("select[name='item_list'] option:selected").val();
선택된 Index 구하기
var index = $("select[name='item_list'] option").index($("select[name='item_id'] option:selected"));
Value값으로 Index 구하기
var index = $("select[name='item_list'] option").index($("select[name='item_list'] option[value='value1']"));
Text값으로 Index 구하기
// 방법1
/*
$('select[name="space_id"] option').filter(function() {
return $.trim( $(this).text() ) == '${ho_info.ho_line}';
}).attr('selected','selected');
*/
var index = -1;
$("select[name='space_id'] option").each(function () {
if ($(this).html() == '${ho_info.ho_line}') {
$(this).prop("selected", "selected");
index = $(this).index();
return;
}
});
if (index>=0) {
$("#lbl_selected_space").attr('class','label').css('color', 'black');
} else {
$("#lbl_selected_space").show();
$("select[name='space_id'] option:eq(0)").attr("selected", "selected");
}개수 구히기
var count = $("select[name='item_list'] option").size();
출처 : CSS 선택자(Selector)의 종류 및 간단한 효과주기
CSS Selectors
Styling elements with a dot (.) in the class name
CSS 선택자
| Pattern | Meaning |
|---|---|
| #id | id로 지정된 요소 선택 |
| .class | class로 지정된 요소 선택 |
| E | E 요소를 선택 |
| E:link | 방문하지 않은 E를 선택 |
| E:visited | 방문한 E를 선택 |
| E:hover | 마우스가 올라가 있는 동안 E를 선택 |
| E:active | 마우스 클릭 또는 키보드(enter)가 눌린 동안 E를 선택 |
| E:focus | focus가 머물러 있는 동안 E를 선택 |
| E:first-line | E 요소의 첫 번째 라인 선택 |
| E:first-letter | E 요소의 첫 번째 문자 선택 |
| * | 모든 요소 선택 |
| E[foo] | ‘foo’ 속성이 포함된 E를 선택 |
| E[foo="bar"] | ‘foo’ 속성의 값이 ’bar’와 일치하는 E를 선택 |
| E[foo~="bar"] | ‘foo’ 속성의 값에 ’bar’가 포함되는 E를 선택 |
| E[foo|="en"] | ‘foo’ 속성의 값이 ’en’ 또는 ’en-’ 으로 시작되는 E를 선택 |
| E:first-child | 첫 번째 자식 요소가 E라면 선택 |
| E:lang(fr) | HTML lang 속성의 값이 ’fr’로 지정된 E를 선택 |
| E::before | E 요소 전에 생성된 요소 선택 |
| E::after | E 요소 후에 생성된 요소 선택 |
| E>F | E 요소의 자식인 F 요소 선택 |
| E+F | E 요소를 뒤의 F 요소 선택 |
| E[foo^="bar"] | ‘foo’ 속성의 값이 ’bar’로 정확하게 시작하는 요소 선택 |
| E[foo$="bar"] | ‘foo’ 속성의 값이 ’bar’로 정확하게 끝나는 요소 선택 |
| E[foo*="bar"] | ‘foo’ 속성의 값에 ’bar’를 포함하는 요소 선택 |
| E:root | 문서의 최상위 루트 요소 선택 |
| E:nth-child(n) | 그 부모의 n번째 자식이 앞으로부터 지정된 순서와 일치하는 E 라면 선택 |
| E:nth-last-child(n) | n번째 자식이 뒤로부터 지정된 순서와 일치하는 요소가 E 라면 선택 |
| E:nth-of-type(n) | E 요소 중 앞으로부터 순서가 일치하는 n번째 E 요소 선택 |
| E:nth-last-of-type(n) | E 요소 중 끝으로부터 순서가 일치하는 n번째 E 요소 선택 |
| E:last-child | E 요소 중 마지막 자식이라면 E 선택 |
| E:first-of-type | E 요소 중 첫번째 E 선택 |
| E:last-of-type | E 요소 중 마지막 E 선택 |
| E:only-child | E 요소가 유일한 자식이면 선택 |
| E:only-of-type | E 요소가 같은 타입이면 선택 |
| E:empty | 텍스트 및 공백을 포함하여 빈 자식을 가진 E를 선택 |
| E:target | E의 URI의 대상이 되면 선택 |
| E:enabled | 활성화된 폼 컨트롤 E요소 선택 |
| E:disabled | 비활성화된 폼 컨트롤 E요소 선택 |
| E:checked | 선택된 폼 컨트롤(라디오버튼,체크박스)을 선택 |
| E:not(s) | s가 아닌 E 요소 선택 |
| E~F | E 요소가 앞에 존재하면 F를 선택 |
p 테그 class="center"
p.center {
text-align: center;
color: red;
}
<span class='a.b'>
.a\.b { }
출처 : [ JQUERY ] SRC 변경하기
[php] json_encode 함수가 없을때 해결 방법
AJAX 심플 예제~ json
json_encode
Iterate through elements with similar IDs ( wildcard search )
img src 변경
HTML
<img id="imgSrc" src="1.jpg">
JQuery
$("#imgSrc").bind("click", function(){
$("#imgSrc").attr("src", "2.jpg");
});
속성값 조회
alert($("#img_reverse").attr("src"));
JQuery AJAX - PHP JSON 연동
json_encode.php (옵션 - PHP엔진에서 json_encode 함수가 지원하지 않는 경우)
<?
function json_encode($a=false){
if(is_null($a)) return 'null';
if($a === false) return 'false';
if($a === true) return 'true';
if(is_scalar($a)){
if(is_float($a)) return floatval(str_replace(",", ".", strval($a)));
if(is_string($a)){
static $jsonReplaces = array(array("\\", "/", "\n", "\t", "\r", "\b", "\f", '"'), array('\\\\', '\\/', '\\n', '\\t', '\\r', '\\b', '\\f', '\"'));
return '"' . str_replace($jsonReplaces[0], $jsonReplaces[1], $a) . '"';
} else return $a;
}
$isList = true;
for($i=0, reset($a); $i<count($a); $i++, next($a)){
if(key($a) !== $i){
$isList = false;
break;
}
}
$result = array();
if($isList){
foreach($a as $v) $result[] = json_encode($v);
return '[' . join(',', $result) . ']';
} else{
foreach($a as $k => $v) $result[] = json_encode($k).':'.json_encode($v);
return '{' . join(',', $result) . '}';
}
}
?>
get_user_info.php (json 데이타 생성 php 소스)
<?
include "lib/config.php";
if(!function_exists("json_encode")) {
include "json_encode.php";
}
$sql="select * from user_info a where a.user_id = '$user_id'";
$voc_row=DBarray($sql);
$arr = array(
'user_id' => $voc_row[user_id],
'name' => iconv("EUC-KR","UTF-8", $voc_row[name]),
'tel' => $voc_row[tel],
'email' => $voc_row[email]
);
echo json_encode($arr);
?>
JQuery AJAX 호출
function getUserInfo(parma_user_id) {
$.ajax({
url: 'get_user_info.php',
type: 'GET',
dataType: 'json',
data: {
user_id: parma_user_id
},
success : function(result){
$('#user_id_text').html(result.user_id);
$('#user_name_text').html(result.name);
$('#user_tel_text').html(result.tel);
$('#user_email_text').html(result.email);
},
error : function(XMLHttpRequest, textStatus, errorThrown) {
alert('There was an error.');
}
});
}Dropdown Menu
출처 - Dropdown Menu
<ol class="lnb" id="documenter_nav"> <li><a class="current" href="<c:url value='/index.cmx'/>">홈페이지</a></li> <li><a href="<c:url value='/info.cmx'/>">소개</a></li> <li><a href="#using_retina_graphics">매뉴얼</a></li> <li><a href="#creating_galleries">회원가입</a></li> <li><a href="#last_words">결제하기</a></li> <li><a href="#template_elements">관리자 모드</a> <ol class="sub01" style="display:none;"> <li><a href="#template_elements_columns">사용자 현황</a> <li><a href="#template_elements_lists">포인트 사용현황</a> <li><a href="#template_elements_on_off_toggle.">세부 설정</a> </ol> </li> </ol>
javascript
<script type="text/javascript">
$(function(){
$("ol.sub").hide();
$("ol.lnb li").hover(function(){
$("ol:not(:animated)",this).slideDown("fast");
},
function(){
$("ol",this).slideUp("fast");
})
});
</script>
반복문 each
<div class="grid1_wrap" data-last="true" style="position: relative; height: 300px;"> <div class="grid1" style="position: absolute; left: 0px; top: 0px; -webkit-transition: -webkit-transform; transition: -webkit-transform; -webkit-transform: translate3d(0px, 0px, 0px);"> <div class="grid1_inner" data-template="text/0"> <ul class="uio_text"> </ul> </div> <div id="rowDumy" style="display: none"> <li id="row_user" class="ut_item" style="height: 80px"> <a href="javascript:void(0);" class="ut_a" data-clk="cont1"> <span class="user_list_info"></span> <span id="user_status" style="color: red; font-weight: bold;"></span> <br/><span class="reg_date" style="display: none;">입사일자 : </span> </a> </li> </div> </div> </div>
javascript
function getUserList(user_status) {
//
try {
$.ajax({
type: 'POST',
url: '<c:url value="/json.cmx"/>',
dataType: 'json',
data: {
cmd : 'user_data',
subcmd : 'list',
dept_id : ${dept_info.id}
},
success: function(result)
{
$('.grid1_wrap').height(result.data.list.length * 82);
$.each(result.data.list, function(index, data)
{
var row = $('#row_user').clone().attr('id','user_id_' + data.id)
row.find('.ut_a').attr('user_id',data.id).attr('user_name', data.user_name);
row.find('.ut_a').attr('href', "javascript:goItemList("+data.id+",'"+data.user_name+"');");
row.appendTo('.uio_text');
row.find('.user_list_info').html(data.user_name);
if (data.delete_yn == 2) {
row.find('#user_status').html('퇴사');
} else if (data.delete_yn == 3) {
row.find('#user_status').html('출산휴가');
}
if (data.reg_date!=undefined) {
var date=new Date(data.reg_date);
row.find('.reg_date').html('입사일자 : ' + date.format("yyyy년 MM월 dd일 a/p hh시 mm분"));
}
});
},
error : function(XMLHttpRequest, textStatus, errorThrown) {
alert('There was an error.');
}
});
} catch(e) {
alert(e);
}
}
엘리먼트 each
$( "li.ut_item" ).each(function( index ) {
//console.log( index + ": " + $( this ).text() );
$( this ).find('#btnSaveSurvey').show();
$( this ).find('#btnSavePhoto').show();
});
-
selectfield
{
xtype : 'selectfield',
name : 'role',
id : 'role',
label : '담당업무',
useClearIcon : true,
options : [
{ text : '현장소장', value : '02' },
{ text : '디자이너', value : '03' },
{ text : '컨설턴트', value : '04' }
]
}
selectfield - json 이용
job_type.json
{"d":[{ "text": "초중고등학생", "value": "초중고등학생" },
{ "text": "대학(원)생", "value": "대학(원)생" },
{ "text": "사무직", "value": "사무직" },
{ "text": "연구/개발직", "value": "연구/개발직" },
{ "text": "기술직", "value": "기술직" },
{ "text": "경영/관리직", "value": "경영/관리직" },
{ "text": "영업/마케팅", "value": "영업/마케팅" },
{ "text": "전문직", "value": "전문직" },
{ "text": "자영업", "value": "자영업" },
{ "text": "판매직", "value": "판매직" },
{ "text": "노무직", "value": "노무직" },
{ "text": "서비스직", "value": "서비스직" },
{ "text": "농업", "value": "농업" },
{ "text": "축산업", "value": "축산업" },
{ "text": "임업", "value": "임업" },
{ "text": "수산업", "value": "수산업" },
{ "text": "공무원", "value": "공무원" },
{ "text": "군경", "value": "군경" },
{ "text": "교직", "value": "교직)" },
{ "text": "예술", "value": "예술" },
{ "text": "주부", "value": "주부" },
{ "text": "기타", "value": "기타" }]}
model
Ext.regModel('d', {
fields : [
{ name : 'text', type : 'string' },
{ name : 'value', type : 'string' }
]
});
store
Ext.regStore('JobStore', {
model : 'd',
autoLoad : true,
proxy : {
type : 'ajax',
url : common_url + 'job_type.json',
reader : {
type : 'json',
root : 'd'
},
extraParams: { // 파라미터 설정 부분
cmd : 'CodeData',
subcmd : 'inc_data',
inc_id : m_inc_id
}
},
listeners:{ // 로딩이 완료 되면 호출
load: function(self, records, successful) {
//dataStore.loadRawData(self.proxy.reader.rawData);
if (dataInfo != -1) {
Ext.getCmp("space").setValue(dataInfo.space_code);
}
}
}
});
selectfield
{
xtype : 'selectfield',
name : 'job', // 동적로딩인 경우 필수
id : 'job',
label : '직업',
useClearIcon : true,
store: 'JobStore', //No quotes here.
displayField: 'text',
valueField: 'value',
placeHolder: '직업을 선택해 주세요'
}
passwordfield
{
xtype : 'passwordfield',
id : 'password',
label : '비밀번호',
useClearIcon : true
}
datepickerfield
{
xtype: 'datepickerfield',
destroyPickerOnHide: true,
name : 'date',
label: 'Start Date',
value: new Date(),
picker: {
yearFrom: 1990
}
}{
xtype : 'datepickerfield',
id : 'start_date',
label : '공사시작일',
useClearIcon : true,
picker: {
yearFrom: 2012,
yearTo : 2015,
slotOrder: ['year', 'month' ,'day']
}
}
emailfield
{
xtype : 'emailfield',
id : 'email',
label : '이메일',
useClearIcon : true
}
clear forms
this.form = new Ext.form.FormPanel(); // And somewhere else this.form.getForm().reset(); // doesn't work
confirm 창
var ret = confirm("정말로 삭제 하시겠습니까?");
if (ret) {
Ext.Ajax.request({
url: 'json',
params : {
cmd : 'IncidentDong',
subcmd : 'delete',
id : m_dong_id
},
success: function(response, opts) {
var JsonData = JSON.parse(response.responseText);
if(JsonData.data.err == "") {
ns_incident_dong_list.panel_list.getList(m_inc_id);
} else {
alert(JsonData.data.err);
}
}
});
}
x-list-item-body
dataList = new Ext.List({
title: 'Incident목록',
store: dataStore,
scroll: false, // <-- 여기 중요
layout:'fit', // <-- 여기 중요
blockRefresh:true,
onItemDisclosure: {
handler: function(record, btn, index) {
//alert(record.get('no'));
/*
ns_incident_write.init();
ns_incident_write.panel.getInfoData(record.get('id'));
main.MainPanel.setActiveItem(ns_incident_write.panel, "slide");
*/
overlay.setCentered(true);
overlay.setIncID(record.get('id'));
overlay.show();
}
},
listeners: {
itemtap: function(list, index, el, event){
if (event.getTarget('.x-list-item-body')) {
//alert('index =' + index);
var record = this.store.getAt(index);
ns_incident_list.panel_list.goNextPage(record.get('id'));
}
}
/*
el: {
tap: function(param1, param2, param3) {
alert('Play Pressed!');
},
delegate: '.x-list-item-body'
},
select: function (list, record) {
list.down('titlebar').setTitle(model.get('name'));
} // select
*/
}, // listeners
itemTpl:'{court} / {name} / {valuation} / {inspector}'
});
setVisible
Ext.getCmp("btnAdd2").setVisible(false);
Message 창 출처 : Sencha Touch Message Box
Ext.Msg.alert('blueX', '사진 등록은 사건이 등록되어야 가능합니다.', Ext.emptyFn);
PNG Image Base64 Encoder / Decoder
Sencha touch에 툴바용 이미지를 css에 사용하려고 만들어본 툴입니다.
한시간만에 만든것이라 버그가 많습니다.
배포는 자유지만 출처는 밝혀주세요
PNGBase64Util.exe
댓글을 달아 주세요