html可用的各种控件


1.tree控件

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Microsoft TreeView Control, version 6.0 </TITLE>
</HEAD>

<BODY onload="init()">
当前节点:<INPUT TYPE="text" id="caption" /> <INPUT TYPE="button" value="删除" onclick="delItem()" />
<BR /> 
<INPUT TYPE="text" id="strNode" /><INPUT TYPE="button" value="添加节点" onclick="addItem()" />
<hr>
<OBJECT ID="TreeView" WIDTH="600" HEIGHT="400" CLASSID="CLSID:C74190B6-8589-11D1-B16A-00C0F0283628">
</OBJECT>
<SCRIPT LANGUAGE="JavaScript">
<!--
    function init() {
        TreeView.LineStyle = 1;
        TreeView.Style = 7;
    }
//-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript" for="TreeView" event="Click">
<!--
    if (TreeView.Nodes.Count > 0) {
        index = TreeView.SelectedItem.index;
        caption.value = TreeView.SelectedItem.Text;
    }
//-->
</SCRIPT>
<SCRIPT LANGUAGE="VBScript">
<!--
    Dim index
    Dim strNodeText
    Dim strCaption
    Sub addItem()
        On Error Resume Next
       
        strNodeText = strNode.value       
        strCaption = caption.value
        If Len(strNodeText)=0 Then Exit Sub
        If Len(caption.value)>0 Then
            TreeView.Nodes.Add index, 4, , strNodeText
        Else
            TreeView.Nodes.Add , 0, ,strNodeText
        End If
    End Sub
    Sub delItem()
        On Error Resume Next
        If Len(strCaption)>0 Then
            TreeView.Nodes.Remove index
        End if
    End Sub
//-->
</SCRIPT>
</BODY>
</HTML>


2.时间控件

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Microsoft Date and Time Picker Control, version 6.0 </TITLE>
</HEAD>

<BODY onload="init()">
<OBJECT ID="DatePicker" WIDTH="120" HEIGHT="25" codebase="http://activex.microsoft.com/controls/vb6/MSComCt2.cab"   CLASSID="CLSID:20DD1B9E-87C4-11D1-8BE3-0000F8754DA1">
</OBJECT>
<div id="result"></div>
<SCRIPT LANGUAGE="JavaScript">
<!--
    function init() {
        DatePicker.CalendarBackColor = 8421631;
        DatePicker.CalendarForeColor = 65280;
        DatePicker.CalendarTitleBackColor = 16744576;
        DatePicker.CalendarTitleForeColor = 65535;
        DatePicker.CalendarTrailingForeColor = 255;
        DatePicker.CheckBox=true;
    }
//-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript" for="DatePicker" event="Change">
<!--
    result.innerHTML = "GMT:" + DatePicker.Value + "<BR>Custom:" + DatePicker.Year + "年" + DatePicker.Month + "月" + DatePicker.Day + "日";
//-->
</SCRIPT>
</BODY>
</HTML>


3.滚动条控件

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Microsoft Slider Control, version 6.0 </TITLE>
</HEAD>

<BODY onload="init()">
当前值:<input type="text" id="currentValue" /> <input type="button" value="设值" onclick="setValue()" /><BR />
最大值:<input type="text" id="maxValue" /> <input type="button" value="设值" onclick="setMax()" /><BR />
<OBJECT ID="Slider" WIDTH="300" CLASSID="CLSID:F08DF954-8592-11D1-B16A-00C0F0283628">
</OBJECT>
<SCRIPT LANGUAGE="JavaScript">
<!--
    function init() {
        currentValue.value=0;
        Slider.max=100;
        maxValue.value=Slider.max;
    }

    function setValue() {
        Slider.value=currentValue.value;
    }
   
    function setMax() {
        Slider.max=maxValue.value;
    }

//-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript" for="Slider" event="Scroll">
<!--
    currentValue.value=Slider.value;
//-->
</SCRIPT>
</BODY>
</HTML>


4.windows对话框控件

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Microsoft Common Dialog Control, version 6.0 </TITLE>
</HEAD>

<BODY>
<input type="button" value="打开" onclick="showOpen()" />
<input type="button" value="颜色" onclick="showColor()" />
<input type="button" value="保存" onclick="showSave()" />
<input type="button" value="帮助" onclick="showHelp()" />
<input type="button" value="打印" onclick="showPrinter()" />
<input type="button" value="字体" onclick="showFont()" />
<BR /><BR />
[结果]:
<BR />
<div id="result" width="100%"></div>
<OBJECT ID="CDC" CLASSID="CLSID:F9043C85-F6F2-101A-A3C9-08002B2F49FB">
</OBJECT>
<SCRIPT LANGUAGE="JavaScript">
<!--   

    function showHelp() {
        CDC.ShowHelp();       
    }
   
    function showPrinter() {
        CDC.ShowPrinter();   
    }
   
    function showOpen() {
        CDC.InitDir = "%windir%";
        CDC.Filter = "文本文件(*.txt)|*.txt|全部文件(*.*)|*.*";
        CDC.DialogTitle = "打开文件";
        CDC.ShowOpen();
        result.innerText = "文件名:" + CDC.FileName;
    }

    function showSave() {       
        CDC.DialogTitle = "保存结果";
        CDC.Filter = "文本文件(*.txt)|*.txt|全部文件(*.*)|*.*";
        CDC.ShowSave();
        result.innerText = "文件名:" + CDC.FileName;   
    }

    function showFont() {
        CDC.ShowFont();
        result.innerText = "字体:" + CDC.FontName + ",大小:" + CDC.FontSize + CDC.FontBold?",粗体":"" + CDC.FontItalic?",斜体":"" ;
    }
       
    function showColor() {
        CDC.ShowColor();
        result.innerHTML = "<font color='#" + CDC.color.toString(16) + "'>颜色值(RGB):#" + CDC.color.toString(16) + ",颜色值(Long):" + CDC.color + "</font>";       
    }
//-->
</SCRIPT>
</BODY>
</HTML>


5.tab 控件

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Microsoft TabStrip Control, version 6.0 </TITLE>
</HEAD>

<BODY onload="init()">
<input type="text" value="" id="result" />
<BR />
<OBJECT ID="TabStrip" WIDTH="400" HEIGHT="300" CLASSID="CLSID:1EFB6596-857C-11D1-B16A-00C0F0283628">
</OBJECT>
<SCRIPT LANGUAGE="JavaScript">
<!--
    function init() {
        TabStrip.Tabs.Clear();
        TabStrip.MultiRow=true;
//        TabStrip.Tabs.Add ([pvIndex],[pvKey],[pvCaption],[pvImage]);
        TabStrip.Tabs.Add (1, "tab1", "笔");
        TabStrip.Tabs.Add (2, "tab2", "墨");
        TabStrip.Tabs.Add (3, "tab3", "纸");
        TabStrip.Tabs.Add (4, "tab4", "砚");
    }
//-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript" for="TabStrip" event="Click">
<!--
    result.value = TabStrip.SelectedItem.Caption;
//-->
</SCRIPT>
</BODY>
</HTML>


6进度条控件

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Microsoft ProgressBar Control, version 6.0 </TITLE>
</HEAD>

<BODY onload="init()">
<input type="text" id="result" />
<BR />
<OBJECT ID="ProgressBar" WIDTH="300" HEIGHT="10" CLASSID="CLSID:35053A22-8589-11D1-B16A-00C0F0283628">
</OBJECT>
<SCRIPT LANGUAGE="JavaScript">
<!--
    function init() {
        ProgressBar.Max = 100;
        setInterval ("Progressing()",100);
    }
    function Progressing() {
        if (ProgressBar.Value<ProgressBar.Max)
         {
            ProgressBar.Value++;
            result.value = ProgressBar.Value * 100 / ProgressBar.Max + "%" ;
        }       
    }
//-->
</SCRIPT>
</BODY>
</HTML>


豫ICP备12024565号-1   E-mail:admin@hlc8.com