テキストにマウスを置いた時のマウスカーソルは通常下記のような表示になります。
リンクにマウスを置いた時のように、マウスカーソルを指マークにしたい時があります。
テキストにマウスを置いた時にマウスカーソルを指マークで表示する場合は、下記のように設定します。
■ CSSでマウスカーソルを指マークに設定
設定する箇所に下記のスタイルを追加します。
【CSS】
cursor: pointer; cursor: hand;
※IE6に対応させる為、「cursor: hand;」も記述します。
【HTML】
<span style="cursor: hand; cursor:pointer;">テキスト</span>
【設定例】
cursorプロパティには他にも色々なものがあるので、その時に応じて変更するといいと思います。
jQueryのjQueryAutoHeight.jsプラグインを使用してカラムの高さを揃えた時の方法をメモします。
WEBページを作成している時に、ボックスごとに高さを揃えて表示したい場合があります。
データベースより値を出力する場合など、データによっては小さいものや大きいものなどが混雑していると出力時にレイアウトが崩れてしまいます。
高さが決まっている場合は設定する必要はないのですが、高さが決まっていない場合など「jQueryAutoHeight.js」を使用すると簡単にカラムの高さを揃えることができます。
下記のサイトよりダウンロードできます。
jQueryAutoHeight.js – 複数のカラムの高さを最大値にそろえるjQueryプラグイン
使用方法が簡単でとても使いやすいです。
■ jQueryAutoHeight.jsの使用方法
上記リンクから「jQueryAutoHeight.js」をダウンロードします。
jQueryとjQueryAutoHeight.jsを読み込み使用します。
○指定した全てのカラムの高さを揃える場合
【js】
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="jQueryAutoHeight.js"></script>
<script type="application/javascript">
$(function(){
$('.box').autoHeight();
});
</script>
【css】
<style type="text/css">
#main {
width: 500px;
margin: 0 auto;
}
.box {
width: 80px;
padding: 10px;
border: 1px dashed #0000FF;
margin: 5px;
float: left;
display: block;
}
</style>
【html】
<div id="main"> <div class="box">test</div> <div class="box">test<br>test<br>test<br>test<br>test</div> <div class="box">test</div> <div class="box">test</div> <div class="box">test</div> <div class="box">test</div> <div class="box">test</div> <div class="box">test</div> </div>
【表示例】
・使用前
・使用後
指定した要素の高さを全て同じ高さで揃えて表示されます。
○一行ごとの高さで揃える場合
【js】
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="jQueryAutoHeight.js"></script>
<script type="application/javascript">
$(function(){
$('.box').autoHeight({column:4, clear:1});
});
</script>
【html】
<div id="main"> <div class="box">test</div> <div class="box">サンプル<br>サンプル<br>サンプル<br>サンプル<br>サンプル</div> <div class="box">test</div> <div class="box">test</div> <div class="box">test</div> <div class="box">test</div> <div class="box">test</div> <div class="box">test</div> <div class="box">あいうえおかきくけこさしすせそたちつてと</div> <div class="box">test</div> <div class="box">test</div> <div class="box">test</div> </div>
【表示例】
・使用前
・使用後
高さを一行ごとに揃えて表示されます。
FuelphpでMVCをモジュール化する時の設定方法をメモします。
開発を進めていくとファイルが膨大になってしまって、開発効率が落ちることがあります。
モジュール化することでMVCをまとめることができるので、開発する時にファイル等を参照しやすくなります。
また、ディレクトリごとコピーしてしまえば簡単に複製することができるので、開発効率も上がると思います。
FuelphpでMVCをモジュール化する場合の記述方法や設定方法等を下記に記載します。
■ Fuelphpでモジュール化する方法
Fuelphpのディレクトリ構造はモジュール化をしない場合、
下記のような構造になっています。
モジュール化する場合は「modules」ディレクトリの中にモジュールごとに設置します。
今回は「hoge」というモジュールを作成しています。
コントローラー、モデル、ビューをモジュール内に設置します。
・config.phpの設定
モジュール化を設定する為に「/fuel/app/config/config.php」を編集します。
下記のように「module_paths」を設定します。
※複数設定することも可能です。
'module_paths' => array( APPPATH.'modules'.DS ),
・namespaceを設定
コントローラー、モデルにnamespaceを記述します。
下記は「hoge」というモジュールを作成した場合です。
※namespaceはモジュール名と同じにしてください。
【controller】
<?php
namespace Hoge;
use Hoge\Model\Hoge;
class Controller_Hoge extends \Controller_Template
{
【model】
<?php
namespace Hoge\Model;
class Hoge extends \Model {
モジュールの外にあるクラスを呼ぶ場合は、「\」を付けます。
下記のように「\」を先頭に記述します。
※モジュール内のクラスを呼ぶとき以外は全て付与しないとエラーになります。
\Uri::segment(1);
モジュール化を使用した方がファイルが参照しやすくなるので、とても便利です。
大きいプロジェクトなどでは最初の段階で設定しておいた方がいいと思います。
jQueryを使用してHTMLの要素にclassの追加や削除をしたい場合があります。
クリックやマウスオーバーした時などにスタイルを変更したい場合、
HTMLの要素のclassを変更すれば用意しておいたスタイルに変えることができます。
下記にjQueryの「addClass」「removeClass」「toggleClass」メソッドを使用して、
HTMLの要素にclassを追加したり、削除したりする方法をメモします。
■ addClass
指定したHTMLの要素にclassを追加します。
$('要素').addClass('クラス名');
■ removeClass
指定したHTMLの要素のclassを削除します。
$('要素').removeClass('クラス名');
■ toggleClass
指定したHTMLの要素のclassがなければ追加し、ある場合は削除します。
$('要素').toggleClass('クラス名');
■ 使用例（toggleClass）
toggleClassを使用してマウスオーバーした時にclassを追加・削除をした場合です。
【JS】
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#sample").mouseover(function(){
$(this).toggleClass('hoge');
});
});
</script>
【HTML】
<div id="sample"> サンプル </div>
「hoge」クラスのCSSを用意しておけば、スタイル変更することができます。
複数クラスを追加・削除する場合はスペースで区切ると複数指定することができます。
$('要素').addClass('クラス名 クラス名');
HTML5でinput要素にrequired属性を設定すると値が存在するかを判定し、必須のチェックをすることができます。
※Firefox24.0
※ブラウザによって表示が違います。
指定の仕方はinput要素にrequired属性を記述するだけです。
required="required"
しかし、ブラウザのバージョンや対応していないブラウザもあるようなので、バリデーションの処理はしっかり行う必要があります。
HTML5でinput要素にrequired属性を設定し、必須チェックを行った時の方法をメモします。
■ required属性
submit時に必須チェックを行い、エラーメッセージを出力します。
■ required属性で必須チェック
input要素にrequired属性を設定します
<form action="" method="post"> <input type="text" name="hoge" value="" required="required" /> <br> <input type="submit" name="save" value="保存" /> </form>
値を入力せずにサブミットすると下記のようにエラーメッセージが表示されます。
「input」以外にも「textarea」や「select」でも設定することができます。