css中的表格-两个listbox实现选项的添加删...-jQuery 插件autocomplete 应用（模拟的下拉菜单）

当前位置: 编程技术>WEB前端

本页文章导读:

▪css中的表格 css中的表格padding是为表格单元格添加填充调整垂直对齐和水平对齐text-alignleft center right justifyvertical-aligntop baseline bottom middle控制表格单元格内容的对齐方式，但是要注意的是vertical-align不能被.........

▪两个listbox实现选项的添加删除和搜索两个listbox实现选项的添加，删除和搜索贴一下主要的js代码，一些资源我就不传了。下面是效果图。 group.jsfunction addMember(){//右侧选中的项添加到左侧var add=$("#newAddMembersId").val();var del=$("#de.........

▪jQuery 插件autocomplete 应用（模拟的下拉菜单）官方网站：http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/今天研究了下这个玩意，可生成模拟的下拉菜单。从官网下载一个完整包其中要实现下拉菜单需要引入必要的文件三个<script type=".........

[1]css中的表格

来源: 发布时间: 2013-11-06

css中的表格

padding

是为表格单元格添加填充

调整垂直对齐和水平对齐

text-align

left center right justify

vertical-align

top baseline bottom middle

控制表格单元格内容的对齐方式，但是要注意的是vertical-align不能被继承，一次要直接指定。

边框

border

当给表格运用border属性的时候，要注意3点:

1 当给table设置属性的时候，是给表格增加边框，而不是单元格。

2 当给单元格设置边框时，单元格与单元格之间会出现间隙，就好像他们被隔开了一样。这时，可以用border-spacing来消除这种间隙，或者用table的属性cellspacing=0。但即使消除了间隙，还是会有双边框的出现，即单元格之间的边框合在了一起，这时用border-collapse属性，它有两个值，seperate就是保持双边框，collapse就是消除双边框。

本文链接

[2]两个listbox实现选项的添加删除和搜索

来源: 发布时间: 2013-11-06

两个listbox实现选项的添加，删除和搜索

贴一下主要的js代码，一些资源我就不传了。下面是效果图。

group.js

function removeMember()
{
//左侧移除成员
var add=$("#newAddMembersId").val();
var del=$("#deleteMembersId").val();
var newRemoveId="";

var removedUsers=$("#groupMember input:checkbox[checked]");
for(var i=0;i<removedUsers.length;i++)
{
var checkbox=$(removedUsers[i]);
var uid=checkbox.next().val();
if(del.indexOf(uid)>=0)
{
continue;
}
if(del.indexOf(uid)<0)
{
if(del.length==0)
del+=uid;
else
del+=","+uid;
}
//左侧列表中移除数据
checkbox.removeAttr("checked");
var userDiv=checkbox.parent().parent().parent();
userDiv.remove();
//$("#enterpriseMember").append(userDiv);
add=add.replace(uid + ",", "");
add=add.replace(uid, "");
$("#newAddMembersId").val(add);

}

$("#deleteMembersId").val(del);
}
//搜索成员，按名字,按部门
function searchMember()
{

var searchTxt=$.trim($("#searchTxt").val());
var memberLIsts=$(".dmlist");
//移除上次的结果
var lastReusts=$(".tempResult");
for(var i=0;i<lastReusts.length;i++)
{
$(lastReusts[i]).remove();
}
//为空搜索显示全部列表
if(searchTxt=="" || searchTxt=="搜索企业成员")
{
//show all hidded ml
for(var i=0;i<memberLIsts.length;i++)
{
$(memberLIsts[i]).css("display","");
}
return ;
}
//hide all memberlist,隐藏所有的列表
for(var i=0;i<memberLIsts.length;i++)
{
$(memberLIsts[i]).css("display","none");
}
//搜索-------------
var enterpriseMemberDiv=$("#enterpriseMember");
//search by name,add class:tempResult
var names=$(".sname");
for(var i=0;i<names.length;i++)
{
var name=$(names[i]).text();
if(name.indexOf(searchTxt)>=0)
{
var result=$(names[i]).parent().parent().parent().clone();
result.addClass("tempResult");
result.css("display","");
enterpriseMemberDiv.append(result);
}
}

//search by departmentName
var departmentNames=$(".sdepartment");
for(var i=0;i<departmentNames.length;i++)
{
var name=$(departmentNames[i]).text();
if(name.indexOf(searchTxt)>=0)
{
var result=$(departmentNames[i]).parent().parent().parent().clone();
result.addClass("tempResult");
result.css("display","");
enterpriseMemberDiv.append(result);
}
}
}

function folderNumToggle(event,basePath)
{
var evnet=event||window.event;
var arrowDiv=event.target||event.srcElement;
var closeimg=basePath+"/images/folder_close.PNG";
var openimg=basePath+"/images/folder_open.PNG";
var srcval=$(arrowDiv).attr("src");
if(srcval==closeimg)
$(arrowDiv).attr("src",openimg);
if(srcval==openimg)
$(arrowDiv).attr("src",closeimg);

var listDiv=$(arrowDiv).parent().parent().next().next();
listDiv.toggleClass("memberlist");

}

function setCss(event,onoff)
{
var theaddmemberBtnoff";
var on;
var event=event||window.event;
var thisbtn=event.target||event.srcElement;
$(thisbtn).removeClass(onclass);
$(thisbtn).removeClass(offclass);
if(theon")
{
$(thisbtn).addClass(onclass);
}
else
{
$(thisbtn).addClass(offclass);
}

}

test.jsp

<%@ page language="java" pageEncoding="UTF-8"%>
<%@ include file="/pages/common/Taglibs.jsp"%>
<%@ include file="/pages/common/Header.jsp"%>

<!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=gb2312" />
<title>添加群组成员</title>
<script type="text/javascript" src="/blog_article/<%=basePath%>/script/group.js"></script>
<script type="text/javascript">
$(document).keydown(function (event){
if(event && event.keyCode==13){
$("#searchBtn").click();
}
});

</head>

<body >
<div id="addGroupMembercontainer" >
<div >
<div >
<span > 群组<s:property value="group_name"></s:property></span>
<span id="menberCount" > ${gNumber}人</span><br/>
<hr />
</div>
<div id="groupMember" >

<s:if test="#request.groupMemberList!=null && #request.groupMemberList.size!=0">
<s:iterator value="#request.groupMemberList" id="gmember">
<div >
<div onclick="toggleCheck(event);">
<div >
<input type="checkbox" />
<input type="hidden" value="<s:property value="#gmember.id"/>" name="userId" />
<span ><s:property value="#gmember.name" /></span>
</div>
<div >
<span &g

[3]jQuery 插件autocomplete 应用（模拟的下拉菜单）

来源: 发布时间: 2013-11-06

官方网站：http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/

今天研究了下这个玩意，可生成模拟的下拉菜单。

从官网下载一个完整包

其中要实现下拉菜单需要引入必要的文件三个

在html页面BODY标签中插入一个文本框，设置id为tags

然后就可以开始写具体代码了，

$("#tags").autocomplete(data,[config]);//数据和配置,如配置省略则采用默认配置

今天研究出来两种，

例子1：简单模式，数据为本地数组类型

$(document).ready(function(){var arr=["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "pearl"];
$("#tags").autocomplete(arr, {
minChars: 0,//开始显示时输入的最少字符个数
max: 12,//显示的数据条数
autoFill: true,//文本框中自动填充好与之匹配的第一个值
mustMatch: true,//输入值与数据没有匹配的则清空文本框
matchContains: true,//从头开始匹配还是要在字符串内部查看匹配false为从开头匹配
scrollHeight: 220,//高度达到多少时开始有滚动条
highlight: false,//高亮关键字
width: 320,//宽度
});
});

例子2：数据为本地JSON类型

$(document).ready(function(){
var json=[
{ name: "Peter Pan", to: "peter@pan.de" },
{ name: "Molly", to: "molly@yahoo.com" },
{ name: "Forneria Marconi", to: "live@japan.jp" },
{ name: "Master <em>Sync</em>", to: "205bw@samsung.com" },
{ name: "Dr. <strong>Tech</strong> de Log", to: "g15@logitech.com" },
{ name: "Don Corleone", to: "don@vegas.com" },
{ name: "Mc Chick", to: "info@donalds.org" },
{ name: "Donnie Darko", to: "dd@timeshift.info" },
{ name: "Quake The Net", to: "webmaster@quakenet.org" },
{ name: "Dr. Write", to: "write@writable.com" }
];
$("#tags").autocomplete(json, {
minChars: 0,//开始显示时输入的最少字符个数
max: 12,//显示的数据条数
autoFill: true,//文本框中自动填充好与之匹配的第一个值
mustMatch: true,//输入值与数据没有匹配的则清空文本框
matchContains: true,//从头开始匹配还是要在字符串内部查看匹配false为从开头匹配
scrollHeight: 220,//高度达到多少时开始有滚动条
highlight: false,//高亮关键字

//multipleSeparator: " ",//一个文本框中要写入多个词时用来分割词的字符
//multiple: true,//是否允输入多个值,这个为true上面的这个属性才能生效

width: 320,//宽度

formatItem: function(row) {//这里有三个参数 row, i, max 在调用json值时相当于循环输出每行json的值, i是当前的索引号,max是最大数据条数，不过我这里只用了一个参数
return row.to+':'+row.name;
},
formatResult: function(row) {//最终点击确定时输入在文本框中的值
return row.to;
}

});
});

对于远程获取数据的还没研究出来，也求高手赐教。

本文链接