使用 jQuery UI 控製文本的大小
JQuery 的 UI 可以為網頁添加很多內容。 UI 提供了許多不同的小部件。一顆冉冉升起的明星，是滑塊。在本教程中，我將向您展示如何使用滑塊來控制頁面上文章的文本大小。這讓用戶可以準確地控制適合他們的尺寸，這也是網站上一個非常令人印象深刻的功能！
本教程的滑塊部分再現了 Buck Wilson 最初創建的一項技術。
我們的目標
我們最終希望我們的頁面看起來像這樣：
行為：
- 拖動滑塊時，會出現一個氣泡，提示當前大小。
- 文本“當前文本大小”也將出現在當前文本大小旁邊。
- 我們還將嘗試使文本在單擊加號或減號時增加 1 px 或減少 1 px。
第 1 步：獲取必要的 Javascript 文件
顯然我們需要 JQuery，但我們還需要一些 UI 文件來擴展 JQuery。我們可以在 JQuery UI Build Your Download 頁面上獲取自定義的 UI 文件。
如您所見，那裡有一些非常棒的音效！儘管它可能很誘人，但我們並不需要所有這些效果來獲得所需的產品。我們只需要：
- 用戶界面核心
- 滑塊
- Klaus Hartl 的 Cookie 插件
第 2 步：HTML
對於本教程，我不會浪費時間解釋 HTML 的基礎知識，並使用它和 CSS 創建佈局。如果您想了解更多相關信息，這裡還有其他教程，例如我的頂部面板教程或 Collis 的選項卡式內容教程。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Nettuts Slider</title>
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="scripts/jquery.ui.js"></script>
<script type="text/javascript" src="scripts/cookie.js"></script>
</head>
<body>
<div id="header">
<div class="slider_container">
<div class="minus"></div>
<div class="slider_bar">
<div id="slider_caption"></div>
<div id="slider1_handle" class="slider_handle"></div>
</div>
<div class="add"></div>
</div>
</div>
<div id="text">
<h1>Text Size Slider</h1>
<div id="font_indicator">Current Font Size: <b></b> </div>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularized in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
</div>
</body>
</html>
所以你會注意到幾件事：
- IE 5.5 和 6 的 PNG 修復程序。我已直接鏈接到 google 代碼頁。這意味著我必須用 -trans.png 結束每個透明 PNG。
- 我還直接鏈接到 JQuery 和我們定制的 UI 文件。
- 我已在#header 中為滑塊添加了必要的標籤
注意：要使滑塊起作用，我們需要有一個桿和一個把手。
第 3 步：CSS
這是使該頁面看起來更好的CSS。這個頁面很簡單，因此 CSS 也很簡單：
body {
background: #373737;
text-align: center;
margin: 0px;
}
#header {
width: 700px;
height: 200px;
background: #48887d url(images/header.jpg);
margin-left: auto;
margin-right: auto;
position: relative;
}
.slider_container {
position: absolute;
height: 25px;
top: 170px;
left: 165px;
}
.minus {
background: url(images/minus-trans.png) no-repeat;
height: 9px;
width: 25px;
overflow: hidden;
float: left;
cursor: pointer;
}
.slider_bar {
background: url(images/bar-trans.png) no-repeat;
height: 9px;
width: 316px;
float: left;
margin: 0px 5px;
position: relative;
}
.add {
background: url(images/add-trans.png) no-repeat;
height: 25px;
width: 23px;
float: left;
position: relative;
top: -5px;
cursor: pointer;
}
.slider_handle {
background: url(images/selector-trans.png) no-repeat;
height: 25px;
width: 12px;
position: absolute;
top: -8px;
}
#slider_caption {
background: url(images/caption-trans.png) no-repeat;
height: 45px;
width: 38px;
overflow: hidden;
position: absolute;
top: -50px;
margin-left:-10px;
padding: 5px 0px 0px 0px;
font-family: "Myriad Pro";
color: #36665d;
font-weight: bold;
text-align: center;
}
#text {
font-family: Helvetica, Arial, sans-serif;
width: 655px;
background: #f9f9f9;
margin-left: auto;
margin-right: auto;
padding: 20px 20px 20px 25px;
position: relative;
}
#text p {
font-size: 12px;
text-align: left;
color: black;
}
#text h1 {
text-align: left;
margin-left: 20px;
}
p{
font-family: Arial, Helvetica, sans-serif;
color: #CCCCCC;
}
#font_indicator{
position: absolute;
right: 100px;
top: 50px;
font-size: 10px;
display: none;
}
同樣，我也不打算詳細介紹 CSS。如果您仍然需要更多幫助，請務必查看我上面提到的那兩個教程。如果您有任何問題，請務必在評論中告訴我。
請注意，所有具有 alpha 透明度的 png 圖像都有一個 -trans.png 結尾。
第 4 步：基本滑塊效果
當我第一次了解滑塊效果時，我在谷歌上搜索了更多關於它的信息以及它是如何工作的。好吧，我很幸運能找到這個驚人的截屏視頻。它也有一個非常整潔的效果。顯示滑塊位置的標題，位於滑塊頂部。不幸的是，他們停在那裡。我們將使用他們的 JQuery 代碼的變體作為起點：
$(function() {
$('#slider_caption').hide();
var captionVisible = false;
$('.slider_bar').slider({
handle: '.slider_handle',
startValue: 26,
minValue: 0,
maxValue: 100,
start: function(e, ui) {
$('#slider_caption').fadeIn('fast', function() { captionVisible = true;});
},
stop: function(e, ui) {
if (captionVisible == false) {
$('#slider_caption').fadeIn('fast', function() { captionVisible = true;});
$('#slider_caption').css('left', ui.handle.css('left')).text(Math.round(ui.value * 15/100 + 8 ));
$("div#text p").animate({fontSize: ui.value * 15/100 + 8 }).fadeIn("slow");
}
$('#slider_caption').fadeOut('fast', function() { captionVisible = false; });
},
slide: function(e, ui) {
$('#slider_caption').css('left', ui.handle.css('left')).text(Math.round(ui.value * 15/100 + 8 ));
$("div#text p").css({fontSize: ui.value * 15/100 + 8 }).fadeIn("slow");
}
}); 一些關鍵思想：
- 首先，我們使用 Javascript 隱藏標題。如果禁用 Javascript 以提高可訪問性，這會使標題可見。
- 如您所見，我們現在有一個 .slider 修飾符和幾個子項：
- 開始值： 這指定了句柄開始的位置
- 最小值： 這指定了句柄將達到的最小值
- 最大值： 這指定了句柄將達到的最大值
- 開始 :這允許我們告訴 JQuery 當用戶開始滑動條時該做什麼
- 停止 :這指定了當滑塊鬆開時會發生什麼
- 幻燈片： 這指定了滑動滑塊時會發生什麼
- 句柄： 這使我們可以指定句柄是什麼
- 我們還分配了一個變量來幫助我們知道何時停止： 發生，無論標題是否可見，然後根據該結論執行操作。
- 我們還必須限制可能的字體大小，因此我們將滑塊值的可能性限制在 8 到 23 之間。我們通過對滑塊的值進行基本數學運算來做到這一點。 （乘以 15/100 再加上 8）
- 這個等式產生了小數位大小，所以我們必須用 Math.round 對其進行四捨五入
- 還要注意，我們使標題保持在句柄頂部的方法。我們使標題的 css left 值等於句柄。
- 注意在停止： 我有動畫的文本大小，而在幻燈片上，我的 css 大小不斷變化。這似乎違反直覺，在幻燈片上： 我不會為它製作動畫，但通過逐漸滑動和擴大尺寸的本質，它會做同樣的事情。如果我要製作動畫而不是僅僅更改 CSS，那將是不穩定且反應遲鈍的。
第 5 步：添加文字說明
$(function() {
$('#slider_caption').hide();
var calloutVisible = false;
$('.slider_bar').slider({
handle: '.slider_handle',
startValue: 26,
minValue: 0,
maxValue: 100,
start: function(e, ui) {
$('#slider_caption').fadeIn('fast', function() { calloutVisible = true;});
$('#font_indicator').fadeIn('slow');
},
stop: function(e, ui) {
if (calloutVisible == false) {
$('#slider_caption').fadeIn('fast', function() { calloutVisible = true;});
$('#font_indicator').fadeIn('slow');
$('#slider_caption').css('left', ui.handle.css('left')).text(Math.round(ui.value * 15/100 + 8 ));
$('#font_indicator b').text(Math.round(ui.value * 15/100 + 8 ));
$("div#text p").animate({fontSize: ui.value * 15/100 + 8 }).fadeIn("slow");
}
$('#slider_caption').fadeOut('fast', function() { calloutVisible = false; });
$('#font_indicator').fadeOut('slow');
},
slide: function(e, ui) {
$('#slider_caption').css('left', ui.handle.css('left')).text(Math.round(ui.value * 15/100 + 8 ));
$('#font_indicator b').text(Math.round(ui.value * 15/100 + 8 ));
$("div#text p").css({fontSize: ui.value * 15/100 + 8 }).fadeIn("slow");
}
});
關於#font_indicator 的主要觀點
- 我們在與字幕相同的位置添加了相同的淡入淡出效果
- 我們忽略了 css 的左側位置
- 請注意，我們在 div#font-indicator 中有一個 標記。這不僅使數字更加突出，而且允許我們將當前滑塊句柄值作為文本放入其中。如果我們只是附加到 div 的末尾，每個字體大小值都會在末尾堆積。
第 6 步：給出加號和減號操作
如果我們沒有在點擊時提供加號和減號操作，這將不是一個功能設計。這段代碼可能有點草率而且效率不高，但它可以完成工作。這個項目需要大量的數學運算，這解釋了一些最終被使用的古怪數字。
廢話不多說，剩下的javascript就到這裡了，後面我會解釋：
$(".add").click(function(){
var currentFontSize = $('#text p').css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum+1;
if (newFontSize < 24) {
$('#text p').css('font-size', newFontSize);
$('#slider_caption').css('left', newFontSize*19.75 - 158).fadeIn('fast').text(Math.round(newFontSize )).fadeOut();
$('.slider_handle').css('left', newFontSize*19.75 - 158);
$('#font_indicator').fadeIn('slow');
$('#font_indicator b').text(Math.round(newFontSize ));
$('#font_indicator').fadeOut('slow');
}
else{
$('#font_indicator').fadeIn('slow');
$('#font_indicator b').text("Isn't 23 big enough?");
$('#font_indicator').fadeOut('slow');
}
return false;
});
$(".minus").click(function(){
var currentFontSize = $('#text p').css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum-1;
if (newFontSize > 8) {
$('#text p').css('font-size', newFontSize);
$('#slider_caption').css('left', newFontSize*19.75 - 158).fadeIn('fast').text(Math.round(newFontSize )).fadeOut();
$('.slider_handle').css('left', newFontSize*19.75 - 158);
$('#font_indicator').fadeIn('slow');
$('#font_indicator b').text(Math.round(newFontSize ));
$('#font_indicator').fadeOut('slow');
}
else{
$('#font_indicator').fadeIn('slow');
$('#font_indicator b').text("Isn't 8 small enough?");
$('#font_indicator').fadeOut('slow');
}
return false;
}); 一些關鍵說明：
- 如果您了解基本的 Javascript 語法，這應該是不言而喻的。
- 我分配了一個初始變量來獲取當前的字體大小。
- 然後我將其轉換為整數
- 然後我創建另一個值更高的變量。
- 我使用 if else 將限制設置在 24 到 8 之間 聲明。
數學時間
調整手柄和標題以響應加號和減號點擊是一個真正的挑戰。我最終做的是計算條的寬度（316px），然後將其劃分為 16 種可能的字體大小（8-23），以計算出每個增量佔用了多少空間。
316/16 =
為了安全起見，我需要找出字體大小的起始點。我知道這不完全是 12，因為我用 15/100 + 8 稍微修改了它。所以我將句柄的起始值 (26) 乘以它：
26*15/100 + 8=
我想，因為它是四捨五入的，所以無論如何它都會是十二。
所以我認為句柄是[字體大小*19.75 - 158（前8個大小）]px。
只是想我會讓你一睹我奇怪且過於復雜的數學;)。可能有更簡單的方法來做到這一點，但我想這是我的邏輯。
第 7 步：Cookie 時間，讀取 cookie
為了處理 cookie，我使用了 Klaus Hartl 的優秀 cookie 插件。您可以在我提供的鏈接中查看插件的基本語法。挑戰在於找到一個可以可靠設置 cookie 的位置。當瀏覽器刷新或更改頁面時，我最終設置了它。這樣，它只在必要且切實可行的時候才這樣做。首先我們將代碼添加到javascript文件的頂部以讀取cookie：
var startSize = $.cookie('fontSize');
var startSize = parseFloat(startSize, 12);
$('#text p').css('font-size', startSize); 我做了什麼：
- 我先讀取cookie並將其發送到變量startSize
- 然後我將該變量更改為整數
- 然後我將該數字添加到文本的默認 css 中
第 8 步：設置 Cookie
正如我上面提到的，我們需要在頁面退出時設置cookie。我們使用以下代碼來做到這一點：
window.onbeforeunload = leaveCookie;
function leaveCookie()
{
var FontSize = $('#text p').css('font-size');
var IntFontSize = parseFloat(FontSize, 10);
$.cookie('fontSize', IntFontSize);
} 我做了什麼：
- 注意：這個 JS 在外面 JQuery $(function() {});
- 首先，我在瀏覽器離開頁面時激活了一個功能
- 然後我將文本大小轉換為整數
- 然後我把這個放入 cookie
就是這樣！
希望您發現本教程有用！請原諒我的編程邏輯，我並不總是這麼有效地思考：P。如果您有任何問題或意見，請隨時在評論中告訴我！
- 訂閱 NETTUTS RSS Feed 以獲取更多日常 Web 開發教程和文章。
