如何在htm文件中调用.htc文件中的js函数

<html>
<head>
<style type="text/css">
TABLE {
width:100%;
}
TD {
text-align:center;
}
SELECT {
behavior:url("list.htc");width:100px;height:200px;
}
INPUT {
behavior:url("list.htc")
}
</style>
</head>
<body>
<table>
<tr>
<td colspan="3">删除移动的项、检查重复项、按照value排序（从小到大）</td>
</tr>
</tr>
<td>
<select id="aaa" multiple ref="bbb" order="value" deleted check>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</td>
<td>
<input type="button" value="全部选择" ref="aaa" selectall><br>
<input type="button" value="    > >    " ref="aaa"><br>
<input type="button" value="    < <    " ref="bbb"><br>
<input type="button" value="全部取消" ref="bbb" selectall><br>
</td>
<td>
<select id="bbb" multiple ref="aaa" order="value" deleted check>
<option value="7">7</option>
</select>
</td>
</tr>
</table>
<hr>
<table>
<tr>
<td colspan="3">不删除移动的项、不检查重复项、按照ord倒序（从大到小）</td>
</tr>
</tr>
<td>
<select id="ccc" multiple ref="ddd" order="ord" desc>
<option value="1" ord="1">1</option>
<option value="2" ord="5">2</option>
<option value="3" ord="2">3</option>
<option value="4" ord="6">4</option>
<option value="5" ord="3">5</option>
<option value="6" ord="7">6</option>
</select>
</td>
<td>
<input type="button" value="全部选择" ref="ccc" selectall><br>
<input type="button" value="    > >    " ref="ccc"><br>
<input type="button" value="    < <    " ref="ddd"><br>
<input type="button" value="全部取消" ref="ddd" selectall><br>
</td>
<td>
<select id="ddd" multiple ref="ccc" order="ord" desc>
<option value="7" ord="4">7</option>
</select>
</td>
</tr>
</table>
<hr>
<table>
<tr>
<td colspan="3">不删除移动的项、检查重复项、按照ord倒序（从大到小）</td>
</tr>
</tr>
<td>
<select id="eee" multiple ref="fff" order="ord" desc check>
<option value="1" ord="1">1</option>
<option value="2" ord="5">2</option>
<option value="3" ord="2">3</option>
<option value="4" ord="6">4</option>
<option value="5" ord="3">5</option>
<option value="6" ord="7">6</option>
</select>
</td>
<td>
<input type="button" value="全部选择" ref="eee" selectall><br>
<input type="button" value="    > >    " ref="eee"><br>
<input type="button" value="    < <    " ref="fff"><br>
<input type="button" value="全部取消" ref="fff" selectall><br>
<input type="button" value="选中左边列表所有的项" onclick="eee.selectAll()"><br>
<input type="button" value="取消左边列表中选中的项" onclick="eee.selectNone()"><br>
<input type="button" value="删除左边列表中选中的项" onclick="eee.deleted()"><br>
</td>
<td>
<select id="fff" multiple ref="eee" order="ord" desc check>
<option value="7" ord="4">7</option>
</select>
</td>
</tr>
</table>
</body>
</html>

解决方案 »

  1.   

    list.htc/***************************************************************************************
     *                                   list1.0
     *     此代码版权归海洋工作室ocean所有，您可以非商业目的使用、复制、修改此代码，但需要
     * 保留本工作室的版权信息。如果您使用、修改此代码为商业目的，请联系本工作室取得使用许可。
     *
     * 如果您对本程序有什么建议，请email to:[email protected]。
     *
     *                                                                          海洋工作室
     *                                                          http://www.oceanstudio.net
     *                                                     ocean([email protected]) 制作
     *****************************************************************************************/
    //删除所有选中的项
    <PUBLIC:METHOD NAME="deleted" />
    //选中所有项
    <PUBLIC:METHOD NAME="selectAll" />
    //取消选中的项
    <PUBLIC:METHOD NAME="selectNone" />
    <PUBLIC:ATTACH EVENT="onclick" ONEVENT="doClick()" />
    <PUBLIC:ATTACH EVENT="ondblclick"  ONEVENT="doDblClick()" />
    <script language="JScript">
    //从列表框中删除所有选中的项。如果obj为null，则列表框为自身。
    function deleted(obj) {
    if (obj == null) obj = element;
    if (obj.tagName != "SELECT") return;
    for (var i=obj.options.length-1;i>=0;i--) {
    if (obj.options[i].selected) {
    obj.options.remove(i);
    }
    }
    }
    //选中给定的列表框中所有的项。如果obj为null，则列表框为自身。
    function selectAll(obj) {
    if (obj == null) obj = element;
    if (obj.tagName != "SELECT") return;
    var length = obj.options.length;
    for (var i=0;i<length;i++) {
    obj.options[i].selected = true;
    }
    }
    //取消给定的列表框中所有选中的项。如果obj为null，则列表框为自身。
    function selectNone(obj) {
    if (obj == null) obj = element;
    if (obj.tagName != "SELECT") return;
    var length = obj.options.length;
    for (var i=0;i<length;i++) {
    obj.options[i].selected = false;
    }
    }
    //检查obj列表框中是否已经存在选项opt
    function optionExists(obj,opt) {
    var length = obj.options.length;
    for (var i=0;i<length;i++) {
    if (obj.options[i].text == opt.text && obj.options[i].value == opt.value) //如果一个选项的值和文本与给定的选项相同，则表明存在。
    return true;
    }
    return false; //如果不存在，则返回false
    }
    //将列表框obj1中选中的项添加到obj2列表框中，check=true表示不向obj2中的添加重复项
    function add(obj1,obj2,check) {
    for (var i=0;i<obj1.options.length;i++) {
    if (obj1.options[i].selected) { //如果选项被选中，则需要加入到obj2中。
    if (check) { //需要进行重复性检查
    if (optionExists(obj2,obj1.options[i])) { //如果obj2列表框中存在指定的选项，进行下一个循环
    continue;
    }
    }
    var opt = obj1.options[i].cloneNode(false);
    opt.text = obj1.options[i].text;
    obj2.options.add(opt); //将选项加入到ojb2中。
    }
    }
    }
    //排序，obj为列表框对象，order为排序属性，desc为是否倒序(true-倒序)，采用冒泡算法的改进算法
    function orderList(obj,order,desc) {
    var chg = null;
    var flag = true; //是否进行过交换的标志
    var m = null;
    var n = null;
    var len = obj.options.length - 1;
    for (var j=len;j>0;j--) {
    flag = true;
    for (var k=0;k<j;k++) {
    eval("m = parseFloat(obj.options[k]." + order + ");");
    eval("n = parseFloat(obj.options[k+1]." + order + ");");
    if (desc) { //如果是倒序排列，则交换m和n
    var tt = m;
    m = n;
    n = tt;
    }
    if (m > n) { //如果m > n 交换两个选项
    chg = obj.options[k].cloneNode(false);
    chg.text = obj.options[k].text;
    obj.options[k] = obj.options[k+1].cloneNode(false);
    obj.options[k].text = obj.options[k+1].text;
    obj.options[k+1] = chg.cloneNode(false);
    obj.options[k+1].text = chg.text;
    flag = false; //交换过，设为false
    }
    }
    if (flag) break; //如果一次都没有交还，则退出
    }
    }
    //事件处理
    function doEvent() {
    var obj1 = null; //列表框1变量
    if (window.event.srcElement.tagName == "SELECT") { //如果触发元素是select
    obj1 = window.event.srcElement; //obj为触发的select
    }
    else if (window.event.srcElement.tagName == "OPTION") { //如果触发元素是option
    obj1 = window.event.srcElement.parentElement; //obj为触发元素的父元素select
    }
    else {
    if (typeof(window.event.srcElement.ref) != "undefined") { //如果ref被定义过
    obj1 = window.document.getElementById(window.event.srcElement.ref); //obj为定义的元素。
    if (obj1 == null) return;
    }
    else 
    return;
    }
    if (obj1 == null) return; //如果obj为空，直接返回。
    if (obj1.tagName != "SELECT") return; //如果返回的obj不是列表框，直接返回。
    if (typeof(obj1.ref) == "undefined") return; //没有指定目的列表框，直接返回。
    var obj2 = window.document.getElementById(obj1.ref);
    if (obj2 == null) return; //没有找到目的列表框，直接返回
    if (obj2.tagName != "SELECT") return; //指定的目的不是列表框，返回。
    if (typeof(window.event.srcElement.selectall) != "undefined") { //如果定义了全部选择
    selectAll(obj1);
    }
    var check = (typeof(obj2.check) != "undefined") ? true : false; //判断是否定义了检查重复项
    add(obj1,obj2,check); //在ojb2中添加obj1中选中的项。
    if (typeof(obj1.deleted) != "undefined") { //如果定义了删除原项
    deleted(obj1); //删除原项
    }
    if (typeof(obj2.order) != "undefined") { //指定需要排序
    var order = obj2.order;
    var desc = (typeof(obj2.desc) == "undefined") ? false : true; //判断是否定义了倒序
    orderList(obj2,order,desc); //排序
    }
    }
    //处理单击事件
    function doClick() {
    if (window.event.srcElement.tagName == "SELECT" || window.event.srcElement.tagName == "OPTION") return;
    doEvent();
    }
    //处理双击事件
    function doDblClick() {
    doEvent();
    }
    </script>