JQEURY 플러그인] 로딩바. 블럭킹
로딩 블럭킹!!! 처리... 등.. 플러그인
GPL, MIT
http://jquery.malsup.com/block/#page
-- 사용 예~
# 표시될 메세지.
var MSG = {
Loading: { message: "<h4><img src='/images/tree/skin/loading.gif' /> Processing...</h4>",
overlayCSS: { backgroundColor: '#b2d0af', opacity: .3 },
css: { border: '2px solid #D0D7E5',
padding: '3px',
backgroundColor: '#777',
'-webkit-border-radius': '10px',
'-moz-border-radius': '10px',
opacity: .7,
color: '#fff'
}
},
...
}
# 로딩되는 상위 페이지 ( Parent Page )
<script type="text/javascript" src="/Scripts/jquery.blockUI.js" ></script>
function Load_Tab() {
var url = "SubPage.aspx";
var pmrs = "";
var html = "<iframe id='frameGridContents' src='" + url + pmrs + "' style='width:100%;
height:302px; padding:0px;margin:0px;' scrolling='no' frameborder='0'></iframe>";
$("#tab_Contents").html(html);
BlockUI();
}
function BlockUI() {
$("#tab_Contents").block(MSG.Loading);
}
function UnBlockUI() {
$("#tab_Contents").unblock();
}
# 로딩되는 페이지 ( Sub Page ) .cs
protected override void OnPreRenderComplete(EventArgs e)
{
base.OnPreRenderComplete(e);
Page.ClientScript.RegisterClientScriptBlock(
this.GetType(),
"unblock",
"try{ var t = setTimeout(function () { parent.UnblockUI(); clearTimeout(t); }, 50); }catch(exception){}",
true);
}
'# 6) JavaScript > JQuery' 카테고리의 다른 글
Jquery ] 페이지 로딩중 ... 샘플 (0) | 2012.09.28 |
---|---|
JQUERY ] 팝업 박스 ( 배경 검은 레이어로 덮기 ) (0) | 2012.09.25 |
Jquery ~ 블로그 소개 (0) | 2012.05.17 |
Jquery ~ 블로그 소개
http://findfun.tistory.com/46 이분 블로그 좋다 ( 한글이고, 설명이 간결하다. )
이번 프로젝트가 웹 기반이어서 소스를 훑어보니 jquery로 되어 있다.
간단히 문법만 조금 익혔었는데 소스를 보니 내눈을 까막눈으로 만들어버리네...
다시 기초부터 훑어보자... 시간이 없으니.. 빠르고 강하게 밀어붙이자!!
박종서님이 소개해준 jquery 사이트 굿!
한꺼번에 먹으니 체한듯한... 헷갈림의 시작!!
'# 6) JavaScript > JQuery' 카테고리의 다른 글
Jquery ] 페이지 로딩중 ... 샘플 (0) | 2012.09.28 |
---|---|
JQUERY ] 팝업 박스 ( 배경 검은 레이어로 덮기 ) (0) | 2012.09.25 |
JQEURY 플러그인] 로딩바. 블럭킹 (0) | 2012.09.25 |
자바 스크립트] XOR 암호화.
Simple Xor 암호화 관련해서 전에 만들어 사용했었던...
자바스크립트로 찾아보니 있었다.
String
.charAt
.charCodeAt
.fromCharCode
이하 예제및 소스..
출처의 소스에서 예외를 찾아 수정하였음.
키2개를 넣으면서 키가 중복일 경우 일부 코드가 풀린체로 보이는 xor의 특징이 있으므로 키값 중복을 피하거나
다른 암호화 처리방법과 혼용하면 좋겠다.
전에 C#으로 만들어서 사용했던 로직과 유사하나 자바스크립트로 작성하였을 뿐이다.
[\0] 값을 주의!! xor 값 ^ 값 인데 같은 값이면.. \0으로 표시가 안되는 문자열로... 희안하게 나타남...
스크립트를 작성해보면 알게됨.
변환 중 내용보기
첨부파일 : html 소스가 안올라가서.. 올림.
'# 6) JavaScript' 카테고리의 다른 글
javascript] OOP정리. function 이용법 (0) | 2014.05.23 |
---|---|
javascript] OOP정리. class 처럼 생성해보기. (0) | 2014.05.23 |
[javascript] 정규식 관련.. (0) | 2010.11.18 |
메뉴] 자바스크립트로 만든 메뉴 객체 (0) | 2009.05.09 |
자바스크립트 Array사용 (0) | 2009.05.08 |
[javascript] 정규식 관련..
금액 입력 필드에 포맷 체크..
fmt : #,###.## 소수점두째자리 까지인듯.
또... #,###,## 해도 정상 금액으로 받아들임.. ㅋㅋ
스크립트...
function fnCheckNumber( txt )
{
var pttr = /^([0-9]+|[0-9]{1,3}(,[0-9]{3})*)(.[0-9]{1,2})?$/
if( pttr.test( txt.value ) == true )
{
alert('Yes 금액.');
}
else
{
alert('No 금액.');
}
}
정규식 설명을 잘해놓은곳에서 정규식을 퍼왔음.
정규식을 공부할때 여기서 설명된걸 보면 많은 도움이 될것 같음...
http://www.bikerslab.com/blog/?mb_id=zeron&id=40
'# 6) JavaScript' 카테고리의 다른 글
javascript] OOP정리. class 처럼 생성해보기. (0) | 2014.05.23 |
---|---|
자바 스크립트] XOR 암호화. (0) | 2010.12.31 |
메뉴] 자바스크립트로 만든 메뉴 객체 (0) | 2009.05.09 |
자바스크립트 Array사용 (0) | 2009.05.08 |
자바스크립트 디버거 (0) | 2009.05.08 |
메뉴] 자바스크립트로 만든 메뉴 객체
자바스크립트로 메뉴관리 객체를 만들었음.
/*
자바스크립트
메뉴 Display
제작 윤지송 aseuka@hanmail.net
2008.07.27
*/
// 크기정보 변수
function Size(_width, _height)
{
this.Width = _width;
this.Height = _height;
this.toString = function()
{
return "Width:("+this.Width.toString() +"), Height:("+this.Height.toString()+")"+"\n";
}
return this;
}
// 위치정보 변수
function Point( x, y)
{
this.X = x;
this.Y = y;
this.toString = function()
{
return "X:("+this.X +"), Y:("+this.Y+")"+"\n";
}
return this;
}
// 단일 1개의 이미지 Icon 정보.
function imgIcon( path, _x, _y, _width, _height, _linkURL )
{
this.ImgPath = path;
this.ImgLoction = new Point(_x, _y);
this.ImgSize = new Size( _width, _height );
this.LinkURL = _linkURL;
this.toString = function()
{
var returnString = "Path :" + this.ImgPath+"\n";
returnString += "Loction :" + this.ImgLoction.toString();
returnString += "Size :" + this.ImgSize.toString();
return returnString;
}
return this;
}
// Sub 메뉴Icon별 관리 객체.
function ImgIcons( _name )
{
this.Name = _name;
this.imgs = new Array();
this.Add = function( _path, _x, _y, _width, _height, _linkURL )
{
this.imgs[ this.imgs.length ] = new imgIcon( _path, _x, _y, _width, _height, _linkURL );
}
this.toString = function()
{
var returnString = "";
for( i = 0; i < this.imgs.length ; i ++ )
{
returnString += this.imgs[i].toString() + "|";
}
return returnString;
}
return this;
}
/*
//////////////////////////////////////////////////////////////////////////////////
*/
// 메뉴 관리 하는 객체.
function MenuList( _Id , _divName )
{
this.Id = _Id;
// 나타날 divId
this.divName = _divName;
this.ar = new Array();
this.Add = function( imgIcons )
{
this.ar[ this.ar.length ] = imgIcons;
}
this.GetImgIcons = function( ArrayName )
{
for( i = 0; i < this.ar.length; i++)
{
if(this.ar[i].Name == ArrayName)
{
return this.ar[i];
}
}
return null;
}
this.MakeImg = function( imgIcon )
{
var CreateImgHTML = "<img src='" +imgIcon.ImgPath +"' ";
CreateImgHTML += " style='width:"+imgIcon.ImgSize.Width +";";
CreateImgHTML += " height:"+imgIcon.ImgSize.Height+ ";border:0;'";
CreateImgHTML += " onmouseover='"+this.Id+".bImgMouseOver=true;'";
CreateImgHTML += " onmouseout='"+this.Id+".MouseOut();'";
CreateImgHTML += " >";
var AtagHTML = "<a href='"+imgIcon.LinkURL+"' >" + CreateImgHTML +"</a>";
if( imgIcon.LinkURL )
{
return AtagHTML;
}
else
{
return CreateImgHTML;
}
}
this.ClearLayer = function( )
{
if(this.bImgMouseOver == false)
{
var div = document.getElementById(this.divName);
div.innerHTML = "";
div.style.display = "none";
}
}
return this;
}
// 객체 속성 정의
MenuList.prototype =
{Vertical: false // 가로(false) 세로(true)...
,
TimerInterVal : 1000
,
bImgMouseOver: false
,
MouseOut : function(){
var fn_repeater = this.Id+".ClearLayer()";
this.bImgMouseOver = false;
this.tmID = setTimeout( fn_repeater , this.TimerInterVal );
}
,
MouseOver: function( img, arName ){
var strTagString = "";
var div = document.getElementById(this.divName);
this.bImgMouseOver = true;
var subMenuArray = this.GetImgIcons(arName);
if( subMenuArray && div )
{
div.innerHTML = "";
for( i = 0 ; i < subMenuArray.imgs.length ; i++)
{
strTagString += this.MakeImg( subMenuArray.imgs[i] );
}
if( img )
{
div.style.top = ((img.style.top ? img.style.top : 0) + img.height + 10);
div.style.left = (img.style.left? img.style.left : 0);
// 가로
if( this.Vertical == false )
{
div.style.width = img.width * subMenuArray.imgs.length;
div.style.height = 0;
}
else
{
div.style.width = img.width;
div.style.height = img.height;
}
div.style.zindex = 200;
div.style.position ='absolute';
}
div.innerHTML = strTagString;
div.visibility = "show";
div.style.display = "block";
}
}
};
메뉴를 구현한 js 파일
'# 6) JavaScript' 카테고리의 다른 글
자바 스크립트] XOR 암호화. (0) | 2010.12.31 |
---|---|
[javascript] 정규식 관련.. (0) | 2010.11.18 |
자바스크립트 Array사용 (0) | 2009.05.08 |
자바스크립트 디버거 (0) | 2009.05.08 |
웹 에서 F1키 사용하기. (0) | 2009.05.08 |
자바스크립트 Array사용
<script type="text/javascript" src="debuger/trace.js" ></script>
<script type="text/javascript" >
// 첫번째 사용법.
var ar = new Array();
ar[0] = '1';
ar[1] = '2';
ar[2] = '3';
ar[3] = '4';
ar[4] = '5';
// 두번째 사용법
var ar2 = Array();
ar2 = {aaa:51,bbb:52,ccc:53};
// 복합 사용법
var ar3 = new Array();
// [0] [0 ],[1 ]
ar3[0] = [{aa:1, bb:2, cc:3},{aa:4, bb:5, cc:6}]
function load()
{
traceArr( ar);
trace("ar[1] : "+ar[1]);
trace("ar2.aaa :" + ar2.aaa);
trace("ar3[0][0].aa :" + ar3[0][0].aa);
trace("ar3[0][0].cc :" + ar3[0][1].cc);
}
</script>
결과 :
'# 6) JavaScript' 카테고리의 다른 글
[javascript] 정규식 관련.. (0) | 2010.11.18 |
---|---|
메뉴] 자바스크립트로 만든 메뉴 객체 (0) | 2009.05.09 |
자바스크립트 디버거 (0) | 2009.05.08 |
웹 에서 F1키 사용하기. (0) | 2009.05.08 |
메세지박스 (0) | 2009.05.02 |
자바스크립트 디버거
Trace라는 자바스크립트 디버거임
지금까지 웹프로젝트에서 늘 사용하던 프로그램임.
사용법이 간단함.
추적기(Tracer)은 매우 유용한 어플리케이션이다. 때문에, trace.js 파일 하나만 호출하여 작업할 수 있도록 하였다. 이 파일은 자체적으로 실행된다.
<script type="Javascript" src="d:/JavaDebugger/trace.js"></script>
추적기 함수 목록은 다음과 같다. 각 함수들은 개별적인 요소들을 갖는다.
trace(): 이 함수는 어플리케이션에서 alert("Helo World"); 대신에 trace("hello world");로 사용할 수 있다. 추적기는 숫자와 색상을 곁들여서 결과를 출력한다.
traceArr(): 이 함수는 배열을 표시하고 배열의 위치(position)별 요소를 보여준다.
traceAssoc(): 연관배열(associative array)[1]을 위한 함수다. 연관배열에 이 함수를 사용한다면 키(key)와 각 배열 요소의 값을 보여준다.
traceStr(): 이 함수는 traceArr()과 거의 비슷하지만, 문자열에 동작하고 문자열의 문자들을 보여준다.
Watch: Watch는 함수(function)가 아닌 기능(functionality)이다.
이거 가져왔던 곳을 모르겠음...
Trace파일은 추가로 넣지 않음.
'# 6) JavaScript' 카테고리의 다른 글
메뉴] 자바스크립트로 만든 메뉴 객체 (0) | 2009.05.09 |
---|---|
자바스크립트 Array사용 (0) | 2009.05.08 |
웹 에서 F1키 사용하기. (0) | 2009.05.08 |
메세지박스 (0) | 2009.05.02 |
자바스크립트로 만든 로또프로그램. (0) | 2009.05.02 |
웹 에서 F1키 사용하기.
웹브라우져상에서 f1 키를 눌렀을시
함수호출.
document.onhelp = function()
{
if(window.event.srcElement.tagName == "INPUT")
{
alert('aaaaaaaaaaaaaaaaaaaaaaa'); // 호출!
event.returnValue = false;
}
}
태그 input인 컨트롤이 포커스가 있을시 f1누르면 alert 창이 뜨고
그 이외에 f1 누를시 브라우져의 기본 도움말 창이 팝업됨.
'# 6) JavaScript' 카테고리의 다른 글
메뉴] 자바스크립트로 만든 메뉴 객체 (0) | 2009.05.09 |
---|---|
자바스크립트 Array사용 (0) | 2009.05.08 |
자바스크립트 디버거 (0) | 2009.05.08 |
메세지박스 (0) | 2009.05.02 |
자바스크립트로 만든 로또프로그램. (0) | 2009.05.02 |
메세지박스
자바스크립트를 막 시작하고 재미 붙어서 이거저거 만들때 만들었던 것임.
자바스크립트로 메세지 박스객체를 만들어서 사용함 소스 참조.
테스트용: 블로그안에서 실행해서 그런지 간만에 자바스크립트로 스크롤 값을 가져올수가 없넹... 그냥 폼에 박힌 레이어로 구성함.
결과값 :
'# 6) JavaScript' 카테고리의 다른 글
메뉴] 자바스크립트로 만든 메뉴 객체 (0) | 2009.05.09 |
---|---|
자바스크립트 Array사용 (0) | 2009.05.08 |
자바스크립트 디버거 (0) | 2009.05.08 |
웹 에서 F1키 사용하기. (0) | 2009.05.08 |
자바스크립트로 만든 로또프로그램. (0) | 2009.05.02 |
자바스크립트로 만든 로또프로그램.
'# 6) JavaScript' 카테고리의 다른 글
메뉴] 자바스크립트로 만든 메뉴 객체 (0) | 2009.05.09 |
---|---|
자바스크립트 Array사용 (0) | 2009.05.08 |
자바스크립트 디버거 (0) | 2009.05.08 |
웹 에서 F1키 사용하기. (0) | 2009.05.08 |
메세지박스 (0) | 2009.05.02 |