[JS]一味違ったアイデアでレスポンシブ対応のテーブルを実装するスクリプト -Responsive tables
サイズが変更されても、ハイライト表示はできます。 Responsive tablesの使い方 Step 1: スタイルシート スタイルシートをhead内に外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="css/rwd-table.min.css"> </head> Step 2: スクリプト スクリプトを</body>の上あたりに記述します。 <body> ... <script type="text/javascript" src="js/rwd-table.js"></script> <script> $(function() { $('.table-complex').responsiveTable({ adddisplayallbtn: true, addfocusbtn: true, fixednavbar: '#n
[JS]多階層のナビゲーションを今風にサイドを利用して実装するスクリプト -MultiLevel Push Menu
MultiLevel Push Menuの使い方 アイデアの元となっているのは、こちらのデモ。 MULTI-LEVEL PUSH MENU 実装はより簡単に、オプションも豊富に進化しています。 Step 1: 外部ファイル jquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。 <link rel="stylesheet" href="multilevelpushmenu.css" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="jquery.multilevelpushmenu.min.js></script> IE8をサポートする際は、Modernizrを加えます。 <script src="//oss.max
Echo.js, simple JavaScript image lazy loading - Ultimate Courses
I’m currently working on a project for Intel’s HTML5 Hub in which I require some image lazy-loading for an HTML5 showcase piece that’s high in image content. After a quick Google search for an existing lazy-load solution there was yet another mass of outdated scripts or jQuery plugins that were too time consuming to search through or modify for the project - so I ended up writing my own. Echo.js i
jquery.addInputArea.js
jquery.addInputArea.3.2.js English Japanese Last update:2012-08-05 You can add or delete the list of text-box or text-area. テキストボックス、またはテキストエリアを動的に追加・削除します。 Basic 基本 Delete (HTML) <ol id="list1"> <li class="list1_var"> <input type="text" size="40"> <button class="list1_del">Delete</button> </li> </ol> <input type="button" value="Add" class="list1_add"> (JavaScript) $('#list1').addInputArea(); You
ServletとjQueryによる非同期ファイルアップロード - コンピュータクワガタ
最近色々なところで見かける、ファイルをアップロードする際にプログレスバーを表示する方法を色々調べてみました。 以前調べていた時には、インラインフレームへのサブミットとCommons FileUploadを組み合わせて行う方法しか見つからなかったのですが、今はJavaScript側での仕組みが整って来ました。 ちなみにChromeとFirefoxの最新版でしか確認していません。IEは動きません。 とりあえずコードです。アップロードを受信するサーブレットはいつもどおり、丸パクリの使いまわしです。この部分はサーブレットでなくてもサーバーサイドでファイルのアップロードを受信できればなんでも構いません。 package net.kuwalab.servlet; import java.io.IOException; import java.io.PrintWriter; import javax.s
spin.js
Share it! If checked, the option values will be stored in the URL so that you can easily share your settings. Features No images No dependencies Highly configurable Resolution independent Uses CSS keyframe animations Works in all major browsers Includes TypeScript definitions Distributed as a native ECMAScript module MIT License Spin.js dynamically creates spinning activity indicators that can be
テーブルソート、テーブル操作｜jQuery plugin｜Ajax｜PHP & JavaScript Room
テーブル、リスト、段落など要素内のデータを簡易検索するjQueryプラグイン。 指定した文字列にマッチしたデータを持つ要素だけを絞り込んで表示することができます。 オプションのパラメータで簡単にカスタマイズすることができます。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="C
Simple and fast .NET Web Services framework
Simply Refreshing 1 framework for all your services and web apps that's intuitive and Easy-to-use! Never read another text-book to learn another heavy .NET framework again! Super Fast Obscenely fast! Built with only fast, clean, code-first and light-weight parts. Start using .NET's fastest serializers, ORMs, redis and caching libraries! Thoughtfully architected Holistically constructed with remote
スマフォサイト作る際に覚えておくと便利なモバイル用jQueryプラグインいろいろ:phpspot開発日誌
8 Best jQuery Mobile Plugins | ZoomZum スマフォサイト作る際に覚えておくと便利なモバイル用jQueryプラグインがまとまっていましたのでご紹介。 １から作るとかなり大変そうな機能もライブラリで瞬間的に実装できます。一通りチェックした上でご紹介。 Drag And Scale For IOS ブロック要素をピンチイン、アウトによって拡大、回転させることも可能です。これでiPhone向けのWEBサイトといってもアプリのような自由度が得られます（デモ）。 こんなことできるんっ、という声が出てしまうかも（Androidはドラッグのみ） jQuery Mobile Photo Album リッチなフォトアルバム実装が可能 Jquery Mobile Device Drag And Drop 要素のドラッグ＆ドロップが可能 Jquery Swipe スワイプイベン
socialbutton | jQuery Plugins
Social Button (e.g. Facebook, Twitter, mixi, GREE) this plugin is the easiest way to implement "share" buttons (links to social networking services, like facebook etc.) to your website. Available Services Facebook / Like button http://developers.facebook.com/docs/reference/plugins/like Twitter / Tweet Button http://twitter.com/goodies/tweetbutton mixi / mixi check http://developer.mixi.co.jp/conne
次世代のイメージマップを実現できるjQueryプラグイン「ImageMapster」:phpspot開発日誌
ImageMapster 次世代のイメージマップを実現できるjQueryプラグイン <map> と <area> タグを使って画像上の好きな位置、形でリンクを貼ることができますが、あのイメージマップをjQueryによって次世代にしてしまうプラグインが登場 イメージマップのエリア上をハイライトさせ、背景画像を別のものに差し替えるという効果をつけられます。（別画像はオプション指定） 画像の位置とリンクを関連付けるだけという味気ないWeb1.0なインタフェースをこのプラグインが少しだけリッチにしてくれます。 イメージマップってあまり使うことはありませんが、いざ仕事でこうしたUIが必要で、使わなきゃとなった時に、こんなことも出来るということを知っておくとありがたがられるかもしれませんね。 関連エントリ HTML5のデスクトップ通知を簡単に扱えるjqueryプラグイン「desktopify」。 小さ
ボックス内をスクロールすると自動でコンテンツをロードするjQueryをちょっと変えてみた
この記事は11年以上前の記事です。情報が古い場合がありますのでお気を付け下さい。ボックス内をスクロールすると自動でコンテンツをロードするjQuery – かちびと.net を読んで、ちょっとやってみたくなったので作った。 言ってもたいしたことやってませんがｗ かちびと.netのシロさんには許可を頂いてます。 詳細は以下。 上記記事では、下までスクロールしたあとにワンテンポ置いてから（タイマー処理で）コンテンツがロードされる形になってます。 しかし、IEで見てみるとわかるのですが、内側のスクロールが完了した時点で外側のスクロールも動いちゃうんですね。 なので、ロードされる前にページの下に行ってしまう。 これをちょっと改善できないかなーと思って作ったのがこちら。 Auto Scroll Test コードは以下。 <script type=”text/javascript”> $(functio
テーブル内の行やセルなどの要素をドラッグ＆ドロップで自由に配置できるスクリプト・REDIPS.drag
使い方<script type="text/javascript" src="redips-drag.js"></script> <script type="text/javascript" src="script.js"></script>ライブラリと設定用のjsファイルを読み込んでマークアップするだけです。 デモのマークアップは以下のような感じ。 <div id="drag"> <table> <colgroup> <col width="30"/> <col width="100"/> <col width="100"/> <col width="100"/> <col width="100"/> <col width="100"/> </colgroup> <tbody> <tr> <th colspan="6" class="mark">テーブル</th> </tr> <tr c
スマートフォン向けのJSフレームワーク・Wink Toolkitがバージョンアップしてより素敵になったよ
以前ご紹介した、スマートフォン向けの JavaScriptフレームワーク、Wink Toolkit がバージョンアップしたんだぜ、と開発者 さんからわざわざお問い合わせ頂いたの でご紹介。以前もかなり豊富なUIでとても 有意義なフレームワークだと感じましたが、 今回はUI面が特にパワーアップ。 Wink Toolkitがバージョン1.3になって機能もいくつか追加されました。3ヶ月間、UIの改善にかなり力を入れてくれたようで、スマフォにかなり合わせてくれましたよ。 jQuery Mobileライクなインターフェースになりました。もともとUIエフェクトの評価は高かったWink Toolkitですが、全体的なデザインが見直されてかなり垢抜けた感じです。 尚、以前の機能やUIは過去記事をご参照下さい。 Wink Toolkitが割と良かったので日本語サンプル作った Demo 前回はほぼ全てのデモを
複数ファイルの一括選択OKなプログレスバー付きアップローダ実装jQueryプラグイン「jQuery File Upload」:phpspot開発日誌
複数ファイルの一括選択OKなプログレスバー付きアップローダ実装jQueryプラグイン「jQuery File Upload」 2011年01月25日- jQuery File Upload Demo 複数ファイルの一括選択OKなプログレスバー付きアップローダ実装jQueryプラグイン「jQuery File Upload」。 「Upload files」ボタンを選択するとダイアログが開き、複数ファイルを一括して選択。その後すぐアップロードが始まり、プログレスバーを通して進捗を表示、アップされたファイルのサムネイルも次のように表示してくれるという、ファイルアップロードのフルセットを提供してくれます。 アップされたファイルの横に表示されているごみ箱アイコンをクリックすればすぐさま削除も可能。 HTML5ベースなプラグインなのでFlashも不要です。 アップロードの受け口としてphpのソースも同
使いやすくデザインもよい星型レーティング実装jQueryプラグイン「jRating」:phpspot開発日誌
MyjQueryPlugins : jRating - Ajax rating system with jQuery 使いやすくデザインもよい星型レーティング実装jQueryプラグイン「jRating」。 デザインは次のように、綺麗な星のデザインになっており、個性が強すぎず、弱すぎずという感じで汎用に使えそうです。 isDisabledオプションを true にすると、星だけ表示して投票禁止にすることも出来るので、ログインユーザのみに限定したい場合なんかにも使えそうです。 更に次のような小さな星にすることも出来ます。 次のように、成功、失敗時のイベントハンドラを設定することも可能。 $(".exemple6").jRating({ onSuccess : function(){ jSuccess('Success : your rate has been saved :)',{ Horiz
フォームで離脱させないためのjQueryプラグイン50選｜designaholic -Creative Column-
最近では、エントリーフォーム最適化（EFO）という施策も広まってきましたが、特に購入やサンプル請求、お問合せ等がコンバージョンとなっているサイトではフォームで離脱されてしまってはせっかくの広告や施策が水の泡になってしまいます。 ここではユーザーを離脱させないために気をつけたいポイントとそれを実現するために便利なjQueryのプラグインを紹介します。 まず、入力フォームを作成する際のポイントは、ユーザーにストレスを感じせない事です。ストレスの原因となるものは大きく言うと 入力しづらい、エラーメッセージがわかりづらい、といった操作に関するもの。 どこまでやれば完了なのかわかない、個人情報の扱いが心配、といった心理的なもの。 です。なのでこの点を解消させてあげるフォームを作成すればユーザーが離脱する可能性は下がりますね。 具体的なポイントは以下のような項目になります。 必須入力か
フォーム入力に役立つjQueryプラグイン
本連載では、JavaScriptライブラリの中でも人気が高まりつつあるjQuery UIとプラグインを取り上げます。今回は、Input Hint Overlay、Text input field filter、jQuery Validation、Password Strength、Simplest Twitter-like dynamic character countについて説明します。 はじめに 第2回「jQuery UIのウィジェットを使ってみよう」では、jQueryのユーザーインターフェースを拡張するjQuery UIのインストールから、jQuery UIのDialog、Datepicker、AutoComplete、ProgressBarの使い方を取り上げました。第3回では、第1回「jQuery UIのインタラクションを使ってみよう」でも簡単に触れたjQuery Pluginのフ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQuery | Tutorialzine
https://jqapi.ru/