Jquery 혹은 javascript만으로 사용할 수 있는 괜찮은 스크롤바 관련 플러그인이 있다.

perfect-scrollbar

https://noraesae.github.io/perfect-scrollbar/

위 그림처럼 얇은 스크롤바를 생성할 수있 있다.

사용법도 상당히 간단하다. 위에 링크된 주소에 소스 및 예제가 비교적 잘 나와 있다. 

사용방법은 다음과 같다

해더부분의 소스 Import

html 코드 예시

적용될 html object CSS

Script 사용 예시 - 이 예시는 Jquery 버전이며 javascript 버전은 github에 API를 참조

div 안의 내용이 동적으로 사이즈가 변경될 경우 update 기능을 이용하여 갱신 시 자동으로 스크롤바 기능이 on/off 된다. 

스크롤바의 생성 제거를 반복해서 사용해도 되지만 실제 사용 시 스크롤바 생성시 약간의 스크립트 실행시간이 존재하는것 같아 update를 사용하는것을 권장한다.

마지막으로 작업에 사용했던 실제 사용 버전 파일

perfect-scrollbar-0.6.12.zip

특수문자 + 영문 + 숫자조합 패스워드 설정하기

// 비밀번호 특수문자 체크
var regExpSpcial:RegExp = /[^\{\}\[\]\/?.,;:|\)*~`!^\-_+<>@\#$%&\\\=\(\'\"]/gi
var regExpAlpha:RegExp = /[^a-zA-Z]/gi
var regExpNumber:RegExp = /[^0-9]/gi
if(regExpSpcial.test(pwd)){
    if(pwd.replace(regExpSpcial,"").length<1){
        alert("비밀번호는 특수문자가 최소 1자리가 필요합니다!");
        return ;
    }
}
if(regExpAlpha.test(pwd)){
    if(pwd.replace(regExpAlpha,"").length<1){
        alert("비밀번호는 영문자가 최소 1자리가 필요합니다!");
        return ;
    }
}
if(regExpNumber.test(pwd)){
    if(pwd.replace(regExpNumber,"").length<3){
        alert("비밀번호는 숫자가 최소 3자리가 필요합니다!");
        return ;                          
    }
}

쓸만한 Layer 팝업창

<div id="reservationList_popImg_Layer" onclick="javascript:$(this).hide()" style="display:block; position:absolute; top:100px; z-index:1000; left:30px; background:#fff; padding:10px; border:1px solid #999;">

<a onclick="javascript:$('#reservationList_popImg_Layer').hide();" style="position: absolute; cursor:pointer; right: -6px; top: -3px; width: 21px; margin: -5px 0 0 0; padding: 1px; height: 20px; color: #fff; border-radius: 14px; background:#98a5b5 url('/images/t6i_1.png') center center no-repeat; background-position: 3px 2px;"></a>

<img id="reservationList_popImg" src="/images/20151215_cn_pop_main.jpg" border="0" style="border:1px solid #e1e1e1">

</div>

화면 중앙 좌표를 구하는 법이다.

당연히 띄워지는 객체의  position은 absolute 이어야 할 것이다.

만약 left 와 top 값이 0보다 작은경우라면 화면 밖으로 벗어나지 않도록 0으로 초기화 해준다.

그냥 플러그인을 쓰면되는데.. 그지같은... 퍼블리셔때문에 blockUI 기능을 만들어 써야하는데 매번 찾기 귀찮아서 적는다..

아오..

• $.type(obj) 사용법
• 
  

• 1 2 3 4 5 6 7 8 9 10 11 12

  jQuery.type(undefined) === "undefined" jQuery.type() === "undefined" jQuery.type(window.notDefined) === "undefined" jQuery.type(null) === "null"   jQuery.type(true) === "boolean" jQuery.type(3) === "number" jQuery.type("test") === "string" jQuery.type(function(){}) === "function" jQuery.type([]) === "array" jQuery.type(new Date()) === "date" jQuery.type(/test/) === "regexp"

  cs

jQuery로 선택된 값 읽기

$("#selectBox option:selected").val();

$("#select_box > option:selected").val()

$("select[name=name]").val();

jQuery로 선택된 내용 읽기

$("#selectBox option:selected").text();

선택된 위치

var index = $("#test option").index($("#test option:selected"));

// Add options to the end of a select

$("#selectBox").append("<option value='1'>Apples</option>");

$("#selectBox").append("<option value='2'>After Apples</option>");

// Add options to the start of a select

$("#selectBox").prepend("<option value='0'>Before Apples</option>");

// Replace all the options with new options

$("#selectBox")

.html("<option value='1'>oranges</option><option value='2'>Oranges</option>");

// Replace items at a certain index

$("#selectBox option:eq(1)")

.replaceWith("<option value='2'>apples</option>");

$("#selectBox option:eq(2)")

.replaceWith("<option value='3'>bananas</option>");

// 지정된 index 값으로 select 하기

$("#selectBox option:eq(2)").prop("selected", "selected");

// text 값으로 select 하기

$("#selectBox").val("Some oranges").prop("selected", "selected");

// value 값으로 select 하기

$("#selectBox").val("2");

$("#selectBox > option[@value=지정값]").prop("selected", "true");

// 지정된 인덱스 값의 item 삭제

$("#selectBox option:eq(0)").remove();

// 첫번째 item 삭제

$("#selectBox option:first").remove();

// 마지막 item 삭제

$("#selectBox option:last").remove();

// 선택된 옵션의 text 구하기

alert($("#selectBox option:selected").text());

// 선택된 옵션의 value 구하기

alert($("#selectBox option:selected").val());

// 선택된 옵션 index 구하기

alert($("#selectBox option").index($("#selectBox option:selected")));

// SelecBox 아이템 갯수 구하기

alert($("#selectBox option").size());

// 선택된 옵션 앞의 아이템 갯수

alert($("#selectBox option:selected").prevAll().size());

// 선택된 옵션 후의 아이템 갯수

alert($("#selectBox option:selected").nextAll().size());

// 0번째 item 다음에 삽입

$("#selectBox option:eq(0)").after("<option value='4'>Some pears</option>");

// 3번째 item 전에 삽입

$("#selectBox option:eq(3)").before("<option value='5'>Some apricots</option>");

// select box 값이 변경될때 선택된 현재값

$("#selectBox").change(function() {

           alert($(this).val());

           alert($(this).children("option:selected").text());

});

정규표현식 기초

. : 다수의 한문자

? : 0개 이상의 한문자

* : 0개 이상의 문자 또는 문자열

+ : 1개 이상의 문자 또는 문자열

(chars) : (, ) 안의 문자또는 문자열을 그룹으로 묶습니다. 이 문자그룹은 Substitution(return URL)에서 $N 의 변수로 활용할수 있습니니다.

^ : 문자열의 첫문(열)을 지정합니다.

$ : 문자열의 끝 문자(열)을 지정합니다.

\(역슬래쉬) : 정규표현식에서 특별한 의미로 사용되는 문자의 특수기능을 제거합니다.(예:(, ), [, ] . 등)

{n} : 정확히 n번 반복

{n,} : n번 이상 반복

{n,m} : n 이상 m 이하 반복

[chars] : 문자들의 범위 또는 표현할 수 있는 문자들을 설정합니다.
예) [a-z] : a 부터 z 까지의 소문자, [tT] : 소문자 t 또는 대문자 T

정규표현식 단축표현들

[:alpha:] : 알파벳. [a-zA-Z] 와 같은 표현

[:alnum:] : 알파벳과 숫자. [a-zA-Z0-9] 와 같은 표현

[:digit:] : 숫자 [0-9] 와 같은 표현

[:upper:] : 대문자. [A-Z] 와 같은 표현

1. 정규 표현식이란.

   문자열의 특정한 패턴을 표시하거나 검사하기 위한 규칙을 의미하며 어떤 문자열의 집합을 표시하는 텍스트 string이나 일반적인

   텍스트 형시의 문서 등에서 문자열을 찾아내거나 검사하고 치환하는데 사용된다. 이러한 정규 표현식은 정규 표현식을 표시하는

   특수문자와 정규 표현식을 검사하기 위한 함수가 있다.

2. 패턴을 표현하는 특수 문자

3. 정규 표현식의 특수문자 사용법

  1) ^a?bc : a로 시작해서 bc로 끝나는 문자(abc로 시작하는 문자)와 bc로 시작하는 모든 문자 (예 abcd, bcd)

  2) ^.a : a앞에 아무 한 문자가 있어야 하고 그 문자로 시작하고 a가 들어간 문자 (예 aa, bacd, match, para)

  3) a?b$ : b로 끝나는 문자열 중에 a가 없거나 한 개 이상 존재하는 문자열 (예 b, ab, aab)

  4) a?b+$ : 첫 글자는 a가 있거나 없고 b가 한 개 이상이고 b로 끝나는 문자 (예 ab, b, bb, abbb, abbbb)

  5) ^ab$ : 첫 글자가 a이고 끝나는 문자가 b인 경우 (예 ab)

  6) [ab]cd : a나 b중에 한 글자와 cd가 포함된 acd, bcd를 포함한 문자 (예 acd, bcd, acdse)

  7) ^[a-zA-Z] : 영문자로 시작하는 모든 문자 (예 a, b, c, d, ee)

  8) [^ab]cd : cd 문자열 앞에 a나 b를 제외한 문자가 있는 문자열 즉, acd와 bcd를 제외한 문자열을 의미한다. (예 scd, dcd, ffcd)

  9) a{2,}b : a의 개수가 최소 2개 이상이고 다음 문자가 b인 문자 (예 aab, aaabcd, aaaab)

----------------------------------------------------------------------------------------------------------------------

2018.10.24 추가

+, -, 소수점을 허용하는 숫자형식 체크 정규식 : ^[+-]?\\d*(\\.?\\d*)$

Java 사용예제 

.attr 속성과 .prop 

필자는 아래와 같이 꾸준히 개발해 왔다.

$("input:checkbox[name=LOCK_YN]").attr("checked", true);

근데.. 이게 갑자기(?) 안되는 것이다..

게다가 크롬은 되는데 IE가 안되는것이다...

열심히 네이버 검색질을 해봤지만.. 나오지 않았다(못찾은것일 수도..)

구글에서 해답을 찾았는데..

attr 은 지양 하는 방법이라고 한다.

prop로 바꾸어서 코딩하니 잘된다.

$("input:checkbox[name=LOCK_YN]").prop("checked", true);

하...

IE 싫다.