<! 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>
<Title> Ajax-pop-up no-brush new city selection special effect </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>
</Head>
<Body>
<Div id = "Main">
<Input class = "bton Pointer" onclick = "openbg (1); openselect (1)" type = "button" value = "select" name = "button">
<Div id = "result">
<Div class = "tit bgc_eee">
<H2> Summary of the cities you have selected </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"> select a city: </H2>
<SPAN class = "Pointer right" onclick = "openbg (0); openselect (0);"> [cancel] </span>
<SPAN class = "Pointer right" onclick = "makesure ();"> [OK] </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> famous Chinese city </option>
<Option value = "1"> charming city </option>
<Option value = "2"> three provinces in Northeast China </option>
<Option value = "3"> World Cities </option>
</SELECT>
<Div id = "c00">
<Input onclick = "addpreitem ()" type = "checkbox" value = "Beijing" name = "ck00"> Beijing
<Input onclick = "addpreitem ()" type = "checkbox" value = "Fujian" name = "ck00"> Fujian
<Input onclick = "addpreitem ()" type = "checkbox" value = "Sichuan" name = "ck00"> Sichuan
<Input onclick = "addpreitem ()" type = "checkbox" value = "Jiangsu" name = "ck00"> Jiangsu
</Div>
<Div id = "c01">
<Input onclick = "addpreitem ()" type = "checkbox" value = "Shanghai" name = "ck01"> Shanghai
<Input onclick = "addpreitem ()" type = "checkbox" value = "Yunnan" name = "ck01"> Yunnan
<Input onclick = "addpreitem ()" type = "checkbox" value = "Guizhou" name = "ck01"> Guizhou
</Div>
<Div id = "C02">
<Input onclick = "addpreitem ()" type = "checkbox" value = "Heilongjiang" name = "ck01"> Heilongjiang
<Input onclick = "addpreitem ()" type = "checkbox" value = "Jilin" name = "ck01"> Jilin
<Input onclick = "addpreitem ()" type = "checkbox" value = "Liaoning" name = "ck01"> Liaoning
</Div>
<Div id = "C03">
<Input onclick = "addpreitem ()" type = "checkbox" value = "us" name = "ck01"> us
<Input onclick = "addpreitem ()" type = "checkbox" value = "Afghanistan" name = "ck01"> Afghanistan
<Input onclick = "addpreitem ()" type = "checkbox" value = "Japan" name = "ck01"> Japan
</Div>
</Div>
</Div>
<Div id = "preview">
<Div class = "tit bgc_eee c_999">
<H2> you have selected: </H2>
</Div>
<Div class = "Cont" id = "previewitem"> </div>
</Div>
</Div>
<SCRIPT type = "text/JavaScript">
VaR grow = $ ("selectsub"). getelementsbytagname ("option"). length; // number of groups
VaR showgrow = 0; // the group has been opened.
VaR selectcount = 0; // number of selected items
Showselect (showgrow );
VaR items = $ ("selectsub"). getelementsbytagname ("input ");
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.doc umentelement. offsetheight? Document. Body. offsetheight: document.doc umentelement. 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)
{
VaR MEs = "<input type = 'checkbox' checked = 'true' value = '" + items [I]. value + "'onclick = 'copyitem (\" previewitem \ ", \" previewitem \ "); same (this); '>" + items [I]. value;
$ ("Previewitem"). innerhtml + = MES;
}
}
}
Function makesure (){
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;
}
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;
Ox = E. clientx;
Oy = E. clienty;
}
}
Function dragpro (e ){
If (odrag! = "")
{
VaR E = e? E: event;
DX = parseint ($ (odrag). style. Left );
DY = parseint ($ (odrag). style. Top );
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>
