-
jQueryでフォームの入力例をフォーム内に表示させる
2013-03-31 19:28●スクリプト
<script type="text/javascript">
$(function(){
var example_postcode = "例）140-0013";
var example_address = "例）東京都品川区南大井2-12-1-407";
var example_name = "例）大和賢一郎";
var example_mail = "例）yamato@1mouke.com";
$("form").submit(function(){
var err = 0;
if($("input[name='postcode']").val()=="" || $("input[name='postcode']").val()==example_postcode){
if($("span#postcode").css("color") -
jQueryでフォームの未入力チェック機能を作る
2013-03-31 16:36●スクリプト
<script type="text/javascript">
$(function(){
$("form").submit(function(){
var err = 0;
if($("input[name='postcode']").val()==""){
if($("span#postcode").css("color") != "red"){
$("input[name='postcode']").css("border","1px solid red").after("<span id='postcode'>郵便番号を入力してください</span>");
$("span#postcode").css("color","red");
}
err = 1;
}else{
$("input[name='postcode']").css("border" -
float:leftで横並びにしたdiv全体を中央に配置する
2013-03-30 19:29●HTML
<div class="c_japan"><p>日本</p>
<div class="c_kantou"><p>関東</p>
<div class="c_tokyo">東京</div>
<div class="c_kanagawa">神奈川</div>
<p>かんとう</p>
</div><!-- end of c_kantou -->
<p>にっぽん</p>
</div><!-- end of c_japan -->
●CSS
.c_japan{
background-color:#FF0000;
width:800px;
margin:auto;
}
.c_kantou{
background-color:#0000FF;
width:600px;
margin:auto;
}
.c_tokyo{
background-color:chartreuse;
width:200 -
jQueryでアニメーション表示されたサブメニューを選択できるようにする
2013-03-28 19:16●スクリプト
<script type="text/javascript">
$(function(){
$("div.c_kantou").mouseover(function(){
$("div#i_kantou:not(:animated)").show("normal");
})
$("div.c_kantou").mouseout(function(){
$("div#i_kantou:not(:animated)").hide("normal");
})
$("div.c_kansai").mouseover(function(){
$("div#i_kansai:not(:animated)").show("normal");
})
$("div.c_kansai").mouseleave(function(){
$ -
jQueryでボタンを押したときにメニューをアニメーション表示・非表示させる方法
2013-03-28 17:52●スクリプト
<script type="text/javascript">
$(function(){
$("button#i_hyouzi_soku").click(function(){
$("div#i_kantou").css("display","");
})
$("button#i_kesu_soku").click(function(){
$("div#i_kantou").css("display","none");
})
$("button#i_hyouzi_anime").click(function(){
$("div#i_kantou").show("normal");
})
$("button#i_kesu_anime").click(function(){
$("div#i_kantou").hide -
jQueryでボタンを押したときにメニューを表示させたり非表示にしたりする
2013-03-27 18:41●スクリプト（前提：jQueryが読み込まれていること）
<script type="text/javascript">
$(function(){
$("button#yamato").click(function(){
$("div#i_kantou").css("display","");
})
$("button#kenichiro").click(function(){
$("div#i_kantou").css("display","none");
})
});
</script>
<script type="text/javascript"><!--
function hiraku(tgt){ // 開く
if (document.getElementById){
tar=document.getElementById(tgt);
tar -
マウスカーソルを乗せたときにサブメニューが表示されるようにする（２列）
2013-03-27 15:34●スクリプト
<script type="text/javascript"><!--
function hiraku(tgt){ // 開く
if (document.getElementById){
tar=document.getElementById(tgt);
tar.style.display="";
}
}
function toziru(tgt){ // 閉じる
if (document.getElementById){
tar=document.getElementById(tgt);
tar.style.display="none";
}
}
//--></script>
●HTML
<div onMouseover="hiraku('i_kantou')" onMouseout="toziru('i_kantou')" class="c_kantou"> -
マウスカーソルを乗せたときにサブメニューが表示されるようにする（１列）
2013-03-27 15:12●スクリプト
<script type="text/javascript"><!--
function hiraku(tgt){ // 開く
if (document.getElementById){
tar=document.getElementById(tgt);
tar.style.display="";
}
}
function toziru(tgt){ // 閉じる
if (document.getElementById){
tar=document.getElementById(tgt);
tar.style.display="none";
}
}
//--></script>
●HTML
<div onMouseover="hiraku('i_kantou')" onMouseout="toziru('i_kantou')" class="c_kantou"> -
マウスカーソルを「乗せる」「乗せない」と「表示」「非表示」の処理例
2013-03-26 14:15●スクリプト
<script type="text/javascript"><!--
function syori1(tgt){
if (document.getElementById){
tar=document.getElementById(tgt);
tar.style.display="";
}
}
function syori2(tgt){
if (document.getElementById){
tar=document.getElementById(tgt);
tar.style.display="none";
}
}
function syori3(tgt){// サブメニューからポインタが離れた時の処理
if (document.getElementById){
setTimeout('document.getElementById("' + tgt -
マウスカーソルを乗せたり離したりしたときに文字を非表示にしたり表示させたりする方法
2013-03-26 11:35●スクリプト
<script type="text/javascript"><!--
function yamato(tgt){
if(document.getElementById){
tar=document.getElementById(tgt);
tar.style.display="none";
}
}
function kenichiro(tgt){
if(document.getElementById){
tar=document.getElementById(tgt);
tar.style.display="";
}
}
//--></script>
●HTML
<p onMouseover="yamato('tokyo')" onMouseout="kenichiro('tokyo')">この文字にマウスカーソルを乗せると、下記の文字が消えます。マウスカー
1 / 3
