Writing /volume1/Web/Public/dokuwiki/data/log/deprecated/2024-11-15.log failed

現在位置: start » study » javascript » jquery » z-index

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

両方とも前のリビジョン前のリビジョン
次のリビジョン		前のリビジョン
study:javascript:jquery:z-index [2010/10/11 08:57] – bananastudy:javascript:jquery:z-index [2010/10/16 10:21] (現在) – banana
行 9: 行 9:
 <head> <head>
 <script type="text/javascript" src="./test/js/jquery-1.4.2.js"></script> <script type="text/javascript" src="./test/js/jquery-1.4.2.js"></script>
 +<script type="text/javascript" src="./test/js/jquery.draggable.js"></script>
 <style type="text/css"> <style type="text/css">
- html, body{ + div.sample{ 
- height: 100%; + width: 300px; 
- margin: 0px; + height: 240px; 
- } + background-color:#8888ff; 
- div.sample{ + position: absolute; 
- width: 300px; + padding: 10px; 
- height: 200px; + z-index: 100; 
- background-color: #8888ff; + } 
- position: absolute; + select.sample{ 
- padding: 10px; + z-index: 1; 
- z-index: 100; + position: absolute; 
- } + text-align: center; 
- select.sample{ + border-style: solid; 
- z-index: 1; + border-width: 2px; 
- position: absolute; + border-color: red; 
- left: 300px; + } 
- top: 20px; + #shim{ 
- text-align: center; + z-index: 10; 
- border-style: solid; + position: absolute; 
- border-width: 2px; + visibility: hidden; 
- border-color: red; + } 
- } +</style> 
- #shim{ +<script language="JavaScript"> 
- z-index: 10; +<!-- 
- position: absolute; +      $(function(){ 
- display: none; +          $("#block").draggable(); 
- } +      }); 
- </style> +// --> 
-<script language="JavaScript"><!-- +</script>
- var dragItem = null; +
- var initEventX, initEventY; +
- var initLeft, initTop; +
- //初期化処理 +
- onload = function (){ +
- document.documentElement.onmousemove = dragMove; +
- document.documentElement.onmouseup = dragOff; +
- } +
- //ドラッグ開始 +
- function dragOn(obj, e){ +
- var src = e.originalTarget; +
- if(document.all){ +
- e = event; +
- src = e.srcElement; +
- } +
- +
- dragItem = obj; +
- initEventX = e.screenX; +
- initEventY = e.screenY; +
- initLeft = parseInt(dragItem.style.left.replace('px', '')); +
- initTop = parseInt(dragItem.style.top.replace('px', '')); +
- return false; +
- } +
- +
- //ドラッグ停止 +
- function dragOff(e){ +
- dragItem = null; +
- } +
- +
- //ドラッグ移動 +
- function dragMove(e){ +
- if(document.all)e = event; +
- if(!e || !dragItem) +
- return; +
- +
- dragItem.style.left = (initLeft + e.screenX - initEventX) + 'px'; +
- dragItem.style.top = (initTop + e.screenY - initEventY) + 'px'; +
- +
- setShim(dragItem); +
- return false; +
- } +
- +
- //shimの設定 +
- function setShim(obj){ +
- var shim = $('shim'); +
- +
- //objと位置、サイズを合わせる +
- shim.style.left = obj.style.left; +
- shim.style.top = obj.style.top; +
- shim.style.width = obj.offsetWidth; +
-    shim.style.height = obj.offsetHeight; +
-    shim.style.display = 'block'; +
- } +
- +
- //idからオブジェクトの取得 +
- function $(id){ +
- // IE5+, Mozilla, Opera +
- if(document.getElementById) return document.getElementById(id); +
- if(document.all) return document.all(id); // IE4 +
- if(document.layers){ // NN4 +
- var s=''; +
- for(var i=1; i<arguments.length; i++) +
- s+='document.layers.'+arguments[i]+'.'; +
- return eval(s+'document.layers.'+id); +
- } +
- return null; +
- } +
- +
- // --></script>+
 </head> </head>
 <body> <body>
 <iframe scrolling="no" frameborder="0" id="shim"></iframe> <iframe scrolling="no" frameborder="0" id="shim"></iframe>
-<a href="http://programming-magic.com/">HOME</a> <a href="http://programming-magic.com/?id=64">IE6でselectタグ(プルダウン)がz-indexを無視する対策 ［CSS, HTML, Tips］</a> +IE6でselectタグ(プルダウン)がz-indexを無視する対策  
-<div onmousedown="dragOn(this, event);" class="sample" style="left: 100px; top: 100px;">+<div id="block" class="sample" style="left: 150px; top: 250px;">
 マウスでドラッグができます。<br /> マウスでドラッグができます。<br />
 width: 300px;<br /> width: 300px;<br />
-height: 200px;<br />+height: 240px;<br />
 background-color: #8888ff;<br /> background-color: #8888ff;<br />
 position: absolute;<br /> position: absolute;<br />
 padding: 10px;<br /> padding: 10px;<br />
 <b>z-index: 100;</b><br /> <b>z-index: 100;</b><br />
-left: 100px;<br /> +left: 150px;<br /> 
-top: 100px;<br />+top: 250px;<br />
 <br /> <br />
 移動するたびに、setShim関数でこのdivにiframeを重ねています。<br /> 移動するたびに、setShim関数でこのdivにiframeを重ねています。<br />
行 137: 行 69:
 </body> </body>
 </html> </html>
 +\\
 +\\
 +\\
 +\\
 +\\
 +\\
 +\\
 +\\
 +\\
 +\\
 +\\
 +\\
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
  
 ===== iframe issue ===== ===== iframe issue =====
行 143: 行 102:
 ===== reference ===== ===== reference =====
   - [[http://www.programming-magic.com/20071107222415/|IE6でselectタグ(プルダウン)がz-indexを無視する対策]]   - [[http://www.programming-magic.com/20071107222415/|IE6でselectタグ(プルダウン)がz-indexを無視する対策]]
 +  - [[http://www.ibm.com/developerworks/jp/web/library/wa-aj-jquery6/|jQuery: 独自のプラグインを作成する]]
  
  

トレース:

QR Code
QR Code study:javascript:jquery:z-index (generated for current page)