끌어당겨셔 새로고침 하기 javascript 버젼 pullToRefresh

끌어당겨셔 새로고침 하기 javascript 버젼

모바일웹페이지에서 상단을 끌어당겨 새로고침을 하기
- 사용 모듈 : https://github.com/BoxFactura/pulltorefresh.js
- 사용 방법

< script src="https://github.com/BoxFactura/pulltorefresh.js"></ script>
< script>
    // initialize
    PullToRefresh.init({
      mainElement: '.global-body',
  instructionsPullToRefresh:'새로고침 하려면 당기세요',
  instructionsReleaseToRefresh:'새로고침 하려면 놓으세요',
  instructionsRefreshing :'새로고침 하는중...',
  shouldPullToRefresh:function(){return $('.global-body').scrollTop() === 0},
      onRefresh: function() { 
        // on refresh code goes here
        //alert('refresh') 
if($('.global-body').scrollTop() === 0){
location.reload(true);
}
      }
    });
</ script>

위에 간단하게 적용하는 스크립트이다.
내용은,
* mainElement : 새로고침할때 어떤 요소(element)앞에서 당겨지는지 해당 엘리먼트를 입력.
ㄴ적용해 보면 해당 엘리먼트(ID, class, element)앞에 새로고침하는 표시가 나오게 된다
* pullToRefresh가 기본으로 적용 되었을때는 영문으로 표시 되니, 텍스트로 변경할려고 하면 아래 정보를 변경한다
- instructionsPullToRefresh:'새로고침 하려면 당기세요',
- instructionsReleaseToRefresh:'새로고침 하려면 놓으세요',
- instructionsRefreshing :'새로고침 하는중...',
* 끌어당겨새로침 기능을 적용하다 보면, 스크롤을 내린 후 위로 올리는 동작중에 새로고침이 동작되는 경우가 있는데..
이때는 정확한 조건에 맞는지 확인을 해야 한다. 이 부분을 체크하는게 shouldPullToRefresh 부분이다.
- shouldPullToRefresh: 특정 엘리먼트의 scrollTop을 비교해서 처리하거나, 어떤 조건을 받아서 처리해 주면 된다.
ㄴ위 소스에서 처럼 하거나, mainElement가 body 가 아닌 경우
shouldPullToRefresh:function(){return !this.mainElement.scrollTop}

* onRefresh : 새로고침 처리 수행에 대한 결과 처리(action) 하는 부분. 
ㄴ일반적으로 페이지 새로고침. 그외 특별한 동작을 만들 수 있겠다.

jquery bPopup 플러그인 팝업 위치 재지정하기

jquery bPopup modal popup 플러그인 사용시

팝업창 위치 새로 고침하기


bPopup을 이용해 기본 팝업 설정을 해주고,

$('selector').bPopup({


});


기본은 한번 실행후 다시 클릭을 하면 이전에 설정된 위치에서 시작된다.

보통은 같은 내용을 이용해 문제가 없겠지만,

팝업안의 컨텐츠가 계속 달라져야 한다면,

위치가 초기 위치에 고정되다 보니 컨텐츠를 제대로 볼수 없을때가 있다.


이때,


$('selector').reposition(animationSpeed) 을 이용해 주면 된다.


resposition()은 bPopup 플러그인 version 0.10.0 이상에서 동작한다.




예제)

$('#selector').click(function(){


var bpopup = $('selector').bPopup();

bpopup.reposition(100);


});




jquery를 이용해 텍스트 블링크(blink) 만들기

간단히 jquery를 이용해서 블링크 텍스트를 만들어보자.
해보니, 굳이 움직이는 gif로 할필요없겠다. 경우에 따라서는 css를 이용해서 순간순간 블링크 텍스트 색상도맘대로 변경할수도 있고.

<span class='icn_new'>new</span>

//블링크 시작.
var icn_blink = setInterval(function(){
$('span.icn_new').fadeOut('slow').fadeIn('slow');
},2000);

//블링크 중지가 필요할경우,  
$('span.icn_new').mouseover(function(){clearInterval(icn_blink);});

적용되는 브라우져는
ie7.0이상, firefox, crome, opera 에서 이용가능하다. 

flash 대체 컨텐츠 처리하기.

브라우져 또는 기기에 따라서 플래쉬가 실행되지 않을때가 있다.
이때, 플래쉬를 대체할만한 컨텐츠를 추가해주면, 접근성이 향상이 된다.

아래 flash를 삽입해주는 스크립트를 참고한다.
function embedFlash(id, url, width, height, altText, flashVars, wmode) {
	if (!flashVars) flashVars = '';
	if (!wmode) wmode = 'window';
	if (!altText) altText = '';

	var str = '' +
	'<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,115,0" width="' + width + '" height="' + height + '" id="' + id + '">' +
		'<param name="movie" value="' + url + '" />' +
		'<param name="wmode" value="' + wmode + '" />' +
		'<param name="FlashVars" value="' + flashVars + '" />' +
		'<!--[if !IE]>-->' +
		'<object type="application/x-shockwave-flash" data="' + url + '" width="' + width + '" height="' + height + '" name="' + id + '">' +
			'<param name="wmode" value="' + wmode + '" />' +
			'<param name="FlashVars" value="' + flashVars + '" />' +
		'<!--<![endif]-->' +
			'<div class="alt-content alt-' + id + '">' + altText + '</div>' +
		'<!--[if !IE]>-->' +
		'</object>' +
		'<!--<![endif]-->' +
	'</object>';
	document.write(str); 
} 

아래 블로그주소에서 더 자세한 설명과 여러가 대체방법에 대해서 설명이 되어 있다.
http://blog.wystan.net/2008/03/25/flash-alternative-content-and-noscript 

json 이란?

발췌 원문 : http://pjm0000.egloos.com/3605520

JSON 기초
 
JSON으로는 JavaScript 객체로 표현된 데이터를 한 함수에서 다른 함수로, 또는 비동기식 애플리케이션의 경우, 웹 클라이언트에서 서버 측 프로그램으로 쉽게 전달할 수 있는 스트링으로 변형할 수 있다. 문자열이 약간 이상해 보이지만 JavaScript에 의해 쉽게 인터프리팅 되고, JSON은 name/value 쌍 보다 복잡한 구조도 표현한다. 예를 들어, 단순한 키와 값 리스트 대신, 배열과 복합 객체들을 나타낼 수 있다.
 
 
1. JSON 예제
 
JSON에서는 name/value 쌍이 다음과 같이 표현된다.
 
이는 매우 기본적인 것이고, 텍스트의 name/value 쌍 보다는 더 많은 공간을 차지한다.
 
하지만, JSON은 여러 name/value 쌍들을 하나로 연결할 때 진가를 발휘한다. 우선, 다음과 같이, 여러 name/value 쌍으로 데이터 레코드를 생성할 수 있다.

{ "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" }

신택스의 관점에서 보면 name/value 쌍 보다 나은 점이 없어 보이지만, 이 경우, JSON은 훨씬 더 사용하기 쉬우며, 가독성도 놀랍다. 예를 들어, 위 세 개의 값들은 같은 레코드의 일부이다. 중괄호는 그 값이 같은 커넥션을 갖고 있다는 것을 표시하고 있다.
 
2. 값들의 배열
 
값을 나타내야 할 때, JSON은 보다 읽기 쉽고, 덜 장황하다. 예를 들어, 인명부가 있다고 해보자. XML에서는, 수 많은 오프닝/클로징 태그에 둘러싸이게 되고, 전형적인 name/value 쌍을 사용한다면, 독점적인 데이터 포맷을 사용해야 하거나, person1-firstName처럼 키 네임을 수정해야 한다.
 
JSON에서는 다음과 같이 괄호를 사용하여 레코드를 그룹핑 할 수 있다.

{ "people": [
  { "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" },
  { "firstName": "Jason", "lastName":"Hunter", "email": "jason@servlets.com" },
  { "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" }
]}

이해하기도 어렵지 않다. 이 경우, people이라는 하나의 변수가 있고, 값은 세 개의 아이템을 포함하고 있는 배열이며, 각각의 레코드에는 이름, 성, 이메일 주소가 있다. 위 예제는 레코드들을 모두 투입하는 방법과, 아이템을 괄호가 있는 싱글 값으로 그룹핑 하는 방법을 설명하고 있다. 물론, 같은 신택스를 사용할 수 있지만, 여러 값들(각각 여러 레코드들을 갖고 있음)을 갖고 있다.

{ "programmers": [
  { "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" },
  { "firstName": "Jason", "lastName":"Hunter", "email": "jason@servlets.com" },
  { "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" }
 ],
"authors": [
  { "firstName": "Isaac", "lastName": "Asimov", "genre": "science fiction" },
  { "firstName": "Tad", "lastName": "Williams", "genre": "fantasy" },
  { "firstName": "Frank", "lastName": "Peretti", "genre": "christian fiction" }
 ],
"musicians": [
  { "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" },
  { "firstName": "Sergei", "lastName": "Rachmaninoff", "instrument": "piano" }
 ]
}

여기에서 주목해야 할 점은 각각이 다수의 값을 내포하고 있는 많은 값들을 표현할 수 있는 당신의 능력이다. 또 하나 주목해야 할 점은 레코드의 name/value 쌍들은 다른 메인 항목(programmers, authors, musicians)에 따라 변한다는 것이다. JSON은 완전히 동적이고, JSON 구조 안에서 데이터를 표현하는 방식을 바꿀 수 있다.
 
또 한 가지 알아두어야 할 것은 JSON 포맷 데이터로 작업할 때 제약 조건이 없다는 점이다. 따라서, 어떤 것을 표현하는 방식을 바꿀 수 있고, 심지어는 같은 데이터 구조 내에서 같은 것을 다른 방식으로 나타낼 수도 있다.
 
3. JavaScript에서 JSON 사용하기
 
JSON 포맷을 다룬 후라면, JavaScript에서 이것을 사용하는 것은 간단하다. JSON은 네이티브 JavaScript 포맷이고, JavaScript 내에서 JSON 데이터와 작업하기 위해 특별한 API나 툴킷이 필요 없다.

4. JSON 데이터를 변수에 할당하기

예를 들어, 새로운 JavaScript 변수를 만들고, JSON 포맷 데이터 스트링을 여기에 직접 할당한다고 해보자.

var people =
  { "programmers": [
    { "firstName": "Brett", "lastName":"McLaughlin", "email": "brett@newInstance.com" },
    { "firstName": "Jason", "lastName":"Hunter", "email": "jason@servlets.com" },
    { "firstName": "Elliotte", "lastName":"Harold", "email": "elharo@macfaq.com" }
   ],
  "authors": [
    { "firstName": "Isaac", "lastName": "Asimov", "genre": "science fiction" },
    { "firstName": "Tad", "lastName": "Williams", "genre": "fantasy" },
    { "firstName": "Frank", "lastName": "Peretti", "genre": "christian fiction" }
   ],
  "musicians": [
    { "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" },
    { "firstName": "Sergei", "lastName": "Rachmaninoff", "instrument": "piano" }
   ]
  }


복잡하지 않다. people에는 이제 JSON 포맷 데이터가 포함되어 있다.
하지만, 많은 것을 수행하지 않는다. 데이터는 여전히 유용한 포맷으로 되어있지 않다.
 
5. 데이터에 액세스 하기
 
위의 매우 긴 스트링은 단순한 배열일 뿐이고, JavaScript 변수에 그 배열이 있다면 쉽게 액세스 할 수 있다. 사실, 그 배열을 마침표로 구분할 수 있다. 따라서, programmers 리스트의 첫 번째 엔트리의 성(last name)에 액세스 하려면, JavaScript에서 다음과 같은 코드를 사용해야 한다.

people.programmers[0].lastName;

인덱싱은 '0' 부터 시작한다. 따라서, 이것은 people 변수에 있는 데이터로 시작한다. 그리고 나서, programmers라고 하는 아이템으로 이동하고, 첫 번째 레코드([0])에 액세스 한다. 마지막으로, lastName 키의 값에 액세스 한다. 결과는 "McLaughlin"이라는 스트링 값이다.

다음은 같은 변수를 사용하는 예제들이다.

people.authors[1].genre   // Value is "fantasy"
people.musicians[3].lastName  // Undefined. This refers to the fourth entry, and there isn't one
people.programmers.[2].firstName // Value is "Elliotte"
 
이 신택스로도, 다양한 JSON 포맷 데이터로 작업할 수 있고, 추가 JavaScript 툴킷이나 API가 필요 없다.

6. JSON 데이터 수정하기
 
위에 나타난 점과 괄호 표기법을 사용하여 데이터에 액세스 하듯, 같은 방식으로 데이터를 쉽게 수정할 수 있다.

people.musicians[1].lastName = "Rachmaninov";

문자열에서 JavaScript 객체로 변환했다면 변수에 있는 데이터를 수정하면 된다.

7. 문자열로 변환하기
 
물론, 모든 데이터 수정은 텍스트 포맷으로 쉽게 변환할 수 없다면 가치가 없다. 이것 역시 JavaScript에서는 간단하다.

String newJSONtext = people.toJSONString();

이것이 다이다.
원하는 곳 어디에서나 사용할 수 있는 텍스트 문자열이 생겼으니, 이것을 Ajax 애플리케이션에서 요청 스트링으로 사용할 수 있다.


훨씬 더 중요한 것은, 어떤 JavaScript 객체라도 JSON 텍스트로 변환할 수 있다. 원래 JSON 포맷 스트링으로 할당된 변수로만 작업할 필요가 없다. myObject라는 객체를 변형하려면, 같은 종류의 명령어를 실행하면 된다.


String myObjectInJSON = myObject.toJSONString();


이것이 JSON과 다른 데이터 포맷과의 가장 큰 차이이자, 이 시리즈를 통해 탐구할 주제이다. JSON에서는, 단순한 함수를 호출하면, 포맷팅 되어 사용하기에 알맞은 데이터를 얻을 수 있다. 다른 데이터 포맷의 경우, 미가공 데이터와 포맷 데이터간 변환은 여러분의 몫이다. Document Object Model 같이 데이터 구조를 텍스트로 변환하는 함수를 제공하는 API를 사용할 때도, 네이티브 JavaScript 객체와 신택스 보다는, API를 배우고 그 API의 객체를 알아야 한다.
 
많은 JavaScript 객체들과 작업할 때, JSON은 데이터를 서버 측 프로그램으로 요청을 보내기에 알맞은 포맷으로 쉽게 변환할 수 있다.