カテゴリー別アーカイブ: jQuery

Jimdoの日付の形式を変更する方法

2015/08/11追記

仕様変わったらしく、年とか日とかでるようになっちゃったので下記のまま使うと表示が変になりますのでご注意くださいませ。

そのうち修正版を載せるかもしれない。

 ———————————–

たまたまjimdoというサービスを使ったサイトを頼まれたのでいろいろメモっていこうと思う。

ホームページ作成サービス-jimdo

できることはWPに比べたらもちろん少なくカスタマイズもそんなにできるわけではないけれど、
HTMLまったくわからんクライアントにはとても更新しやすいサービスだと思う。

その中で「ブログ」の日付の形式がどうもjsで操作しないと変更できないっぽかったのでメモ。

ブログの日付の形式を変更する

「年」を出すとか「曜日」を出すとかブログの日付表示の設定で変更できる。

問題はその表示形式。

「火 24 3月 2015」

ドイツ式?

これについてはとりあえずJSで対応する。

「設定」⇒「ヘッダー部分を編集」を開く。

2015-04-01_114050

ここにスタイルとかjsとか書けるのです。

以下をコピペ。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">

$(function(){
   
    $('time.datetime').each(function(){

        var daynum = Number($(this).find('span.day').html());
        
        var timeYear =$(this).find('span.yr').append('年');
        var timeMon = $(this).find('span.mon');
        var timeDay = $(this).find('span.day').html(daynum).append('日');
        var timeWeek= $(this).find('span.day-word').prepend('(').append(')');
        
        $(this).prepend(timeYear,timeMon,timeDay,timeWeek)

    })

})

</script>

これで「火 24 3月 2015」⇒「2015年 3月 24日 (火)」となります。

補足説明

1行目では他でもいろいろ使えるのでお好きなバージョンのjQueryを読み込んでおく

9行目では日付が「4月02日」となるのを防ぐために行頭の0を消しておく

11~14行目では年・月・日・曜日を良い感じの形にして代入しておく。
2015の後ろに「年」をつけたり曜日はかっこで囲んだりとか。

16行目で全部まとめて表示する。

以上です。

 

jQuery masonryはIE7非対応なので・・・

いや~まさか今!この時代に!masonryを使ったグリッドレイアウトでまさかのIE7対応することになるとは!
やっとIEの呪縛から抜け出せてきた今日この頃でしたのに!

しかしクライアント様のサイトのエンドユーザー様様にIE7を使ってらっしゃる方がいるというのならばなんとか対応してあげたいところ。

結論から言うと、別のプラグインを使うべき。

私が乗り換えたのは↓こちら

jquery.vgrid.js
http://blog.xlune.com/2009/09/jqueryvgrid.html

5年も前のプラグインですね。にょろにょろ動くグリッドレイアウトが流行ったのももうそんな昔・・・
しかしここにきてとてもお世話になったので、作者様には感謝です。

 使い方はサイト&demoのソースを見ればOK。
masonryとほぼ同じ。

日本の方が作ったプラグインなので、説明が日本語なのも嬉しポイント。

 

bxSliderでmode:fadeが効かない

カスタマイズがしやすくて、設置も簡単で言うことなしの万能スライダーbxSlider。
大好きすぎてスライダー実装する制作では8割がたこのスライダーを使用しています。
メインビジュアルだけでなく、スライド系のところはもう全部これ。

http://bxslider.com/

そんな大好きなbxSliderでフェードモードが効かないという状況に陥り、ググってもダメで、いろいろやってみて解決したのでメモ。

fade:’mode’が効かない

「mode:’fade’」とオプション指定すると、横スライドではなくフェード切り替えになるはずなのですが、
なぜか画像が出ない。一枚も。

「mode:’horizontal’」とか「mode:’vertical’」は問題ないのに。なぜ・・・

解決:overflowが問題でした。

ulにoverflow:hiddenしていたことが原因でした。。
フロートするリストが多くて、フロートクリア用に全部まとめてul{overflow:hidden}ってな感じで指定しちゃってたのがまずかった。

設定を解除するか、bxSliderを使うulだけ「overflow:visible;」に設定すればOK。

郵便番号から住所自動入力Ajax(contactform7)

問い合わせフォームで郵便番号を入力すると自動で住所が途中まで出てくるようにします。

実装方法はとってもとっても簡単。数行のコードで実装できます。
実装方法は以下のサイトを参照。
https://code.google.com/p/ajaxzip3/

contactform7で住所自動入力を実装したい

WordPressの問い合わせフォームといえばcontactform7。
contactform7で郵便番号を入れたら住所が自動で出てくるカタチにしたいときも
上記ajaxzip3が役立ちます。

contactform7の設定でinputに「onKeyup」とか「onClick」を付けられればいいのだけど、
めんどくさそうだったのでjQueryで対応。

①郵便番号を入力するinputにclassかIDを付けておきます。

▼contactform7側で作成したタグ。

[text zip id:zipcode]

②住所を出力するinputのnameを確認。

▼contactform7で作成したタグ。nameは「address01」になります。

[text address01]

③Ajaxzip3を読み込み&jQueryでキーアップイベントを書く

▼headでもbodyでも好きなところ(jQuery本体より後)でAjaxzip3を読み込む。
その後jQueryでkeyup(キーボードのキーが押され、上がった時)に住所を出力するコードを記述。

<script src="http://ajaxzip3.googlecode.com/svn/trunk/ajaxzip3/ajaxzip3.js" charset="UTF-8"></script>
<script>
$(function(){

	$('input#zipcode').on('keyup',function(){
	AjaxZip3.zip2addr(this,'','address01','address01');
	});

});
</script>

住所を都道府県とそれ以降に分けたい場合は出力用テキストボックスを2つ用意して、

	AjaxZip3.zip2addr(this,'','address01','address02');

↑こんな風に。

とっても簡単。

 

jQueryで(window).loadとか.scrollとか.resizeとか全部まとめて設定したい

・$(window).load ページ読み込み完了時
・$(window).scroll スクロールしたとき
・$(window).resize ウィンドウサイズ変えたとき

 

レスポンシブサイトとかで、高さを操作するときとかポジションを操作するときとかに
上記イベントを使うことが多いのだけど、全部まとめて同じ動きしてほしいのってときの書き方

▼元(めんどいほう)

$(function(){

$(window).load(function(){
  //やりたい処理
});
$(window).scroll(function(){
  //やりたい処理
});
$(window).resize(function(){
  //やりたい処理
});

});

 

▼まとめて書く

$(function(){

$(window).on('load scroll resize',function(){
  //やりたい処理
});

});

ちなみに.bindとかがjQuery1.7ぐらいから非推奨になり、代わりに.onで書くようになったそうです。

 

 

 

javascriptのonclickとかをjQueryで作動させる

例えが難しいのですが、仮に下記のようなコードがあったとして・・・

<input type="radio" onClick="処理">ラジオボタン

でもこのラジオボタンはデザイン的にとかUI的にdisplay:none;したいとします。

そうすると、このラジオボタンはクリックできなくなるためどうやってonClickの処理を発動させたらいいの??という疑問が。

簡単な解決方法は以下です。

$('input').trigger("click")

jQueryで無理やりクリックしたことにしちゃう!みたいな感じです。

jQueryで配列の基本

配列を一気に作って表示

//配列を一気に代入

var animal = ['dog','cat','mouse'];

//特定の番号の配列を表示
$('div').append(animal[1]) ;})

▼表示例

cat

eachをつかって全部表示

//配列を全部表示
 $.each(animal, function(index, value){
     $('div').append(value).append('
');

▼表示例

dog
cat
mouse

配列を作って入れて値があれば表示

//配列ハコだけ作っておく

var fruits = [];

//入れていく
fruits[0] = 'apple'
fruits[1] = 'orange'
fruits[3] = 'lemon'


//値があれば表示
 $.each(fruits, function(index, value){
     if(value){$('div').append(value).append('/');}
    })

▼表示例

apple/orange/lemon/

よく使うjQueryのイベントとか

formの値の操作系

▼入力値の取得

var xxx = $('input[type="text"]').val()

▼input textとかの値が変更されたらなにかする

 $('input[type="text"]').change(function(){
alert('変更されたよ')
}); })

▼フォーカスが外れたとき何かする

$('input[type="text"]').blur(function(){
alert('フォーカスが外れたよ')
});

▼ボタンを押せないようにする

$('input[type="button"]').attr('disabled', false).removeAttr('disabled');