Определение типа DOM
реклама
Internet rakenduste architektuur ja realiseerimine.
5.
L.Joonas
2012
CSS.3
Управление
позиционированием
• Тип позиционирования
–
–
–
–
Статическое позиционирование
Относительное позиционирование
Абсолютное позиционирование
Фиксированное позиционирование
Тип позиционирования
<head>
<style media="screen" type="text/css"><!-.stat {position: static; font: bold 28pt courier; color: #cccccc;}
.abs {position: absolute; top: 25px; left: 375px; width: 100px; font:
helvetica; color: #666666;}
.rel {position: relative; top: 70px; left: 25px; font: bold 12pt times;
bold 35pt
color: #000000;}
--></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"><!-#object1 {
position: absolute;
top: 125px;
left: 12em;
border: silver solid 2px; }
.changeplace {
position: relative;
top: 1cm;
left: 1cm;
background-color: #ffcccc;}
--></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;}
--></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>
Элементы в порядке стека
(3d-позиционирование)
<head>
<style media="screen" type="text/css"><!-#element1 { position: absolute; z-index: 3; top: 175px; left: 255px }
#element2 { position: absolute; z-index: 2; top: 100px; left: 170px }
#element3 { position: absolute; z-index: 1; top: 65px; left: 85px }
#element4 { position: absolute; z-index: 0; top: 5px; left: 5px }
--></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}
--></style>
</head>
<body>
<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>
Относительные элементы,
встроенные в абсолютные
<head>
<style media="screen" type="text/css"><!-.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; }
--></style>
</head>
<body>
<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>
Определение видимости
элемента
<head>
<style media="screen" type="text/css"><!-.hide {
position: relative;
visibility: hidden;}
--></style>
</head>
<body>
<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
<head>
<style media="screen" type="text/css"><!-.illustration{
width: 200px;
height: 200px;
overflow: auto;
float: right;
margin: 5px;}
--></style>
</head>
<body>
<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
Создание объекта
<head>
<style media="screen" type="text/css"><!-#object1 {
position: absolute;
top: 100px;
left: 150px;
visibility: visible;
width:210px; }
--></style>
</head>
<body>
<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 }
--></style>
</head>
<body>
<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 }
--></style>
</head>
<body>
<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 }
--></style>
</head>
<body>
<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
}
</script>
</body>
images.');
Определение типа 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><!-if (isDHTML) {document.write('This is a DHTML capable browser using ');}
if (isID) {document.write('The World Wide Web Consortium\'s "ID" DOM.');}
else {
if (isLayers) {document.write('Netscape\'s "Layer" DOM.');}
else {
if (isAll) {document.write('Internet Explorer\'s "all" DOM.');}
else {document.write('This is not a DHTML capable browser...so what are you
waiting for?');}
}}
// -->
</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 (3)
function whoAmI(objectID) {
domStyle = findDOM(objectID,1)
dom = findDOM(objectID,0);
if (domStyle.pixelTop != null) {
alert(domStyle.pixelTop); }
else { alert(domStyle.top); }
alert(dom.id);
}
// -->
</script>
Построение общей DOM (4)
<style media="screen" type="text/css"><!-#object1 {
position: absolute;
visibility: show;
top: 10px;
left: 10px;
}
--></style>
</head>
<body onLoad="whoAmI('object1')">
<div id="object1">
This is an Object<br>
<img src="alice14.gif" width="407" height="480" border="0">
</div>
</body>
Использование общей для
браузеров 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"><!-#object1 {
position: absolute;
visibility: show;
top: 10px;
left: 10px }
--></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>
