A web developer from Evanston, Illinois
HTML 各デモのベースとなるHTMLです。 div要素のclassを変更して利用します。 <div class="pic"> <img src="image.jpg"> </div> 各デモで共通で使用するスタイルです。 * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } body { background: #333; } .pic { border: 10px solid #fff; float: left; height: 300px; width: 300px; margin: 20px; overflow: hidden; -webkit-box-shadow: 5px 5px 5px #111
テキストにかっこいいスタイルを与えたり、レスポンシブに対応した配置や複雑な形状の回り込み、タイプライターや案内板のようなアニメーションで一文字ずつ表示するなど、テキスト関連のjQueryのプラグインを紹介します。
0.10.0Draw your visitor's attention to special parts of your website. Examples of the different effects can be experiecend in this demo. All available options are described right below. Quick startTwinkle at a specified element: $(selector).twinkle(); Select an effect and add some effect options: var options = { 'effect': 'drop', 'effectOptions': { 'color': 'rgba(0,0,255,0.5)', 'radius': 100 } };
以前ここで「jQueryでの連番要素を制御する方法」と題して、 jQueryで連番要素の制御を簡単に行う方法を紹介しましたが、 同じ様にjQueryを使って簡単に連番でのIDを追加したりクラスを追加したりする方法を紹介してみます。 例えば<li>を使ったリストを5行で用意します。 HTML側では<li>自体にはIDもクラスも付けません。 ◆HTML【BASE】 <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> そしてこれらのリストに対して、下記スクリプトを実行させることで 自動で連番でのクラスを追記することができます。 (クラス名は「.number1」~とします。) ◆SCRIPT【SAMPLE01】 <script type="text/javascript" src="http://ajax.googleapis.
jQuery Gantt editorはjQuery製のガントチャートエディターです。その名の通り、その場でデータの編集ができます。 プロジェクト管理において進捗や各人のステータスによる作用を判断するのに便利なガントチャート。オンライン版も幾つか出ていますが、既存サイトに組み込みたいならjQuery Gantt editorを使ってみましょう。その名の通り、jQueryベースのガントチャートエディターです。 メイン画面です。まさにガントチャートの画面です。 日程や階層の深さを編集できます。 詳細な情報も変更できます。 タスクの追加も可能です。 人員のアサインにも対応しています。 データはそのまま保存したり、JSONとしてエクスポートできます。従ってJSONデータを使えば同じ画面を再現するのは難しくありません。Undo/Redoをサポートし、クロスブラウザで動作します。閲覧だけでなく、編集ま
シンプルなHTMLで、さまざまなデザインの円グラフが簡単に作成できるjQueryのプラグインを紹介します。 EASY PIE CHART [ad#ad-2] EASY PIE CHARTの使い方 実装は、3ステップです。 Step 1: 外部ファイル 「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。 外部ファイルはhead内に記述してください。 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="/path/to/jquery.easy-pie-chart.js"></script> <link rel="styl
よく見かける、ページ遷移のない Webサイトを作る為のjQueryプラ グイン。ですが、高機能な物では なく、極めてシンプルで、ライブ ラリも軽量です。サクッと作りた い時のテンプレにもいいかも。 僕の語彙の無い説明よりサンプル見た方が早そうですね。 ※漢字も間違ってたので修正しました ページ遷移不要で、内容を書き換えた際もフラグメントURLにしてくれます。以下サンプル。 Sample コード <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7'></script> <script src="pagify.js" type="text/javascript"></script> jQuery本体とプラグインを読み込みます。 $(
使用方法1―全ての要素の高さを揃える 指定した複数の要素の高さを、その中の最大の高さに揃えます。 各要素の幅が同じであれば、各要素のサイズ(高さ・幅)は全て同じになり、タイル状に要素が並びます。 各要素に対してheightを指定する必要はありません。 javascriptサンプル tile-sample1というclass属性を持つ要素の高さを、その中の最大の高さで揃えるには、以下のように記述します。 1 $(function(){ 2 $(".tile-sample1").tile(); 3 }); 実行結果 使用方法2―同じ行にある要素の高さを揃える タイルの列数を指定して、同じ行に並ぶ要素の中で最大の高さに揃えます。 javascriptサンプル tile-sample2というclass属性を持つ要素が横に4つ並んでいるとき、横に並んだ要素の高さを各行毎に揃えるには、その列数(=4)を
jQueryでnの倍数だけに何か処理する(追記有) >>081007:追記1 :nth-child について追記しました。 >>081007:追記2 :lt について追記しました。 今までのバックナンバーリストを一覧でダダダーと並べてるページがあって、(このサイトで言うと全エントリのアーカイブページみたいなページ)リストの件数が少なかった時は特に何も感じなかったんだけど、サイト公開から時間が経って「数が増えてなんか見難くない?」みたいな話になった。 で、5件分ごとに区切り線入れたいっていう提案をされて了解したけど、なんかどんな方法が効率いいんか迷った。手作業で5件目ごとにclass振っていく様な手数増える方法でもいいんだけど、今新しいのが上、古いのが下ってなってる状態で上から順番に5件目毎にclass付けした所で更新の度に1つずつズラしていくの?手数増えるにも程があるwwwみたいな発想にな
しょうもないことがとっても気になる@poyosiです、こんにちは。 以下の画像のように、リストで画像と文字を縦中心に並べるのは1行だけなら簡単なのですが、複数行入るかもしれないとなると急にやっかいになるレイアウトです。 というわけで、どうしてもこのレイアウトを実装したいという超レアなケース向けに、簡単に設置することのできるプラグインを作りました。 こういうのを実装したい もじ文字 もじ文字 もじ文字 「jQuery List Vertical Align」プラグインのダウンロード プラグインはこちらからダウンロードできます。 jQueryとプラグインを設置しよう <head>タグの中にjQueryとプラグインを設置しましょう。 画像をCSSの背景で表示させたい場合 画像付きリストを作る場合、背景を<li>タグにbackground設定して表示させる方法があります。 それと同じようにHTML
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 Champagne エレメントをランダムな順番でアニメーションで表示します。 Real Shadow カーソルを光源としたリアルな影
jQuery Shadow Plugin ボックス要素に色んなタイプの影を簡単に付けられるjQueryプラグイン「jQuery Shadow」。 次のようにボックス要素に対して影を自由に付けられるプラグインです。$(elem).shadow(option); という風にするだけなので使い方は簡単ですね 単なるボックス要素があっというまにクールになりますね 関連エントリ selectボックスを超カッコよくするjQueryプラグイン「Chosen」 ブラウザ上でサインを書けるjQueryプラグイン「jSignature」 JSでのタイマー処理がもっと簡単になるjQueryプラグイン「timing」 スマホ用サイトに使えそうなドロップダウン実装jQueryプラグイン「DropKick」 ページめくりを実現するためのjQueryプラグイン集
シンプルで見やすいガントチャート を描画できる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",
LoRa 開発シールドのデータを enebular で受け取る By hrd_pk|5月 9, 2017|未分類, | 花粉がまだ名残惜しく思っているようで、鼻がまだむずむずしています。 ぽかぽか陽気が続いていますが、みなさんいかがお過ごし… Read More
ちょっと今回はまめ知識的な内容です。 最近、「iPhoneでWebアプリを作成」といった記事をよく見かけます。 (jQuery Mobileなどを利用した開発方法は置いといて) HTML5+CSS3+JavaScriptで一から作成する方法について、意外と肝心な注意点が抜けてるように思います。 とくに、よくmetaタグを使った「Webアプリモード(フルスクリーンモード)」にする方法が書かれていたりします。 <meta name="apple-mobile-web-app-capable" content="yes" /> これをやると、URLバーとかが無くなって、サイトがネイティブアプリっぽくなってかっこいいんですよね。 これで、サイトをアプリっぽく見せられる!ってちょっと興奮しちゃいますよね。 ただ、これって意外な落とし穴があるんです( ̄▽ ̄;) 今回は、僕が知ってる大きな2つの注意点を
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く