2011年12月14日15:34 カテゴリTipsLightweight Languages javascript - めんどうな作業がわずか1クリックに!新人プログラマーが知らないと一生後悔するブラウザーを使ったHTML生成 いいえ、使いません。 めんどうな作業がわずか数秒に!新人デザイナーが 知らないと一生後悔するExcelを使ったHTML生成 | Webロケッツマガジン 僕たちプログラマーは、ちょっとしたコード生成に、Excelを使います! 僕たちプログラマーは、ちょっとしたHTML生成にDHTMLを使います。 DEMO TSV JSON JSON to HTML function (json){ var tbody = $('<tbody>'); $.map(json, function(row){ var tr = $('<tr>'); $.map(row, function(c
jQueryをより小さく、軽量に、モジュラー化することを目指し、「jquip」というプロジェクトが立ち上がった。コア部分である「xjquip.js」ファイルのサイズはミニファイ・圧縮後で4.28KBと小さく、これはjQueryの13%というコンパクトさだという。サイズは小さいもののjQueryの持つ機能の90%を実装、さらにプラグインを追加することでそれ以外の機能も利用できる。 jquipは「jQuery in parts」の略で、「必要なものだけを取り入れる」というコンセプトを持つ。米国在住の開発者、Demis Bellot氏とJey Balachandran氏が始めたプロジェクトとなる。肥大化するjQueryに対し、コードベースの再構成やよりいっそうのモジュラー化のためのフィードバックを送ることを目的にしているとのこと。ライセンスはMIT License。 jquipは$()セレクタや
Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. Let’s say you have a bunch of images you want to display, and the goal is to get them edge-to-edge on the browser window with no gaps. Just because you think that would be cool. They are of all different sizes. You don’t care if they are resized, but they should maintain their aspect ratio. Like th
Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. The Five Simple Steps website has a responsive design with a neat feature. When the browser window is narrow, the menu in the upper right converts from a regular row of links into a dropdown menu. When you’re on a small screen (iPhone shown here) and click the dropdown, you get an interface to sele
少しのコードで実装可能な20のjQuery小技集素敵な動きを手軽に実装できるJavaScriptライブラリ「jQuery」。jQueryには多くのプラグインが揃っていますが、今回はプラグインなしで実装できるjQueryの小技を紹介します!「jQueryってなんだ?」という人もコピペで実装できますよ!サンプルも用意したのでぜひご覧ください! 追記:この記事で紹介されているいくつかの方法が、今では CSS のみで実装可能です!詳しくは「かつては JavaScript を利用していたものの、今では CSS のみで実装できる 10 の小技」をご覧ください。 jQuery の基本的な使い方まずはjQuery 本家から jQuery ファイルをダウンロードします。<head> 内に下記を記述し、jQuery ファイルを読み込みます。 <script type="text/javascript" src
2010年08月19日01:00 カテゴリ書評/画評/品評Lightweight Languages $(DHTMLcoders).read(this) || throw your.job - 書評 - jQueryクックブック オライリー矢野様より献本御礼。 jQueryクックブック jQuery Community Experts / 株式会社クイープ訳 [原著:jQuery Cookbook] これでなくなった。 jQueryを使わない理由が。 DHTMLを利用する全ての人、必携。 特にHTMLやCSSを書いても、JavaScriptはそれほど書かない人。これであなたにも書けるようになります。 本書「jQueryクックブック」は、今や最重要のJavaScript Libraryといっても過言ではないjQueryの手引書。 目次 まえがき - John Resig はじめに jQuer
exTOC は、ページ内の Hn 要素(h1 - h6)に対し、ページ内リンク付きの目次コンテンツを自動生成する jQuery プラグインです。 以下のような特徴があります。 目次 / Hn 要素に対する付番機能 ページ内リンクのスムーススクロール 高いカスタマイズ性 以下は exFixed Plugin / Easing Plugin を併用したデモです。 Demo 導入方法 jquery.js extoc_1_0.js 上記 js ファイルをダウンロードしヘッダー定義内で下記順で jquery.js / extoc.js を読み込みます。 <script type="text/javascript" src="path/jquery.js"></script> <script type="text/javascript" src="path/extoc.js"></script> 目次
jQueryはよく使うのだけど、ちょっとだけ不便なときがあったので、それに対応する関数を書いてみた。 クラスを生成する var Class = $.klass({ init: function (a) { this.a = a; }, view: function () { alert(this.a) } }); initがコンストラクタとして機能します。 $.klass=function(a){var b=function(){this.init&&this.init.apply(this,arguments)};b.prototype=a;return b}; CSSルールの追加削除 var index = $.css.add("body{background:red;}"); alert("stop"); $.css.remove(index); あると便利なときがあるので一応。 $
One method that I’ve been wanting for quite a while now was a simple way to format old JavaScript dates in a “pretty” way. For example “2008-01-28T20:24:17Z” becomes “2 hours ago”. Here’s some more examples: prettyDate("2008-01-28T20:24:17Z") // => "2 hours ago" prettyDate("2008-01-27T22:24:17Z") // => "Yesterday" prettyDate("2008-01-26T22:24:17Z") // => "2 days ago" prettyDate("2008-01-14T22:24:1
JSONを取ってきて、そこからJavaScriptで動的にHTMLを組み立てていくような場合、 $('#content').html( $('<table>').attr( { id: 'items' } ).html( $('<tr>').append( $('<th>').html( 'Header' ) ).append( $('<td>').html( 'Data' ) ) ) ); とか書くのが面倒だなーと思った。このへん、MochiKitはいい感じに書けたよね。 何かいい手はないかとremedie.jsを読んでみたら、これが使われてた。 jQuery Plugin - FlyDOM: Create DOM on the Fly さっきの例だと、 $('#content').empty().createAppend( 'table', { id: 'items' }, [ 'tr
ブログを書こうと、夜な夜な実験したり調べごとしたりしているのですが、 最近眠気に負けて、パソコンに向かったまま寝てしまっているという日々。 以前からあったのですが、最近とくに多くて体中が痛かったりします。 そんな余談はいいとして、先日エントリーした 「ブログでブログパーツやプラグインを入れる際の注意」 のコメントにて、いつもjQuery関連でお世話になっているcyokodogさんが 対処方法を書いてくださいましたので、自分も知っていたのですが 復習ついでに動作確認をしてみました。 2009/02/20 7:10追記 本文の一部を追記しました。 jQuery.noConflict()を記述しない場合 一応jQueryとprototypeがどちらも読み込まれている環境でのお話です。 ■ソース (function($){ $('#test1 button').toggle(function(){
JavaScriptSilverlightコンテンツを埋め込むjQueryプラグイン - Programmable Life で困ってたので一緒に悩んでみた。でも何故かIEでは動かない。誰か動くようにしてけれ!Silverlightコンテンツを埋め込むjQueryプラグイン - Programmable Lifeobject を作れていない?手元に環境を作って動かしてみると、 に を追加するところで JavaScript エラーが出る。状況を切り分けるために、 を追加する部分をコメントアウトしてみた。IE DOM Explorer で眺めてみると DIV タグが追加されている。どうやら var obj = $('').attr({ ... }); のところで object タグが作られていないようだ。jQuery でよく見る現象だ。こういうときは閉じ括弧を入れてあげると大抵うまくいく。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く