`
01jiangwei01
  • 浏览: 548611 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

模仿select,类似select的下拉框。

HTML工作 
阅读更多
工作需要把页面中的所有select标签替换为其他类似的下拉框，模仿了好久，终于成功。感到非常欣慰，特写出来分享一下。有更好建议的可以提出来，把这个小东东改的更好一些。 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="js中 regedit_name,regedit都是为了方便点击其他地方，收缩下拉框的">
  <META NAME="Description" CONTENT="模拟select,使用说明：1:id = ‘ComboBox’ 必须要保留，这样可以当点击其他地方时收缩列表,但是可以修改;2: id='DropDown_1',否则当点击该节点下拉框会隐藏">
 </HEAD>
 <BODY>
<div>
	<TABLE  id = "ComboBox2" cellSpacing=1 cellPadding=0 border=0 bgColor="black" 
			style="display:inline;" >
			<TR bgColor = '#FFFFFF'>
				<TD style="width:9">
				<input  type='text' style="height:18;border:1 ;width:80px" ></input>
				</TD>
				<TD>
					<TABLE  id = "DropDown" cellSpacing=0 cellPadding = 0 border = 0 bgColor="#DBD8D1"	
						style="display:inline;cursor:default;"
						onmousedown = "fnMousedown()"
						>
						<TR>
							<TD style="font-family: webdings;font-size:8px;text-align: center;width:13px;height:18px;" id="DropDown_1">6</TD>
						</TR>
					</TABLE>
				</TD>
			</TR>
	</TABLE>
	<TABLE  cellSpacing=1 cellPadding=0  border=1 bgColor="#FFFFFF" 
		style="display:'';border-color:black;border-collapse: collapse;border-style:solid;font-size:9pt;cursor:default; solid #666666;" 
	></TABLE>
</div>
<SCRIPT LANGUAGE="JavaScript">
window.document.attachEvent("onclick", chkstat);
var regedit_name = ["ComboBox2"];
var regedit = {};
for(var i=0;i<regedit_name.length;i++)
{
	regedit[regedit_name[i]] = document.getElementById(regedit_name[i]);
}
function chkstat()
{
	var oEl = event.srcElement;
	var el_id = oEl.id;
	//alert();
	if(el_id)//针对有id 的对象
	{	
		var ComboBox_el = regedit[el_id];
		if(ComboBox_el)
		{
			var ComboBox_nextSibling = ComboBox_el.nextSibling;
			if(ComboBox_nextSibling.style.display != "none")
			{
				ComboBox_nextSibling.style.display = "none";
			}
		}
	}
	else
	{
		for(var i=0;i<regedit_name.length;i++)
		{
			var combox_1 = document.getElementById(regedit_name[i]);
			if(!combox_1)  return;
			var combox_sibling = combox_1.nextSibling;

			if(combox_sibling)if(combox_sibling.style.display != "none")
			{
				combox_sibling.style.display = "none";
			}
		}
	}
}
function DropListClick()
{
	obj = event.srcElement;
	var DropList_1 = obj.parentNode.parentNode.parentNode;
	var  ComboBoxIpt = DropList_1.previousSibling.firstChild.firstChild.firstChild.firstChild
	ComboBoxIpt.value = obj.innerText;
	DropList_1.style.display = "none";
	ComboBoxIpt.select();
	DropDown.style.color = '#000000';
}
function fnMousedown()
{
	var aNodes=[1,2,3,4,5,6];
	var srcelement =  event.srcElement;
	if(!srcelement){  return;}
	var ComboBox = srcelement.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode;
	var DropList = ComboBox.nextSibling;
	if(DropList)
	{
		f_PublicCreateDropListData(DropList,aNodes);//向DropList里添加数值
		DropList.style.width = (DropList.offsetWidth < ComboBox.offsetWidth) ? ComboBox.offsetWidth : DropList.offsetWidth;
		DropList.style.left = getx(ComboBox);
		DropList.style.top = gety(ComboBox)+19;
		DropList.style.display = '';	
	}
}

function f_PublicCreateDropListData(DropList,aNodes,redata)//向DropList中插入td ,option
{
	if(!redata)
		var re=new RegExp("^");
	else
		var re=new RegExp("^"+redata,"i");

	var otd = null;
	var No=DropList.rows.length;
    if(No)for(i=0;i<No;i++)DropList.deleteRow();
	for(var i=0;i<aNodes.length;i++)
	{
		if(re.test(aNodes[i])==true)
		{
			otd = DropList.insertRow().insertCell();
			otd.style.height = "12px";//设定td高度
			otd.style.borderColor =  "black";
			otd.innerHTML = aNodes[i];//设定td内的数值
			otd.attachEvent("onmouseover",DropListOver);//td绑定事件
			otd.attachEvent("onmouseout",DropListOut);
			otd.attachEvent("onclick",DropListClick);
		}
	}

}
function DropListOver()
{
	obj = event.srcElement;
	obj.bgColor='highlight';
	obj.style.color='#FFFFFF';
	obj.style.cursor='default';
}
function DropListOut()
{
	obj = event.srcElement;
	obj.bgColor='#FFFFFF';
	obj.style.color='#000000';
}

function getx(e)
{
	var l=e.offsetLeft;
	while(e=e.offsetParent){
		l+=e.offsetLeft;
	}
	return l;
}
function gety(e)
{
	var t=e.offsetTop;
	while(e=e.offsetParent){
		t+=e.offsetTop;
	}
	return t;
}
</SCRIPT>
 </BODY>
</HTML>
0
顶
0
踩
分享到：
| sql connect by start with
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    精美漂亮的实用div+css模仿select下拉框控件

    2. **模仿Select控件** HTML的`&lt;select&gt;`元素是网页表单中的一种，通常用于提供一组选项让用户选择。但是，其默认样式在不同浏览器之间存在差异，且样式定制较为复杂。通过jQuery和CSS，我们可以自定义下拉框的外观...

    自定义-js模仿下拉框效果

    自定义-js模仿下拉框效果 测过IE6/7/8 ff5.0 chremo 12.0. 是用li来模仿的,隐藏存在一个select方便form提交,其实既然只是获取选定后的数据,也可以用隐藏的input:text 代替 (如果出现什么异常可以给本人留言)

    原生js text文本框模拟select下拉框美化点击下拉菜单选

    原生js text文本框模拟select下拉框美化点击下拉菜单选 原生js text文本框模拟select下拉框美化点击下拉菜单选 原生js text文本框模拟select下拉框美化点击下拉菜单选 原生js text文本框模拟select下拉框美化点击...

    Vue.js仿Select下拉框效果

    在Vue.js中，为了实现一个仿Select下拉框的效果，我们可以自定义组件来达到这个目的。这个过程涉及到了Vue的组件系统、数据绑定、事件处理和条件渲染等核心概念。以下将详细介绍如何使用Vue.js创建这样一个仿Select...

    jQuery模拟select下拉框插件.zip

    "jQuery模拟select下拉框插件"就是这样一个工具，它提供了更丰富的交互性和定制性，相比原生的HTML下拉框控件，能够为用户带来更好的体验。下面将详细探讨这个插件的原理、功能以及如何使用。 首先，原生的`&lt;select...

    jq写的模拟elementui的select

    1. **结构**：创建一个HTML结构，包含一个基础的Select元素，以及可能的搜索框、下拉按钮等组件，模仿ElementUI Select的外观。 2. **样式**：使用CSS来调整Select的样式，使其与ElementUI保持一致，包括颜色、字体...

    模仿google下拉框模仿google下拉框

    在IT行业中，模仿Google下拉框是一项常见的前端开发任务，主要目的是为了提供用户友好的搜索体验，提升网站或应用的交互性。Google的下拉框以其高效、智能和易用性著称，许多开发者尝试复制这种功能以实现类似的效果...

    ul模仿select选框

    为了使这个模拟的下拉框具有交互性，我们需要使用JavaScript（例如jQuery）来处理点击事件，并更新选中的选项： ```javascript $(document).ready(function() { $('#customSelect li').click(function() { $(this...

    固定宽度下拉列表select中option内容显示不全问题解决方法

    例如，可以创建一个自定义的下拉列表组件，该组件模仿`&lt;select&gt;`的行为，但允许我们自定义样式和交互。通过这种方式，我们可以设置足够的宽度来容纳最长的`&lt;option&gt;`内容，或者实现滚动功能以查看完整文本。这种方法...

    div模拟下拉菜单(select)jquery插件.gz

    在这个"div模拟下拉菜单(select)jquery插件.gz"压缩包中，包含的就是这样一个基于`div`和jQuery的自定义下拉菜单解决方案。 首先，`demo.html`是演示页面，它展示了如何在实际项目中应用这个插件。这个页面会包含一...

    Div 制作的SELECT

    用DIV模仿SELECT下拉框 function replaceSelects() { try{ for (i=0;i;i++){ // 隐藏 select selects[i].style.display = 'none'; select_divTag = document.createElement('div'); select_divTag.id = ...

    jquery+css实现的ul+li模仿下拉框表单美化效果源码.zip

    这个"jquery+css实现的ul+li模仿下拉框表单美化效果源码.zip"就是一个示例，展示了如何利用jQuery和CSS技术来模拟下拉框的交互与视觉效果。 首先，jQuery是一个轻量级的JavaScript库，它简化了DOM操作、事件处理、...

    自写js 仿下拉框 demo

    这个"自写js 仿下拉框 demo"项目就是这样一个例子，它通过JavaScript来模仿下拉框的功能，提供了更灵活的定制性。 首先，让我们了解一下JavaScript（简称JS）的基本概念。JS是一种轻量级的解释型编程语言，主要用于...

    带chekcbox功能的下拉框

    带chekcbox功能的下拉框,描述：模仿select，对下拉选项添加Checkbox框。 http://blog.csdn.net/fly2004jun/article/details/7711964

    mui select hml安卓仿写

    2. **交互行为**：MUI的`select`会模仿原生应用中的下拉列表弹出方式，通常会以一个可展开的列表形式出现，而不是简单的下拉框。用户点击后，会显示预设的选项列表，用户可以从中选择一项。 3. **事件处理**：为了...

    js select框美化插件设置多种风格select美化列表框

    2. **Mac 风格select框**：Mac风格的select框模仿了苹果系统中的下拉列表样式，可能包括半透明背景、圆角和特定的字体样式。这种风格的实现需要对按钮和选项列表进行精细的定制，以保持与苹果界面的一致性。此外，...

    android 模仿qq登录界面EditText下拉框记住账号和密码 editText+popupwindow+sqlite方式实现

    - 数据读取：当需要在PopupWindow中显示已保存的账号时，执行SQL查询（如`SELECT`语句）获取数据，转换为列表，供PopupWindow使用。 4. **PopupWindow实现**： - 自定义布局：创建一个包含ListView或RecyclerView...

    guns下拉自定义获取

    通过分析和模仿示例，我们可以更好地掌握guns项目中select.tag的自定义获取方法。 总之，guns项目中的select.tag自定义获取功能为开发者提供了更大的灵活性，使得我们可以根据实际需求实现动态加载和智能筛选，从而...

    jQuery下拉框四级联动菜单选择代码

    在IT行业中，jQuery是一种广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。...对于学习者而言，理解并模仿这样的代码可以帮助他们提升对前端开发技术的理解和应用能力。

Magicbox
Global site tag (gtag.js) - Google Analytics