Internet rakenduste architektuur ja realiseerimine. 5. L.Joonas 2012

Internet rakenduste architektuur ja realiseerimine.5.

L.Joonas2012

Управление позиционированием

• Тип позиционирования– Статическое позиционирование– Относительное позиционирование– Абсолютное позиционирование– Фиксированное позиционирование

Тип позиционирования

<head><style media="screen" type="text/css"></style>

</head><body>

<div class="stat">'Oh my ears and whiskers, how late it's getting!'</div><div class="abs">'Oh my ears and whiskers, how late it's getting!'</div><div class="rel"> 'Oh my ears and <span class="rel">whis<span сlass="rel">kers</span></span>, how late it's getting!'</div></body>

Определение положения по отношению к левому верхнему

углу<head><style media="screen" type="text/css"></style></head><body>

<div id="object1"><img src="alice27.gif" width="250" height="225" border="0" align="left"><p>'I want a<span class="changeplace"> clean cup</span>,' interrupted the Hatter: 'let's all move one place on.'</p><p>He moved.</p>

</div></body>

Определение положения по отношению к правому нижнему углу

<head><style media="screen" type="text/css"><!--

#object1 {position: absolute;bottom: 125px;right: 12em;border: silver solid 2px; }

.changeplace {position: relative;bottom: 1cm;right: 1cm;background-color: #ffcccc;}


<div id="object1"><img src="alice27.gif" width="250" height="225" border="0" align="left"><p>'I want a<span class="changeplace"> clean cup</span>,' interrupted the Hatter: 'let's all move one place on.'</p><p>He moved.</p>

</div></body>

Элементы в порядке стека (3d-позиционирование)

<head><style media="screen" type="text/css"></style></head><body>

<span id="element1"><img src="alice22.gif" width="100" height="147"><br clear="all">Element 1 </SPAN><span id="element2"><img src="alice32.gif" width="140" height="201"><br clear="all">Element 2 </SPAN><span id="element3"><img src="alice15.gif" width="150" height="198"><br clear="all">Element 3 </SPAN><span id="element4"><img src="alice29.gif" width="200" height="236"><br clear="all">Element 4 </span></body>

Абсолютные элементы, встроенные в относительные<head><style media="screen" type="text/css"><!--

.relElement {position:relative;top: 75px;}

.absElement {position: absolute;z-index: 0;top: 0px;left: 0px;font-size: 36pt;color: #cccccc; }

p {position:relative;z-index: 100}


<div class="relElement"><div class="absElement">Alice In Wonderland<br><img src="alice03.gif" width="300" height="284" border="0"></div><p>Alice opened the door you see, so many out-of-the-way things had happened lately, that Alice had begun to think that very few things indeed were really impossible.</p><p>However, this bottle was <i>not</i> marked 'poison,' so Alice ventured to taste it, and finding it very nice, (it had, in fact, a sort of mixed flavour of cherry-tart, custard,.</p></div>

</body>

Относительные элементы, встроенные в абсолютные


.absElement{position: absolute;left: 100px;border-style: none none none solid;border-width: 0px 0px 0px 1px;border-color: #000000;padding: 10px;}

.relElement {position: relative;float: right;font-weight: bold;padding: 1em;width: 275px; }


<div class="absElement"><p class="relElement"><img src="alice37.gif" width="100" height="136" align="right">One of the jurors had a pencil that squeaked. This of course, Alice could not stand, and she went round the court and got behind him, and very soon found an opportunity of taking it away.</p><p>The King and Queen.</p>

</div></body>

Определение видимости элемента


.hide {position: relative;visibility: hidden;}


<span class="hide"><img SRC="alice24.gif" WIDTH="350" HEIGHT="238" ALIGN="right"></span>'I thought it would,' said the Cat, and vanished again.<p>Alice waited a little.</p><p>'Did you say pig, or fig?' said the Cat.</p></body>

Определение видимой части элемента

<style type="text/css">.clipInHalf {

position: absolute;clip: rect(15 350 195 50);top: 0px;left: 0px;}

</style><body> <div class="clipInHalf">

<img src="alice31.gif" width="379" height="480" align="left"></div></body>

Определение overflow


.illustration{width: 200px;height: 200px;overflow: auto;float: right;margin: 5px;}


<div class="illustration"><img src="alice35.gif" width="401" height="480"></div><h3>CHAPTER IX<br>The Mock Turtle's Story</h3><p>'You can't think how glad I am to see you again, you dear old thing!' said the Duchess, as she tucked her arm affectionately into Alice's, and they walked off together.</p></body>

Объектная модель документа

• DOM – Document object model

Создание объекта


#object1 {position: absolute;top: 100px;left: 150px;visibility: visible;width:210px; }


<div id="object1"><h3>This is Object 1</h3><img src="alice04.gif" width="200" height="298" border="0"></div>

</body>

Обработчики событий

<head><script> var omm=0; var of=0; </script></head><body onLoad="alert('onLoad: The document has loaded.'); var i=0;"

onUnLoad="alert('onUnLoad: The document is now gone.')" onMove="alert('onMove: The window has been moved.')" onResize="alert('onResize: The window has been resized.')" onMouseMove="if (omm==0) { alert('onMouseMove: You moved your mouse.'); omm= 1}">

<h1>Event Handlers</h1><form name="FormName" action="#" method="get"><input onFocus="if (of==0) {alert('onFocus: This form field has been selected.');of = 1;}" type="text" value="Click in Me"><br><br><input onBlur="alert('onBlur: This form field has been deselected.')" type="text" value="Click in me and then out"></form><a href="#" onMouseOver="alert('onMouseOver: Your mouse passed over this link')">

Pass Your Mouse Over Me.</a><br><br><a href="#" onMouseOut="alert('onMouseOut: Your mouse moved away from this link')">

Pass Your Mouse Over Me and then move away.

Обработчики событий (2)

</a><br><br><a href="#" onClick="alert('onClick: You have clicked this link')">

Click Me!</a><br><br>

<a href="#" onMouseDown="alert('onMouseDown: You pressed your mouse button down.')">Click Me!

</a><br><br><a href="#" onMouseUp="alert('onMouseUp: You have released your mouse button.')">

Click Me!</a>

<form name="FormName" action="#" method="get"><input onKeyPress="alert('onKeyPress: You pressed a key.')" type="text" value="Type in Me!"><br><br><input onKeyDown="alert('onKeyDown: You pressed a key down.')" type="text" value="Type in Me!"><br><br><input onKeyUp="alert('onKeyUp: You pressed a key and then released it.')" type="text" value="Type in Me!" tabindex="5"><br><br></form>

</body>

Обнаружение события

<body><a href="#" onmouseover= "document.images.button1.src='b_on.gif'"><img src="b_off.gif" name="button1" border="0"></a>

</body>

Netscape Layer DOM<head>

<script>function NAVmoveElement (objectID) {document.layers[objectID].left = 120;document.layers[objectID].top = 200;

}</script><style media="screen" type="text/css"><!--

#object1 {position: absolute;

top: 10px;left: 10px;visibility: visible }


<div id="object1"><a href="#" onmouseOver="NAVmoveElement('object1')">This script will run in Netscape 4 and compatible browsers only.<br><img src="alice04.gif" width="200" height="298" border="0"></a></div>

</body>

Internet Explorer ALL DOM

<head><script>

function IEmoveElement () {document.all['object1'].style.left = 120;document.all['object1'].style.top = 200;}

</script><style media="screen" type="text/css"><!--

#object1 {position: absolute;top: 50px;left: 10px;visibility: visible }


<div id="object1"><a href="#" onmouseOver="IEmoveElement()">This script will run in Internet Explorer 4, 5 and compatible browsers only.<br><img src="alice04.gif" width="200" height="298" border="0"></a></div>

</body>

W3C ID DOM

<head><script>function W3CmoveElement () {

document.getElementById('object1').style.left = 120;document.getElementById('object1').style.top = 60;

}</script><style media="screen" type="text/css"><!--

#object1 {position: absolute;top: 10px;left: 10px;visibility: visible }


<div id="object1"><a href="#" onmouseOver="W3CmoveElement()">This script will run in any browser that uses the W3C's standard<br> for DOM, including Internet Explorer 5 and Netscape.<br><img src="alice04.gif" width="200" height="298" border="0"></a></div>

</body>

Определение возможностей браузера

<body><script language="JavaScript">if (document.images) {document.writeln('Yes, I can change images.');}else {document.writeln('Sorry. I can not change

images.');}

</script></body>

Определение типа DOM

<head><SCRIPT>var isDHTML = 0;var isLayers = 0;var isAll = 0;var isID = 0;if (document.getElementById) {isID = 1; isDHTML = 1;}else {if (document.layers) {isLayers = 1; isDHTML = 1;}else {if (document.all) {isAll = 1; isDHTML = 1;}}}// --></script></head>

Определение типа DOM (2)

<body><script></script></body>

Построение общей DOM

<head><script><!--var isDHTML = 0;var isLayers = 0;var isAll = 0;var isID = 0;if (document.getElementById) {isID = 1; isDHTML = 1;}else {if (document.all) {isAll = 1; isDHTML = 1;}else {browserVersion = parseInt(navigator.appVersion);if ((navigator.appName.indexOf('Netscape') != -1) && (browserVersion ==

4)) {isLayers = 1; isDHTML = 1;}}}

Построение общей DOM (2)

function findDOM(objectID,withStyle) {if (withStyle == 1) {

if (isID) { return (document.getElementById(objectID).style) ; }else { if (isAll) { return (document.all[objectID].style); }

else {if (isLayers) { return (document.layers[objectID]); }

};}}else {

if (isID) { return (document.getElementById(objectID)) ; }else { if (isAll) { return (document.all[objectID]); }

else {if (isLayers) { return (document.layers[objectID]); }

};}}

}

Использование общей для браузеров DOM

<head><script src="findDOM.js"></script><script>function moveObject (objectID) {

domStyle = findDOM(objectID,1);domStyle.left = 120;domStyle.top = 200;

}</script>

<style media="screen" type="text/css"></style></head>

Использование общей для браузеров DOM(2)

<body onLoad="moveObject('object1')"><div id="object1">This script will run in any Netscape 4 and

above, Internet Explorer 4 and above, or W3C compatible browsers.<br>

<img src="alice04.gif" width="200" height="298" border="0">

</div></body>

Internet rakenduste architektuur ja realiseerimine. 5. L.Joonas 2012

Documents

Transcript of Internet rakenduste architektuur ja realiseerimine. 5. L.Joonas 2012