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

最新推荐文章于 2022-10-13 11:27:20 发布

jiangxng

最新推荐文章于 2022-10-13 11:27:20 发布

阅读量1.7k

点赞数

文章标签： button input function null behavior table

本文链接：https://blog.csdn.net/jiangxng/article/details/2313633

版权

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

id="alimamaf0.821382814159602" style="WIDTH: 336px; HEIGHT: 280px" border="0" name="alimamaf0.821382814159602" marginwidth="0" marginheight="0" src="http://p.mm.cn.yahoo.com/alimama.php?i=mm_10903758_917576_1894763&u=http%3A%2F%2Fwww.dochu.org%2Fa-JavaScript-3-304-2646847.html&w=336&h=280&re=1280x800&sz=36&r=http%3A%2F%2Fwww.baidu.com%2Fs%3Fwd%3D%25E5%25A6%2582%25E4%25BD%2595%25E8%25B0%2583%25E7%2594%25A8htc%25E6%2596%2587%25E4%25BB%25B6%26cl%3D3%26ie%3Dutf-8&cg=2948677bebf12c85444ca3304a55844d&pro=82532825&cas=pro&cah=800&caw=1280&ccd=32&ctz=8&cbh=309&cbw=1259&cja=1&cf=9.0&iss=0&t=2&tc=0044DD&dc=275689&bgc=FFFFFF&bdc=FFFFFF&lc=C1C1C1&bmc=FFFFFF&as=0&bgp=0&ic=1&k=%E5%A6%82%E4%BD%95%E8%B0%83%E7%94%A8htc%E6%96%87%E4%BB%B6&tt=%E5%A6%82%E4%BD%95%E5%9C%A8htm%E6%96%87%E4%BB%B6%E4%B8%AD%E8%B0%83%E7%94%A8.htc%E6%96%87%E4%BB%B6%E4%B8%AD%E7%9A%84js%E5%87%BD%E6%95%B0-web%E5%BC%80%E5%8F%91-JavaScript-%E5%8D%9A%E5%A3%ABIT%E5%9F%BA%E7%A1%80%E6%9C%8D%E5%8A%A1&sx=516&sy=301&ac=7921&pf=1" frameborder="0" scrolling="no">

Reader_1 »
<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="选中左边列表所有的项" οnclick="eee.selectAll()"><br>
<input type="button" value="取消左边列表中选中的项" οnclick="eee.selectNone()"><br>
<input type="button" value="删除左边列表中选中的项" οnclick="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>

Reader_2 »
list.htc

/***************************************************************************************
* list1.0
* 此代码版权归海洋工作室ocean所有，您可以非商业目的使用、复制、修改此代码，但需要
* 保留本工作室的版权信息。如果您使用、修改此代码为商业目的，请联系本工作室取得使用许可。
*
* 如果您对本程序有什么建议，请email to:ocean@forever.net.cn。
*
* 海洋工作室
* http://www.oceanstudio.net
* ocean(ocean@forever.net.cn) 制作
*****************************************************************************************/
//删除所有选中的项
<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>