Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-type" content="text/html; charset=windows-1251" />
- <meta name="description" content="Упражнение по JS, фреймворк" />
- <meta name="keywords" content="CSS, JavaScript, JQuery" />
- <title>Упражнение 10, JS - разные тесты"</title>
- <script type="text/javascript" src="js/jquery-1.7.2.js"></script>
- <link href="js/jsfw_css.css" rel="stylesheet" type="text/css" />
- <script type="text/javascript">
- //-----------------------------
- function el(instr) {
- return document.createElement(instr);
- }
- //-----------------------------
- function tx(instr) {
- return document.createTextNode(instr);
- }
- //-----------------------------
- function gid(instr) {
- return document.getElementById(instr);
- }
- //-----------------------------
- function ap(el, inel) {
- if (!inel)
- document.body.appendChild(el);
- else
- inel.appendChild(el);
- }
- //-----------------------------
- function put_block_right(el4, el5) {
- var sx = document.documentElement.scrollLeft || document.body.scrollLeft;
- var sy = document.documentElement.scrollTop || document.body.scrollTop;
- var cx = document.documentElement.clientLeft || document.body.clientLeft || 0;
- var cy = document.documentElement.clientTop || document.body.clientTop || 0;
- var z = el5.getBoundingClientRect();
- el4.style['position']='absolute';
- el4.style['left']=(z.right+sx-cx)+'px';
- el4.style['top']= (z.top+sy-cy)+'px';
- }
- //-----------------------------
- function fit_to_content() {
- var neww=0;
- var newh=0;
- var els = this.childNodes;
- for (i=0; i<els.length; i++ ) {
- var wr=els[i].offsetLeft+els[i].offsetWidth;
- var wh=els[i].offsetTop+els[i].offsetHeight;
- if (neww<wr)
- neww=wr;
- if (newh<wh);
- newh=wh;
- }
- this.style.width=neww+'px';
- this.style.height=newh+'px';
- }
- //-----------------------------
- function loadfunc() {
- draw_base_form();
- window.Ddrop = new ddrop();
- fmdiv=gid('zfinf');
- fmdiv.style.left=(window.innerWidth-fmdiv.offsetWidth-50)+'px';
- frmel=gid('zzzfff')
- fmdiv.style.height= (frmel.offsetTop+ frmel.offsetHeight+100)+'px';
- //(window.innerHeight-20)+'px';
- //fmdiv.firstChild.nextSibling.nextSibling.offsetHeight+'px';
- Ddrop.hook(gid('movver'));
- }
- //---------------------------------
- draw_test_form = function () {
- //var cont=el('DIV');
- //cont.className('info_service moveable');
- var frm = document.forms.testform;
- frm.username.style.color='#aaa';
- frm.username.value='Введите имя пользователя';
- frm.comments.style.color='#aaa';
- var zel = frm.country;
- var sel = document.createElement('SELECT');
- sel.name='usernames';
- zel.parentNode.insertBefore(sel,zel.nextSibling);
- appOptions();
- //------------------------
- function appOptions() {
- var tst=['std disabled', 'std selected'];
- for (i=0; i<tst.length; i++) {
- var opt = new Option (tst[i], tst[i].replace(' ','_'), false, false);
- try {
- sel.add(opt, null);
- } catch (e)
- {
- sel.add(opt);
- }
- }
- sel.options[0].disabled=true;
- sel.options[1].selected=true;
- }
- //----------------------------
- var doms = frm.domains;
- var sel4 = document.createElement('SELECT');
- sel4.name='domains4';
- sel4.size=8;
- sel4.multiple=true;
- var items4=['microsoft.com','google.com','yandex.ru','bbc.com.uk', 'mail.ru', 'news.cn'];
- for (i=0; i<items4.length; i++) {
- var opt = new Option(items4[i], 'item4_'+i, false, false);
- try {
- sel4.add(opt, sel4.options[0])
- }
- catch(exc) {
- sel4.add(opt,0);
- }
- }
- doms.parentNode.insertBefore(sel4, doms.nextSibling);
- //-------------------------
- //------------------------
- frm.stdu='Введите имя пользователя';
- frm.stdu3=frm.comments.value;
- //--------------------------------
- frm.username.onfocus=function() {
- this.style.color='black';
- if (this.value==this.form.stdu) {
- this.value='';
- }
- }
- //--------------------------------
- frm.username.onblur=function() {
- if (this.value=='') {
- this.value=this.form.stdu;
- this.style.color='#aaa';
- }
- }
- //-----------------------------------------------------------
- frm.comments.onfocus=function() {
- this.style.color='black';
- if (this.value==this.form.stdu3) {
- this.value='';
- }
- }
- //--------------------------------
- frm.comments.onblur = function() {
- if (this.value=='') {
- this.value=this.form.stdu3;
- this.style.color='#aaa';
- }
- }
- //-----------------------------------------------------------
- frm.username.onkeyup=function() {
- if ((this.value=='') || (this.value==this.form.stdu)) {
- frm.userpassword.disabled=true;
- frm.confirmpassword.disabled=true
- }
- else {
- frm.userpassword.disabled=false;
- frm.confirmpassword.disabled=false;
- }
- }
- //--------------------------------
- frm.username.onchange=function() {
- if ((this.value!='') && (this.value!=this.form.stdu)) {
- var sel = this.form.usernames;
- var opt= new Option(this.value+' - '+sel.options.length,
- 'opt'+sel.options.length, false, false);
- try {
- sel.add(opt, sel.options[0])
- } catch (ex) {
- sel.add(opt,0);
- }
- }
- }
- //--------------------------------
- frm.confirmpassword.onkeyup=function() {
- var nch=this.parentNode.childNodes;
- if (this.value=='') {
- if (this.prev) {
- this.parentNode.replaceChild(this.prev, nch[nch.length-1]);
- }
- return;
- }
- if (this.value!=this.form.userpassword.value) {
- if (!this.sp) {
- this.sp = document.createElement('span');
- this.sp.style.color='red';
- this.sp.innerHTML='password don\'t match';
- }
- var prev= this.parentNode.replaceChild(this.sp, nch[nch.length-1]);
- if (!this.prev)
- this.prev = prev;
- } else {
- if (!this.sp8) {
- this.sp8 = document.createElement('span');
- this.sp8.style.color='green';
- this.sp8.innerHTML='password match';
- }
- var prev = this.parentNode.replaceChild(this.sp8, nch[nch.length-1]);
- if (!this.prev)
- this.prev = prev;
- }
- }
- //--------------------------------
- frm.domains.onchange = function () {
- var dm4 = this.form.domains4;
- for (var i=0; i<dm4.options.length; i++) {
- dm4.options[i].selected=false;
- }
- for (var i=0; i< this.options.length; i++) {
- if (this.options[i].selected) {
- for (var j=0; j<dm4.options.length; j++) {
- if (dm4.options[j].text.split(".").pop()==this.options[i].text.slice(1)) {
- dm4.options[j].selected=true;
- }
- }
- }
- }
- }
- //---------------------------------
- frm.email.onselect = function () {
- if (!this.ztest)
- this.ztest = this.parentNode.appendChild(document.createElement('span'));
- this.ztest.style.color='green';
- this.ztest.innerHTML=' '+this.value;
- }
- //---------------------------------
- }
- //---------------------------------
- draw_table = function(rows, cells) {
- function draw_section(section, color) {
- for (var i=0; i<rows; i++) {
- var row=section.insertRow(i);
- for (var j=0; j<cells; j++) {
- var cell=row.insertCell(j);
- cell.innerHTML=i+'<sup>'+j+'</sup>';
- cell.style['background-color']=color;
- }
- }
- }
- var el8= el('DIV');
- el8.className='info_service moveable';
- el8.id='table_block';
- put_block_right(el8, gid('info_service_block'));
- var tab= el('TABLE');
- draw_section(tab.tBodies[0] && tab.tBodies[tab.tBodies.length-1] || tab,'#eee');
- draw_section(tab.createTHead(),'red');
- draw_section(tab.createTFoot(),'#888');
- ap(tab,el8);
- ap(el8);
- fit_to_content.call(el8);
- }
- //---------------------------------
- function gogo(e) {
- /* e = e || event;
- if (!e.which && e.button)
- if (e.button & 1)
- e.which=1;
- else
- if (e.button & 4)
- e.which=2;
- else
- if (e.button & 2)
- e.which = 3;*/
- //alert(e.which);
- if (e.which==3) {
- flyAlert(this);
- try {
- e.preventDefault();
- } catch(exc) {
- e.returnValue=false;
- }
- }
- }
- //---------------------------------
- function showElStruct(e) {
- var elprev= gid('infoel_div');
- if (elprev)
- elprev.parentNode.removeChild(elprev);
- var inf =el('DIV');
- if (!window.global_num)
- window.global_num=1;
- else
- window.global_num++;
- inf.id='infoel_div';
- inf.style.position='absolute';
- inf.style.border='solid 1px #888';
- inf.style['background-color']='#eee';
- ap(inf);
- inf.innerHTML=window.global_num;
- inf.style.width=Math.floor(window.innerWidth/3)+'px';
- //inf.style.height=Math.floor(window.innerHeight/3)+'px';
- //inf.style.left=(Math.floor((document.documentElement.clientWidth || document.body.clientWidth)/2)-
- // Math.floor(parseInt(inf.style.width.slice(0,inf.style.width.indexOf('px'))/2))+'px');
- inf.style.top= (Math.floor((document.documentElement.clientHeight || document.body.clientHeight)/2) -
- Math.floor(inf.offsetHeight/2))+'px';
- //-----------------------
- inf.p = function(intext, inp) {
- var z = document.createElement('DIV');
- z.style['margin-left']='40px';
- var zz = document.createTextNode(intext);
- z.appendChild(zz);
- inp.appendChild(z);
- }
- //-----------------------
- tree = function(node, insnode) {
- inf.p('block: '+node.nodeName,insnode);
- inf.p('type: '+node.nodeType,insnode);
- try {inf.p('attribute id:' +node.getAttribute('id'),insnode)} catch (exc) {};
- try {inf.p('attribute class:'+node.getAttribute('class'),insnode)} catch (exc) {};
- var els=node.childNodes;
- inf.p('child nodes: '+els.length,insnode);
- var tmpnode=document.createElement('DIV');
- tmpnode.style['margin-left']='40px';
- for (var i=0; i<els.length;i++) {
- tree(els[i], tmpnode);
- }
- insnode.appendChild(tmpnode);
- }
- var dt = new Date();
- var dts = dt.getDay()+'.'+dt.getMonth()+'.'+dt.getFullYear()+' '+dt.getHours()+':'+dt.getMinutes()+':'+dt.getSeconds();
- dts = 'current time: '+dts;
- inf.p(dts, inf);
- //inf.p(document.getCookie,inf);
- tree (this, inf);
- Ddrop.hook(inf);
- }
- //---------------------------------
- function Square(z,coords,size,color) {
- z.style.position='absolute';
- z.style.left=coords.x+'px';
- z.style.top=coords.y+'px';
- z.style.width=size[0]+'px';
- z.style.height=size[1]+'px';
- z.style['background-color']=color;
- }
- //---------------------------------
- flyAlert= function(info) {
- if (!window.aim) {
- window.aim = el('DIV');
- Square (aim, {x: Math.floor(window.innerWidth)-200, y: 410}, [50,50],'red');
- ap(aim);
- }
- var flbl = info;
- //alert (flbl.id);
- flbl.style.position='absolute';
- //Square (flbl,{x: 100, y: 200}, [200,200], '#ffa');
- //ap(flbl);
- setTimeout(flyCenter(flbl),10);
- function flyCenter(targ) {
- targ.style.opacity=1;
- targ.style.filter='alpha(opacity=100)';
- targ.style.left=targ.offsetLeft+'px';
- targ.style.top=targ.offsetTop+'px';
- targ.style.width=targ.offsetWidth+'px';
- targ.style.height=targ.offsetHeight+'px';
- z= function() {
- targ.style.left=
- Math.floor(parseInt(targ.style.left.slice(0,targ.style.left.indexOf('px')))+
- (-targ.offsetLeft+aim.offsetLeft)/50)+'px';
- targ.style.top =
- (parseInt(targ.style.top.slice(0,targ.style.top.indexOf('px')))-
- Math.floor(targ.offsetTop-aim.offsetTop)/50)+'px';
- targ.style.width =
- (parseInt(targ.style.width.slice(0,targ.style.width.indexOf('px')))-
- Math.floor(targ.offsetWidth-aim.offsetWidth)/50)+'px';
- targ.style.height=
- (parseInt(targ.style.height.slice(0,targ.style.height.indexOf('px')))-
- Math.floor(targ.offsetHeight-aim.offsetHeight)/50)+'px';
- targ.style.opacity=targ.style.opacity-0.001;
- if (Math.abs(targ.offsetLeft-aim.offsetLeft)>50)
- setTimeout(arguments.callee,10)
- else
- {
- targ.parentNode.removeChild(targ);
- }
- };
- return z;
- }
- }
- //---------------------------------
- function setClicks() {
- var els = document.getElementsByTagName('DIV');
- for (var i=0; i<els.length; i++) {
- if (els[i].className.match(/\s*info_service\s*/)) {
- els[i].onclick=showElStruct;
- els[i].oncontextmenu = gogo
- //Ddrop.hook(els[i]);
- }
- if (els[i].className.search('moveable')!=-1)
- Ddrop.hook(els[i]);
- }
- }
- //---------------------------------
- ddrop = function() {
- _self = this;
- this.hook = function (el) {
- el.onmousedown = this.mouseDown;
- el.onmousemove = this.mouseMove;
- el.onmouseup = this.mouseUp;
- el.onmouseout = this.mouseOut;
- }
- //--------------------------
- this.mouseDown = function(ev) {
- ev = ev || event;
- var target = (this.className.search('parmove')!=-1) ? this.parentNode : this;
- target.pressed=true;
- target.xDiff = ev.clientX - target.offsetLeft;
- target.yDiff = ev.clientY - target.offsetTop;
- target.style.cursor='pointer';
- try {
- ev.preventDefault()
- } catch (ex) {
- ev.returnValue=false;
- }
- }
- //--------------------------
- this.mouseMove = function(ev) {
- ev = ev || event
- var target = (this.className.search('parmove')!=-1) ? this.parentNode : this;
- if (target.pressed) {
- target.style.left=(ev.clientX-target.xDiff)+'px';
- target.style.top=(ev.clientY-target.yDiff)+'px';
- }
- }
- //--------------------------
- this.mouseUp = function(ev) {
- var target = (this.className.search('parmove')!=-1) ? this.parentNode : this;
- target.pressed=false;
- target.style.cursor='default';
- }
- //--------------------------
- this.mouseOut = function(ev) {
- // this.pressed=false;
- var target = (this.className.search('parmove')!=-1) ? this.parentNode : this;
- //target.style.cursor='default';
- }
- }
- //---------------------------------
- function draw_base_form() {
- function addButton(type, name,value, caption) {
- var p= el('P');
- var a=el('INPUT');
- a.type=type;
- a.name=name;
- a.id=name;
- a.value=value;
- ap(a,p);
- if (caption) {
- var txx=tx(caption);
- p.insertBefore(txx,a);
- }
- ap(p,this);
- }
- //---------------------
- var a=el('DIV');
- a.className='info_service';
- a.id='info_service_block';
- f=el('FORM');
- ap(f,a);
- addButton.call(f,'TEXT','num_rows','3','input num rows');
- addButton.call(f,'TEXT','num_cells','3','input num cells');
- addButton.call(f, 'BUTTON','create_table', 'create table');
- addButton.call(f, 'BUTTON','create_test_form', 'create test form');
- ap(a);
- //--------------------------------
- gid('create_table').onclick=
- function () {
- draw_table(parseInt(f.num_rows.value), parseInt(f.num_cells.value));
- }
- //--------------------------------
- draw_test_form();
- //--------------------------------
- brr=setInterval(setClicks,1000);
- }
- window.onload = loadfunc;
- </script>
- </head>
- <body>
- <div id="zfinf" class="info_service" style="z-index:50;background-color:white;">
- <div class="parmove" id="movver" style="height:40px; background-color:red;color:white;"></div>
- <form name="testform" action="#" method="post" enctype="application/x-www-form-urlencoded">
- <fieldset>
- <legend>mandatory information</legend>
- <p><input type="text" name="username" id="username" size="30" />Input user name </p>
- <p><input type="password" name="userpassword" id="userpassword" size="20" />Input password</p>
- <p><input type="password" name="confirmpassword" id="confirmpassword" />Confirm password</p>
- <p><input type="text" name="email" id="email" size="20" />Input e-mail</p>
- </fieldset>
- <fieldset>
- <legend>Input your gender</legend>
- <p><input type="radio" name="gender" id="gender1" value="male" checked />Male</p>
- <p><input type="radio" name="gender" id="gender2" value="female" />Female</p>
- <p><input type="radio" name="gender" id="gender3" value="unidentified" disabled />unideintified</p>
- </fieldset>
- <fieldset>
- <legend>Input your interests</legend>
- <p><input type="checkbox" name="interests[]" id="inter1" value="books" checked />books</p>
- <p><input type="checkbox" name="interests[]" id="inter2" value="movies" />movies</p>
- <p><input type="checkbox" name="interests[]" id="inter3" value="unidentified" />unidentified</p>
- </fieldset>
- <fieldset>
- <legend>Input your country</legend>
- <select name="country" id="country">
- <option value="us" selected>US</option>
- <option value="uk">UK</option>
- <option value="russia">Russia</option>
- <option value="china" disabled>China</option>
- </select>
- </fieldset>
- <fieldset>
- <legend>Input your domains</legend>
- <select name="domains" id="domains" size="5" multiple>
- <option value="com" selected>.com</option>
- <option value="us" selected>.us</option>
- <option value="uk">.uk</option>
- <option value="ru">.ru</option>
- <option value="cn" disabled>.cn</option>
- </select>
- </fieldset>
- <p>Tell about you
- <textarea name="comments" id="comments">
- Some text...
- </textarea></p>
- <p>Load userpic <input type="file" name="userpic" id="userpic" /></p>
- <input type="hidden" name="action" value="register" />
- <p id="zzzfff">
- <input type="submit" name="submit" value="register" />
- <input type="reset" name="reset" value="reset" />
- <input type="button" name="cancel" value="cancel" />
- </p>
- </form>
- </form>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement