mkasumi.com


とってもシンプルなスライダーのjQueryプラグインを作りました。jQueyプラグイン自体を作ること自体が初めてでした。

制作したスライダーはCodepenにデモを公開しています。

ソースコードはGitHubからご覧ください。

目次

  • jQueryプラグインを作った理由
  • jQueryプラグインの作り方
  • スライダーの作り方
  • はじめてスライダーのjQueryプラグインを作ってみて

「とってもシンプルなスライダーのjQueryプラグインを作りました」のつづきを読む


Tag:jQuery セミナー 

Posted by 森田かすみ at 09:23  Permalink

普段はDateオブジェクトはa-blog cmsの機能のおかげで使わないのですが、CMSのバージョンが古い案件で初めてJavaScriptのDateオブジェクトを先日使ったのでそのときのメモです。

これからもあまり使うことがなさそうで、すぐ忘れてしまいそうなので備忘録がてらブログにまとめます。

日付を取得する

今日の日付を出力したいとき

var dateAttr = new Date();

指定した日付を出力したいとき

var dateAttr = new Date('2014-10-05');

CMSで出力している日付を表示したいとき (例はdata-属性をつかったとき)

<!-- HTML -->
<span data-date="2014-10-05"></span>

//JS
var dateAttr = $('span').attr('data-date');
var date = new Date(dateAttr); //1行目で作った変数をnew Date()に使用

たとえば、CMSのカスタムフィールドで設定している日時を、Javascriptでも使いたいときは、CMSで出力した日付の変数をHTMLのdata-属性に書きます。

<span data-date="{eventdate}"></span>

そのdata-属性を指定して値を引っ張りだすことで、Javascriptで使うことができます。

「JavaScriptのDateオブジェクトを使ったときのメモ」のつづきを読む


Tag:jQuery コーディング 

Posted by 森田かすみ at 21:04  Permalink

3月13日(水)に行われた「マークアップエンジニアのための初心者向けjQuery勉強会 第3回目」に参加しました。講師は有限会社アップルップル 岩崎 浩(いわさき ひろし)さんです。場所はいつものようにベースキャンプ名古屋の会議室で行われました。今回は前回の続きのエフェクトと属性操作の勉強をしてから、イベントのことについて学びました。そして最後には今まで習ってきたセレクタ・エフェクト・イベントを応用した練習問題に挑戦しました。

エフェクト(アニメーション)

fadeTo

ふわっと透明になるエフェクトです。

$('クラス名')fadeTo( 'slow(速度)'  0.2(透過率) )

.animate

50px上に移動させるエフェクトです。

$('クラス名').animate(top:-50px)

属性操作

属性とは、HTMLの属性のこと。(例:href="" とか target="")このHTMLタグを操作する。CLASSの追加や削除を行います。

  • attr・・・強制。それまで書いたCSSなどが上書きされてしまう。
  • addclass・・・今まで書いたCSSなどに追加する。
  • removeclass・・・特定のクラスを消す事ができる。

「マークアップエンジニアのための初心者向けjQuery勉強会 第3回目」のつづきを読む


Tag:jQuery 

Posted by 森田かすみ at 01:01  Permalink

配られたプリントの写真

勉強会でくばられたプリント


3月6日に行われた「マークアアプエンジニアのための初心者向けjQuery勉強会 第2回目」に参加しました。女子高生に混ざっているせいか、変な緊張に包まれながらの勉強会でした。講師は有限会社アップルップル 岩崎 浩 さんです。場所はベースキャンプ名古屋で行われました。今回はバグ対策とエフェクトのお話でした。

バグ対策

バグ対策では、とりあえず挑戦してみるしかないです。やってみて正常に動かなかったら直して、やってみて直して・・・の繰り返しです。そこでエラーを知る方法を教えてもらいました。

エラーを知る

デバッグツールを使って思った通りに動いていない場所を特定します。FireFoxのアドオンを活用する。FirebugWeb Developerがあります。とりあえず、このアドオンを使います。ちなみに私はFirebugを使っています。

「マークアアプエンジニアのための初心者向けjQuery勉強会 第2回目」のつづきを読む


Tag:jQuery 

Posted by 森田かすみ at 16:14  Permalink

プロフィール

森田かすみ

名古屋のWeb制作会社でマークアップエンジニアとして働いています。マークアップ勉強会名古屋という勉強会の主催もやっています。

  • はてなブックマーク

カテゴリー