Button頁面中的按鈕

本文轉載自查看原文 2012-10-24 20:16 5402 C#/ javascript動態網頁技術/ Button

好久沒來啦，最近比較忙，一直做項目，那我這回就寫一些項目中的常見又被忽略的問題，我們平時做項目或網頁時長用到Button其實我們大可以把它美化一下，這樣看着和頁面對稱，用的更多。。

按鈕總的來說是WINDOWIN中最學用的也是最基本的一種控制部件，比如在各種編程語言中及應用程序中都少不了按鈕的參與，在網頁設計中也是如此，通過按鈕可以完成很多任務，以下將全面講解按鈕使用技巧及應用實例。　　
　　一、按鈕的基本使用　　
　　一般的可視性網頁制作工具中，都有方便的按鈕填加工具，可直接在網頁的合適位置填加按鈕，如果你使用手工的網頁制作方法，那么可用下面的源代碼制作按鈕，其中onclick決定按下按鈕的動作：
< input type="button" name="B1" value="按鈕" >< /p >
　　onclick > < /p > 　　
　　如果只使用單獨的按鈕，那么可省略form標簽，只使用單純的按鈕代碼，將節省按鈕所占的網頁空間：
< input type="button" name="B1" value="按鈕" >< /p >
　　
　　onclick > < /p >
　　
　　二、按鈕的前景與背景控制
　　
　　絕大多數的人使用按鈕時，都直接使用缺省的灰白色按鈕有黑色的文字說明，其實按鈕的背景和前景是可以隨意改變的，請看下面的代碼：

View Code

1 < form name="highlight" > 
2 　　 
3 　　< p align="center" > 
4 　　 
5 　　< input type="button" value="變色按鈕" style="background-color: rgb(255,0,0); color: rgb(255,2550,0)" onclick > 
6 　　 
7 　　< /p > 
8 　　 
9 　　< /form >

　　其中background-color控制背景色，color按鈕前景色；

三、按鈕的圖片背景
　　
　　按鈕不僅可以修改前景色和背景顏色，而且可以使用圖片背景，下面的代碼分別演示了固定的背景圖片效果和動態的圖片背景效果，動態的效果即在鼠標放到按鈕上時，按鈕的背景是另外一種圖像背景，而鼠標離開時則恢復原來的圖片背景，下面代碼中的mainbb1.jpg和mainbb2.jpg 分別為兩個圖像文件：

View Code

 1 　 <!------------Js----------->
 2 　　< script  type="text/javascript"> 
 3 　　 
 4 　　< !-- if (document.images) 
 5 　　 
 6 　　{ after=new Image() 
 7 　　 
 8 　　after.src="mainbb1.jpg"} 
 9 　　 
10 　　function change2(image) 
11 　　 
12 　　{ var el=event.srcElement if (el.tagName=="INPUT"&&el.type=="button") event.srcElement.style.backgroundImage="url"+"('"+image+"')"} //-- > 
13 　　 
14 　　< /script > 
15 <!------------end---------->　　
16 /*鼠標事件*/ 
17 　　< form onmouseover="change2('mainbb1.jpg')" 
18 　　 
19 　　onmouseout="change2('mainbb2.jpg')" > 
20 　　 
21 　　< p align="center" > 
22 　　< input type=" button" name="frme2" value="變化背景" 
23 　　 
24 　　style="background-color: rgb(192,192,192); FONT-FAMILY: 宋體; FONT-SIZE: 12pt; 
25 　　 
26 　　background-image: url('mainbb2.jpg')" class="initial" onclick="(h1.htm')" < br > 
27 　　 
28 　　< input type="submit" name="B1" value="固定背景"style="FONT-SIZE: 12pt; background-image: url('mainbb1.jpg')" > 
29 　　 
30 　　< /p > 
31 　　 
32 　　< /form >

　　四、按鈕字號和字型控制
　　按鈕上顯示的文字也可以隨意改變風格，可以設置字體的字型和字號，請看以下代碼：

View Code

 1 < form name="highlight" > 
 2 　　 
 3 　　< p align="center" > 
 4 　　 
 5 　　< input type="button" value="變化字號" style="background-color: rgb(192,192,192); FONT-FAMILY: 宋體; FONT-SIZE: 9pt" color: rgb(255,2550,0)"); 
 6 　　 
 7 　　onclick > < input type="button" value="變化字號" style="background-color: rgb(192,192,192); FONT-FAMILY: 宋體; FONT-SIZE: 12pt" color: rgb(255,2550,0)"); onclick > 
 8 　　 
 9 　　< /p > 
10 　　 
11 　　< /form >

五、按鈕鼠標移動變色
　　
　　上面已經介紹了按鈕的顏色控制方法，加上鼠標事件的參與即可實現鼠標移動變色，下面是完整的代碼：

View Code

 1 < html > 
 2 　　 
 3 　　< head > 
 4 　　 
 5 　　< meta http-equiv="Content-Type" content="text/html; charset=gb_2312-80" > 
 6 　　 
 7 　　< meta name="GENERATOR" content= "Microsoft FrontPage Express 2.0" > 
 8 　　 
 9 　　< title >變色按鈕< /title > 
10 　　 
11 　　< style > 
12 　　 
13 　　.bigChange {color:blue; font-weight:bolder; font-size:175%;letter-spacing:4px; text-transform: uppercase; background:yellow} 
14 　　 
15 　　.start {color:ff0000; background:c8ff4e}. 
16 　　 
17 　　over {color:ffff00; background:0000ff} 
18 　　 
19 　　< /style > 
20 　　 
21 　　< /head > 
22 　　 
23 　　< body bgcolor="#83E09C" > 
24 　　 
25 　　< p > 
26 　　 
27 　　< script language="JAVASCRIPT" > 
28 　　 
29 　　function highlightButton(s) 
30 　　 
31 　　{ if ("INPUT"==event.srcElement.tagName) event.srcElement.className=s } 
32 　　 
33 　　< /script > 
34 　　 
35 　　< /p > 
36 　　 
37 　　< form name="highlight" onmouseover="highlightButton('start')" onmouseout="highlightButton('over')" > 
38 　　 
39 　　< p align="center" > 
40 　　 
41 　　< input type= "button" value="變色按鈕"); 
42 　　onclick > 
43 　　 
44 　　< /p > 
45 　　 
46 　　< /form > 
47 　　 
48 　　< /body > 
49 　　 
50 　　< /html >

<input type=button>觸發<input type=file>的click事件后 ,點擊保存，為什么先清空input，而導致上傳的文件為空

View Code

 1 <%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="WebApplication2.WebForm1" %>
 2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
 3 <HTML>
 4 <HEAD>
 5 <title>WebForm1</title>
 6 <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
 7 <meta name="CODE_LANGUAGE" Content="C#">
 8 <meta name="vs_defaultClientScript" content="JavaScript">
 9 <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
10 <script language="JavaScript">
11   var i=0;
12   function addFileControl()
13   {
14   var str = '<INPUT type="file" NAME="File'+i+'" id="_upfile'+i+'">'
15   document.getElementById('FileCollection').insertAdjacentHTML("beforeEnd",str)
16     
17   document.getElementById ("_upfile"+i).click();
18   i++;
19   }
20 </script>
21 </HEAD>
22 <body MS_POSITIONING="GridLayout">
23 <form id="Form1" method="post" runat="server">
24 <P align="center"><input onclick="addFileControl()" type="button" value="增加(File)"></P>
25 <P id="FileCollection"><INPUT type="file" name="File">
26 <asp:Button id="Button1" style="Z-INDEX: 101; LEFT: 152px; POSITION: absolute; TOP: 168px" runat="server"
27 Text="保存"></asp:Button>&nbsp;</P>
28 </form>
29 </body>
30 </HTML>
31

后台代碼:

View Code

 1 <script type="text/javascript">
 2 function c2(obj)
 3 {
 4 alert(obj);
 5 }
 6 function cleart()
 7 {
 8 var btn = document.getElementById('btn');
 9 btn.detachEvent("onclick",cc);
10 }
11 function setevent()
12 {
13 var btn = document.getElementById('btn');
14 var fn = "c2('dddd')";
15 btn.attachEvent("onclick",cc=function(){eval(fn);});
16 }
17 </script>
18   <input type="button" id="btn"  value="attach/detachEvent" />
19   <input type="button" id="btn1" onclick="cleart()" value="clear" />
20   <input type="button" id="btn2" onclick="setevent()" value="setevent" 
21 
22 />

View Code

 1  using System.Web.UI.HtmlControls;
 2 
 3 namespace WebApplication2
 4 {
 5 /// <summary>
 6 /// WebForm1 的摘要說明。
 7 /// </summary>
 8 public class WebForm1 : System.Web.UI.Page
 9 {
10 protected System.Web.UI.WebControls.Button Button1;
11 
12 private void Page_Load(object sender, System.EventArgs e)
13 {
14 // 在此處放置用戶代碼以初始化頁面
15 }
16 
17 
18 private void Button1_Click(object sender, System.EventArgs e)
19 {
20   string[] inputNames = Request.Files.AllKeys;   
21 for(int i=0;i<inputNames.Length ;i++)
22 Response.Write (inputNames[i]);
23 StringBuilder uploadMessage = new StringBuilder("當前上傳的文件分別是：<hr color=red>");   
24 string path=Server.MapPath("/");   
25     
26 //上載文件列表中的每一個文件   
27 for (int i = 0; i < inputNames.Length; i++)   
28 {   
29 //if (inputNames[i].IndexOf(file.name)>= 0)   
30 //{   
31 String fileName;   
32 String fileExtension;   
33     
34 //獲取上載文件的文件名稱   
35 HttpPostedFile postedFile = Request.Files[inputNames[i]];  
36 
37 fileName = Path.GetFileName(postedFile.FileName);   
38 string fi=path+fileName;   
39 if(fileName != null && fileName !="")   
40 {   
41 //獲取上載文件的擴展名稱   
42 fileExtension = Path.GetExtension(fileName);   
43 uploadMessage.Append("上傳的文件類型：" + postedFile.ContentType.ToString() + "<br>");   
44 uploadMessage.Append("客戶端文件地址：" + postedFile.FileName + "<br>");   
45 uploadMessage.Append("上傳文件的文件名：" + fileName + "<br>");   
46 uploadMessage.Append("上傳文件的擴展名：" + fileExtension + "<br><hr>");   
47     
48 //上載文件   
49     
50 postedFile.SaveAs(fi);   
51 
52 //}   
53 }   
54 
55   
56 }   
57 }
58 }
59 }

javascript動態增刪事件兼容IE和FF

但對寫在HTML里的Onclick＝“XXX”的事件，是無法用此種

View Code

 1 <script>
 2 function test(a){
 3 alert(a)
 4 }
 5 var fn = "test('test呆')";
 6 </script>
 7 <input type="button" value="執行事件" id="btn1" />
 8 <input type="button" value="增加單擊事件" 
 9 
10 onclick="document.getElementById('btn1').setAttribute('onclick',documen
11 
12 t.all ? function(){eval(fn);} :fn);"/>
13 <input type="button" value="增加懸浮事件" 
14 
15 onclick="document.getElementById('btn1').setAttribute('onmouseover',doc
16 
17 ument.all ? function(){eval(fn);} :fn);"/>
18 <input type="button" value="取消單擊事件" 
19 
20 onclick="document.getElementById('btn1').setAttribute('onclick',null)" 
21 
22 />
23 <input type="button" value="取消懸浮事件" 
24 
25 onclick="document.getElementById('btn1').setAttribute('onmouseover',nul
26 
27 l)" />

方法取消的
可以采用下述方法

js的一個問題<input type="button" value="刪除" onclick="

removeInput(event)" />

<input type="button" value="刪除" onclick=" removeInput(event)" />
onclick事件里的removeInput(event) 這個event是什么意思我可以用什么替換

他嗎
整體代碼如下主要是我想用“刪除附件”這個按鈕替換掉“刪除”那個按鈕

View Code

 1 <script type="text/javascript"> 
 2  /**
 3  * 生成多附件上傳框
 4  */
 5  function createInput(){ 
 6     var str = '<div name="div" ><font style="font-size:12px;">附件
 7 
 8 </font>'+
 9     '   '+ '<input type="file"  contentEditable="false"' +
10     '" name="uploads" value="" style="width: 220px" /><input 
11 
12 type="button"  value="刪除" onclick=" removeInput(event)" />'+'</div>'; 
13     
14 
15 document.getElementById('more').insertAdjacentHTML("beforeEnd",str);
16  } 
17  /**
18  * 刪除多附件刪除框
19  */
20  function removeInput(evt){
21      
22     var el = evt.target == null ? evt.srcElement : evt.target;
23     var div = el.parentNode;
24     var cont = document.getElementById('more');        
25     if(cont.removeChild(div) == null){
26      return false;
27     }
28     return true;
29  } 
30 </script>
31 
32 
33 <body>
34      <table width="276" border="0" cellspacing="0" cellpadding="0">
35       <tr>
36        <td>
37         <input type="button"  value="添加附件" onClick="createInput();" 
38 
39 /><input type="button"  value="刪除附件"  />  
40        </td>
41       </tr>
42       <tr>
43        <td>
44         <div id="more"></div>
45        </td>
46       </tr>
47      </table>
48 
49 
50 </body>

花了好長時間整的，希望對大家都有幫助。。同時我們也共同進步。。加油！

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 bootstrap中讓button按鈕居中在datagridview中添加button按鈕 tkinter中button按鈕控件（三） tkinter中button按鈕控件（三） JSP 或HTML 如何通過button按鈕轉到想去的頁面點擊Button按鈕實現頁面跳轉 Xamarin.Forms listview中的button按鈕,實現帶着參數返回上一級頁面 form表單中button按鈕發送請求或者刷新頁面的解決辦法 form表單中button按鈕發送請求或者刷新頁面的解決辦法表單中submit和button按鈕的區別！