zoukankan      html  css  js  c++  java

  • 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=" 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>

    花了好长时间整的，希望对大家都有帮助。。同时我们也共同进步。。加油！
  • 相关阅读:
    ES6(严格模式，let&const，箭头函数，解构赋值，字符串扩展方法，Symbol，Set和Map，生成器函数)
    动画实现-微信语音小喇叭样式
    JS与React分别实现倒计时（天时分秒）
    MacOS下如何设置hosts？
    原生JS实现‘点击元素切换背景及字体等’
    mysql数据库设计规范
    如何对 ElasticSearch 集群进行压力测试
    设计实现SAM--无服务器应用模型
    韩立刚计算机网络笔记-第11章 因特网上的音频视频-无线网络
    韩立刚计算机网络笔记-第10章 网络安全
  • 原文地址：https://www.cnblogs.com/QLJ1314/p/2737731.html
Copyright © 2011-2022 走看看