2010-08-04 7 views
0

나는 jQuery로 현장 텍스트 크기 조정이 훌륭한 솔루션을 발견 : 마법처럼 http://dev-tips.com/featured/jquery-tip-quick-and-easy-font-resizing텍스트 jQuery로 크기 조정 하시겠습니까?

작품,하지만 내가 필요가없는 것 세 가지가 자신이다;

A.) '기본값으로 돌아 가기'클릭 가능 옵션. 크기 조정에 B.) 제한 (만 두 번 C.)에 크기를 조정할 수 영역 여기

에 여러 요소를 추가 아래로하거나 크기를 조정할 수 있도록 즉, 위의 예에서 내 수정 된 코드입니다 :

$(document).ready(function() { 
    //Text Zoom 
    $('.controls a').click(function(){ 
    var ourText = $('#content'); 
var currFontSize = ourText.css('fontSize'); 
var finalNum = parseFloat(currFontSize, 10); 
var stringEnding = currFontSize.slice(-2); 
    if(this.id == 'large') { 
    finalNum *= 1.2; 
    } 
    else if (this.id == 'small'){ 
    finalNum /=1.2; 
    } 
    ourText.css('fontSize', finalNum + stringEnding); 
}); 
    }); 

3 가지 문제를 크게 벗어나지 않습니다. 나는 "C"를 안다.) 그렇게 열심히해서는 안되지만, 그냥 '#content'보다 크기를 조정할 요소를 더 추가하기 위해 jQuery 구문에 익숙하지 않다. 다른 JS에 접근하는 방법을 모르는 2. 내 JS에서 볼 수 있듯이 컨트롤의 마크 업은 다음과 같이 보입니다. 작고 큰 링크는 일반적으로 "$ ('. controls a')로 타겟팅됩니다. { ".

<ul id="textzoom"> 
<li class="controls"> 
    <a href="#" id="small" class="smaller" title="zoom out">-</a> 
    <a href="#" class="normal" id="orignal" title="zoom normal">AAA</a> 
    <a href="#" id="large" class="bigger" title="zoom in">+</a> 
</li> 
<li>...</li> 
</ul> 

어떤 도움을 크게)는 (글로벌 변수에 함수의 범위를 외부에서 정의 변수를 정보를 저장해야합니다) A의

답변

0

. 감사) 및 B 것 . 리셋 글꼴 크기를 저장할 "baseFontSize"변수와 확인할 수있는 "fontSizeDelta"변수를 만들어 "2"또는 "-2"를 넘지 않도록하십시오. fontSizeDelta에 대해 .click 함수 내부에 체크를 추가합니다 (max 또는 min 인 경우 즉시 반환합니다). 필요에 따라 increment 또는 decrement합니다. desired_element_id는, 음,의 ID입니다

ourText.css('fontSize', finalNum + stringEnding); 

반복하지만 함께 "ourText을"교체 "$ ('#의 desired_element_id')"나는 당신이 "C"에 무엇을 요구, 그냥이 줄을 이해한다면 영향을주고 자하는 요소.

도움이 되었습니까?

관련 문제