2006年 1 月 14日 John Resing 創造新的框架『jQuery』, 它的出現讓網頁更加『好用』，只要具備基本的html css 知識, 並熟希javascript 的語法，可以輕鬆的在網頁加入互動元素，他的出現對設計師來說是項福音。
如何在網頁運用jQuery加入互動元素，以修改文章字型大小為例。
1.頁面上加入[ Default ] [ Bigger ] [ Smaller ] 三個按鈕
2.頁面上加入文章區域
3.頁面上加入適當的css
4.加入jQuery 涵式庫，可到官方網站下載 ，google現在也有提供檔案連結位置，相當方便：
5.加入jQuery
6.大功告成囉!!
我的Demo
http://cindy8.myweb.hinet.net/demo_jquery/switcher.html
其實我覺得用按鈕很不方便, 另外加寫了用 Slider 控制字型大小, 十分簡單, 請見此處
如何在網頁運用jQuery加入互動元素，以修改文章字型大小為例。
1.頁面上加入[ Default ] [ Bigger ] [ Smaller ] 三個按鈕
2.頁面上加入文章區域
3.頁面上加入適當的css
<style type="text/css">
body {
font:normal 12px Verdana, Geneva, sans-serif;
}
#switcher .selected{
background:red;
}
.button{
display:block;
float:left;
border:1px solid gray;
background:#CCC;
padding:5px 10px;
margin:5px 5px 5px 0;
cursor: pointer;}
.speech{
clear:both;
}
</style>
<title>jQuery - 字型加大</title>
</head>
<body>
<div id="switcher">
<div class="label"> Style Switcher </div>
<div class="button" id="sw_default"> Default </div>
<div class="button" id="sw_large">Bigger</div>
<div class="button" id="sw_small">Smaller</div>
</div>
<div class="speech">
<p>點擊上方按鈕, 可運用jQery 修改文章自的大小。<p>
</div>
</body>
4.加入jQuery 涵式庫，可到官方網站下載 ，google現在也有提供檔案連結位置，相當方便：
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
5.加入jQuery
<script>
$(document).ready(function(){
var $speech = $('div.speech');
var defaultSize = $speech.css('fontSize');
$('#switcher .button').click(function(){
$('#switcher .button').removeClass('selected');
var num = parseFloat($speech.css('fontSize'), 10);
if(this.id =='sw_large'){
num*=1.4;
}else if(this.id=='sw_small'){
num/=1.4;
}else if(this.id=='sw_default'){
num= parseFloat(defaultSize, 10);
}
$speech.css('fontSize' , num + 'px');
$(this).addClass('selected');
});
});
</script>
6.大功告成囉!!
我的Demohttp://cindy8.myweb.hinet.net/demo_jquery/switcher.html
其實我覺得用按鈕很不方便, 另外加寫了用 Slider 控制字型大小, 十分簡單, 請見此處
留言
張貼留言