各种各样的按钮

最新推荐文章于 2023-05-23 10:07:24 发布
最新推荐文章于 2023-05-23 10:07:24 发布
阅读量449 收藏
点赞数
分类专栏： JavaScript 文章标签： button class function scroll null filter

效果图：

 

脚本说明:
把如下代码加入<body>区域中：
<SCRIPT  type=text/javascript>
if (window.moz == true && (typeof window.emulateAttachEvent != "function" || typeof window.extendEventObject != "function"))
    alert("Error! IE Emulation file not included.");

if (window.moz) {
    emulateAttachEvent();
    extendEventObject();
}
/* end Mozilla specific emulation initiation */

function createButton(el) {

    el.attachEvent("onmouseover",    createButton.overCoolButton);
    el.attachEvent("onmouseout",    createButton.outCoolButton);
    el.attachEvent("onmousedown",    createButton.downCoolButton);
    el.attachEvent("onmouseup",        createButton.upCoolButton);
    el.attachEvent("onclick",        createButton.clickCoolButton);
    el.attachEvent("ondblclick",    createButton.clickCoolButton);
    el.attachEvent("onkeypress",    createButton.keypressCoolButton);
    el.attachEvent("onkeyup",        createButton.keyupCoolButton);
    el.attachEvent("onkeydown",        createButton.keydownCoolButton);
    el.attachEvent("onfocus",        createButton.focusCoolButton);
    el.attachEvent("onblur",        createButton.blurCoolButton);
   
    el.className = "coolButton";
   
    el.setEnabled    = createButton.setEnabled;
    el.getEnabled    = createButton.getEnabled;
    el.setValue        = createButton.setValue;
    el.getValue        = createButton.getValue;
    el.setToggle    = createButton.setToggle;
    el.getToggle    = createButton.getToggle;
    el.setAlwaysUp    = createButton.setAlwaysUp;
    el.getAlwaysUp    = createButton.getAlwaysUp;
   
    el._enabled        = true;
    el._toggle        = false;
    el._value        = false;
    el._alwaysUp    = false;
   
    return el;
}

createButton.LEFT = window.moz ? 0 : 1;

/* event listeners */

createButton.overCoolButton = function () {
    var toEl = createButton.getParentCoolButton(window.event.toElement);
    var fromEl = createButton.getParentCoolButton(window.event.fromElement);
    if (toEl == fromEl || toEl == null) return;
   
    toEl._over = true;
   
    if (!toEl._enabled) return;
   
    createButton.setClassName(toEl);
};

createButton.outCoolButton = function () {
    var toEl = createButton.getParentCoolButton(window.event.toElement);
    var fromEl = createButton.getParentCoolButton(window.event.fromElement);
    if (toEl == fromEl || fromEl == null) return;
   
    fromEl._over = false;
    fromEl._down = false;
   
    if (!fromEl._enabled) return;   

    createButton.setClassName(fromEl);
};

createButton.downCoolButton = function () {
    if (window.event.button != createButton.LEFT) return;
   
    var el = createButton.getParentCoolButton(window.event.srcElement);
    if (el == null) return;
   
    el._down = true;
   
    if (!el._enabled) return;

    createButton.setClassName(el);
};

createButton.upCoolButton = function () {
    if (window.event.button != createButton.LEFT) return;
   
    var el = createButton.getParentCoolButton(window.event.srcElement);
    if (el == null) return;
   
    el._down = false;
   
    if (!el._enabled) return;
   
    if (el._toggle)
        el.setValue(!el._value);
    else
        createButton.setClassName(el);
};

createButton.clickCoolButton = function () {
     var el = createButton.getParentCoolButton(window.event.srcElement);
    el.onaction = el.getAttribute("onaction");
    if (el == null || !el._enabled || el.onaction == "" || el.onaction == null) return;
   
    if (typeof el.onaction == "string")
        el.onaction = new Function ("event", el.onaction);
   
    el.onaction(window.event);
};

createButton.keypressCoolButton = function () {
    var el = createButton.getParentCoolButton(window.event.srcElement);
    if (el == null || !el._enabled || window.event.keyCode != 13) return;
   
    el.setValue(!el._value);
   
    if (el.onaction == null) return;
   
    if (typeof el.onaction == "string")
        el.onaction = new Function ("event", el.onaction);
   
    el.onaction(window.event);
};

createButton.keydownCoolButton = function () {
    var el = createButton.getParentCoolButton(window.event.srcElement);
    if (el == null || !el._enabled || window.event.keyCode != 32) return;
    createButton.downCoolButton();
};

createButton.keyupCoolButton = function () {
    var el = createButton.getParentCoolButton(window.event.srcElement);
    if (el == null || !el._enabled || window.event.keyCode != 32) return;
    createButton.upCoolButton();
   
    //el.setValue(!el._value);    // is handled in upCoolButton()
   
    if (el.onaction == null) return;
   
    if (typeof el.onaction == "string")
        el.onaction = new Function ("event", el.onaction);
   
    el.onaction(window.event);
};

createButton.focusCoolButton = function () {
    var el = createButton.getParentCoolButton(window.event.srcElement);
    if (el == null || !el._enabled) return;
    createButton.setClassName(el);
};

createButton.blurCoolButton = function () {
    var el = createButton.getParentCoolButton(window.event.srcElement);
    if (el == null) return;
   
    createButton.setClassName(el)
};

createButton.getParentCoolButton = function (el) {
    if (el == null) return null;
    if (/coolButton/.test(el.className))
        return el;
    return createButton.getParentCoolButton(el.parentNode);
};

/* end event listeners */

createButton.setClassName = function (el) {
    var over = el._over;
    var down = el._down;
    var focused;
    try {
        focused = (el == document.activeElement && el.tabIndex > 0);
    }
    catch (exc) {
        focused = false;
    }
   
    if (!el._enabled) {
        if (el._value)
            el.className = "coolButtonActiveDisabled";
        else
            el.className = el._alwaysUp ? "coolButtonUpDisabled" : "coolButtonDisabled";
    }
    else {
        if (el._value) {
            if (over || down || focused)
                el.className = "coolButtonActiveHover";
            else
                el.className = "coolButtonActive";
        }
        else {
            if (down)
                el.className = "coolButtonActiveHover";
            else if (over || el._alwaysUp || focused)
                el.className = "coolButtonHover";
            else
                el.className = "coolButton";
        }
    }
};

createButton.setEnabled = function (b) {
    if (this._enabled != b) {
        this._enabled = b;
        createButton.setClassName(this, false, false);
        if (!window.moz) {
            if (b)
                this.innerHTML = this.firstChild.firstChild.innerHTML;
            else
                this.innerHTML = "<span class='coolButtonDisabledContainer'><span class='coolButtonDisabledContainer'>" + this.innerHTML + "</span></span>";
        }
    }
};

createButton.getEnabled = function () {
    return this._enabled;
};

createButton.setValue = function (v, bDontTriggerOnChange) {
    if (this._toggle && this._value != v) {
        this._value = v;
        createButton.setClassName(this, false, false);
       
        this.onchange = this.getAttribute("onchange");
       
        if (this.onchange == null || this.onchange == "" || bDontTriggerOnChange) return;
       
        if (typeof this.onchange == "string")
            this.onchange = new Function("", this.onchange);

        this.onchange();
    }
};

createButton.getValue = function () {
    return this._value;
};

createButton.setToggle = function (t) {
    if (this._toggle != t) {
        this._toggle = t;
        if (!t) this.setValue(false);
    }
};

createButton.getToggle = function () {
    return this._toggle;
};

createButton.setAlwaysUp = function (up) {
    if (this._alwaysUp != up) {
        this._alwaysUp = up;
        createButton.setClassName(this, false, false);
    }
};

createButton.getAlwaysUp = function () {
    return this._alwaysUp;
};
</SCRIPT>

<STYLE>
.coolButton {
    BORDER-RIGHT: buttonface 0px solid; PADDING-RIGHT: 5px; BORDER-TOP: buttonface 0px solid; PADDING-LEFT: 5px; FONT-WEIGHT: normal; PADDING-BOTTOM: 2px; FONT: Icon; VERTICAL-ALIGN: middle; BORDER-LEFT: buttonface 0px solid; CURSOR: default; PADDING-TOP: 2px; BORDER-BOTTOM: buttonface 0px solid; WHITE-SPACE: nowrap; BACKGROUND-COLOR: buttonface
}
.coolButtonHover {
    BORDER-RIGHT: buttonface 0px solid; PADDING-RIGHT: 5px; BORDER-TOP: buttonface 0px solid; PADDING-LEFT: 5px; FONT-WEIGHT: normal; PADDING-BOTTOM: 2px; FONT: Icon; VERTICAL-ALIGN: middle; BORDER-LEFT: buttonface 0px solid; CURSOR: default; PADDING-TOP: 2px; BORDER-BOTTOM: buttonface 0px solid; WHITE-SPACE: nowrap; BACKGROUND-COLOR: buttonface
}
.coolButtonActiveHover {
    BORDER-RIGHT: buttonface 0px solid; PADDING-RIGHT: 5px; BORDER-TOP: buttonface 0px solid; PADDING-LEFT: 5px; FONT-WEIGHT: normal; PADDING-BOTTOM: 2px; FONT: Icon; VERTICAL-ALIGN: middle; BORDER-LEFT: buttonface 0px solid; CURSOR: default; PADDING-TOP: 2px; BORDER-BOTTOM: buttonface 0px solid; WHITE-SPACE: nowrap; BACKGROUND-COLOR: buttonface
}
.coolButtonActive {
    BORDER-RIGHT: buttonface 0px solid; PADDING-RIGHT: 5px; BORDER-TOP: buttonface 0px solid; PADDING-LEFT: 5px; FONT-WEIGHT: normal; PADDING-BOTTOM: 2px; FONT: Icon; VERTICAL-ALIGN: middle; BORDER-LEFT: buttonface 0px solid; CURSOR: default; PADDING-TOP: 2px; BORDER-BOTTOM: buttonface 0px solid; WHITE-SPACE: nowrap; BACKGROUND-COLOR: buttonface
}
.coolButtonActiveDisabled {
    BORDER-RIGHT: buttonface 0px solid; PADDING-RIGHT: 5px; BORDER-TOP: buttonface 0px solid; PADDING-LEFT: 5px; FONT-WEIGHT: normal; PADDING-BOTTOM: 2px; FONT: Icon; VERTICAL-ALIGN: middle; BORDER-LEFT: buttonface 0px solid; CURSOR: default; PADDING-TOP: 2px; BORDER-BOTTOM: buttonface 0px solid; WHITE-SPACE: nowrap; BACKGROUND-COLOR: buttonface
}
.coolButtonDisabled {
    BORDER-RIGHT: buttonface 0px solid; PADDING-RIGHT: 5px; BORDER-TOP: buttonface 0px solid; PADDING-LEFT: 5px; FONT-WEIGHT: normal; PADDING-BOTTOM: 2px; FONT: Icon; VERTICAL-ALIGN: middle; BORDER-LEFT: buttonface 0px solid; CURSOR: default; PADDING-TOP: 2px; BORDER-BOTTOM: buttonface 0px solid; WHITE-SPACE: nowrap; BACKGROUND-COLOR: buttonface
}
.coolButtonUpDisabled {
    BORDER-RIGHT: buttonface 0px solid; PADDING-RIGHT: 5px; BORDER-TOP: buttonface 0px solid; PADDING-LEFT: 5px; FONT-WEIGHT: normal; PADDING-BOTTOM: 2px; FONT: Icon; VERTICAL-ALIGN: middle; BORDER-LEFT: buttonface 0px solid; CURSOR: default; PADDING-TOP: 2px; BORDER-BOTTOM: buttonface 0px solid; WHITE-SPACE: nowrap; BACKGROUND-COLOR: buttonface
}
.coolButton IMG {
    FILTER: gray()
}
.coolButtonHover {
    BORDER-TOP-WIDTH: 1px; PADDING-RIGHT: 4px; PADDING-LEFT: 4px; BORDER-LEFT-WIDTH: 1px; BORDER-LEFT-COLOR: buttonhighlight; BORDER-BOTTOM-WIDTH: 1px; BORDER-BOTTOM-COLOR: buttonshadow; PADDING-BOTTOM: 1px; BORDER-TOP-COLOR: buttonhighlight; PADDING-TOP: 1px; BORDER-RIGHT-WIDTH: 1px; BORDER-RIGHT-COLOR: buttonshadow
}
.coolButtonActiveHover {
    BORDER-TOP-WIDTH: 1px; PADDING-RIGHT: 3px; PADDING-LEFT: 5px; BORDER-LEFT-WIDTH: 1px; BORDER-LEFT-COLOR: buttonshadow; BORDER-BOTTOM-WIDTH: 1px; BORDER-BOTTOM-COLOR: buttonhighlight; PADDING-BOTTOM: 0px; BORDER-TOP-COLOR: buttonshadow; PADDING-TOP: 2px; BORDER-RIGHT-WIDTH: 1px; BORDER-RIGHT-COLOR: buttonhighlight
}
.coolButtonActive {
    BORDER-TOP-WIDTH: 1px; PADDING-RIGHT: 3px; PADDING-LEFT: 5px; BORDER-LEFT-WIDTH: 1px; BORDER-LEFT-COLOR: buttonshadow; BACKGROUND-IMAGE: url(images/cbback.gif); BORDER-BOTTOM-WIDTH: 1px; BORDER-BOTTOM-COLOR: buttonhighlight; PADDING-BOTTOM: 0px; BORDER-TOP-COLOR: buttonshadow; PADDING-TOP: 2px; BORDER-RIGHT-WIDTH: 1px; BORDER-RIGHT-COLOR: buttonhighlight
}
.coolButtonUpDisabled {
    BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 5px; PADDING-LEFT: 5px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 2px; COLOR: graytext; PADDING-TOP: 2px; BORDER-RIGHT-WIDTH: 0px
}
.coolButtonActiveDisabled {
    BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 5px; PADDING-LEFT: 5px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 2px; COLOR: graytext; PADDING-TOP: 2px; BORDER-RIGHT-WIDTH: 0px
}
.coolButtonDisabled {
    BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 5px; PADDING-LEFT: 5px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 2px; COLOR: graytext; PADDING-TOP: 2px; BORDER-RIGHT-WIDTH: 0px
}
.coolButtonActiveDisabled {
    BORDER-TOP-WIDTH: 1px; PADDING-RIGHT: 3px; PADDING-LEFT: 5px; BORDER-LEFT-WIDTH: 1px; BORDER-LEFT-COLOR: buttonshadow; BORDER-BOTTOM-WIDTH: 1px; BORDER-BOTTOM-COLOR: buttonhighlight; PADDING-BOTTOM: 0px; BORDER-TOP-COLOR: buttonshadow; PADDING-TOP: 2px; BORDER-RIGHT-WIDTH: 1px; BORDER-RIGHT-COLOR: buttonhighlight
}
.coolButtonUpDisabled {
    BORDER-TOP-WIDTH: 1px; BORDER-LEFT-WIDTH: 1px; BORDER-LEFT-COLOR: buttonhighlight; BORDER-BOTTOM-WIDTH: 1px; BORDER-BOTTOM-COLOR: buttonshadow; BORDER-TOP-COLOR: buttonhighlight; BORDER-RIGHT-WIDTH: 1px; BORDER-RIGHT-COLOR: buttonshadow
}
.coolButtonUpDisabled IMG {
    moz-opacity: 0.5
}
.coolButtonActiveDisabled IMG {
    moz-opacity: 0.5
}
.coolButtonDisabled IMG {
    moz-opacity: 0.5
}
.coolButtonUpDisabled .coolButtonDisabledContainer {
    DISPLAY: block; BACKGROUND: graytext; FILTER: chroma(color=#010101) dropshadow(color=ButtonHighlight, offx=1, offy=1); WIDTH: 100%; HEIGHT: 100%
}
.coolButtonActiveDisabled .coolButtonDisabledContainer {
    DISPLAY: block; BACKGROUND: graytext; FILTER: chroma(color=#010101) dropshadow(color=ButtonHighlight, offx=1, offy=1); WIDTH: 100%; HEIGHT: 100%
}
.coolButtonDisabled .coolButtonDisabledContainer {
    DISPLAY: block; BACKGROUND: graytext; FILTER: chroma(color=#010101) dropshadow(color=ButtonHighlight, offx=1, offy=1); WIDTH: 100%; HEIGHT: 100%
}
.coolButtonUpDisabled .coolButtonDisabledContainer .coolButtonDisabledContainer {
    BACKGROUND: none transparent scroll repeat 0% 0%; FILTER: gray()
                       
                        chroma(color=#ffffff) chroma(color=#fefefe) chroma(color=#fdfdfd)
                        chroma(color=#fcfcfc) chroma(color=#fbfbfb) chroma(color=#fafafa)
                        chroma(color=#f9f9f9) chroma(color=#f8f8f8) chroma(color=#f7f7f7)
                        chroma(color=#f6f6f6) chroma(color=#f5f5f5) chroma(color=#f4f4f4)
                        chroma(color=#f3f3f3)
                        mask(color=#010101)
}
.coolButtonActiveDisabled .coolButtonDisabledContainer .coolButtonDisabledContainer {
    BACKGROUND: none transparent scroll repeat 0% 0%; FILTER: gray()
                       
                        chroma(color=#ffffff) chroma(color=#fefefe) chroma(color=#fdfdfd)
                        chroma(color=#fcfcfc) chroma(color=#fbfbfb) chroma(color=#fafafa)
                        chroma(color=#f9f9f9) chroma(color=#f8f8f8) chroma(color=#f7f7f7)
                        chroma(color=#f6f6f6) chroma(color=#f5f5f5) chroma(color=#f4f4f4)
                        chroma(color=#f3f3f3)
                        mask(color=#010101)
}
.coolButtonDisabled .coolButtonDisabledContainer .coolButtonDisabledContainer {
    BACKGROUND: none transparent scroll repeat 0% 0%; FILTER: gray()
                       
                        chroma(color=#ffffff) chroma(color=#fefefe) chroma(color=#fdfdfd)
                        chroma(color=#fcfcfc) chroma(color=#fbfbfb) chroma(color=#fafafa)
                        chroma(color=#f9f9f9) chroma(color=#f8f8f8) chroma(color=#f7f7f7)
                        chroma(color=#f6f6f6) chroma(color=#f5f5f5) chroma(color=#f4f4f4)
                        chroma(color=#f3f3f3)
                        mask(color=#010101)
}

{
    box-sizing: border-box; moz-box-sizing: border-box
}
HTML {
    BACKGROUND: buttonface; HEIGHT: 100%
}
BODY {
    BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; FONT: MessageBox; OVERFLOW: auto; COLOR: buttontext; PADDING-TOP: 0px; HEIGHT: 100%; BORDER-RIGHT-WIDTH: 0px
}
TABLE {
    BORDER-RIGHT: 2px groove; BORDER-TOP: 2px groove; MARGIN: 10px; BORDER-LEFT: 2px groove; BORDER-BOTTOM: 2px groove
}
P {
    MARGIN: 10px
}
#blueTable {
    BACKGROUND-COLOR: rgb(120,172,255)
}
#blueTable TD {
    BACKGROUND-COLOR: transparent
}
#blueTable .coolButtonUpDisabled {
    COLOR: rgb(60,86,128)
}
#blueTable .coolButtonActiveDisabled {
    COLOR: rgb(60,86,128)
}
#blueTable .coolButtonDisabled {
    COLOR: rgb(60,86,128)
}
#blueTable .coolButtonUpDisabled .coolButtonDisabledContainer {
    BACKGROUND: rgb(60,86,128)
}
#blueTable .coolButtonActiveDisabled .coolButtonDisabledContainer {
    BACKGROUND: rgb(60,86,128)
}
#blueTable .coolButtonDisabled .coolButtonDisabledContainer {
    BACKGROUND: rgb(60,86,128)
}
#blueTable .coolButtonUpDisabled .coolButtonDisabledContainer .coolButtonDisabledContainer {
    BACKGROUND: none transparent scroll repeat 0% 0%
}
#blueTable .coolButtonActiveDisabled .coolButtonDisabledContainer .coolButtonDisabledContainer {
    BACKGROUND: none transparent scroll repeat 0% 0%
}
#blueTable .coolButtonDisabled .coolButtonDisabledContainer .coolButtonDisabledContainer {
    BACKGROUND: none transparent scroll repeat 0% 0%
}
</STYLE>

<STYLE id=mozGrooveCSS disabled>BODY {
    FONT: Message-Box; moz-user-select: none
}
TABLE {
    BORDER-RIGHT: buttonface 2px groove; BORDER-TOP: buttonface 2px groove; BORDER-LEFT: buttonface 2px groove; BORDER-BOTTOM: buttonface 2px groove
}
</STYLE>

<SCRIPT language=JavaScript1.5>
if (window.moz == true) document.getElementById("mozGrooveCSS").removeAttribute("disabled");
</SCRIPT>

<TABLE style="BACKGROUND: buttonface" cellSpacing=1>
  <TBODY>
  <TR>
    <TD class=coolButton><IMG src="foldericon.gif" align=absMiddle>
      Button 0</TD>
    <TD class=coolButtonHover><IMG src="foldericon.gif"
      align=absMiddle> Button 1</TD>
    <TD class=coolButtonActiveHover><IMG src="foldericon.gif"
      align=absMiddle> Button 2</TD>
    <TD class=coolButtonActive><IMG src="foldericon.gif"
      align=absMiddle> Button 3</TD>
    <TD class=coolButtonDisabled><SPAN class=coolButtonDisabledContainer><SPAN
      class=coolButtonDisabledContainer><IMG src="foldericon.gif"
      align=absMiddle> IE</SPAN></SPAN></TD>
    <TD class=coolButtonActiveDisabled><SPAN
      class=coolButtonDisabledContainer><SPAN
      class=coolButtonDisabledContainer><IMG src="foldericon.gif"
      align=absMiddle> IE</SPAN></SPAN></TD>
    <TD class=coolButtonUpDisabled><SPAN
      class=coolButtonDisabledContainer><SPAN
      class=coolButtonDisabledContainer><IMG src="foldericon.gif"
      align=absMiddle> IE</SPAN></SPAN></TD>
    <TD class=coolButtonDisabled><IMG src="foldericon.gif"
      align=absMiddle> MOZ</TD>
    <TD class=coolButtonActiveDisabled><IMG src="foldericon.gif"
      align=absMiddle> MOZ</TD>
    <TD class=coolButtonUpDisabled><IMG src="foldericon.gif"
      align=absMiddle> MOZ</TD></TR></TBODY></TABLE>
<P>
<TABLE id=blueTable cellSpacing=1>
  <TBODY>
  <TR>
    <TD class=coolButton onaction="alert(event)"><IMG
      src="foldericon.gif" align=absMiddle> Button 0</TD>
    <TD class=coolButton><IMG src="foldericon.gif" align=absMiddle>
      Button 1</TD>
    <TD class=coolButton><IMG src="foldericon.gif" align=absMiddle>
      Button 2</TD>
    <TD class=coolButton><IMG src="foldericon.gif" align=absMiddle>
      Button 3</TD>
    <TD class=coolButton><IMG src="foldericon.gif" align=absMiddle>
      Button 4</TD>
    <TD class=coolButton><IMG src="foldericon.gif" align=absMiddle>
      Button 5</TD></TR></TBODY></TABLE>


<P>
<TABLE style="BACKGROUND: buttonface" cellSpacing=1>
  <TBODY>
  <TR>
    <TD class=coolButton onaction="alert(event)"><IMG
      src="movetoicon.gif" align=absMiddle> Button 0</TD>
    <TD class=coolButton tabIndex=1><IMG src="movetoicon.gif"
      align=absMiddle> Button 1</TD>
    <TD class=coolButton tabIndex=1><IMG src="movetoicon.gif"
      align=absMiddle> Button 2</TD>
    <TD class=coolButton tabIndex=1
    οnchange="alert('Changed to ' + this.getValue())"><IMG
      src="movetoicon.gif" align=absMiddle> Button 3</TD>
    <TD class=coolButton tabIndex=1><IMG src="movetoicon.gif"
      align=absMiddle> Button 4</TD>
    <TD class=coolButton tabIndex=1><IMG src="movetoicon.gif"
      align=absMiddle> Button 5</TD></TR></TBODY></TABLE>
<SCRIPT>

var cells2 = document.getElementsByTagName("TABLE")[2].rows[0].cells;
for (var i = 0; i < cells2.length; i++)
    createButton(cells2[i]);

cells2[2].setToggle(true);

cells2[3].setToggle(true);
cells2[3].setValue(true, true);    // don't trigger onchange

cells2[4].setEnabled(false);

cells2[5].setEnabled(false);
cells2[5].setToggle(true);
cells2[5].setValue(true, true);    // don't trigger onchange

</SCRIPT>

<P>
<TABLE style="BACKGROUND: buttonface" cellSpacing=1>
  <TBODY>
  <TR>
    <TD class=coolButton tabIndex=1 onaction="alert(event)"><IMG
      src="favicon.gif" align=absMiddle> Button 0</TD>
    <TD class=coolButton tabIndex=1><IMG src="favicon.gif"
      align=absMiddle> Button 1</TD>
    <TD class=coolButton tabIndex=1><IMG src="favicon.gif"
      align=absMiddle> Button 2</TD>
    <TD class=coolButton tabIndex=1
    οnchange="alert('Changed to ' + this.getValue())"><IMG
      src="favicon.gif" align=absMiddle> Button 3</TD>
    <TD class=coolButton tabIndex=1><IMG src="favicon.gif"
      align=absMiddle> Button 4</TD>
    <TD class=coolButton tabIndex=1><IMG src="favicon.gif"
      align=absMiddle> Button 5</TD></TR></TBODY></TABLE>
<SCRIPT>

var cells3 = document.getElementsByTagName("TABLE")[3].rows[0].cells;
for (var i = 0; i < cells3.length; i++) {
    createButton(cells3[i]);
    cells3[i].setAlwaysUp(true);
}

cells3[2].setToggle(true);

cells3[3].setToggle(true);
cells3[3].setValue(true, true);    // don't trigger onchange

cells3[4].setEnabled(false);

cells3[5].setEnabled(false);
cells3[5].setToggle(true);
cells3[5].setValue(true, true);    // don't trigger onchange

</SCRIPT>

<P>
<TABLE style="BACKGROUND: buttonface" cellSpacing=1>
  <TBODY>
  <TR>
    <TD class=coolButton tabIndex=1><IMG src="favicon.gif"
      align=absMiddle> Button 0</TD>
    <TD class=coolButton tabIndex=1><IMG src="favicon.gif"
      align=absMiddle> Button 1</TD>
    <TD class=coolButton tabIndex=1><IMG src="favicon.gif"
      align=absMiddle> Button 2</TD></TR></TBODY></TABLE>
<SCRIPT>

var cells4 = document.getElementsByTagName("TABLE")[4].rows[0].cells;

function doRadio() {
    // loop over all the buttons in the radio group
    for (var i = 0; i < cells4.length; i++)
        cells4[i].setValue(this == cells4[i]);    // if the clicked button then set value to true
}


for (var i = 0; i < cells4.length; i++) {
    createButton(cells4[i]);
    //cells4[i].setAlwaysUp(true);
    cells4[i].setToggle(true);
    if (i == 0)
        cells4[i].setValue(true);
    cells4[i].onaction = doRadio;
}
</SCRIPT>

 

 

来自：http://www.haofa.net/javascript/an/20020402an2.htm

宸路
关注
专栏目录
html单选按钮样式 正方形,Html单选按钮自定义样式
weixin_32532029的博客
06-02 3376
前言：某天，写了一个带有单选按钮的界面，突然想起网上其他网站各种各样的单选按钮，遂想“改下这个圆圈圈怎么样？”，于是在找了一遍单选按钮的样式，没一个说是修改圆圈圈，于是又去网上找了一遍，各种各样，自己选了其中一种并稍加修改，感觉简单通俗易懂，而且最重要的是效果好，故在此和大家分享一下。原理：之前已经提及，html的单选按钮没有提供一个样式能修改其圆圈，所以仅靠一句类似“color:#fff”的语句...
html更改表单按钮文字,HTML进阶应用技巧（十）用好表单的按钮
weixin_29323273的博客
06-22 2141
一、制作常规按钮制作按钮非常简单，在标记中把type参数设置为：type="submit"就获得一个提交按钮，如本例的“提交”按钮；在 标记中把type参数设置为：type="reset"就获得一个复原按钮，如本例的“重写”按钮；在标记中把type参数设置为：type="button"就获得一个普通按钮。本例的按钮源代码如下：按钮的制虽简单，但在制作按钮时要注意两点：1、对于特殊按钮，一般不需另加...
【前端组件】更新ing 各种标签 组件 按钮的名称
学python全靠盲目自信的猪的博客
02-21 2817
作为一为测试人员，来介绍互联网公司中 前端页面常见的组件 按钮 标签的名称 。以便更好的了解各种组件名称及功能。 以下内容来自一位菜鸟测试人员的编写，网上查阅资料汇总而成；非专业前端技术人员，非专业产品，有纰漏错误之处，请各位大神指正。 组件一般分为6大类 Feedback反馈、form表单、basic基础、data数据、navigation导航 、other其他。 这是一般的结构 ...
6种Web前端多彩的按钮（一）
08-20
6种Web前端多彩的按钮（一）
前端命名规范及常用命名整理
weixin_42541725的博客
05-05 9675
前端命名规范及常用命名整理
各种各样文本框标签
sunyang8901562的专栏
03-14 1096
文本框标签 只要是输入的加选择的，按钮，都是通过input  type选择不同的类别然后来进行定义。 而且这类文本需要在form当中进行声明。可以进行搭配的设置，这样就可以输入内容进行提交，或者选择内容进行提交等多种样式风格。
QML（Qt Quick） 按钮设计指南
探索C++编程的奥秘，分享深入的技术见解和实践，旨在激发读者创造力与解决问题的思维。
05-23 2574
Qt Quick 按钮设计指南
Html单选按钮自定义样式
setsunadoudou的博客
09-17 6091
　　前言： 　　某天，写了一个带有单选按钮的界面，突然想起网上其他网站各种各样的单选按钮，遂想“改下这个圆圈圈怎么样？”，于是在找了一遍单选按钮的样式，没一个说是修改圆圈圈，于是又去网上找了一遍，各种...
纯CSS制作各种各样的网页图标（三角形、暂停按钮、下载箭头、加号等）
qq_38394175的博客
08-05 847
1.三角形 <div class="box"></div> <style> .box{ width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 50px solid transparent; border-right: 50px solid red; } </style>
整理GridControl层级表格及按钮列
清风白月的博客
09-14 2001
一、设计器 1、通过设计器添加Column 2、把列的ColumnEdit属性设置为RepositoryItemButtonEdit  3、 把TextEditStyle属性设置为HideTextEditor; 4、把Buttons的Kind属性设置为Glyph;  5、设置Buttons的ShowButtonMode = ShowAlways。 6、设置Buttons的ButtonsSt...
javascript经典特效---各种各样的按钮.rar
12-29
在本资源"javascript经典特效---各种各样的按钮.rar"中，我们聚焦于使用JavaScript实现的各种按钮效果，这些效果能够极大地提升用户体验并为网站增添动态元素。 首先，JavaScript允许我们创建动态按钮，即按钮在...
各种各样的按钮(VC源码)
11-17
在VC++编程环境中，"各种各样的按钮(VC源码)"是一个典型的Windows应用程序开发主题，主要涉及MFC（Microsoft Foundation Classes）库中的按钮控件使用。这篇文章将深入探讨VC++中按钮控件的相关知识点，包括按钮的...
js 特效 html 特效 各种各样的按钮
06-14
js 特效 html 特效 各种各样的按钮 js 特效 html 特效 各种各样的按钮
各种各样的好看的按钮图标1000个网页图标打包下载
11-01
资源中的“各种各样的按钮原版”可能包含了各种风格和尺寸的图标，供设计师根据项目需求进行选择和调整。而“1000个网页小图标”则意味着有大量的图标可供选择，无论是在数量还是多样性上，都能满足各种类型的网页...
python窗体按钮_Python ---（二）Tkinter窗口组件:Button
weixin_33836754的博客
02-10 2114
The Tkinter Button Widget##简介Button(按钮)组件用于实现各种各样的按钮。Button 组件可以包含文本或图像，你可以将一个 Python 的函数或方法与之相关联，当按钮被按下时，对应的函数或方法将被自动执行。Button 组件仅能显示单一字体的文本，但文本可以跨越多行。另外，还可以为其中的个别字符加上下划线(例如用于表示键盘快捷键)。默认情况下，tab 按键被用于...
基于水平井光纤应变的压裂裂缝长度反演模型及应用研究
10-17
内容概要：本文基于三维位移不连续边界元法建立了光纤应变计算模型，并构建了基于裂缝前缘光纤应变的裂缝参数反演模型。通过敏感性分析，探讨了光纤应变与裂缝长度、高度和宽度分布的关系，提出了一种利用光纤应变快速评估裂缝长度的方法，并验证了其在实际应用中的有效性。 适合人群：从事压裂裂缝诊断的技术人员、科研人员和工程师。 使用场景及目标：① 提供一种新的方法来评估压裂裂缝的长度，提高裂缝诊断的精度；② 在压裂施工过程中，实时监测裂缝长度变化，指导压裂工艺优化。 其他说明：该研究不仅提高了压裂裂缝参数解释的准确性，还为现场工程师提供了实用的工具和技术支持。
毕业设计论文SpringBoot数码商城交易平台.docx
10-17
毕业设计论文
毕业设计论文SpringBoot网上水果超市.docx
最新发布
10-17
毕业设计论文
C#实现位图按钮美化技巧：透明镂空效果
在C#的Windows Forms库中，Button类是一个基本的控件，可以用来创建各种各样的按钮。 知识点二：位图按钮（BitmapButton） 位图按钮是一种自定义的按钮控件，它允许开发者将位图图片设置为按钮的背景，从而提供更加...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值