タグ

web制作とjQueryに関するDrunkarのブックマーク (6)

  • [JS]他のスクリプトで生じる端も埋める、パネルをレンガ状に配置するスクリプト -Mason.js

    画像やテキストなどを配置したパネルをレンガ状に指定した間隔で配置するjQueryのプラグインを紹介します。 Mason.js Mason.js -GitHub Mason.jsの特徴 Mason.jsのデモ Mason.jsの使い方 Mason.jsの特徴 Maison.jsは、複数のパネルを積み上げたレンガ状に配置するレスポンシブ対応のスクリプトです。 他のスクリプト(Masonry, Isotopeなど)グリッドのレイアウトを使う時に生まれる隙間や端にも穴がない状態でレイアウトすることが可能です。 類似スクリプトで生じる隙間も埋めます。 比率 全てのエレメントのベースとなる比率を設定 サイズ グリッドに応じたサイズを設定 カラム 複数のブレイクポイントごとにカラムを設定 フィルター 空白スペースを埋めるための要素を設定 ガター エレメント間の溝を設定 Mason.jsのデモ ページには

  • セレクターで要素を選択する - jQuery 日本語リファレンス

    jQueryを使ってコーディングする上で、最も頻繁に出てくる作業のひとつがセレクターによる要素選択でしょう。 この便利さが、他のライブラリをおさえてjQueryがデファクトになりつつある要因のひとつでもあると思います。 殊にバージョン1.3になってからはエンジンがsizzleに変わり、更に柔軟性と実行速度を向上させています。 通常はidによる単一要素選択が多くなるかもしれませんが、上手に使うことでより一層、jQueryによる開発が楽しくなると思います。 セレクター書式確認用ツール しかし、セレクター書式は時に非常に難解です。 これを確認するために、簡単なブックマークレットを作ってみました。 以下のリンクを、Firefoxであればツールバーなどにドラッグして下さい。 IEならば右クリックして「お気に入りに追加」を選び、警告は無視して登録します。 [jQuery Selectors Inspe

  • node.jsを使ってjQueryチックにWebサイトをクローリングする方法 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    どうも僕です。 今日は、サーバサイドJavaScript(node.js)でjQueryチックにDOMを操作して、Webサイトをクローリングする方法についてまとめようと思うよ! 要は、既存のWebサイトから必要な情報を収集してきて、データベースに突っ込もうということ。 これができると何がうれしいかって、簡単にまとめサイトが作れるんだよね。 クローリングする方法は数々あれど、なにゆえサーバサイドJavaScriptのnode.jsを使ってこれをするかというと、「クローリング対象の部分をjQueryのセレクタで指定できる」のが大きいわけです。 みんな、好きだよね!jQuery!とっても便利だよね!jQuery! 好みにもよるかと思うが、JavaScriptのようなふにゃふにゃした言語をあえて使う理由は、クライアントサイドプログラミングを組むか、JQueryの恩恵を受けるためといっても過言ではあ

    node.jsを使ってjQueryチックにWebサイトをクローリングする方法 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
  • 7つのサンプルでjQueryを学ぼう!「jQueryが全く分からない人のため」の超初級者向け入門講座

    HOME>jQuery>7つのサンプルでjQueryを学ぼう!「jQueryが全く分からない人のため」の超初級者向け入門講座 約半年前まで、興味はあれども全くもって触れたことのなかった「jQuery」。それどころか、「Javascript」を「Javasprict」と何度となく書き間違える癖のあった私。 結局、「スク水すいすいスクリプト」と語呂を合わせることによりようやく正しい綴りをマスターしたわけなんですが、仕事で扱うと言うこともあり多少はjQueryの仕組みが分かってきた今日この頃です。 そんなわけで、今回は「jQueryが全く分からない人のため」の超初級者向け入門講座と銘打ちまして、jQueryの基礎の基礎を学ぶための記事を書いてみました。 とは言っても「jQueryとはなんたるか」などといった難しい理論を記すつもりは一切ございません。(っていうかそんな偉そうなこと言える程修めてない

    7つのサンプルでjQueryを学ぼう!「jQueryが全く分からない人のため」の超初級者向け入門講座
  • LightBox系スクリプト 16選 | Like@Lunatic

    Lightbox系スクリプトの情報が一覧表になっているThe Lightbox Clones Matrixという素晴らしいサイトがあります。ここから一通り見て回って、自分なりに使えそうなものをピックアップしてみました。ほとんど勢いでまとめたものなので、情報としての正確性は低いかもしれませんが、ご容赦を。半分は自分用ってノリです。 自分はLightbox系のスクリプトを選ぶ時、そのサイトに予め組み込まれている(組み込む予定の)JSライブラリで使えるかどうかを基準に選ぶことが多いです。なので、必要とするJSライブラリ別にカテゴライズして並べています。 Highslide JS 必要ライブラリ: – 対応形式: 画像、画像ギャラリー、インライン、インラインフレーム、Ajax、Flash 対象指定: class属性&onclick属性 ライセンス: CCライセンス 表示-非営利 2.5 一般 非商

    LightBox系スクリプト 16選 | Like@Lunatic
  • シンプルで見やすいガントチャートを描けるjQueryプラグイン・jQuery.Gantt

    シンプルで見やすいガントチャート を描画できるjQueryのプラグイン。 以前見かけてから放置していたので 少し触って見ました。使う機会は 個人的には多くありませんけど、 覚えて置いて損はしないかと。 この手のはよく見かけますけど、今日のプラグインは個人的に使いやすい印象だったのでメモ。 こういうやつ。 サンプル作ったので宜しければご覧下さい。 Sample コード<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script> <script src="jquery.fn.gantt.js"></script>体とプラグイン。 $(".foo").gantt({ scale: "weeks", minScale: "weeks",

    シンプルで見やすいガントチャートを描けるjQueryプラグイン・jQuery.Gantt
  • 1