<!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()" /> 全选 <input
id="checkboxSelectedReverse" type="checkbox"
onclick="selectedReverse()" /> 反选
<a href="#" id="close">点击关闭</a>
</div>
</div>
<script type="text/javascript">BtPopShow("open","pop");BtPopHide("close","pop")</script>
</body>
</html>
分享到:
相关推荐
"Android CheckBox墨迹设置界面"是一个关于如何模仿墨迹天气应用中的设置界面,利用CheckBox控件进行自定义设计的实践案例。在这个主题中,我们将深入探讨如何利用Android的CheckBox、Selector以及相关的布局技术来...
CheckBox控件在界面中通常表现为一个小方框,里面可能有一个勾选标记。它有三种状态:未选中(No Check),已选中(Checked),和禁用(Disabled)。在PowerBuilder中,我们可以使用SetState方法来改变CheckBox的...
通过这种方式,我们可以轻松地将任何字体图标库中的图标应用于WPF的CheckBox控件,创造出独特且美观的用户界面。在压缩包文件“WpfChekBox”中,可能包含了一个示例项目,演示了如何具体实施这一过程。通过查看并...
在Android开发中,"Android 多行多列CheckBox"是一个常见的需求,特别是在创建表单、设置界面或如你所述的员工报餐界面等场景。CheckBox是Android提供的一个UI组件,用于让用户选择一个或多个选项。当需要在界面上...
本教程将深入讲解如何在WinForms中自定义CheckBox控件,以满足特定的界面或功能需求。 首先,自定义CheckBox控件主要是为了扩展其默认功能,比如改变其外观、添加额外的事件处理或者提供更复杂的交互逻辑。在VS2005...
在Windows Forms(WinForm)开发中,CheckBox控件是一个基础且重要的元素,用于实现用户界面中的复选框功能。在.NET 2.0版本和Visual Studio 2005(VS2005)环境下,开发者可以利用丰富的特性来定制和美化这些控件,...
当这两者结合时,我们得到了"带CheckBox的TreeView控件",这是一个功能强大的用户界面元素,特别适用于需要用户进行多选操作的情况,比如文件管理器、设置菜单等。 在.NET Framework或WPF(Windows Presentation ...
在Windows Presentation Foundation (WPF) 中,CheckBox控件经常用于用户界面中提供多选选项。在设计一个CheckBox组时,可能会遇到需要实现全选功能的需求,即点击一个主CheckBox可以同时选择或取消选择所有子...
在Android开发中,CheckBox是用户界面(UI)中不可或缺的组件之一,它允许用户进行多选操作,非常适合在列表或选项中提供多个可选项目。本教程将深入讲解如何在Android应用中有效地使用CheckBox。 首先,我们需要...
在IT领域,Checkbox(复选框)是一种常见的用户界面元素,广泛应用于网页、桌面应用程序以及移动应用中。Checkbox允许用户从多个选项中选择一个或多个,以表达他们的选择或者设置状态。本示例将深入探讨Checkbox的...
WebApplication1可能是ASP.NET的一个项目,它包含一个或多个网页,其中一个页面可能有包含Checkbox和DataGridView的界面。在ASP.NET中,Checkbox控件通常用`<asp:CheckBox>`标记表示,而DataGridView则是用来显示...
在C#编程中,`Checkbox`控件是用于创建用户界面的基本元素,它允许用户进行是/否选择。然而,Windows Forms默认的`Checkbox`样式可能无法满足所有设计需求,比如有时我们需要自定义选框的大小、添加图像或进行其他...
总的来说,JavaFX的ComboBox通过自定义`ListCell`和监听事件,可以轻松地实现内嵌Checkbox的功能,从而增加用户界面的交互性和复杂度。这种设计方式让开发者能够根据需求自由地定制UI组件,创建出符合业务逻辑的定制...
在IT领域,"带checkbox的树"(Checkbox Tree)是一种常见的UI组件,广泛应用于数据管理和配置界面中。这种组件结合了树形结构和复选框的功能,用户可以通过选择或取消选择节点来对数据进行多选操作,使得在层级关系...
在VC++编程环境中,MFC(Microsoft Foundation Classes)库提供了一种方便的方式来创建Windows应用程序,其中CButton类用于处理各种按钮控件,包括CheckBox。在默认情况下,CheckBox控件的样式是固定的,但通过...
在IT领域,UI设计和开发是一项至关重要的工作,其中DuiLib是一个常见的Windows桌面应用程序用户界面库。这个库提供了一套丰富的控件和组件,帮助开发者构建美观且功能丰富的应用界面。"DuiLib_CheckBox"是针对DuiLib...
在Flex编程中,动态生成组件是一项常见的需求,特别是在创建用户界面时,可能需要根据后端数据自动生成元素,如复选框(Checkbox)组。"Flex动态生成checkbox组"这个主题,就是关于如何在Flex应用中利用代码动态创建...
另外,还可以设置其 Font、Color 和 Style 属性,以匹配整体界面的风格。 5. **响应用户输入** 当用户在 StringGrid 中交互时,可能需要实时更新数据模型。例如,如果 Checkbox 代表用户的选择,那么每次状态改变...
- **用户体验**:对于用户来说,良好的界面设计和交互体验非常重要。例如,可以通过CSS美化`Checkbox`的外观,或者使用JavaScript/AJAX实现更加流畅的交互效果。 通过以上介绍和示例,我们可以看到在ASP.NET中使用...
除上面这个问题外,还有一点,当双击treeview 的checkbox后,如果再去单击或双击该界面中除这个treeview外的任何部分,系统会忽略第一次点击事件。举例来说,一个窗口中,有一个treeview,还有一个ok按钮,当我双击...