트위터 공유 버튼 만들기

트위터 공유 버튼을 통해 텍스트, 해쉬태그, URL, 트위터 계정을 미리 작성할 수 있습니다.

트위터 계정을 연결 하려면 트위터에서 팔로우 되어 있어야 합니다.

트위터 Content 파라메터

버튼 디스플레이 파라메터

HTML의 data-* 어트리뷰트를 이용한 예제

<a class="twitter-share-button"
  href="https://twitter.com/share"
  data-size="large"
  data-text="custom share text"
  data-url="https://dev.twitter.com/web/tweet-button"
  data-hashtags="example,demo"
  data-via="twitterdev"
  data-related="twitterapi,twitter">
Tweet
</a>

IFRAME 예제

<iframe
  src="https://platform.twitter.com/widgets/tweet_button.html?
size=l&
url=https%3A%2F%2Fdev.twitter.com%2Fweb%2Ftweet-button&
via=twitterdev&
related=twitterapi%2Ctwitter&
text=custom%20share%20text&hashtags=example%2Cdemo"
  width="140"
  height="28"
  title="Twitter Tweet Button"
  style="border: 0; overflow: hidden;">
</iframe>

자바스크립트 Factory 예제

twttr.widgets.createShareButton(
  "https:\/\/dev.twitter.com\/web\/tweet-button",
  document.getElementById("tweet-container"),
  {
    size: "large",
    text: "custom share text",
    hashtags: "example,demo",
    via: "twitterdev",
    related: "twitterapi,twitter"
  }
);

HTML 예제

<a href="https://twitter.com/share?
  url=https%3A%2F%2Fdev.twitter.com%2Fweb%2Ftweet-button&
  via=twitterdev&
  related=twitterapi%2Ctwitter&
  hashtags=example%2Cdemo&
  text=custom%20share%20text">
Tweet
</a>

어떤걸 써도 공유하기 기능은 할 수 있습니다.

디자인은 자유도 높게 바꿀 수 있습니다.

자바스크립트를 이용하여 체크박스 상태 가져오기

예제1 : pure javascript로 값 가져오기

var checked = document.getElementById("checkinfo1").checked;

위와 같이 작성하면 boolean형태의 값(true, false)을 반환 합니다.

제이쿼리로 작성하면 다음과 같습니다.

예제2: 제이쿼리(jQuery)로 값 가져오기

$('#checkinfo1').attr('checked'); // checked, null
//또는
$('#checkinfo1').prop('checked'); //true, false
//또는
$('#checkinfo1').is(':checked'); // true, false

위와 같이 여러가지 형태로 값을 가지고 올 수 있습니다.

예제3 : 제이쿼리(jQuery)를 이용하여 해당 엘리먼트(element) 조작하기

$('input:checked').each(function(i, el){
    console.log($(this).attr('id');
});

위와 같은 방법을 통해서  element 배열을 받아서 반복문을 사용할 수 있습니다.

반복문을 통해 직접 해당 element의 속성 등도 조작이 가능합니다.

예제4 : 전체 선택, 전체 해제

$("#all").click(function(e){
    $("input:checkbox").each(function(i, el){
    $(this).prop('checked', true);
  });
});

$("#all").click(function(e){
    $("input:checkbox").each(function(i, el){
    $(this).prop('checked', false);
  });
});

다음과 같은 체크박스예제를 활용하여 메일박스에 있는 check박스의 전체 선택/해제 등을 구현 할 수 있다.

체크박스에 대해서...

셀렉트박스(select)와 라디오버튼(type="radio")의 엘리먼트들은 값을 한가지만 선택할 수 있는 반면에 체크박스는 여러개의 값을 선택할 수 있는 특징을 가지고 있습니다.

기본적인 체크박스의 형태는 다음과 같습니다.

<form method="POST" action="/regist">
    <input type="checkbox" name="chk_info" id="checkinfo1" value="value1">
    <label for="checkinfo1">value1</label>
    <input type="checkbox" name="chk_info" id="checkinfo2" value="value2">
    <label for="checkinfo2">value2</label>
    <input type="checkbox" name="chk_info" id="checkinfo3" value="value3">
    <label for="checkinfo3">value3</label>
</form>

그 중에 값이 check되어 있는 상태로 작성하고 싶으면 checked 속성을 사용합니다.

사용 예제는 아래와 같습니다.

<form method="POST" action="/regist">
    <input type="checkbox" name="chk_info" id="checkinfo1" value="value1" checked="checked">
    <label for="checkinfo1">value1</label>
    <input type="checkbox" name="chk_info" id="checkinfo2" value="value2">
    <label for="checkinfo2">value2</label>
    <input type="checkbox" name="chk_info" id="checkinfo3" value="value3" checked>
    <label for="checkinfo3">value3</label>
</form>

데이터가 전송될 때는 같은 name의 데이터가 사용되므로

위의 예제같은 경우에는

chk_info = "value1, value3"

이렇게 한개의 Key에 두개의 값이 , (콤마)로 구분되어 서버에 전송됩니다.