ASP.NET 2.0 中让使用者自订字体大小

(本帖在版工的旧 Blog 中,发表日期为 2007/07/08)
 
 使用者在浏览网站时,有时可能会嫌字体太小,希望能够自订大小,这种情形尤以企业资深员工、老员工最为常见。虽然 IE 等浏览器有自订字号的功能,亦可透过 Ctrl + 鼠标滚轮调整;但若网页设计人员将 font-size 的单位,写死成特定数值的 px (pixel, 像素),则 IE 自订字号的功能即会失效。
 
 在此版工我透过网络上寻得的范例,改写了一支可让使用者透过「下拉选单 (DropDownList)」或「文字 Hyperlink」,以自订页面中字体大小的 ASP.NET 2.0 范例。透过 JavaScript 实时反应的特性,使用者每次重选后,不必再经过 Postback,效果可马上呈现在页面中;且套用效果可套整页,或仅某个区块 (div 或 span),亦可套至 GridView 等控件当中。若欲在您的旧系统页面中引用此功能,必须先将页面中或控件中,HTML 或 CSS 已「设死」的 font-size 属性删除,并再适当调整页面排版。 

figure1 
图 1 本帖的 ASP.NET 2.0 + JavaScript 下载范例执行画面
 
 
 本帖的范例代码下载点:
 
http://files.cnblogs.com/WizardWu/070708.zip
 
 此范例真正的关键,是位于 JavaScript 活页夹中的 ChangeFontSize.js 程序。


ContractedBlock.gifExpandedBlockStart.gif关键的 .aspx 代码
<body οnlοad="fireDDL_FontSize()">
    
<form id="form1" runat="server">
    
<div>
    指定管道一 - 透過下拉選單
    
<asp:DropDownList ID="DropDownList_FontSize" runat="server">
        
<asp:ListItem>12</asp:ListItem>
        
<asp:ListItem>13</asp:ListItem>
        
<asp:ListItem>14</asp:ListItem>
        
<asp:ListItem>15</asp:ListItem>
        
<asp:ListItem>16</asp:ListItem>
        
<asp:ListItem>17</asp:ListItem>
        
<asp:ListItem>18</asp:ListItem>
    
</asp:DropDownList>    

 

ContractedBlock.gifExpandedBlockStart.gif关键的 .aspx.cs 代码
protected void Page_Load(object sender, EventArgs e)
ExpandedBlockStart.gifContractedBlock.gif    
{
        DropDownList_FontSize.Attributes[
"onChange"= "javascript:doZoom(document.form1.DropDownList_FontSize.value)"
;

        
// 若登入系統後,有寫入 Session 或傳 QueryString,則下拉選單的預設選項(亦為頁面的預設字體大小px),則設為 Session 或 QueryString 所指定的值

        if (Session["theFontSize"== null)
            DropDownList_FontSize.SelectedValue 
= "13";     // 下拉選單預設選項,亦為頁面的預設字體大小(13px)

        else
            DropDownList_FontSize.SelectedValue 
= Session["theFontSize"].ToString();

    }

 
ContractedBlock.gifExpandedBlockStart.gif关键的 JavaScript 代码
ExpandedBlockStart.gifContractedBlock.giffunction getElementsByName_iefix(tag, id) {
    
var elem =
 document.getElementsByTagName(tag);
    
var arr = new
 Array();
ExpandedSubBlockStart.gifContractedSubBlock.gif    
for(i = 0,iarr = 0; i < elem.length; i++
{
        att 
= elem[i].getAttribute("id"
); 
ExpandedSubBlockStart.gifContractedSubBlock.gif        
if(att == id) 
{
            arr[iarr] 
=
 elem[i];
            iarr
++

        }

    }

    
return arr;
}


ExpandedBlockStart.gifContractedBlock.gif
function doZoom(size) {
    
var zooms = getElementsByName_iefix("div""zoom"
);
ExpandedSubBlockStart.gifContractedSubBlock.gif    
for (var i = 0; i < zooms.length; i++
{
        zooms[i].style.fontSize 
= size+'px'
;
    }


    
//document.form1.DropDownList_FontSize.fireEvent('onChange');
}


//.aspx前端 html 的 body 一載入時可呼叫的。表示要讓頁面字體大小,在頁面一載入時就設為下拉選單的預設值(13px)
//
若不設定此項,則頁面一載入時會設為 IE 的預設字體大小(16px)
ExpandedBlockStart.gifContractedBlock.gif
function fireDDL_FontSize() {
    document.form1.DropDownList_FontSize.fireEvent(
'onChange'
);
}

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值