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

差分

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

この比較画面へのリンク

両方とも前のリビジョン前のリビジョン
次のリビジョン		前のリビジョン
study:javascript:jquery:z-index [2010/10/11 09:01] – 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; 
- text-align: center; + } 
- border-style: solid; + #shim{ 
- border-width: 2px; + z-index: 10; 
- border-color: red; + position: absolute; 
- } + visibility: hidden; 
- #shim{ + } 
- z-index: 10; +</style> 
- position: absolute; +<script language="JavaScript"> 
- display: none; +<!-- 
- } +      $(function(){ 
- </style> +          $("#block").draggable(); 
-<script language="JavaScript"><!-- +      });
- 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'; +
- } +
 // --> // -->
 </script> </script>
行 97: 行 44:
 <iframe scrolling="no" frameborder="0" id="shim"></iframe> <iframe scrolling="no" frameborder="0" id="shim"></iframe>
 IE6でselectタグ(プルダウン)がz-indexを無視する対策  IE6でselectタグ(プルダウン)がz-indexを無視する対策 
-<div onmousedown="dragOn(this, event);" class="sample" style="left: 50px; top: 250px;">+<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: 50px;<br />+left: 150px;<br />
 top: 250px;<br /> top: 250px;<br />
 <br /> <br />
行 128: 行 75:
 \\ \\
 \\ \\
 +\\ 
 +\\ 
 +\\ 
 +\\ 
 +\\ 
 +\\
  
  
行 150: 行 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: 独自のプラグインを作成する]]
  
  

トレース: • select • z-index • prevent_paste

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