クリックの度画像切り替え
メモです。
またまたメモ。
残しておかないとブックマークがわやくちゃになる。。。www
JS
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="js/btn_action.js" type="text/javascript"></script>
JS
$(function(){
var img_name = "images/top/top.png";
var img_name_over = "images/top/top.png";
$("#btn01").toggle(function(){
$("#btn01").attr("src", img_name_over);
},function(){
$("#btn01").attr("src", img_name);
});
});
HTML
<img src="images/top/top.png" id="btn01">
ツールチップ
メモです。
参考URL:
JS
<!--チップツール-->
<link rel="stylesheet" type="text/css" href="css/jquery.tgClickToolTip.css">
<script src="js/jquery.tgClickToolTip.js" type="text/javascript"></script>
<script src="js/jquery1.8.1.min.js" type="text/javascript"></script>
<!--チップツール-->
<script type="text/javascript">
$(function(){
$('a.clickToolTip').click(function(){
// リンクの # idを取得
var targetNote = $(this).attr('href');
// [?]の座標を取得
var position = $(this).position();
var newPositionTop = position.top -115; /* + 数値で下方向へ移動 */
var newPositionLeft = position.left + 164; /* + 数値で右方向へ移動 */
// ツールチップの位置を調整
$('p'+targetNote).css({'top': newPositionTop + 'px', 'left': newPositionLeft + 'px'});
// ツールチップの class="invisible" を削除
$('p'+targetNote).removeClass('invisible');
});
// 表示されたツールチップを隠す処理（マウスクリックで全て隠す）
$('html').mousedown(function(){
$('p.toolTip').addClass('invisible');
});
});
</script>
HTML
<div class="new-favorite-btn">
<a href="#favorite_btn-4" class="clickToolTip"><img src="images/top/shisetsu_star.png"></a>
<!-- ツールチップで表示させる内容 -->
<p id="favorite_btn-4" class="toolTip invisible"><img src="images/top/shisetsu_favorite_btn_sentaku.png"></p>
CSS
.invisible{
display: none;
}
a.clickToolTip{
margin: 0;
padding: 2px 6px;
}
p.toolTip{
margin: 0;
padding: 10px;
width: 200px;
min-height: 30px;
position: absolute;
top: 100px;
left: 20px;
}
ハンバーガーメニュー
メモです！！
探すのめんどくさいので。。
HTMLとCSSのみで実装可能
HTML
<div class="hamburger-box">
<a class="btn"></a>
<div class="drawr">
<ul id="menu">
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
<li><a href="#">メニュー4</a></li>
<li><a href="#">メニュー5</a></li>
</ul>
</div>
</div>
.btn {
background:transparent url(../images/top/menu_icon.png) no-repeat 0 0;
display: block;
width:80px;
height: 80px;
cursor: pointer;
position: absolute;
top: 0px;
right: 0px;
z-index: 200;
}
.peke {
background-position: 0px 0;
}
.drawr {
display: none;
background-color:rgba(0,0,0,0.8);
position: absolute;
top: 0px;
right:0px;
width:260px;
padding:80px 0 20px 20px;
z-index: 100;
}
#menu li {
width:260px;
}
#menu li a {
color:#fff;
display: block;
padding: 15px;
text-align: left;
}
cakephp ユーザー一覧表示まで。www
全く進んでいません。ww
でも、めっちゃ少しずつ進んでいます。
これから、ユーザーからユーザーへメッセージの送信機能を本格的に実装していきます。
やっと本題に進めるわ。w
遅すぎるねん！！！！！
でも、毎日少しずつコード眺めたり、触ったりすることでなんとなくわかってきました。
エラーの内容も理解できるようになってきたり、検索して調べる時間が段々短くなっている気がします。
やはりいきなりすべてのことをやるのは無理ですし、覚えれるわけがありません。
でも、毎日やることで確実にできることが増えてきているのが楽しいですわ！！
物を作ることが、好きなタイプみたいですわ！！
実装できた時は、ほんまに嬉しい！！特に、時間かかってやったものとかわ！
これからも精進していきます！！！！
Htmlとcssたち。
最近ずっとhtmlとcssとにらめっこしています。
htmlとcssに関しては、数をこなして便利な記述を体に叩き込みしかないと
痛感しています。
数こなすことで、上達も早くなります。
というとより段取りがわかるので、早くなると思います。
いきなり、記述していくのは大変です。
進めていくと必ずどこかでうまくいかない自体になります。
今なっています。www
特に各要素のサイズですね。
サイズを１つ間違えるとすべてばらばらのごちゃごちゃになるのでど偉い。
今回仕事の案件で初めてポータルサイトのコーディングを一人でやっていて思ったことを書いていきます。
基本中の基本になります。
１．デザインとサイズ
記述してい前に考えてください。幅から画像のサイズから各要素のサイズからできるだけ多くの要素のサイズを確定させる。
※※※※しなかった場合※※※※
とりあえずのwidth="100%"やhieght="100%"など後々、デザインの修正をする際など各要素が被ったりすることがあります・・・
実際ありました。そのせいで、設定したリンクまでなぜか消えるという自体も発生。www
２．動きがある箇所を決める
例えば、ここにはhoverを使い。こっちには、JavaScriptで画像を差し替える。ここには、システムが入ってくるから簡素化する。
などの多少の動きがある箇所は決めておきましょう。
※※※しなかった場合※※※
全部記述してから後で、htmlとcssの修正を行う。→ 他の要素のレイアウトまで崩れる。→ 修正する。→ やっと適切な記述になった。→ hoverやJavaScriptを記述。→ 完了。wwww
めっちゃ時間の無駄。w
３．htmlとcssの兼ね合い
例えば、１つの場所に複数の画像を入れたい場合。
cssのbackground: url();で入れるか。<img>として入れるか。わざと複数の画像を１枚の画像として<img>として使うのかによって、cssの記述がわかります。
複数の画像が重なるときは、リンクなどを考慮して作成しましょう。
リンクがある場合は、必然的に<img>としてhtmlに記述しなければなりません。
リンクなどがない場合は、わかりやすく複数の画像を１枚の画像として処理する方法がいいと思います。
あとは、z-indexで重ねる場合は、positionが必要になるので、そうなる親要素にposition: relativeを記述しなければなりません。
relativeと追加すると、レイアウトが崩れる場合があります。
最低でもこの３つは記述していく前に考えておいてください。
私みたいになります。w
追加で初めのうちはこれしてた方がいいかも。
borderで全体に線を入れておく。
こうすることで、重なっているところや変なレイアウトが一発でわかります。
私は、これ ＋ 背景に色をつけています。
だいぶわかりやすくなります。
cakephp まだ進んでないの。ww メッセージ機能。w
今日は、受信メールのテーブルに格納されてるデータを取得して表示させます。
ログインしてるidと
受信メールのテーブルの中に入ってる、
宛先のカラムに同じidが入ってる場合、
表示させてるっていうフローになると。
思っております。
まず初めにビューを作成したいところですが、
全体のフローを考えると、登録しているユーザー一覧からユーザーを選択して、
プロフィール詳細を見て、メッセージを送るののが
自然の流れだと思います。
なので〜〜〜
こういうフローで作成します。
