`

checkbox界面

 
阅读更多
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax选项卡、隔行换色、弹出层</title>
<style type="text/css">
* {margin:0;padding:0;list-style:none;font-size:12px;line-height:20px;font-family:Arial;}
h1,h2,h3 { font-size:14px; margin:10px 0;}
hr { margin:10px 0; height:1px;clear:both;border:0; background:#c00;}
a:link,a:visited{color:#164A84;text-decoration:none;}
a:hover,a:active{color:#c00;text-decoration:underline;}
table { border-collapse:collapse;border:1px solid #ccc;border-width:1px 1px 0 0; margin-left:20px;}
td,th { padding:5px;border:1px solid #ccc;border-width:0 0 1px 1px;}
</style>
<script type="text/javascript">
function BtHide(id){var Div = document.getElementById(id);if(Div){Div.style.display="none"}}
function BtShow(id){var Div = document.getElementById(id);if(Div){Div.style.display="block"}}

function BtTabRemove(index,head,divs) {

	var tab_heads = document.getElementById(head);
	if (tab_heads) {
	var lis = tab_heads.getElementsByTagName("li"); var as = tab_heads.getElementsByTagName("a");
	for(var i=0;i<as.length;i++){lis[i].className = "";BtHide(divs+"_"+i);if (i==index) {lis[i].className = "current";}}
	BtShow(divs+"_"+index)}
}

function BtPopload(showId){// http://www.codefans.net

	var h = Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight) + 'px';
	var w = document.documentElement.scrollWidth + 'px';
	var popCss = "background:#000;opacity:0.3;filter:alpha(opacity=30);position:absolute;left:0;top:0;overflow:hidden;"
	var exsit = document.getElementById("popBox");
	if (!exsit) {
		pop_Box = document.createElement("div");pop_Box.id = "popBox";
		document.getElementsByTagName("body")[0].appendChild(pop_Box);
		pop_Box.style.cssText = popCss;pop_Box.style.zIndex = "10";
		pop_Box.style.height = h;pop_Box.style.width = w;
		pop_Iframe = document.createElement("iframe");pop_Iframe.id = "popIframe";
		document.getElementsByTagName("body")[0].appendChild(pop_Iframe);	
		pop_Iframe.style.cssText = popCss;pop_Iframe.style.zIndex = "9";
		pop_Iframe.style.height = h;pop_Iframe.style.width = (parseInt(w)-5)+"px";
	}
	BtShow("popIframe");BtShow("popBox");BtShow(showId);
	pop_Win = document.getElementById(showId);
	pop_Win.style.position = "absolute";
	pop_Win.style.zIndex = "11";
	pop_Win.style.top = document.documentElement.scrollTop+document.documentElement.clientHeight/2-pop_Win.offsetHeight/2+ 'px';
	pop_Win.style.left = (document.documentElement.clientWidth/2-pop_Win.offsetWidth/2) + 'px';
}
function BtPopShow(Bid,Did) { 
	var UploadBtn = document.getElementById(Bid);
	if (UploadBtn){UploadBtn.onclick = function() {BtPopload(Did);return false;}}	
}
function BtPopHide(Bid,Did) { 

	var UploadBtn = document.getElementById(Bid);
	if (UploadBtn){UploadBtn.onclick = function() {BtHide(Did);BtHide("popBox");BtHide("popIframe");return false;}}	
}

function selectedAll()
	{
		var flag = document.getElementById("checkboxSelectedAll").checked;
		document.getElementById("checkboxSelectedReverse").checked = false;
		var totalBox = document.getElementsByName("notifyNames");
		for (var i=0; i<totalBox.length; i++) {
			var temp = totalBox[i];
			temp.checked= flag;
		}
	}

	function selectedReverse()
	{
		
		document.getElementById("checkboxSelectedAll").checked = false;
		var totalBox = document.getElementsByName("notifyNames");
		for (var i=0; i<totalBox.length; i++) {
			var temp = totalBox[i];
			temp.checked= !temp.checked;
		}
	}
</script>
</head>

<body style="padding:0 40px;">
代码绝对精简的仿lightbox效果弹出层

<style type="text/css">
#pop { border:8px solid skyblue;width:400px; background:#fff; padding:12px; display:none;}
</style>

<a href="#" id="open" style="margin-left:20px">点击弹出</a>

<div class="pop" id="pop" style="height: 400px; padding-left: 0; padding-right: 0; padding-top: 0">

	<div  style="height: 380px; width: 400px ;overflow: auto">
	<input name="notifyNames" type="checkbox"  />name1<br />
	<input name="notifyNames" type="checkbox"  />name1<br />
	<input name="notifyNames" type="checkbox"  />name1<br />
	<input name="notifyNames" type="checkbox"  />name1<br />
	<input name="notifyNames" type="checkbox"  />name1<br />
	<input name="notifyNames" type="checkbox"  />name1<br />
	<input name="notifyNames" type="checkbox"  />name1<br />
	<input name="notifyNames" type="checkbox"  />name1<br />
	<input name="notifyNames" type="checkbox"  />name1<br />
	<input name="notifyNames" type="checkbox"  />name1<br />
	<input name="notifyNames" type="checkbox"  />name1<br />
	<input name="notifyNames" type="checkbox"  />name1<br />
	<input name="notifyNames" type="checkbox"  />name1<br />
	<input name="notifyNames" type="checkbox"  />name1<br />
	<input name="notifyNames" type="checkbox"  />name1<br />
	<input name="notifyNames" type="checkbox"  />name1<br />
	<input name="notifyNames" type="checkbox"  />name1<br />
	<input name="notifyNames" type="checkbox"  />name1<br />
	<input name="notifyNames" type="checkbox"  />name1<br />
	<input name="notifyNames" type="checkbox"  />name1<br />
	<input name="notifyNames" type="checkbox"  />name1<br />
	<input name="notifyNames" type="checkbox"  />name1<br />
	<input name="notifyNames" type="checkbox"  />name1<br />
	<input name="notifyNames" type="checkbox"  />name1<br />
	<input name="notifyNames" type="checkbox"  />name1<br />
	</div>
	<div style="height: 20px; width">
	<input id="checkboxSelectedAll" type="checkbox"
					onclick="selectedAll()" />&nbsp全选 <input
					id="checkboxSelectedReverse" type="checkbox"
					onclick="selectedReverse()" />&nbsp反选
	<a href="#" id="close">点击关闭</a>
	</div>
</div>

<script type="text/javascript">BtPopShow("open","pop");BtPopHide("close","pop")</script>

</body>
</html>
分享到:
评论

相关推荐

    Android CheckBox墨迹 设置界面

    "Android CheckBox墨迹设置界面"是一个关于如何模仿墨迹天气应用中的设置界面,利用CheckBox控件进行自定义设计的实践案例。在这个主题中,我们将深入探讨如何利用Android的CheckBox、Selector以及相关的布局技术来...

    PB 11.5 CheckBox三种状态的实例

    CheckBox控件在界面中通常表现为一个小方框,里面可能有一个勾选标记。它有三种状态:未选中(No Check),已选中(Checked),和禁用(Disabled)。在PowerBuilder中,我们可以使用SetState方法来改变CheckBox的...

    WPF 自定义CheckBox样式

    通过这种方式,我们可以轻松地将任何字体图标库中的图标应用于WPF的CheckBox控件,创造出独特且美观的用户界面。在压缩包文件“WpfChekBox”中,可能包含了一个示例项目,演示了如何具体实施这一过程。通过查看并...

    Android 多行多列CheckBox

    在Android开发中,"Android 多行多列CheckBox"是一个常见的需求,特别是在创建表单、设置界面或如你所述的员工报餐界面等场景。CheckBox是Android提供的一个UI组件,用于让用户选择一个或多个选项。当需要在界面上...

    C# WinForm 自定义CheckBox

    本教程将深入讲解如何在WinForms中自定义CheckBox控件,以满足特定的界面或功能需求。 首先,自定义CheckBox控件主要是为了扩展其默认功能,比如改变其外观、添加额外的事件处理或者提供更复杂的交互逻辑。在VS2005...

    C#WinForm控件美化CheckBox

    在Windows Forms(WinForm)开发中,CheckBox控件是一个基础且重要的元素,用于实现用户界面中的复选框功能。在.NET 2.0版本和Visual Studio 2005(VS2005)环境下,开发者可以利用丰富的特性来定制和美化这些控件,...

    带CheckBox的TreeView控件

    当这两者结合时,我们得到了"带CheckBox的TreeView控件",这是一个功能强大的用户界面元素,特别适用于需要用户进行多选操作的情况,比如文件管理器、设置菜单等。 在.NET Framework或WPF(Windows Presentation ...

    WPF之CheckBox组的全选设计

    在Windows Presentation Foundation (WPF) 中,CheckBox控件经常用于用户界面中提供多选选项。在设计一个CheckBox组时,可能会遇到需要实现全选功能的需求,即点击一个主CheckBox可以同时选择或取消选择所有子...

    android CheckBox的使用

    在Android开发中,CheckBox是用户界面(UI)中不可或缺的组件之一,它允许用户进行多选操作,非常适合在列表或选项中提供多个可选项目。本教程将深入讲解如何在Android应用中有效地使用CheckBox。 首先,我们需要...

    checkbox的应用示例

    在IT领域,Checkbox(复选框)是一种常见的用户界面元素,广泛应用于网页、桌面应用程序以及移动应用中。Checkbox允许用户从多个选项中选择一个或多个,以表达他们的选择或者设置状态。本示例将深入探讨Checkbox的...

    checkbox实现全选和反选经典例子

    WebApplication1可能是ASP.NET的一个项目,它包含一个或多个网页,其中一个页面可能有包含Checkbox和DataGridView的界面。在ASP.NET中,Checkbox控件通常用`&lt;asp:CheckBox&gt;`标记表示,而DataGridView则是用来显示...

    C#复选框重绘 Checkbox

    在C#编程中,`Checkbox`控件是用于创建用户界面的基本元素,它允许用户进行是/否选择。然而,Windows Forms默认的`Checkbox`样式可能无法满足所有设计需求,比如有时我们需要自定义选框的大小、添加图像或进行其他...

    javafx combox内嵌checkbox

    总的来说,JavaFX的ComboBox通过自定义`ListCell`和监听事件,可以轻松地实现内嵌Checkbox的功能,从而增加用户界面的交互性和复杂度。这种设计方式让开发者能够根据需求自由地定制UI组件,创建出符合业务逻辑的定制...

    checkbox tree 带checkbox的树

    在IT领域,"带checkbox的树"(Checkbox Tree)是一种常见的UI组件,广泛应用于数据管理和配置界面中。这种组件结合了树形结构和复选框的功能,用户可以通过选择或取消选择节点来对数据进行多选操作,使得在层级关系...

    DuiLib_CheckBox

    在IT领域,UI设计和开发是一项至关重要的工作,其中DuiLib是一个常见的Windows桌面应用程序用户界面库。这个库提供了一套丰富的控件和组件,帮助开发者构建美观且功能丰富的应用界面。"DuiLib_CheckBox"是针对DuiLib...

    VC++ CheckBox 自绘

    在VC++编程环境中,MFC(Microsoft Foundation Classes)库提供了一种方便的方式来创建Windows应用程序,其中CButton类用于处理各种按钮控件,包括CheckBox。在默认情况下,CheckBox控件的样式是固定的,但通过...

    Flex动态生成checkbox组

    在Flex编程中,动态生成组件是一项常见的需求,特别是在创建用户界面时,可能需要根据后端数据自动生成元素,如复选框(Checkbox)组。"Flex动态生成checkbox组"这个主题,就是关于如何在Flex应用中利用代码动态创建...

    Delphi Checkbox in StringGrid 使用

    另外,还可以设置其 Font、Color 和 Style 属性,以匹配整体界面的风格。 5. **响应用户输入** 当用户在 StringGrid 中交互时,可能需要实时更新数据模型。例如,如果 Checkbox 代表用户的选择,那么每次状态改变...

    循环动态判断checkbox是否被选中

    - **用户体验**:对于用户来说,良好的界面设计和交互体验非常重要。例如,可以通过CSS美化`Checkbox`的外观,或者使用JavaScript/AJAX实现更加流畅的交互效果。 通过以上介绍和示例,我们可以看到在ASP.NET中使用...

    C# 解决双击TreeView表里checkbox本身Bug问题

    除上面这个问题外,还有一点,当双击treeview 的checkbox后,如果再去单击或双击该界面中除这个treeview外的任何部分,系统会忽略第一次点击事件。举例来说,一个窗口中,有一个treeview,还有一个ok按钮,当我双击...

Global site tag (gtag.js) - Google Analytics