您的位置：首页 > 其它

类似51job上的地区选择效果

2008-09-22 20:02 543 查看

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">



<HTML xmlns="http://www.w3.org/1999/xhtml">

<HEAD>

<TITLE>无标题文档</TITLE>

<META http-equiv=Content-Type content="text/html; charset=gb2312">

<STYLE type=text/css>

BODY {

FONT-SIZE: 12px; PADDING-TOP: 50px

}

H2 {

PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: bold; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px

}

.bton {

BORDER-RIGHT: #ccc 1px solid; BORDER-TOP: #ccc 1px solid; BACKGROUND: #ddd; BORDER-LEFT: #ccc 1px solid; BORDER-BOTTOM: #ccc 1px solid

}

.cont {

PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; PADDING-TOP: 10px

}

#main {

MARGIN: 0px auto; WIDTH: 400px

}

#selectItem {

BORDER-RIGHT: #000 1px solid; BORDER-TOP: #000 1px solid; MARGIN-TOP: 10px; Z-INDEX: 2; BACKGROUND: #fff; OVERFLOW: hidden; BORDER-LEFT: #000 1px solid; WIDTH: 400px; BORDER-BOTTOM: #000 1px solid; POSITION: absolute; TOP: 0px

}

#preview {

BORDER-RIGHT: #ccc 1px solid; BORDER-TOP: #ccc 1px solid; MARGIN: 1px; BORDER-LEFT: #ccc 1px solid; BORDER-BOTTOM: #ccc 1px solid

}

#result {

BORDER-RIGHT: #ccc 1px solid; BORDER-TOP: #ccc 1px solid; MARGIN-TOP: 10px; BORDER-LEFT: #ccc 1px solid; BORDER-BOTTOM: #ccc 1px solid

}

.tit {

PADDING-LEFT: 10px; MARGIN: 1px; LINE-HEIGHT: 20px; HEIGHT: 20px

}

.bgc_ccc {

BACKGROUND: #ccc

}

.bgc_eee {

BACKGROUND: #eee

}

.c_999 {

COLOR: #999

}

.pointer {

CURSOR: pointer

}

.left {

FLOAT: left

}

.right {

FLOAT: right

}

.cls {

CLEAR: both; FONT-SIZE: 0px; OVERFLOW: hidden; HEIGHT: 0px

}

#bg {

DISPLAY: none; Z-INDEX: 1; BACKGROUND: #ccc; FILTER: alpha(opacity=70); LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 0px; opacity: 0.7

}

.hidden {

DISPLAY: none

}

.move {

CURSOR: move

}

</STYLE>

<META content="MSHTML 6.00.2900.3314" name=GENERATOR>

</HEAD>

<BODY>

<DIV id=main>

<INPUT class="bton pointer" onclick=openBg(1);openSelect(1) type=button value=请选择 name=button>

<DIV id=result>

<DIV class="tit bgc_eee">

<H2>您已选择的城市汇总</H2>

</DIV>

<DIV class=cont id=makeSureItem></DIV>

</DIV>

</DIV>

<DIV id=bg></DIV>

<DIV class=hidden id=selectItem>

<DIV class="tit bgc_ccc move" onmousedown=drag(event,this)>

<H2 class=left>请选择城市</H2>

<SPAN class="pointer right"

onclick=openBg(0);openSelect(0);>[取消]</SPAN> <SPAN class="pointer right"

onclick=makeSure();>[确定]</SPAN> </DIV>

<DIV class=cls></DIV>

<DIV class=cont>

<DIV id=selectSub>

<SELECT style="MARGIN-BOTTOM: 10px"

onchange=showSelect(this.value) name="">

<OPTION value=0 selected>第0层</OPTION>

<OPTION value=1>第1层</OPTION>

<OPTION value=2>第2层</OPTION>

<OPTION

value=3>第3层</OPTION>

</SELECT>

<DIV id=c00>

<INPUT onclick=addPreItem() type=checkbox value=北京 name=ck00>

北京

<INPUT onclick=addPreItem() type=checkbox value=福建 name=ck00>

福建

<INPUT

onclick=addPreItem() type=checkbox value=四川 name=ck00>

四川

<INPUT

onclick=addPreItem() type=checkbox value=江苏 name=ck00>

江苏 </DIV>

<DIV id=c01>

<INPUT onclick=addPreItem() type=checkbox value=上海 name=ck01>

上海

<INPUT onclick=addPreItem() type=checkbox value=云南 name=ck01>

云南

<INPUT

onclick=addPreItem() type=checkbox value=贵州 name=ck01>

贵州 </DIV>

<DIV id=c02>

<INPUT onclick=addPreItem() type=checkbox value=黑龙江 name=ck01>

黑龙江

<INPUT onclick=addPreItem() type=checkbox value=吉林 name=ck01>

吉林

<INPUT

onclick=addPreItem() type=checkbox value=辽宁 name=ck01>

辽宁 </DIV>

<DIV id=c03>

<INPUT onclick=addPreItem() type=checkbox value=美国 name=ck01>

美国

<INPUT onclick=addPreItem() type=checkbox value=阿富汗 name=ck01>

阿富汗

<INPUT

onclick=addPreItem() type=checkbox value=日本 name=ck01>

日本 </DIV>

</DIV>

</DIV>

<DIV id=preview>

<DIV class="tit bgc_eee c_999">

<H2>您已选择的城市</H2>

</DIV>

<DIV class=cont id=previewItem></DIV>

</DIV>

</DIV>

<SCRIPT type=text/javascript>

/* ------使用说明----- */

/*

添加城市方法：

添加组：找到id 是 "selectSub"中select标签下，添加option标签 value属性递增，找到 id 是 "selectSub",按照原有格式添加div,其id属性递增

添加二级傅选矿选项

复制 id 是 "selectSub" 下任意input标签，粘贴在需要添加的位置。

*/

var grow = $("selectSub").getElementsByTagName("option").length; //组数

var showGrow = 0;//已打开组

var selectCount = 0; //已选数量

showSelect(showGrow);

var items = $("selectSub").getElementsByTagName("input");

//alert(maxItem);

//var lenMax = 2;

//alert(1);

function $(o){ //获取对象

if(typeof(o) == "string")

return document.getElementById(o);

return o;

}

function openBg(state){ //遮照打开关闭控制

if(state == 1)

{

$("bg").style.display = "block";

var h = document.body.offsetHeight > document.documentElement.offsetHeight ? document.body.offsetHeight : document.documentElement.offsetHeight;

//alert(document.body.offsetHeight);

//alert(document.documentElement.offsetHeight);

$("bg").style.height = h + "px";

}

else

{

$("bg").style.display = "none";

}

}

function openSelect(state){ //选择城市层关闭打开控制

if(state == 1)

{

$("selectItem").style.display = "block";

$("selectItem").style.left = ($("bg").offsetWidth - $("selectItem").offsetWidth)/2 + "px";

$("selectItem").style.top = document.body.scrollTop + 100 + "px";

}

else

{

$("selectItem").style.display = "none";

}

}

function showSelect(id){

for(var i = 0 ; i < grow ;i++)

{

$("c0" + i).style.display = "none";

}

$("c0" + id).style.display = "block";

showGrow = id;

}

function open(id,state){ //显示隐藏控制

if(state == 1)

$(id).style.display = "block";

$(id).style.diaplay = "none";

}

function addPreItem(){

$("previewItem").innerHTML = "";

var len　= 0 ;

for(var i = 0 ; i < items.length ; i++)

{

if(items[i].checked == true)

{

//len++;

//if(len > lenMax)

//{

//alert("不能超过" + lenMax +"个选项！")

//return false;

//}

var mes = "<input type='checkbox' checked='true' value='"+ items[i].value +"' onclick='copyItem(\"previewItem\",\"previewItem\");same(this);'>" + items[i].value;

$("previewItem").innerHTML += mes;

//alert(items[i].value);

}

}

}

function makeSure(){

//alert(1);

//$("makeSureItem").innerHTML = $("previewItem").innerHTML;

openBg(0);

openSelect(0);

copyItem("previewItem","makeSureItem")

}

function copyHTML(id1,id2){

$(id2).innerHTML = $("id1").innerHTML;

}

function copyItem(id1,id2){

var mes = "";

var items2 = $(id1).getElementsByTagName("input");

for(var i = 0 ; i < items2.length ; i++)

{

if(items2[i].checked == true)

{

mes += "<input type='checkbox' checked='true' value='"+ items2[i].value +"' onclick='copyItem(\"" + id2+ "\",\""+ id1 +"\");same(this);'>" + items2[i].value;

}

}

$(id2).innerHTML = "";

$(id2).innerHTML += mes;

//alert($(id2).innerHTML);

}

function same(ck){

for(var i = 0 ; i < items.length ; i++)

{

if(ck.value == items[i].value)

{

items[i].checked = ck.checked;

}

}

}

/* 鼠标拖动 */

var oDrag = "";

var ox,oy,nx,ny,dy,dx;

function drag(e,o){

var e = e ? e : event;

var mouseD = document.all ? 1 : 0;

if(e.button == mouseD)

{

oDrag = o.parentNode;

//alert(oDrag.id);

ox = e.clientX;

oy = e.clientY;

}

}

function dragPro(e){

if(oDrag != "")

{

var e = e ? e : event;

//$(oDrag).style.left = $(oDrag).offsetLeft + "px";

//$(oDrag).style.top = $(oDrag).offsetTop + "px";

dx = parseInt($(oDrag).style.left);

dy = parseInt($(oDrag).style.top);

//dx = $(oDrag).offsetLeft;

//dy = $(oDrag).offsetTop;

nx = e.clientX;

ny = e.clientY;

$(oDrag).style.left = (dx + ( nx - ox )) + "px";

$(oDrag).style.top = (dy + ( ny - oy )) + "px";

ox = nx;

oy = ny;

}

}

document.onmouseup = function(){oDrag = "";}

document.onmousemove = function(event){dragPro(event);}

</SCRIPT>

</BODY>

</HTML>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航