タグ

jQueryとweb制作に関するMAXIMUM-PROのブックマーク (5)

  • [JS]派手な演出は無し!レスポンシブ対応のレイアウトを素早く構築するスクリプト -jquery.columns

    サイズを変更するとアニメーションでパネルが移動するなどの派手な演出は一切無しで、レスポンシブ対応のレイアウトを素早く提供するjQueryのプラグインを紹介します。 jquery.columns -GitHub jquery.columnsのデモ jquery.columnsの使い方 jquery.columnsのデモ 対応ブラウザは、IE9/10, Firefox, Chrome, Safari, Operaです。 まずは、デスクトップサイズとして幅1,200pxでの表示から。 デモページ:幅480pxで表示 jquery.columnsの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.

  • たった1行で完成?凄まじくレスポンシブデザインなサイトの作り方 | DECONCEPTER

    簡単に作れる!みんな大好き可変グリッド 先日話題になっていた「なんだこれ!!「NHKスタジオパーク」のレスポンシブ・ウェブデザインが凄まじくレスポンシブ!!」で紹介されていたNHKスタジオパークのレスポンシブデザイン。 こちらのサイト、プラグインを使ってとてもシンプルに作られています。キレイ。このシンプルさを伝えたくてうずうずしてきました。せっかくうずうずしたのでどんな作り方をしているのかサンプルを交えて紹介します。 まずはこちらのデモを御覧ください。 凄まじくレスポンシブデザインなサイトデモ 使われているのはjQuery Masonryというプラグインだ! @planetofgoriさんのブログで紹介されているように、jQuery Masonryというプラグインが使われています。このプラグインたった数行でNHKのサイトのような可変グリッドレイアウトが作れてしまいます。可変グリッドのレイア

  • IE8切り捨て準備はいいか?jQuery2.0 2013年リリース予定 | DECONCEPTER

    さようなら、InternetExplorer8 2012年も後3ヶ月を切りました。今年6月に出たアナウンスの予定で行くと来年jQueryは初のメジャーバージョンアップを迎えます。 jQuery2.0の主な機能等はまだ特にアナウンスされていませんが、注目はなんといってもIE8以下をサポート対象から外すという点です。 HTML5の時代が格的に到来 これまでjQueryがWEB開発の世界にもたらしたメリットは計り知れません。WEBサイトを作っている方でお世話になったことの無い方はほとんどいないでしょう。 jQueryがIE8以下のサポートを切るということは、jQuery2.0のリリースと共にHTML5が標準として使われるようになるまで秒読み段階に入ると考えてもいいかもしれません。 2013年、IE8以下にどのように対応するかが問われる IE対応なんてやってられない 近年モバイルデバイスの普及に

  • jQuery Mobile使用時によく使うマークアップで日本語サンプルを作ったので配布します

    簡単なものですけど、jQuery Mobile でのマークアップ時によく使うっぽい UIのサンプル作ったので配布します。 簡単なチートシート代わりになるのでは 無いかと思ったのでシェアしてみよう かと。良かったら使ってください。 というのも、JQMの日語サンプルの配布先を見かけなかったので、なかなかお困りの方もいらっしゃるんじゃないかなと。調べるの面倒ですし、手元にサンプルコードあったほうが何かと便利ですよね。 というわけで、以前マークアップサンプルの記事書いたときに作ったサンプルサイトに手を加えた物を丸ごと配布します。 流石にかなり出てるので今更説明不要かもですけど、ざっくり説明するとWebサイトをスマフォ向けに簡単に出来るjQueryプラグインです。 以下のサンプルで使用しているファイルが丸ごと梱包してあります。 サンプル※別窓 いちおうキャプチャ。 目次 サムネイル付きのサンプルと

    jQuery Mobile使用時によく使うマークアップで日本語サンプルを作ったので配布します
  • わずか8KBのjQuery用カレンダープラグイン「CalendarPicker」 | Web活メモ帳

    「CalendarPicker」はカレンダーを表示できるjQueryプラグインです。 わずか8KBで作られている軽量のライブラリなのに、細かな設定が可能です。 以下のような機能があるようです。 国際化対応 現在の日付表示ボタン マウスホイールのスクロール 日付を選択した際のコールバック 次/前の矢印ボタン 設置するには、一行コードを追加するだけでした。 $("#calendarFilterBox").calendarPicker(); カレンダー表示はjQuery UIなどありますが、選択肢の一つにできそうですね。

    わずか8KBのjQuery用カレンダープラグイン「CalendarPicker」 | Web活メモ帳
  • 1