Windows 8-style UIをjQueryで実現·Metro JS MOONGIFT
Metro JSはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 Windows 8-style UIは情報のダッシュボードとして使う分には良いインタフェースではないかと思います。そんなWindows 8-style UIを自分のサイトにも取り込みたいと考える方はMetro JSを使ってみると良いのではないでしょうか。 基本サンプルです。ボックスがタイル状に並びます。 タイルごとに横から別なボックスがスライド表示される機能があります。 タブなどを使ってボックスの表示を切り替えるデモです。 タイルをさらに1/4に区切って表示を行います。 さらに1/2や1/9に区切る事もできます。 ドラッグして移動できるタイルにもできます。 タイルに編集機能を持たせるデモ。設定を保存したりできます。 下のアプリバーだけを使う事もできます。 組み合わせるとこん
jQueryでチェックボックスのチェック状態を調べる方法 - 小さい頃はエラ呼吸
photo credit: Alan Cleaver via photopin cc 2013.06.14追記 コメント欄の指摘を受けて、記事を一部修正しました。 はじめに jQueryでチェックボックスのチェック状態を調べる方法をまとめてみました。 Web制作の現場で使うjQueryデザイン入門[改訂新版] (WEB PROFESSIONAL)posted with amazlet at 14.02.01西畑一馬 アスキー・メディアワークス 売り上げランキング: 6,298 Amazon.co.jpで詳細を見る jQueryのバージョン jQuery v1.10.1 jQueryでチェックボックスのチェック状態を調べる方法１ jQueryでチェックボックスのチェック状態を調べるには、以下のようなコードを書きます。#check1はチェックボックス要素のIDを指定します。$("#check1
上部固定メニューのお供に、jQueryを使ったクリックで開閉するメニュー
タイトルのとおりjQueryを使ったクリックで開閉するメニューを作ってみました。先日マウスを乗せると開くメニューを紹介しましたが、用途によって使い分けるといいと思います。 facebookにも同じようなのがありますね。それではHTMLから解説していきます。 HTML まずはHTMLです。コンテンツの部分は省略しています。 <div id="fixed-menu"> <div id="fixed-menu-contents"> <a href="#" id="home"></a> <div class="panel-wrap"> <a href="#" class="panel-btn">カテゴリー</a> <div class="panel"> コンテンツ </div> </div> <div class="panel-wrap"> <a href="#" class="panel-btn
テーブル上にあるマウスの位置を表示させる
Resultテーブル上のマウスの位置を表示する jQuery$("table tr td").mouseenter(function () { //ポインタ追加 $(this).css("cursor", "pointer"); //ユーザーへの表記は+1する var col = $(this).closest("tr td").prevAll("tr td").length += 1; var row = $(this).closest("tr").prevAll("tr").length; //テーブル上のマウスの位置を取得して現在地を表示する $('#result').html("上から<b>" + row + "</b>番目、左から<b>" + col + "</b>番目にいます"); });csstable { border: 1px solid #DFDFDF; backgro
レスポンシブなカバーフローっぽいスライドショーが作れるjQueryプラグイン「Flipster」:phpspot開発日誌
Flipster Demo レスポンシブなカバーフローっぽいスライドショーが作れるjQueryプラグイン「Flipster」 次のようなカバーフローっぽいスライドショーが作れるプラグインが配布されています Safariで見るとうまくうまく動きます この手のプラグインは過去にも見られましたが、レスポンシブというあたりが新しいですね 関連エントリ PCでもスマホでもスワイプで画像が遅れるスライドショー実装jQueryプラグイン「Swipeshow」 PC・スマホ・タブレットで動くクールなHTML5スライドショー実装ができる「Juicebox」 ページ全体に広がるスライドショーを実装できるjQueryプラグイン「jQSlider」 CSS3のみでクロスフェードするワイルドなスライドショー
jQueryで地震分布図を作成しよう
地理情報を含むデータを表現する場合、地図上で表すことで視覚的にその情報を認知しやすくなります。例えば、車のナビや道路標識などでは、単純に方向や座標だけを示すのではなく、地図上に表現することで、見た人が直感的に認知できるようにしています。本稿では、jQuery対応コントロール集である「Ignite UI 2013 Volume 1」のigMapというコントロールを用いて、地震分布図を作成していきます。 対象読者 JavaScriptの経験者、地図アプリに興味のある方。 必要環境 IDEは特に必要がなく、コード編集用のエディタと動作確認用のブラウザがあれば良いです。 今回使用するigMapコントロールは、jQuery UIウィジェットの一つであり、jQueryライブラリとjQuery UIライブラリに依存します。そのため、対応ブラウザについてもjQuery UIに依存します。 プログラム実行時
タグ入力はこれにお任せ！·jQuery TextExt MOONGIFT
jQuery TextExtは自動補完をはじめとする便利な機能が多いタグ入力ライブラリです。 タグ入力機能を持ったWebサービスは多いですが、入力しやすいものは多くありません。そこで使ってみたいのがjQuery TextExtです。 こんな感じでタグ入力ができます。×ボタンを押せば消えます。 他の入力から追加もできます。 自動補完。 入力した値は配列で受け取れます。 自動補完のカスタマイズも可能です。 削除だけでなく、値の変更もできます。 予め入力された状態にもできます。 タグ入力で必須とも言える入力補完や入力後の表示変更、placeholder、×ボタンによるキャンセルなど必要な機能は概ね押さえてあります。デザインを自分のサイト向けにアレンジすればすぐに使えそうです。 jQuery TextExtはjQuery/JavaScript製、MIT Licenseのオープンソース・ソフトウェア
jKit - jQuery based UI Toolkit - Index
A very easy to use, cross platform, jQuery based UI toolkit, that’s still small in size, has the features you need, and doesn’t get in your way of doing things! Put jQuery and jKit on all your pages and HTML becomes so much better. And the best thing? You really don’t have to be a programmer to create a trully amazing website! jKit has 99% of all the features you ever need. You don’t have to check
jQueryでコーディングをする際気をつけたいポイント | 1000ch.net
2012/12/02 少しだけわかる人向け Webの開発において欠かすことのできないJavaScript。 html/cssしか触った事のない人でも理解のしやすいモデルを提供するjQuery。 非常に便利なjQueryですが、DOM操作のコスト自体が低くなる訳ではありませんので、 実装方法によってはブラウザに大きな負荷をかける場合があります。 特にモバイルブラウザにとってはシビアな所だと思います。 モバイル端末の性能も飛躍的に向上してきてるとはいえ、 最適化された実装を目指さない理由はないでしょう。 この辺りを気をつけると良いっていうポイントを挙げてみます。 jQueryと銘打ってますがそれに限らず、Zeptoでも生jsでも同じです。 ループ文の書き方 よく書かれがちなループ文。 var array = ["data1", "data2", "data3", "data4", "data5
jQueryがロードマップを発表 - jQuery 2.0はIE 6/7/8をサポート外に
jQuery: The Write Less, Do More, JavaScript Library The jQuery Foundationは28日(米国時間)、公式ブログにおいてjQeuryのロードマップを発表した。jQeuryチームによると、将来のjQueryではInternet Explorer 9のみをサポートし、Internet Explorer 6/7/8などの古いIEについては一部の機能をサポートから外していくことを検討しているという。 jQueryチームは現在次期リリースとしてjQuery 1.8を開発しており、1ヵ月以内のリリースを目指している。jQuery 1.8では、不安定な機能や非効率な機能、すでに無用となった機能などの削除が行われている。また、2013年初期に公開予定のjQuery 1.9では、IE固有で非推奨のインタフェースを削除し、プラグインや代替API
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
jQuery Mobile 1.1、正式版が早くも登場！
昨年11月にjQuery Mobile 1.0として最初の正式版が登場してからわずか5カ月。最初の大きなバージョンアップとなるjQuery Mobile 1.1.0がリリースされました。 jQuery Mobileは、HTML5のタグを書くだけでプログラミングをせずにモバイルアプリケーションが作れるJavaScriptのフレームワーク。開発されたアプリケーションは、iOS、Android、WebOS、Windows Moblie、Symbianなどさまざまなモバイルプラットフォームで動作します。 jQuery Mobile 1.1では、画面上部もしくは下部につねに表示されるFixed Toolar（固定ツールバー）のちらつきがなくなった点、画面遷移がよりスムーズになった点などの改善が行われています。 固定ツールバーがCSSベースに モバイルデバイスのユーザーインターフェイスとして、画面上部
人気のあるサービスを真似よう。Tumblr風タグ編集コンポーネント·jQuery Tumblr Tags Editor MOONGIFT
jQuery Tumblr Tags EditorはTumblrのタグ編集風のUIを実現するjQueryライブラリです。 Tumblrのタグ編集を行うUIを真似たjQueryライブラリがjQuery Tumblr Tags Editorです。よくあるタグ編集という機能だけに参考になりそうです。 最初の表示です。テキストボックスが表示されるパターンとそうではないパターンがあります。 文字を入力してエンターでタグ設定できます。×ボタンを押せば消えます。 数多くなると改行します。 テキストボックスがない場合も使い方は変わりません。 jQuery Tumblr Tags Editorではエンターキーを押すとタグに変わります。キーバインドを変更してカンマを認識するようにしても便利そうです。 jQuery Tumblr Tags EditorはjQuery/JavaScript製のオープンソース・ソフ
jQuery/jQuery Mobileなどの支援を目的に「jQuery Foundation」が設立
JavaScriptライブラリとして広く普及しているjQueryの開発チームは、jQueryやその関連ソフトウェアの推進を目的とした非営利団体「jQuery Foudation」の設立をブログで発表しました。 The jQuery Foundation is a non-profit trade association and the home of jQuery, the Internet’s number one JavaScript library. Founded by a group of leading JavaScript developers and architects, the jQuery Foundation is dedicated to three goals: supporting development of the jQuery Core, UI, and
jQueryでスクロールすると上部に固定されるナビゲーション
Posted: 2012.02.21 / Category: javascript / Tag: jQuery グローバルナビゲーションはロゴの下に配置されていることが多いですが、スクロールするとナビゲーション部分だけが上部に固定されるようなものをjQueryでやってみたいと思います。 html & css htmlです。 html <h1><a href="#">タイトル</a></h1> <div class="nav"> <ul class="clearfix"> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">NEWS</a></li> <li><a href="#">LINK</a></li> </ul> <!-- /#nav --></div> <div id="artic
範囲を指定して切り抜き。jQuery製の画像クロップライブラリ·Jcrop MOONGIFT
Jcropは画像を四角くクロップするjQueryプラグインです。 写真アップロードサービスやプロフィール画像の切り抜きで活躍しそうなライブラリがJcropです。マウスで範囲指定して画像を四角く切り抜けます。 はい、まずは普通の表示です。マウスで範囲指定します。 こんな感じで範囲指定できます。一度指定した後、マウスで微調整もできます。 正方形に限らず形を決められます。 コールバックにも対応していて、マウスを動かしたタイミングなどが座標付きで取り出せます。 サムネイルビューにも対応しています。範囲指定した部分が小さくなって右側に表示されています。 範囲を大きくしたらサムネイルが自動調整されています。 CSSを使って決められた範囲だけクロップ表示することもできます。 サーバサイドに飛ばしたところです。PHP+GDのスクリプトサンプルも用意されています。 Jcropはサーバサイドに座標を飛ばせるの
jqueryで属性を変更させる方法
属性とはhtmlでいうと要素で設定しているいろいろな値、 例えば：<a href="index.html"></a> 属性：href、属性値：index.html、要素：a 属性を変更できると、画像を入れ替えたり、urlを変更したり、大きさを変えたり、ホームページでの表現の幅が広がります。 attr 属性値を変更する場合 $("セレクタ").attr("変更したい属性の名前","変更後の属性値"); 例えば、 属性srcをa.jpg→b.jpgに変更する場合。 jquery $("img").attr("src","b.jpg"); html 変更前：<img src="a.jpg"> 変更後：<img src="b.jpg"> さらにたくさんの属性を変更したい時 $("セレクタ").attr({"属性名":"変更後の属性値","属性名2":"変更後の属性値"}); が使えます。 例えば、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...
TechCrunch | Startup and Technology News
undefined - リッキー・ミラーの公式ブログ