mnk375 @ ウィキ
http://w.atwiki.jp/mnk375/
mnk375 @ ウィキ
ja
2012-06-03T16:07:12+09:00
1338707232
-
クロスブラウザ注意点
https://w.atwiki.jp/mnk375/pages/51.html
クロスブラウザのためのテクニック集
http://coliss.com/articles/build-websites/operation/work/1234.html
IE6バグ解決法
http://coliss.com/articles/build-websites/operation/css/1036.html
jQuery総集編
http://coliss.com/articles/build-websites/operation/javascript/100-jquery-plugins-2011-best.html
2012-06-03T16:07:12+09:00
1338707232
-
dl 表組 ネガティブマージン編
https://w.atwiki.jp/mnk375/pages/50.html
無印 サマーキャンプ
開催日／場所部分、dl表組 ネガティブマージン
http://www.mujioutdoor.net/school/kids_summer_camp/2012/concept.html
<dl>
<dt>第1回</dt>
<dd>7月23日 キャンプ場</dd>
<dt>第1回</dt>
<dd>7月23日 キャンプ場</dd>
<dt>第1回</dt>
<dd>7月23日 キャンプ場</dd>
</dl>
--------------------------------------
dl {
margin:0;
padding:0;
line-height:1.4;
font-size:12pt;
}
dt {
line-height:1.5em;
margin:0px;
padding:0px;
}
dd {
line-height:1.5em;
margin-top:-1.5em;
padding:0 0 7px 4em;
}
--------------------------------------
行間と同じ数値のネガティブマージンを記載するそう。（IE6も対応）
DWのデザインビューには反映されないとのこと
http://www.nk0206.com/life/2010/04/dt-dd-n-margin.html
[CSS]ネガティブマージンの理解を深め、活用するテクニック集
http://coliss.com/articles/build-websites/operation/css/css-using-negative-margins.html
2012-06-02T14:57:40+09:00
1338616660
-
reset.css テンプレート YUI
https://w.atwiki.jp/mnk375/pages/15.html
YUI CSS
reset.css、fonts.css、grids.css、base.cssの4つ
↓reset.css
-----------------------------------------------------------
/*
YUI 3.5.0 (build 5089)
Copyright 2012 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/
/*
TODO will need to remove settings on HTML since we can't namespace it.
TODO with the prefix, should I group by selector or property for weight savings?
*/
html{
color:#000;
background:#FFF;
}
/*
TODO remove settings on BODY since we can't namespace it.
*/
/*
TODO test putting a class on HEAD.
- Fails on FF.
*/
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,
img {
border:0;
}
/*
TODO think about hanlding inheritence differently, maybe letting IE6 fail a bit...
*/
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
font-style:normal;
font-weight:normal;
}
ol,
ul {
list-style:none;
}
caption,
th {
text-align:left;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size:100%;
font-weight:normal;
}
q:before,
q:after {
content:'';
}
abbr,
acronym {
border:0;
font-variant:normal;
}
/* to preserve line-height and selector appearance */
sup {
vertical-align:text-top;
}
sub {
vertical-align:text-bottom;
}
input,
textarea,
select {
font-family:inherit;
font-size:inherit;
font-weight:inherit;
}
/*to enable resizing for IE*/
input,
textarea,
select {
*font-size:100%;
}
/*because legend doesn't inherit in IE */
legend {
color:#000;
}
/* YUI CSS Detection Stamp */
#yui3-css-stamp.cssreset { display: none; }
2012-05-29T10:55:42+09:00
1338256542
-
jQuery pLUGIN
https://w.atwiki.jp/mnk375/pages/49.html
http://plugins.jquery.com/
https://github.com/jquery/plugins.jquery.com
http://jquerylist.com/
西畑一馬氏のサイト
http://javascript.webcreativepark.net/
http://www.delicious.com/stacks/view/QZQpDa
http://b.hatena.ne.jp/search/tag?q=jQuery
http://coliss.com/articles/build-websites/operation/javascript/100-jquery-plugins-2011-best.html
2012-05-26T14:18:21+09:00
1338009501
-
Ajax de スムーズページング
https://w.atwiki.jp/mnk375/pages/48.html
http://go.ascii.jp/?jq13
--------------------------------------------------------------------
フロント側html
--------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>sample1</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#content").load($("ul.pager li a:first").attr("href")+" #content");
$("ul.pager li a:first").addClass("selected");
$("ul.pager li a").click(function(){
$("#content").html('<p class="loading"><img src="images/loading.gif" alt="" /></p>');
$("#content").data("file",$(this).attr("href"));
$('html,body').animate({ scrollTop: $("h1").offset().top-20 }, 'slow','swing',function(){
$("#content").load($("#content").data("file")+" #content");
})
$("ul.pager li a").removeClass("selected");
$(this).addClass("selected");
return false;
});
});
</script>
<style type="text/css">
#container{
width:500px;
margin:20px auto;
}
div.colmun{
width:500px;
border-bottom:1px solid #CCC;
}
div.colmun:after{
content:".";
display:block;
clear:both;
visibility:hidden;
height:0;
}
div.colmun div.img{
float:left;
width:60px;
border:1px solid #ccc;
padding:5px;
margin:5px;
display:inline;
}
div.colmun div.img img{
border:0;
}
div.colmun div.info{
float:left;
padding:5px;
width:400px;
}
div.colmun div.info h2{
margin:0;
color:#009AFF;
font-size:small;
}
div.colmun div.info ul{
margin:0;
padding:15px 0 0 15px;
}
div.colmun div.info li{
margin:0;
font-size:small;
}
p.loading{
text-align:center;
margin:10px;
}
ul.pager{
text-align:center;
padding:10px;
}
ul.pager li{
display:inline;
}
ul.pager li a{
border:1px solid #009AFF;;
color:#009AFF;;
font-weight:bold;
margin:2px;
padding:5px;
text-decoration:none;
}
ul.pager li a.selected{
background:#73C7FF;
}
</style>
</head>
<body>
<div id="container">
<h1><img src="images/header.jpg" alt="新着書籍" /></h1>
<div id="content">
<p class="loading"><img src="images/loading.gif" alt="" /></p>
</div>
<ul class="pager">
<li><a href="data1.html">1</a></li>
<li><a href="data2.html">2</a></li>
<li><a href="data3.html">3</a></li>
</ul>
</div>
</body>
</html>
--------------------------------------------------------------------
データのHTML
--------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>data1</title>
</head>
<body>
<div id="content">
<div class="colmun">
<div class="img">
<a href="http://asciimw.jp/search/?isbn=978-4-04-868064-6">
<img height="80" width="56" alt="" src="./images/978-4-04-868064-6s.jpg"/>
</a>
</div>
<div class="info">
<h2>雲の世界の向こうをつかむクラウドの技術</h2>
<ul>
<li>発売日 ： 2009/11/06</li>
<li>定価 ： 1,890円</li>
<li>ISBN ： 978-4-04-868064-6</li>
</ul>
</div>
</div>
<div class="colmun">
<div class="img">
<a href="http://asciimw.jp/search/?isbn=978-4-04-868174-2">
<img height="80" width="56" alt="" src="./images/978-4-04-868174-2s.jpg"/>
</a>
</div>
<div class="info">
<h2>完全合格 ORACLE MASTER Silver DBA 11g 問題集</h2>
<ul>
<li>著者 ： 津田竜賜、有里恵、飯塚美香、伊藤尚子、ほか</li>
<li>発売日 ： 2009/11/10</li>
<li>定価 ： 3,129円</li>
<li>ISBN ： 978-4-04-868174-2</li>
</ul>
</div>
</div>
<div class="colmun">
<div class="img">
<a href="http://asciimw.jp/search/?isbn=978-4-04-868180-3">
<img height="80" width="56" alt="" src="./images/978-4-04-868180-3s.jpg"/>
</a>
</div>
<div class="info">
<h2>すぐわかる Excel2007 Windows7／Vista／XP 全対応</h2>
<ul>
<li>著者 ： 尾崎裕子</li>
<li>発売日 ： 2009/11/27</li>
<li>定価 ： 1,344円</li>
<li>ISBN ： 978-4-04-868180-3</li>
</ul>
</div>
</div>
<div class="colmun">
<div class="img">
<a href="http://asciimw.jp/search/?isbn=978-4-04-868181-0">
<img height="80" width="56" alt="" src="./images/978-4-04-868181-0s.jpg"/>
</a>
</div>
<div class="info">
<h2>すぐわかる Windows7</h2>
<ul>
<li>著者 ： 小野均</li>
<li>発売日 ： 2009/11/27</li>
<li>定価 ： 1,344円</li>
<li>ISBN ： 978-4-04-868181-0</li>
</ul>
</div>
</div>
<div class="colmun">
<div class="img">
<a href="http://asciimw.jp/search/?isbn=978-4-04-868293-0">
<img height="80" width="56" alt="" src="./images/978-4-04-868293-0s.jpg"/>
</a>
</div>
<div class="info">
<h2>Macを買ったら最初に読む本 Mac OS X v10.6 Snow Leopard 版</h2>
<ul>
<li>発売日 ： 2009/11/30</li>
<li>定価 ： 1,344円</li>
<li>ISBN ： 978-4-04-868293-0</li>
</ul>
</div>
</div>
<div class="colmun">
<div class="img">
<a href="http://asciimw.jp/search/?isbn=978-4-04-868252-7">
<img height="80" width="56" alt="" src="./images/978-4-04-868252-7s.jpg"/>
</a>
</div>
<div class="info">
<h2>Microsoftのクラウドコンピューティング Windows Azure入門</h2>
<ul>
<li>著者 ： 砂金信一郎、遠藤大樹、酒井達明、藤田昭人</li>
<li>発売日 ： 2009/11/30</li>
<li>定価 ： 2.730円</li>
<li>ISBN ： 978-4-04-868252-7</li>
</ul>
</div>
</div>
</div>
</body>
</html>
2012-05-25T23:40:43+09:00
1337956843
-
カルーセルパネル 自動スライド
https://w.atwiki.jp/mnk375/pages/47.html
http://go.ascii.jp/?jq12/sample2.html
---------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>sample2</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#carouselInner").css("width",620*$("#carouselInner ul.column").size()+"px");
$("#carouselInner ul.column:last").prependTo("#carouselInner");
$("#carouselInner").css("margin-left","-620px");
$("#carouselPrev").click(function(){
$("#carouselNext,#carouselPrev").hide();
$("#carouselInner").animate({
marginLeft : parseInt($("#carouselInner").css("margin-left"))+620+"px"
},"slow","swing" ,
function(){
$("#carouselInner").css("margin-left","-620px")
$("#carouselInner ul.column:last").prependTo("#carouselInner");
$("#carouselNext,#carouselPrev").show();
});
});
$("#carouselNext").click(function(){
$("#carouselNext,#carouselPrev").hide();
$("#carouselInner").animate({
marginLeft : parseInt($("#carouselInner").css("margin-left"))-620+"px"
},"slow","swing" ,
function(){
$("#carouselInner").css("margin-left","-620px");
$("#carouselInner ul.column:first").appendTo("#carouselInner");
$("#carouselNext,#carouselPrev").show();
});
});
var timerID = setInterval(function(){
$("#carouselNext").click();
},5000);
$("#carouselPrev img,#carouselNext img").click(function(){
clearInterval(timerID);
});
});
</script>
<style type="text/css">
*{
margin:0;
padding:0;
}
#carouselWrap{
margin:100px auto;
width:620px;
height:135px;
padding:5px;
background:url("./images/background.gif");
position:relative;
}
#carouselPrev{
position:absolute;
top:65px;
left:-8px;
cursor:pointer;
}
#carouselNext{
position:absolute;
top:65px;
right:-8px;
cursor:pointer;
}
#carouse{
width:100%;
height:100%;
overflow:hidden;
}
#carouselInner ul.column{
width:605px;
height:105px;
padding:15px 0 15px 15px;
list-style-type:none;
float:left;
}
#carouselInner ul.column li{
float:left;
margin-right:10px;
display:inline;
}
#carouselInner ul.column li img{
border:none;
}
</style>
</head>
<body>
<body>
<div id="carouselWrap">
<p id="carouselPrev"><img src="./images/btn_prev.gif" alt="前へ" /></p>
<p id="carouselNext"><img src="./images/btn_next.gif" alt="次へ" /></p>
<div id="carouse">
<div id="carouselInner">
<ul class="column">
<li><a href="#"><img src="./images/photo1_thum.jpg" alt="" /></a></li>
<li><a href="#"><img src="./images/photo2_thum.jpg" alt="" /></a></li>
<li><a href="#"><img src="./images/photo3_thum.jpg" alt="" /></a></li>
<li><a href="#"><img src="./images/photo4_thum.jpg" alt="" /></a></li>
</ul>
<ul class="column">
<li><a href="#"><img src="./images/photo5_thum.jpg" alt="" /></a></li>
<li><a href="#"><img src="./images/photo6_thum.jpg" alt="" /></a></li>
<li><a href="#"><img src="./images/photo7_thum.jpg" alt="" /></a></li>
<li><a href="#"><img src="./images/photo8_thum.jpg" alt="" /></a></li>
</ul>
<ul class="column">
<li><a href="#"><img src="./images/photo9_thum.jpg" alt="" /></a></li>
<li><a href="#"><img src="./images/photo10_thum.jpg" alt="" /></a></li>
<li><a href="#"><img src="./images/photo11_thum.jpg" alt="" /></a></li>
<li><a href="#"><img src="./images/photo12_thum.jpg" alt="" /></a></li>
</ul>
<ul class="column">
<li><a href="#"><img src="./images/photo13_thum.jpg" alt="" /></a></li>
<li><a href="#"><img src="./images/photo14_thum.jpg" alt="" /></a></li>
<li><a href="#"><img src="./images/photo15_thum.jpg" alt="" /></a></li>
<li><a href="#"><img src="./images/photo16_thum.jpg" alt="" /></a></li>
</ul>
</div>
</div>
</div>
</body>
</body>
</html>
2012-05-25T14:04:44+09:00
1337922284
-
カルーセルパネル
https://w.atwiki.jp/mnk375/pages/46.html
http://go.ascii.jp/?jq12
---------------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>sample1</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#carouselInner").css("width",620*$("#carouselInner ul.column").size()+"px");
$("#carouselInner ul.column:last").prependTo("#carouselInner");
$("#carouselInner").css("margin-left","-620px");
$("#carouselPrev").click(function(){
$("#carouselNext,#carouselPrev").hide();
$("#carouselInner").animate({
marginLeft : parseInt($("#carouselInner").css("margin-left"))+620+"px"
},"slow","swing" ,
function(){
$("#carouselInner").css("margin-left","-620px")
$("#carouselInner ul.column:last").prependTo("#carouselInner");
$("#carouselNext,#carouselPrev").show();
});
});
$("#carouselNext").click(function(){
$("#carouselNext,#carouselPrev").hide();
$("#carouselInner").animate({
marginLeft : parseInt($("#carouselInner").css("margin-left"))-620+"px"
},"slow","swing" ,
function(){
$("#carouselInner").css("margin-left","-620px")
$("#carouselInner ul.column:first").appendTo("#carouselInner");
$("#carouselNext,#carouselPrev").show();
});
});
});
</script>
<style type="text/css">
*{
margin:0;
padding:0;
}
#carouselWrap{
margin:100px auto;
width:620px;
height:135px;
padding:5px;
background:url("./images/background.gif");
position:relative;
}
#carouselPrev{
position:absolute;
top:65px;
left:-8px;
cursor:pointer;
}
#carouselNext{
position:absolute;
top:65px;
right:-8px;
cursor:pointer;
}
#carousel{
width:100%;
height:100%;
overflow:hidden;
}
#carouselInner ul.column{
width:605px;
height:105px;
padding:15px 0 15px 15px;
list-style-type:none;
float:left;
}
#carouselInner ul.column li{
float:left;
margin-right:10px;
display:inline;
}
#carouselInner ul.column li img{
border:none;
}
</style>
</head>
<body>
<div id="carouselWrap">
<p id="carouselPrev"><img src="./images/btn_prev.gif" alt="前へ" /></p>
<p id="carouselNext"><img src="./images/btn_next.gif" alt="次へ" /></p>
<div id="carousel">
<div id="carouselInner">
<ul class="column">
<li><a href="#"><img src="./images/photo1_thum.jpg" alt="" /></a></li>
<li><a href="#"><img src="./images/photo2_thum.jpg" alt="" /></a></li>
<li><a href="#"><img src="./images/photo3_thum.jpg" alt="" /></a></li>
<li><a href="#"><img src="./images/photo4_thum.jpg" alt="" /></a></li>
</ul>
<ul class="column">
<li><a href="#"><img src="./images/photo5_thum.jpg" alt="" /></a></li>
<li><a href="#"><img src="./images/photo6_thum.jpg" alt="" /></a></li>
<li><a href="#"><img src="./images/photo7_thum.jpg" alt="" /></a></li>
<li><a href="#"><img src="./images/photo8_thum.jpg" alt="" /></a></li>
</ul>
<ul class="column">
<li><a href="#"><img src="./images/photo9_thum.jpg" alt="" /></a></li>
<li><a href="#"><img src="./images/photo10_thum.jpg" alt="" /></a></li>
<li><a href="#"><img src="./images/photo11_thum.jpg" alt="" /></a></li>
<li><a href="#"><img src="./images/photo12_thum.jpg" alt="" /></a></li>
</ul>
<ul class="column">
<li><a href="#"><img src="./images/photo13_thum.jpg" alt="" /></a></li>
<li><a href="#"><img src="./images/photo14_thum.jpg" alt="" /></a></li>
<li><a href="#"><img src="./images/photo15_thum.jpg" alt="" /></a></li>
<li><a href="#"><img src="./images/photo16_thum.jpg" alt="" /></a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
2012-05-25T14:02:50+09:00
1337922170
-
drag&drop可能！フローティングウィンドウ IE6対応版
https://w.atwiki.jp/mnk375/pages/45.html
http://editors.ascii.jp/m-kobashigawa/jqsample/chapter03/10/sample2.html
------------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>sample2</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("a.open").click(function(){
$("#floatWindow").fadeIn("fast");
return false;
});
$("#floatWindow a.close").click(function(){
$("#floatWindow").fadeOut("fast");
return false;
});
$("#floatWindow dl dt").mousedown(function(e){
$("body").bind('selectstart', function(){
return false;
});
$("#floatWindow")
.data("clickPointX" , e.pageX - $("#floatWindow").offset().left)
.data("clickPointY" , e.pageY - $("#floatWindow").offset().top);
$(document).mousemove(function(e){
$("#floatWindow").css({
top:e.pageY - $("#floatWindow").data("clickPointY")+"px",
left:e.pageX - $("#floatWindow").data("clickPointX")+"px"
});
});
}).mouseup(function(){
$("body").unbind('selectstart');
$(document).unbind("mousemove");
});
});
</script>
<style type="text/css">
#floatWindow{
display:none;
position:absolute;
width:500px;
height:400px;
top:100px;
left:100px;
}
#floatWindow a.close{
position:absolute;
right:20px;
top:1px;
}
#floatWindow a.close img{
border:none;
}
#floatWindow dl{
width:100%;
height:100%;
background:url("./images/floatWindow.png");
margin:0;
}
* html #floatWindow dl{
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./images/floatWindow.png',sizingMethod='scale');
}
* html #floatWindow dl *{
position:relative;
}
#floatWindow dl dt{
height:25px;
line-height:25px;
text-indent:1em;
color:white;
font-weight:bold;
cursor:move;
}
#floatWindow dl dd{
margin:0;
padding:2em;
line-height:1.5;
text-indent:1em;
}
</style>
</head>
<body>
<a href="#floatWindow" class="open">フローティングウィンドウの表示</a>
<div id="floatWindow">
<a href="sample2.html" class="close"><img src="./images/close.png" alt="閉じる" /></a>
<dl>
<dt>jQueryによるフローティングウィンドウの作成</dt>
<dd>今回はjQueryでフローティングウィンドウを作成する方法を解説します。フローティングウィンドウとはWebページ上にドラッグ可能な別の子ウィンドウを表示するUIのことです。ポップアップなどで表示されるウィンドウとは異なりブラウザのポップアップブロックなどの影響を受けず、また、元のサイトにレイアウトなどに影響を与えずにウィンドウを表示することが可能になっています。</dd>
</dl>
</div>
</body>
</html>
2012-05-25T11:43:42+09:00
1337913822
-
lightbox風モーダルウィンドウ
https://w.atwiki.jp/mnk375/pages/42.html
http://editors.ascii.jp/m-kobashigawa/jqsample/chapter03/09/sample2.html
-----------------------------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>sample2</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("body").append("<div id='glayLayer'></div><div id='overLayer'></div>");
$("#glayLayer").click(function(){
$(this).hide()
$("#overLayer").hide();
});
$("a.modal").click(function(){
$("#glayLayer").show();
$("#overLayer").show().html("<img src='"+$(this).attr("href")+"' />");
return false;
});
if($.browser.msie && $.browser.version<7){
$(window).scroll(function(){
$("#glayLayer").css('top',$(document).scrollTop());
$("#overLayer").css('top',($(document).scrollTop()+$(window).height()/2) +"px");
});
}
});
</script>
<style type="text/css">
html,body{
margin:0;
padding:0;
height:100%;
}
h1{
margin:20px 50px;
font-size:large;
border-left:10px solid #7BAEB5;
border-bottom:1px solid #7BAEB5;
padding:10px;
width:600px;
}
ul{
width:700px;
}
ul li{
float:left;
list-style-type:none;
}
ul li img{
border:0;
margin:10px;
}
div#glayLayer{
display:none;
position:fixed;
left:0;
top:0;
height:100%;
width:100%;
background:black;
filter:alpha(opacity=60);
opacity: 0.60;
}
* html div#glayLayer{
position:absolute;
}
#overLayer{
display:none;
position: fixed;
top:50%;
left:50%;
margin-top:-244px;
margin-left:-325px;
}
* html #overLayer{
position: absolute;
}
</style>
</head>
<body>
<h1>jQueryを利用したモーダルウィンドウの作成</h1>
<ul>
<li><a href="images/photo1.jpg" class="modal"><img src="images/photo1_thum.jpg" alt="シャンデリア" /></a></li>
<li><a href="images/photo2.jpg" class="modal"><img src="images/photo2_thum.jpg" alt="バラ" /></a></li>
<li><a href="images/photo3.jpg" class="modal"><img src="images/photo3_thum.jpg" alt="海" /></a></li>
<li><a href="images/photo4.jpg" class="modal"><img src="images/photo4_thum.jpg" alt="門" /></a></li>
<li><a href="images/photo5.jpg" class="modal"><img src="images/photo5_thum.jpg" alt="海" /></a></li>
<li><a href="images/photo6.jpg" class="modal"><img src="images/photo6_thum.jpg" alt="あじさい" /></a></li>
<li><a href="images/photo7.jpg" class="modal"><img src="images/photo7_thum.jpg" alt="空" /></a></li>
<li><a href="images/photo8.jpg" class="modal"><img src="images/photo8_thum.jpg" alt="建物" /></a></li>
</ul>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
</html>
2012-05-24T15:45:08+09:00
1337841908
-
テキストモーダルウィンドウ
https://w.atwiki.jp/mnk375/pages/44.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>sample5</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("dd").hide()
$("body").append("<div id='glayLayer'></div><div id='overLayer'></div>");
$("#glayLayer").click(function(){
$(this).hide();
$("#overLayer").hide();
});
$("dt").click(function(){
$("#glayLayer").show();
$("#overLayer").show().html("<img src='images/close.png' class='close' />"+$("+dd",this).html()).css({
marginTop:"-"+$("#overLayer").height()/2+"px" ,
marginLeft:"-"+$("#overLayer").width()/2+"px"
});
$("#overLayer img.close").click(function(){
$("#glayLayer").hide();
$("#overLayer").hide();
});
return false;
});
if($.browser.msie && $.browser.version<7){
$(window).scroll(function(){
$("#glayLayer").get(0).style.setExpression("top","$(document).scrollTop()+'px'");
$("#overLayer").get(0).style.setExpression("top","($(document).scrollTop()+$(window).height()/2)+'px'");
});
}
});
</script>
<style type="text/css">
html,body{
margin:0;
padding:0;
height:100%;
}
dl dt{
margin:20px 50px;
font-size:large;
border:1px solid #7BAEB5;
border-left:1em solid #7BAEB5;
padding-left:10px;
width:600px;
cursor:pointer;
}
div#glayLayer{
display:none;
position:fixed;
left:0;
top:0;
height:100%;
width:100%;
background:#7BAEB5;
filter:alpha(opacity=75);
opacity: 0.75;
}
* html div#glayLayer{
position:absolute;
}
#overLayer{
display:none;
width:400px;
background:white;
padding:10px;
position: fixed;
top:50%;
left:50%;
}
#overLayer img.close{
position:absolute;
top:-10px;
right:-10px;
cursor:pointer;
}
* html #overLayer{
position: absolute;
}
</style>
</head>
<body>
<dl>
<dt>Lorem ipsum dolor sit amet,</dt>
<dd><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis neque urna, molestie id cursus non, bibendum nec magna. Mauris consequat faucibus ante sollicitudin ullamcorper. Proin et felis orci. Nulla vitae diam sit amet felis semper ultricies. Nulla vitae mauris sit amet augue pulvinar pulvinar. Donec tincidunt viverra turpis eget suscipit. Morbi eu lacus iaculis turpis suscipit pretium. Aenean ultricies scelerisque dictum. Phasellus tincidunt, nibh lacinia facilisis aliquam, lacus quam condimentum orci, id lacinia justo odio vel purus. Mauris molestie tortor eu purus facilisis at congue sapien commodo. Sed ac eros vitae odio ultrices mollis nec a lorem. Phasellus sit amet dolor nec tellus consequat ornare sit amet ut ipsum. Vestibulum sagittis, mi sed pulvinar semper, lacus mauris lobortis eros, eu egestas est lectus nec lacus. Donec in lacus quis elit consectetur accumsan sit amet sed tortor. Etiam id vestibulum libero. Nam faucibus tincidunt felis, eu feugiat nibh fringilla vel. Donec adipiscing dictum imperdiet. Nulla ac fringilla neque. Curabitur posuere euismod est vel vehicula. Curabitur quis ligula sit amet quam tempus venenatis.</p></dd>
<dt>Integer rhoncus felis mauris.</dt>
<dd><p>Integer rhoncus felis mauris. Donec massa nisi, posuere vel posuere vel, suscipit sed magna. Sed congue scelerisque odio, faucibus tempor nisl posuere condimentum. In eu tellus vitae elit consequat pretium. Maecenas nec ultrices dolor. Curabitur eu pulvinar turpis. Aenean vel tortor justo, id dapibus velit. Mauris pulvinar massa sit amet erat mollis sit amet ornare tellus aliquet. Quisque ullamcorper elementum libero, ut vehicula neque placerat nec. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Morbi et ante turpis, et fringilla tortor. In hac habitasse platea dictumst. Proin eros urna, sagittis vitae tristique et, ullamcorper ac leo. Donec elementum arcu tortor. Praesent tincidunt dui in est adipiscing ac lobortis lorem porttitor. Nullam et dui elit. Vivamus hendrerit vestibulum enim, quis lobortis erat viverra vitae. Donec at pellentesque mi. Mauris lobortis libero ac metus ultricies accumsan. </p></dd>
<dt>Integer pretium porttitor lectus at tempor.</dt>
<dd><p>Integer pretium porttitor lectus at tempor. Donec nec cursus elit. Maecenas ornare malesuada urna vitae lobortis. Sed vulputate sapien quis purus cursus consectetur. Aenean nulla neque, egestas ut accumsan nec, convallis vel enim. Vestibulum vehicula interdum diam nec condimentum. Etiam in condimentum justo. Fusce a tortor metus, id pellentesque orci. Sed facilisis, tellus quis tempus faucibus, justo elit sodales lorem, eget placerat lectus risus bibendum ipsum. Donec varius mattis quam eu consequat. Praesent ut metus nec nibh tincidunt suscipit. Nam vulputate sodales egestas. Sed orci lectus, vestibulum ac gravida eget, congue non velit. Morbi rutrum convallis orci, in hendrerit arcu vulputate a. Aliquam aliquam facilisis libero, sit amet facilisis lacus tincidunt ac. Sed viverra nulla sit amet turpis egestas nec molestie justo congue. Vivamus a lacinia sem. Aenean ut metus arcu, non ornare orci. Praesent feugiat est eu tellus dictum ac imperdiet nisi imperdiet. </p></dd>
</dl>
</body>
</html>
2012-05-24T15:35:33+09:00
1337841333