차근차근/JAVA JSP

글자크게 글자작게 버튼 만들기

예쁜꽃이피었으면 2015. 10. 14. 16:27


음.. 특정 화면에서 글씨를 키워달라고 한다.

사진 몇줄만 키우면 되는 건데.. 

잘 못알아듣고 전체 페이지에 적용해야 하는 건 줄 알았다.

허허허.. 열심히 적용중에 이게 아니란게 알아서 ..뭐 나중에라도 써먹을 곳이 있지 않을까 하고 남겨 둔다..ㅜㅠ




http://ezbuilder.tistory.com/32 좋은예시 발견 


jQuery 강좌7. 폰트 크기 변경하기

  • 문제
    • 버튼이나 링크를 클릭해서 폰트의 크기를 변경하고 싶다.
      (대부분의 뉴스 사이트에서 구현되어 있는 기능)
  • 해결
    • jQuery를 통해 현재의 폰트 사이즈를 알아낸 다음 그 수치에 버튼을 클릭할때마다 +1 이나 -1 을 해줌으로써 폰트 사이즈를 변경합니다.
  • 토의
    • 위 그림 1-1 에서 볼수 있듯이 크게, 작게 링크를 클릭하게 되면 현재 폰트 사이즈에서 +1이나 -1을 해줍니다. 예제 소스는 아래와 같습니다.

      <head>
      < meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      < title>폰트 사이즈 바꾸기 - 웹눈의 웹이야기</title>

      < script type="text/javascript" src="jquery.txt"></script>
      < script type="text/javascript">
      //현재 폰트 사이즈를 저장할 전역 변수
      var currentFontSize ;
      //문서가 준비되었는지 이벤트를 걸어준다.
      $(document).ready(init);
      //초기화

       

      function init()
      {
      // 1. 크게, 작게 링크에 이벤트를 걸어줍니다.
      $("#fontControll li a").click(clickHandler);
      }
      //크게, 작게 링크가 클릭되었을때 처리하는 함수
      function clickHandler(e)
      {
      //이벤트 전파를 막는다.
      e.preventDefault();
      //크게, 작게 중 어느것이 클릭되었는지 판별
      var whichClicked = $(this).attr("id");
      //현재의 폰트 사이즈를 전역 변수에 저장한다.
      currentFontSize = parseInt($(".article").css("font-size"));
      //클릭된 링크에 따라 폰트를 크게 혹은 작게 설정합니다.
      switch(whichClicked)
      {
      case "larger" :
      //1폰트 크게한다.
      setFontSize(1) ;
      break ;
      case "smaller" :
      //1폰트 작게한다.
      setFontSize(-1) ;
      break ;
      }
      }
      function setFontSize($size)
      {
      var totalFontSize = currentFontSize + $size ;
      $(".article").css({"font-size":totalFontSize+"px"});
      }
      < /script>
      < style type="text/css">
      #fontControll li{
      display:inline ;
      font-size:12px ;
      }
      .article {
      font-size:12px ;
      }
      < /style>
      < /head>
      < body>
      <div id="titles">
      <h1>폰트 크기 바꾸기 예제 - <a href="http://webnoon.net" target="_blank">웹눈의 웹이야기</a></h1>
      </div>
      <div id="fontSizeControllBox">
      <ul id="fontControll">
      <li><a href="http://naver.com" id="larger">크게</a></li>
      <li><a href="http://google.com" id="smaller">작게</a></li>
      </ul>
      </div>
      <div id="contents">
      <p class="article">
      이번 예제는 뉴스 사이트에서 흔히 볼수있는 폰트 사이즈를 변경해보는것입니다.<br />
      크롬, 파이어폭스, 익스플로어7 에서 테스트 되었습니다.<br />
      이 예제의 자세한 설명은 웹눈 블로그 <a href="http://webnoon.net" target="_blank">http://webnoon.net</a> 에서 자세히 보실수 있습니다.
      </p>
      </div>

       

      < /body>

    • 코드는 매우 직관적으로 짜여져 있습니다. 여기서 "이벤트를 걸어준다" 라는 말이 모호하게 느껴질수도 있는데, 이말은 "이벤트 발생을 탐지한다" 정로도 해석할수 있겠습니다.

      즉, $(document).ready([callbackFunction]) 에서는 "문서가 로딩이 완료될때 발생시키는 이벤트" 를 탐지하기 위해서 $(document) 객체에 ready라는 이벤트를 걸어주었습니다.

      마찬가지로 크게, 작게 링크[$("#fontControll li a")]에도 click 이벤트를 탐지하도록 이벤트를 걸어준것입니다.(여기서 걸어준다는 표현은 전문용어가 아니므로 참고해주시기 바랍니다.)

      나머지 부분은 주석으로 자세히 설명되어 있어서 더이상 설명은 생략하겠습니다만, 질문이 있으시면 언제나 댓글란을 이용해주세요.




    실제 적용을 하고자 할 때..


    상단에 버튼을 만든다. (클래스는 css적용할거다.)

    <div id="fontSizeControllBox">

    <ul id="fontControll">

    <li><a href="#" id="larger" class='buttonadd'>글자 크게</a></li>

    <li><a href="#" id="smaller" class='buttonsub'>글자 작게</a></li>

    </ul>

    </div>


    <font class="article">


    폰트 변경할 내용 


    </font>


    ===========================

    <script>


    //현재 폰트 사이즈를 저장할 전역 변수

    var currentFontSize ;

    //문서가 준비되었는지 이벤트를 걸어준다.

    $(document).ready(init);

    //초기화

     

    function init(){

    // 1. 크게, 작게 링크에 이벤트를 걸어줍니다.

    $("#fontControll li a").click(clickHandler);

    }


    //크게, 작게 링크가 클릭되었을때 처리하는 함수

    function clickHandler(e){

    //이벤트 전파를 막는다.

    e.preventDefault();

    //크게, 작게 중 어느것이 클릭되었는지 판별

    var whichClicked = $(this).attr("id");

    //현재의 폰트 사이즈를 전역 변수에 저장한다.

    currentFontSize = parseInt($(".article").css("font-size"));

    //클릭된 링크에 따라 폰트를 크게 혹은 작게 설정합니다.

    switch(whichClicked){

    case "larger" :

    //1폰트 크게한다.

    setFontSize(1) ;

    break ;

    case "smaller" :

    //1폰트 작게한다.

    setFontSize(-1) ;

    break ;

    }

    }

    function setFontSize($size){

    var totalFontSize = currentFontSize + $size ;

    $(".article").css({"font-size":totalFontSize+"px"});

    }

    </script>

    <style type="text/css">

    #fontControll li{

    display:inline ;

    font-size:12px ;

    }

    .article {

    font-size:12px ;

    }


    .right {

        padding-left: 15px;

        overflow: hidden;

        background-color:yellow;

        height: 100px;

    }


    .buttonadd {

     border: 0px solid #5ea6ff;

       background: #5ea6ff;

       background: -webkit-gradient(linear, left top, left bottom, from(#5ea6ff), to(#5ea6ff));

       background: -webkit-linear-gradient(top, #5ea6ff, #5ea6ff);

       background: -moz-linear-gradient(top, #5ea6ff, #5ea6ff);

       background: -ms-linear-gradient(top, #5ea6ff, #5ea6ff);

       background: -o-linear-gradient(top, #5ea6ff, #5ea6ff);

       background-image: -ms-linear-gradient(top, #5ea6ff 0%, #5ea6ff 100%);

       padding: 7.5px 15px;

       -webkit-border-radius: 10px;

       -moz-border-radius: 10px;

       border-radius: 10px;

       -webkit-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;

       -moz-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;

       box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;

       text-shadow: #5ea6ff 0 1px 0;

       color: #000000;

       font-size: 14px;

       font-family: helvetica, serif;

       text-decoration: none;

       vertical-align: middle;

       }

    .buttonadd:hover {

       border: 0px solid #5ea6ff;

       text-shadow: #5ea6ff 0 1px 0;

       background: #5ea6ff;

       background: -webkit-gradient(linear, left top, left bottom, from(#5ea6ff), to(#5ea6ff));

       background: -webkit-linear-gradient(top, #5ea6ff, #5ea6ff);

       background: -moz-linear-gradient(top, #5ea6ff, #5ea6ff);

       background: -ms-linear-gradient(top, #5ea6ff, #5ea6ff);

       background: -o-linear-gradient(top, #5ea6ff, #5ea6ff);

       background-image: -ms-linear-gradient(top, #5ea6ff 0%, #5ea6ff 100%);

       color: #000000;

       }

    .buttonadd:active {

       text-shadow: #5ea6ff 0 1px 0;

       border: 0px solid #5ea6ff;

       background: #5ea6ff;

       background: -webkit-gradient(linear, left top, left bottom, from(#5ea6ff), to(#5ea6ff));

       background: -webkit-linear-gradient(top, #5ea6ff, #5ea6ff);

       background: -moz-linear-gradient(top, #5ea6ff, #5ea6ff);

       background: -ms-linear-gradient(top, #5ea6ff, #5ea6ff);

       background: -o-linear-gradient(top, #5ea6ff, #5ea6ff);

       background-image: -ms-linear-gradient(top, #5ea6ff 0%, #5ea6ff 100%);

       color: #ffffff;

       }

       

       

       

       

       .buttonsub {

       border: 0px solid #5ea6ff;

       background: #5ea6ff;

       background: -webkit-gradient(linear, left top, left bottom, from(#5ea6ff), to(#5ea6ff));

       background: -webkit-linear-gradient(top, #5ea6ff, #5ea6ff);

       background: -moz-linear-gradient(top, #5ea6ff, #5ea6ff);

       background: -ms-linear-gradient(top, #5ea6ff, #5ea6ff);

       background: -o-linear-gradient(top, #5ea6ff, #5ea6ff);

       background-image: -ms-linear-gradient(top, #5ea6ff 0%, #5ea6ff 100%);

       padding: 7.5px 15px;

       -webkit-border-radius: 10px;

       -moz-border-radius: 10px;

       border-radius: 10px;

       -webkit-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;

       -moz-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;

       box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 0px 0;

       text-shadow: #5ea6ff 0 1px 0;

       color: #000000;

       font-size: 14px;

       font-family: helvetica, serif;

       text-decoration: none;

       vertical-align: middle;

       }

    .buttonsub:hover {

       border: 0px solid #5ea6ff;

       text-shadow: #5ea6ff 0 1px 0;

       background: #5ea6ff;

       background: -webkit-gradient(linear, left top, left bottom, from(#5ea6ff), to(#5ea6ff));

       background: -webkit-linear-gradient(top, #5ea6ff, #5ea6ff);

       background: -moz-linear-gradient(top, #5ea6ff, #5ea6ff);

       background: -ms-linear-gradient(top, #5ea6ff, #5ea6ff);

       background: -o-linear-gradient(top, #5ea6ff, #5ea6ff);

       background-image: -ms-linear-gradient(top, #5ea6ff 0%, #5ea6ff 100%);

       color: #000000;

       }

    .buttonsub:active {

       text-shadow: #5ea6ff 0 1px 0;

       border: 0px solid #5ea6ff;

       background: #5ea6ff;

       background: -webkit-gradient(linear, left top, left bottom, from(#5ea6ff), to(#5ea6ff));

       background: -webkit-linear-gradient(top, #5ea6ff, #5ea6ff);

       background: -moz-linear-gradient(top, #5ea6ff, #5ea6ff);

       background: -ms-linear-gradient(top, #5ea6ff, #5ea6ff);

       background: -o-linear-gradient(top, #5ea6ff, #5ea6ff);

       background-image: -ms-linear-gradient(top, #5ea6ff 0%, #5ea6ff 100%);

       color: #ffffff;

       }

       

       

    </style>


    ----------------------------------------------------------------------
    버튼 만든 곳 


    반응형
    저작자표시 비영리

    '차근차근 > JAVA JSP' 카테고리의 다른 글

    JSONServer.jsp  (0) 2016.07.26
    연속 스페이스 제거  (0) 2016.07.25
    한글이 깨진다 | ???  (0) 2015.09.25
    웹페이지 호출시 이미지 랜덤  (0) 2015.08.22
    jstl 자바스크립트 db 데이터  (0) 2015.08.13

    '차근차근/JAVA JSP'의 다른글

    • 현재글글자크게 글자작게 버튼 만들기

    관련글

    댓글

    티스토리툴바