IE와 호환을 위해서는 css로는 안되고 javascript를 사용해야 한다.

 

아래 블로그 내용을 참조하였습니다.

http://blog.upgle.com/7670

 

  1. HTML5 Placeholder jQuery Plugin 다운받기

https://github.com/mathiasbynens/jquery-placeholder

 

  2. 데모페이지

http://mathiasbynens.be/demo/placeholder


  3. 사용방법

JQUERY를 삽입하는것만으로 자동으로 placeholder속성을 찾아 적용시켜줍니다. 정말 간단합니다!

$('input, textarea').placeholder();



IE 9 에서는 잘되고

IE 8 에서는 input type password type **** 로 나오므로 password 타입에 사용 할 때 고려해야 함.


감사합니다.

Posted by 마법수정화살
,

Glyphicons 

아이콘을 이미지로 표현 대신 폰트로 보여주어 고화질에서도 깔끔케 보이도록 하는 방법이다. 

Bootstrap 을 통해 사용하는 방법을 보자.

사용법

성능상의 이유로, 모든 아이콘은 기본클래스와 개개의 클래스를 필요로 합니다. 사용하려면, 다음의 코드를 어디든지 붙혀놓으면 됩니다. 적절한 패딩을 위해 아이콘과 글자 사이에 공간을 남겨두세요.

<span class="glyphicon glyphicon-search"></span>

예제

툴바와 네비게이션을 위해 버튼과 버튼 그룹에 그들을 사용하거나, 폼 입력요소 앞에 덧붙힙니다.

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star"></span> Star
</button>


Font Awesome

http://fortawesome.github.io/Font-Awesome/icons/

많은 아이콘을 제공한다 4.3.0 버전 519개 

- FA의 다양한 아이콘을 Glyphicons 으로 사용 할 수 있다. 


Instrumente 크롬 익스텐션을 사용하면 FA 아이콘과 class를 확인 할수 있는 항목이 있다. 


첨부된 파일을 받으면 확인해 볼 수 있습니다.

bootstrap + fontawesome

bootstrap.zip




Posted by 마법수정화살
,

어떤 영역에 스크롤 되면 이벤트를 발생 시킨다.


http://imakewebthings.com/waypoints/guides/getting-started/

웨이 포인트는 요소에 스크롤 할 때 기능을 트리거 할 수있는 가장 쉬운 방법입니다.


크롬에서 잘된다.


Jquery 1.8 이상

IE 9 이상

Posted by 마법수정화살
,

widget 컴포넌트 gridster

HTML 2015. 3. 18. 14:44

대시보드? 


http://gridster.net/#demos

데모페이지에 가보면 확인해 볼 수 있다. 


제공 되는 데모 화면.. 


드래그 해서 옵기면 촥촥 잘 붙는다~~

나중에 써먹어야지...


비슷한거.

http://mcpants.github.io/jquery.shapeshift/

Posted by 마법수정화살
,

carousel(캐러셀) UI

HTML 2015. 3. 17. 19:44
carousel은 수하물 컨베이어 벨트 라는 뜻, 회전목마 라는 뜻이 있다고 한다.  
돌고돈다는 것을 의미 하는듯..


위의 화면으로 어떤 ui를 생각 하게 되는가. 

1. 좌우 화살표를 누르면 다음장으로 이동.

2. 아래 동그라미를 누르면 해당 페이지로 이동

이 UI가 케러셀 이다. 

대부분 케러셀은 자동으로 움직이는 것을 지원하는 듯 하다.

아래 URL을 참조하면 예제와 소스코드를 구할 수 있다. 
확인해서 자신에게 맞는 컴포넌트를 가져다 쓰자. 

접근성 이슈 (bootstrap)

캐러셀 콤포넌트는 일반적으로 접근성 규약을 준수하지 않습니다. 당신이 준수할 필요가 있다면, 당신의 콘텐츠를 보여줄 수 있는 다른 옵션을 고려해 주세요.


bootstrap의 예제도 모바일에서 동작하는데 문제가 있다.


carousel 모바일 swipe (옆으로 쓸기) 이벤트. 

http://lazcreative.com/blog/adding-swipe-support-to-bootstrap-carousel-3-0/

Posted by 마법수정화살
,

대부분의 홈페이지는 모바일 지원을 한다. 

pc에서 모바일 페이지를 보고 싶을 경우가 있는데 이럴때 사용하면 좋은 extention이 있다. 


User-Agent Switcher for Chrome

https://chrome.google.com/webstore/detail/user-agent-switcher-for-c/djflhoibgkdhkhhcedjiklpkjnoahfmg

설치를 하면 우측 상단에 browser action이 생기는데 누르면 지원하는 agent를 설정 할 수 있다. 


android , iphone 등을 선택하면 현재 browser 모드가 설정되고  google.com 에 접속하면 모바일 모드로 보이는 것을 확인 할 수 있다. 


chrome exteion을 이용한 것인데 아래 코드로 동작하는 것을 확인 하였다. 

요청 하기전 설정된 정보로 User-Agent 헤더 정보를 바꾼다. 

function updateListeners() {

if (!listener) {

listener = function(details) {

var header_map = {

requestHeaders : details.requestHeaders

};

if (details && details.url && details.requestHeaders

&& details.requestHeaders.length > 0) {

header_map = {

requestHeaders : replaceHeader(getCacheSpoofValues(

details.url, details.tabId), details.requestHeaders)

}

}

return header_map

}

}

chrome.webRequest.onBeforeSendHeaders.addListener(listener, {

"urls" : [ "http://*/*", "https://*/*" ]

}, [ "requestHeaders", "blocking" ])

}


https://developer.chrome.com/extensions/webRequest

chrome.webRequest

request 요청중의 관찰, 트래픽분석, blocking ,intercept 할 때 사용한다.

사용시 아래 권한을 준다.
      {
        "name": "My extension",
        ...
        "permissions": [
          "webRequest",
          "*://*.google.com/"
        ],
        ...
      }
      

request의 라이브사이클 onBeforeSendHeaders 2번째 단계 이다.

Life cycle of a web request from the perspective of the webrequest API

onBeforeRequest (optionally synchronous)
Fires when a request is about to occur. This event is sent before any TCP connection is made and can be used to cancel or redirect requests.
onBeforeSendHeaders (optionally synchronous)
Fires when a request is about to occur and the initial headers have been prepared. The event is intended to allow extensions to add, modify, and delete request headers (*). The onBeforeSendHeaders event is passed to all subscribers, so different subscribers may attempt to modify the request; see the Implementation details section for how this is handled. This event can be used to cancel the request.
onSendHeaders
Fires after all extensions have had a chance to modify the request headers, and presents the final (*) version. The event is triggered before the headers are sent to the network. This event is informational and handled asynchronously. It does not allow modifying or cancelling the request.
onHeadersReceived (optionally synchronous)
Fires each time that an HTTP(S) response header is received. Due to redirects and authentication requests this can happen multiple times per request. This event is intended to allow extensions to add, modify, and delete response headers, such as incoming Set-Cookie headers. The caching directives are processed before this event is triggered, so modifying headers such as Cache-Control has no influence on the browser's cache. It also allows you to redirect the request.
onAuthRequired (optionally synchronous)
Fires when a request requires authentication of the user. This event can be handled synchronously to provide authentication credentials. Note that extensions may provide invalid credentials. Take care not to enter an infinite loop by repeatedly providing invalid credentials.
onBeforeRedirect
Fires when a redirect is about to be executed. A redirection can be triggered by an HTTP response code or by an extension. This event is informational and handled asynchronously. It does not allow you to modify or cancel the request.
onResponseStarted
Fires when the first byte of the response body is received. For HTTP requests, this means that the status line and response headers are available. This event is informational and handled asynchronously. It does not allow modifying or cancelling the request.
onCompleted
Fires when a request has been processed successfully.
onErrorOccurred
Fires when a request could not be processed successfully.


'Chrome extention' 카테고리의 다른 글

현재 탭 jquery 하여 제어하기.  (0) 2015.03.02
Posted by 마법수정화살
,

https://developer.chrome.com/extensions/samples 페이지의 아래 예제를 받아서 수정.

A browser action with a popup that changes the page color


이 예제는 browser action을 클릭 했을 때 현재 탭 컨텐츠의 바탕화면 색을 변경한다. 

function click(e) {

  chrome.tabs.executeScript(null,

      {code:"document.body.style.backgroundColor='" + e.target.id + "'"});

  window.close();

}


이 것을 응용해서 편리한, 개발자도구를 못 쓰는 사용자를 위한 도구를 만들려고 했다. 

그런데 일반 java script말고 jquery를 이용해 컨텐츠를 파싱하거나 조작하려고 하였으나 잘 되지 않았다. 


아래와 같이 작성하면 jquery를 이용하여 tab의 컨텐츠를 컨트롤 할 수 있다. 

function handleClick(e) {

  chrome.tabs.executeScript(null, { file: "jquery-1.7.2.js" }, function() {

    chrome.tabs.executeScript(null,{

      code:"$('#members_scroller').css('max-height','100%');"

      });

});

  /*

  chrome.tabs.executeScript(null,

      {code:"var x = document.getElementById('members_scroller').style.maxHeight = '100%';"});

  */

}


chrome.browserAction.onClicked.addListener(handleClick);


https://developer.chrome.com/extensions/tabs#method-executeScript

executeScript

chrome.tabs.executeScript(integer tabId, object details, function callback)
- tabid가 없을경우 기본적으로 현재창의 활성화된 탭에서 실행 된다.
- 먼저 jquery 가 실행되고 callback으로 실행되는 executeScript 에서 jquery를 사용 할 수 있다.

이 기능을 사용하기 위해서는 menifest.js 에 아래 퍼미션을 추가한다. 
"permissions": [
  "activeTab"
],



'Chrome extention' 카테고리의 다른 글

PC 에서 모바일 페이지 접속  (0) 2015.03.02
Posted by 마법수정화살
,