ページングをキーボードで操作するJavaScript&jQuery

Keyboard Shortcuts for Pagination

Keyboard Shortcuts for Pagination

めずらしく2日続けて連続投稿のJETBABY管理人です。
といっても今回は手短に言っちゃう感じで。

さてさて、ウェブサービスやらブログやらによくあるページング、ページャー。
それをキーボードで操作できるようにしちゃうスクリプトの紹介です。

Keyboard Shortcuts for Pagination

デモ

スマホ全盛のいまどき?とか思うかもしれませんが、場合によっては使えるかもと思うので紹介。
一般の人向けのサイトやサービスというより、PCがなくてはならない技術者なんか向けのサイトとかではキーボードで色々操作できるのはありがたいのではないでしょうか。

正直俺はありがたい。
なんだかんだで1日にPCに向かって作業している時間が多いので。

ページングをカーソルキーの左右で移動させたり2回早押しで一番前や後ろに移動できる感じ。
JavaScript版とjQuery版(1系も2系もOK)が用意されているのも親切。

使い方は書くほど難しくもなくサイトに詳しく出ているので割愛。

今回は、まだまだPCだって捨てたもんじゃないんだぜ、という思いの投稿でもありました。
そんなわけでKeyboard Shortcuts for Paginationの紹介でした。

それではまた。

JETBABYオリジナル無料素材(美容・理容向け)

素材アレンジ例

はい、どうも。
出かけるときの電車の中で読む本と同時に聴く音楽のチョイスが最近しっくりこない、JETBABY管理人です。

今回は新たな試みで、自作の素材を無料で公開してみようかなと。 好評だったら今後も素材公開していこうかなと考え中。 欲しいと思う人がいたら勝手にどうぞ。

美容院・理容室向けのベクターイラストでこんな感じのもの。

美容理容無料素材サンプル

ファイル形式はai、eps、svgの三種類 作成はIllustratorCCで、aiは保存時にCS3でしています。

ライセンスや利用条件は・・・
面倒くさいので特にもうけない。
無料素材だし売るつもりで作ってないものでもないし。
自分のクライアントさんところで使ったりはしますが、クライアントからもこの分でお金もらったりはしてないし。

個人・商用・改変、お好きにどうぞ。 一応、著作権は放棄はしないけども。 あとは使用して何かあっても自己責任でお願いします。

ただし、再販は禁止とさせていただきます。 メディア掲載などの場合は御一報いただければと思います。

細かいことは一緒に入ってるreadme.txtに記載しています。

クオリティがとかファイルが使いにくいとかの苦情も特に必要ないですよ。

実際に使うときはちょっと手を加えてこんな風にしてもいいかなとか。

素材アレンジ例

※このアレンジはファイルに入っていません。念のため。

ダウンロードはこちらから。

と、上のボタン見て「おや?」と思った方にむけて、最後にダウンロードについて。

せっかくなんでこのできたてのブログを宣伝するのにこの企画を使わせてもらおうかと思います。
自分のTwitterやFaceBook、G+にコメントするとダウンロードできるという仕組みを使わせてもらうことにします。

お金は一切からないので安心してください。

Pay with a Tweet」というサービスを利用してみます。
今回の無料素材企画もこのサービスを前からちょっと試してみたかったってのもあります。 英語のサービスですが使い方はそんなに難しくないと思います。
※たまに文字化けとかしてるけど・・・。

素材をダウンロードするには今回のこの記事の中にある「Pay with a Tweet」というボタンをクリックします。

するとこんな感じの画面が出てくるので、自分が使っているサービスを適当に選んでクリックしてください。

 

Pay with a Tweet 01
※このサンプル画面ではTwitterを使っていますが他のサービスでも同じようなものです。

使用するサービスに既にログインしてサービスの認証承諾していると下のような画面が出てきます。
それ以外の場合は認証画面が出ると思うので認証してください。

Pay with a Tweet 02

Step1の「Click here to post on Twitter 」をクリックして、投稿します。

この段階でStep2に進んでダウンロードしようとクリックしてもダウンロードができなくなっています。
こんな感じで注意書きが出ます。

Pay with a Tweet 03

Step1で無事投稿を済ませると先ほどのStep2の「DONE!GAIN ACCESS NOW」をクリックして無事素材がダウンロードできるという仕組みです。

Pay with a Tweet 05

ということで今回はここまで。

さぁ、みんなでレッツダウンロード!!