web上的一些通用对话框[摘]

GeneralDlg.htm

<input type="text" style="behavior:url('GeneralDlg.htc');">
<input type="text" style="behavior:url('GeneralDlg.htc');" defineType="FontDlg">
<input type="text" style="behavior:url('GeneralDlg.htc');" defineType="OpenDlg">
<input type="text" style="behavior:url('GeneralDlg.htc');" defineType="SaveDlg">

GeneralDlg.htc

<public:property name="defineType">
<public:attach event=oncontentready onevent=initGeneralDlg()>
<script>
//默认颜色
var strColor="";
//默认字体
var strFont="";
//对象
var vColorObject=null;
var vFontObject=null;
var vFontDiv=null;
var vOpenObject=null;
var vSaveObject=null;
//参数[ColorDlg,FontDlg,OpenDlg,SaveDlg]
var strDefineType="";
function initGeneralDlg()

 //初始化组件
 if(defineType)
 {strDefineType=defineType;}
 else
 {strDefineType="ColorDlg";}
 initByType(strDefineType);
 //事件绑定
 element.attachEvent("onmousedown",onMouseDown); 
}
//元素中鼠标按下[显示面板]
function onMouseDown()
{
 if(strDefineType=="ColorDlg")
 {  
  strColor=chooseColor();
  element.value=strColor;
  element.style.backgroundColor=strColor;
 }
 else if(strDefineType=="FontDlg")
 {
  chooseFont();
 }
 else if(strDefineType=="OpenDlg")
 {
  try
  {
   vOpenObject.CancelError=true;
   vOpenObject.ShowOpen();
   element.value=vOpenObject.filename;
  }
  catch(e)
  {
   //window.confirm(e);
  }
 }
 else if(strDefineType=="SaveDlg")
 {
  try
  {
   vSaveObject.CancelError=true;
   vSaveObject.ShowSave();
   element.value=vSaveObject.filename;
  }
  catch(e)
  {
   //window.confirm(e);
  }
 }
}
//颜色滴管
function chooseColor()
{
 var strReturnColor=vColorObject.ChooseColorDlg(strColor.substr(1));
 strReturnColor=strReturnColor.toString(16);
 if(strReturnColor.length<6)
 {
    var strTempString="000000".substring(0,6-strReturnColor.length);
    strReturnColor=strTempString.concat(strReturnColor);
 }
 return "#"+strReturnColor;
}
//字体选择
function chooseFont()
{
 vFontDiv.style.display="";
 vFontDiv.style.left=getElementDefineLeft(element);
 vFontDiv.style.top=getElementDefineTop(element)+element.offsetHeight;
 element.document.attachEvent('onmousedown',onDocumentMouseDown);
}
function onFontChange()
{
 var vObject=window.event.srcElement;
 strFont=vObject.options[vObject.selectedIndex].text;
 element.value=strFont;
 element.style.fontFamily=strFont;
}
function onDocumentMouseDown()
{
 if(vFontDiv.contains(event.srcElement))
 {
  return;
 }
 if(event.srcElement==element)
 {
  return;
 }
 element.value=strFont;
 element.style.fontFamily=strFont;
 vFontDiv.style.display="none";
 element.document.detachEvent("onmousedown",onDocumentMouseDown);
}
function initByType(strType)
{
 element.readOnly="true";
 if(strType=="ColorDlg")
 {
  if(element.value)
  {strColor=element.value;}
  else
  {strColor="#FFFFFF";}
  element.style.backgroundColor=strColor;
  vColorObject=document.createElement("object");
  vColorObject.classid="clsid:3050F819-98B5-11CF-BB82-00AA00BDCE0B";
  vColorObject.codeBase="";
  vColorObject.style.width=0;
  vColorObject.style.height=0;
  window.document.body.insertAdjacentElement("afterbegin",vColorObject);
 }
 else if(strType=="FontDlg")
 {
  if(element.value)
  {strFont=element.value;}
  else
  {strFont="宋体";}
  element.style.fontFamily=strFont;
  
  vFontObject=document.createElement("object");
  vFontObject.classid="clsid:3050F819-98B5-11CF-BB82-00AA00BDCE0B";
  vFontObject.codeBase="";
  vFontObject.style.width=0;
  vFontObject.style.height=0;
  window.document.body.insertAdjacentElement("afterbegin",vFontObject);
  
  vFontDiv=document.createElement("div");
  var vSelect=document.createElement("select");
  vSelect.style.border="1px solid #000000";
  vSelect.length=vFontObject.fonts.count;
  for(kIndex=1;kIndex<=vFontObject.fonts.count;kIndex++)
  {
   vOption=document.createElement("option");
   vOption.value=kIndex;
   vOption.text=vFontObject.fonts(kIndex);
   vSelect.add(vOption);
  }
  vSelect.attachEvent("onchange",onFontChange);
  vFontDiv.appendChild(vSelect);
  window.document.body.insertAdjacentElement("afterbegin",vFontDiv);
  vFontDiv.style.display="none";
  vFontDiv.style.position="absolute";
 }
 else if(strType=="OpenDlg")
 {
  vOpenObject=document.createElement("object");
  vOpenObject.classid="clsid:F9043C85-F6F2-101A-A3C9-08002B2F49FB";
  vOpenObject.codeBase="http://activex.microsoft.com/controls/vb5/comdlg32.cab";
  vOpenObject.style.width=0;
  vOpenObject.style.height=0;
  window.document.body.insertAdjacentElement("afterbegin",vOpenObject);
 }
 else if(strType=="SaveDlg")
 {
  vSaveObject=document.createElement("object");
  vSaveObject.classid="clsid:F9043C85-F6F2-101A-A3C9-08002B2F49FB";
  vSaveObject.codeBase="http://activex.microsoft.com/controls/vb5/comdlg32.cab";
  vSaveObject.style.width=0;
  vSaveObject.style.height=0;
  window.document.body.insertAdjacentElement("afterbegin",vSaveObject);
 }
}
//取元素绝对位置Left
function getElementDefineLeft(vObject)
{
 var iElementLeft=vObject.offsetLeft;
 while(vObject=vObject.offsetParent)
 {
  iElementLeft+=vObject.offsetLeft;
 }
 return iElementLeft;
}
//取元素绝对位置Top
function getElementDefineTop(vObject)
{
 var iElementTop=vObject.offsetTop;
 while(vObject=vObject.offsetParent)
 {
     iElementTop+=vObject.offsetTop;
 }
 return iElementTop;
}
</script>
</public:attach>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
web端交互原型通用组件是指为开发者提供的一系列可重复使用的、针对网页交互设计的组件。这些组件具有可定制性、易用性和可扩展性,旨在帮助开发者以更高效的方式创建全面且具有专业水平的网页设计。 常见的web端交互原型通用组件包括但不限于以下几个方面: 1. 导航栏组件:用于导航网站的各个页面,通常包括菜单、LOGO和搜索框等元素。导航栏组件具有多样化的布局样式,能够适应不同风格的网站设计。 2. 图片轮播组件:用于展示多张图片的轮播效果,提供自动播放、手动切换、切换效果等多种选项。开发者可以根据需求定制轮播组件的样式和行为。 3. 表单组件:常见的表单组件包括输入框、下拉选择框、单选框和复选框等。这些组件可以方便地收集用户的输入信息,并在交互过程中提供验证和反馈功能。 4. 模态框组件:用于在页面上弹出对话框,通常用于显示重要的信息、警告或弹出用户输入的表单。模态框组件具有灵活的样式和动画效果,同时也支持用户交互操作,如关闭、确认等。 5. 视频播放组件:用于在页面上播放视频内容,支持播放控制、全屏显示等功能。视频播放组件能够嵌入到网页中,并提供多种自定义选项,如播放器样式、视频源和尺寸等。 总之,web端交互原型通用组件是为了简化网页设计和开发过程而提供的可重复使用的组件,能够提高开发效率和用户体验。开发者可以根据自己的需求选择和定制这些组件,以创建出符合预期且具有良好交互体验的网页设计。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值