「クリップボードにコピー」を実装する - Qiita
clipboard.js を使う clipboard.js — Copy to clipboard without Flash ↓ github にあるこんな感じのものを作ります。 デモを下記に置きました。 HTMLは下記のような感じ。 ボタンの data-clipboard-target="XXX" の部分にコピー対象のエレメントを指定しておく。 <html> <head> <meta charset="UTF-8" /> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="https://cdn.jsdelivr.net/clipboard.js/1.5.3/clipboard.min.js"></script> <script> $(function () { var cli
jQuery Plugin - 検索/ソート/ページャー/フィルター付きのテーブル - Bootgrid
検索・ソート・ページャー・フィルター付きのテーブルを実装するプラグイン「Bootgrid」を紹介します。 jQueryプラグイン「Bootgrid」このプラグインを使えば、テーブルの項目を検索、項目ごとのソート、項目が多い場合にページ分けするページャー、どの項目を表示するかを選択するフィルターといった高機能テーブルを実装することができます。 また、スタイルシートには Bootstrap を利用しているので、どんなサイトにマッチしそうですね。 それではデモページのテーブルをご覧ください。 「Bootgrid」のデモ デモのソース（HTML + jQuery）<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="description" content="Bootgrid のデモでーす。"> <title>Bootgr
【jQuery】サイト内に今風な『ソート機能』を実装する方法
使いやすいjQueryプラグインを見つけたので使い方をまとめていきます。 デモは以下からご確認ください。 » MixItUp それでは、HTMLコード, CSSコード, JavaScriptコードの順に書いていきます。 jQueryでソート機能を実現するためのHTMLコード <div class="filter" data-filter="all">すべて表示</div> <div class="filter" data-filter=".category-1">カテゴリー1</div> <div class="filter" data-filter=".category-2">カテゴリー2</div> <div id="Container"> <div class="mix category-1">①カテゴリー1に属する</div> <div class="mix category-2"
私がよく使っているjQueryプラグインまとめ（スライダー、モーダルウィンドウなど）
こんにちは、暑いですね。脇汗すごいですね。僕が。 さて今回はWebページ作成時に、私がよく使っているjQueryプラグインをまとめてみました。（たまにjQueryが必須でないものもあります。） ※紹介しているプラグインを使用する際、ライセンスは各自で再度確認してくださいませ。 Owl Carousel 個人・商用利用可能。レスポンシブでいい感じに動作してくれるカルーセルスライダーです。動作もシンプルで綺麗だし、マークアップも簡単。テキストもOK。お気に入りのプラグインです。 Owl Carousel bxSlider 個人・商用利用可能。シンプルなスライダープラグインです。レスポンシブで動作し、カスタマイズもしやすく重宝します。 jQuery Content Slider | Responsive jQuery Slider | bxSlider Glide.js デモページがカッコイイス
指定範囲を簡単に印刷するjQueryプラグイン jPrintArea.js が便利な件 - TechNote
Webサイトの印刷機能をつくるのに最も手軽なjQueryプラグインjPrintAreaを使ってみたのでメモ。 photo credit: driek via photopin cc サマリー １．指定範囲を簡単に印刷するjQueryプラグインjPrintArea.jsとは ２．使ってみる ３．感想 １．指定範囲を簡単に印刷するjQueryプラグインjPrintArea.jsとは jQuery.jPrintArea.jsは、少しコードを書き足すだけで指定範囲のみを印刷できるというお手軽プラグインです。 Web界隈では何年も前から「簡単で便利」と評されながら、本家サイトからもかなり前から姿を消している貴重なプラグインである模様。手軽さゆえに重宝されていたのか、本家サイトから消えた後も、いくつかのブログにコードが載せてあるのも見かけたが、試してみると動くものがなかなかない。下記はちゃんと動きます
JQueryとPHPで作るシンプルなAJAX
Ajaxを使うことで、Webのユーザーインターフェイスを 劇的に改善することが出来るんだけれど、 イマイチ良いサンプルが見つからなかったのでJQueryとPHPで実装するサンプルを作ってみたよ サンプルが見つからない理由Ajaxはサーバーとクライアントの連携で動いているけれど、 サーバーは多種多様な技術があるので網羅できない。 クライアント側だけ説明すると、サーバー側が抜けるのでそのままではサンプルを動かすことが出来ない。 ということで、ターゲットをPHPとJQueryに限定してサーバーからクライアントまで一貫したサンプルにしてみました。 ソースコードを極力シンプルにして全コード掲載しています。 作る物クライアントからサーバーに数値を二つ送信し、 二つの値を足した結果をサーバーから取得して画面を更新する。 用意する物PEARが動くサーバー今回はJSONを処理するのにPEARのJSONライブ
64connors | table内のデータを絞り込めるjQueryプラグイン
データを表ぐみするのに便利なtableタグ。 table関連のプラグインは多数存在するのですが、データの絞込み（フィルタリング）をするためのプラグインだけは、自分の好みにあったものを見つけることができませんでした。 ということで作りました。 ・Demo ・ダウンロード ・対応ブラウザ：IE8以上 FireFox chrome safari opera 特徴 以下の4点が大きな特徴です ・データを絞り込んだ際、平均、合計、率の３種類の計算方法で、再集計が可能。 ・期間、数字の絞込みでは、始まりと終わりを指定し、幅を持たした絞込みが可能。 ・複数条件でのクロス検索が可能。 ・テキスト・数値入力、セレクトボックス、チェックボックス、ラジオボックスでの検索が可能。 導入方法 jQueryライブラリとjQuery.narrowDown.min.jsを読み込む。 絞込みを実行
いろんなセレクタ指定方法＋α
ずいぶん以前にセレクタについて書いたのですが、今回はセレクタの種類を抜粋して、記述例と説明書きにまとめてました。「セレクタとは？」という方は、まず下記記事を読んでみて下さい。 jQueryを使ってみよう。(基本編 セレクタ１) ＋αというのはトラバース(走査)系のメソッドです。「この要素を抜き出したい！」と思ったときにセレクタだけでは抜き出しにくい場合があります。そういうときにトラバース(走査)系のメソッドを使うと、簡単にできたりするので覚えておくと便利なものです。 「こういう書き方をすると、こういう要素が選択される」という例で説明を添えていますが、数が多いので説明書きは、ほんとうに添えた程度です。説明だけではわかりにくいと思うので動作サンプルを用意しました。動作サンプルを眺めながら、ちらっと説明書きをチェックしてもらえれば「なるほど！」となるはず。。。ご利用ください。 jQuery セレ
jQueryのセレクタ解説 - jQuery入門 - [SMART]
jQueryには任意の範囲、要素を指定するためのセレクタと呼ばれる機能が用意されています。 たとえば、BODY要素内にあるすべての画像にアクセスしたい場合は下記のようにセレクタを指定します。 $("img") 例えば、IMG要素のボーダーを3ピクセルの赤に設定するには次のようにします。 $("img").css("border","3px solid red"); セレクタで対象を指定し、cssというメソッドでボーダー属性の値を設定しています。 セレクタは要素名以外にも、ID名やCLASS名を指定することができます。 たとえば、BODY要素内にあるすべての画像にアクセスしたい場合は下記のようにセレクタを指定します。 $("img.photo") IMG要素で、かつID名が photo01 の要素を指定するには、次のようにシャープの後にID名を指定します。 $("img#photo01")
![jQueryのセレクタ解説 - jQuery入門 - [SMART]](https://cdn-ak-scissors.b.st-hatena.com/image/square/efeb6493234f33406d242c048873a805fca99c63/height=288;version=1;width=512/https%3A%2F%2Frfs.jp%2Fwp-content%2Fthemes%2Fsmart%2Fogpimage.png)
14のjQueryベストプラクティス[to-R]
14のjQueryベストプラクティス 原文:14 Helpful jQuery Tricks, Notes, and Best Practices 良かったので翻訳してみました。かなりの意訳で、上手に訳せてない箇所も多いので詳しくは原文を参照してください。 1.メソッドはjQueryオブジェクトを返す ほとんどのメソッドがjQueryオブジェクトを返すのが重要です。 これにより次のようなメソッドチェーンが可能になっています。 $someDiv .attr('class', 'someClass') .hide() .html('new stuff'); jQueryオブジェクトを返すのがわかっていれば次のように分割して書くことも出来ます。 var someDiv = $('#someDiv'); someDiv.hide(); 次のように一行で書くことも出来ます。 var someDiv
![14のjQueryベストプラクティス[to-R]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a9717624309e36a795026e1b70982163687ccca2/height=288;version=1;width=512/https%3A%2F%2Fblog.webcreativepark.net%2Ficon_200x200.png)
jQuery :: ネストしたリスト + ui.sortable.js :: ウェブデザイナーの日記
jQueryのuiはべんりなオモチャパックというかんじでいろいろそろってます。sortable.jsをときどき使うのですが、ネストしたリストでこれを使うと、動きがままならないときがあって、jumpyというんですかね、要素をドラッグして移動させようとすると、ビョーンとへんなところにいっちゃうときがある。ネストしたもんじゃなければパーフェクトなのですが。。オプションの中にconnectWithてのがあって、これを指定するとソート対象のli要素をあっちこっちにも動かせるようになるわけですが、ネストしてるヤツの場合は、ここに親要素子要素を指定すりゃいいはずなんだけど、なぜかビョーンが発生する。sortableのオプションについて詳しくはこちら↓ UI/API/1.7.2/Sortable/ 私の指定の仕方が悪いのだろうかと思ってたのですが、やはり似たようなジタバタをしている方がいるみたいで↓ jQ
WebデザイナーのためのJavaScript、jQueryの勉強法 - DESIGNMAP
まったくのプログラミング初心者の方を対象にJavaScriptの独学方法をのべていきたい。今回とりあげるJavaScriptの勉強法はあくまでWebデザイナー向け（もしくはフロントエンドエンジニア向け）なので、Node.jsのようなサーバーサイドJavaScriptはとりあげていない。 JavaScriptとjQueryをどちらから勉強するべきか。今回はあえて邪道とわかっていながらもjQueryにふれるという順番をとった。本来は、JavaScriptの基礎をしっかりおさえてからjQueryにすすむのが正統である。今回はトップダウン方式で実践にふれてから、基礎に戻る学習法を提案したい。 jQueryはJavaScriptを楽に開発するためのライブラリで、jQuery自体はJavaScriptのコードでできている。最初にいきなりjQueryにふれて、HTMLを動的に操作する（これをDOM操作と
CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました
Webデザインをしていると、HTML と CSS だけではできない表現ってありますよね。そんな時によく使うのが jQuery。今回は jQuery っていまいちよく分からない ... っていう人が、jQuery に少しでも親しんでもらえたらいいなーと思って、知ってる事をまとめてみました。なので jQuery 初心者さん向けの記事です。 とっても当たり前なんですけど、Web サイトは基本的に HTML で書かれていて、デザインは CSS で装飾されていますよね。最近では CSS3 の登場で、簡単なアニメーションも CSS で作れるようになりました。でもクライアントワークでは、まだまだ CSS3 を使える部分が限られているし、Webデザインに少し動きなどをつけたい時などは、まだまだ jQuery を活用する事も多いです。 私は Javascript が苦手で、jQuery もどちらかというと苦
Learning Advanced JavaScript
Double-click the code to edit the tutorial and try your own code. This tutorial contains code and discussion from the upcoming book Secrets of the JavaScript Ninja by John Resig. Our Goal Goal: To be able to understand this function: // The .bind method from Prototype.js Function.prototype.bind = function(){ var fn = this, args = Array.prototype.slice.call(arguments), object = args.shift(); return
データ可視化のためのグラフ描画JavaScriptライブラリ20選 | ゆっくりと…
SixRevisionsでオンラインでグラフを描画する場合に活躍しそうなJavaScriptライブラリの特集がありましたので、紹介します。個人サイトではあまり役に立たないかもしれませんが、観ているだけで楽しくなります。元記事に敬意を表し、なるべく趣旨が異ならずかつ変な日本語にならないよう心がけたつもりですが、訳に間違えがありましたら容赦願います。 2010年1月17日 by Jacob Gube 退屈な数値データを美麗かつインタラクティブに解り易く可視化するためのJavaScriptライブラリは数多くあります。通常はHTMLテーブルで表現するデータを、JavaScriptを使って可視化し美しく見せる事ができればあなたのデータはアクセシビリティーの優れたものとなるでしょう。私は2008年にデータのグラフ化＆チャート化のためのJavaScriptを書き上げましたが、今回再び単なるデータに生命を
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
【jQueryライブラリ】jqGridの構築方法とjqGridのテーマを変更 | 鰒。
鰒知(ふぐち)による自己満足なブログ。コメント、リンク大歓迎。 ニヤ→ニヤニヤ→ニタァ→ブファッ→超越 / 燃え ↑今ここ 北の大地で技術者を目指すデュエリスト兼ポケモントレーナー。 現在、自分用のWEBシステムにjqgridを使用しています。 構築に時間がかかりましたが、いろいろと学んだところもありました。 何よりUIがキレイなのがいいですね。 jqGridとは jqGridは、jQueryのグリッド専門のライブラリです。 TABLEタグをそのまま美しくしたり、PHPと連携したり、XMLだったりJSONだったり。 かなり充実してる上級者向けのグリッドライブラリだと思います。 ちなみにこんなものができます。 jqGridのテーマ（カラー）を変更したいから、jqGrid構築してみた テーマというか、テンプレートというか、色変更ですかね。 わたし緑好きなんで、緑のテン
phpQuery実行テスト
別ファイルをここに取ってきます。別ファイルはコチラ タイトル取得 取得してきたサイトのタイトル：サンプルサイトです。phpQueryのスクレイピング用サイトh1～h6のテキスト取得 h1~h6テキスト：phpQueryテスト用サイト ロゴ サムネイルラベル1 サムネイルラベル2 新着記事 一番初めのul要素を取得します。 コンテンツ1 コンテンツ2 コンテンツ3 コンテンツ4 クラス追加してリスト表示します。 ブログ1 ブログ2 ブログ3 ブログ4 articleタグ以下を取得して表示します。 2012年6月20日 記事タイトル9 2012年6月19日 記事タイトル8 2012年6月18日 記事タイトル7 2012年6月17日 記事タイトル6 2012年6月16日 記事タイトル5 2012年6月15日 記事タイトル4 2012年6月14日 記事タイトル3 2012年6月13日 記事タイトル
htmlSQLよりアツい!?jQueryみたいにセレクタでHTMLをparse(解析)する「PHP Simple HTML DOM Parser」
htmlSQLよりアツい!?jQueryみたいにセレクタでHTMLをparse(解析)する「PHP Simple HTML DOM Parser」 今週はてブでも大人気を博した記事「真面目にエロサイトを作ってみた【プログラマ編】｜ASTRODEO」や、IDEA*IDEAさんでも紹介されていた、PHPでHTMLをparseするライブラリ「htmlSQL」ですが、解析するHTMLを指定するにはSQLちっくな書き方をするので、SQL自体に触れる機会の少ない方には手を出しにくいシロモノです。 SQLわかんないです＞＜ もっとカンタンにparseしたいぉ☆ってゆー方に全力でゴリ押ししたいのが、今回紹介するMITライセンスのPHPライブラリ「PHP Simple HTML DOM Parser」です！ PHP5で書かれたこの「PHP Simple HTML DOM Parser」の最大の特徴は、解析し
jQueryで簡単にポップアップが出来る「jQuery PopUpWinodow」の使い方 | Web活メモ帳
jQueryを使ったポップアッププラグインの使い方を教える必要があったのですが、他にも知らない人がいるかもなのでブログでご紹介。 このスクリプトを実行すると簡単にポップアップウインドウが作れるようになりますよ。 ウインドウのサイズや位置などもパラメータで指定するだけです。 ※モーダルウインドウでは無く、新しいウインドウを開くポップアップの方です 1.jQueryをダウンロード まずは、jQueryが必要になります。公式サイトから最新版をダウンロードしてきます。 2.プラグインをダウンロード 次にプラグインのサイトからjquery.popupwindow.jsをダウンロードします。 2.JSを読み込み ダウンロードしたjQueryとpopupwindow.jsを読み込みます。 <script type="text/javascript" src="jquery.min.js"></scrip
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
