jQueryUIのsortableウィジェットを使ってアイテムの並び順を管理するUIを作成する方法 - ほんじゃらねっと
例えば商品のランキングを手動で管理する場合、 商品データに並び順のようなものをつけてその順序で表示すると思うのだけど、 並び順を設定するUIをどのように作るのが良いか。 近いうちに作る機会がありそうなので、考えてみる。 ReactやVue.jsを使う機会はなさそうなので、jQueryベースで。 やりたいこと 既に商品マスタはあり、ソート順を設定できるカラムもあるとする。 できるだけ楽にランキングを変更できて、 データの更新数が最小限になる方法を見つけたい。 色々やり方はありそうだけど、 まずは一番簡単に実装できそうな方法で作ってみよう。 簡単に実装できそうな方法 商品がリスト状に並んでいるとして、 並び順を楽に変更する方法としては、 ドラッグしてリストの順序を変更するUIがオーソドックスで良さそう。 これはjQueryUIのsortableウィジェットで実現できる。 jqueryui.co
CSS、Javascriptを圧縮して読み込み速度を上げよう！「YUI Compressor」
timelapse audio / Inha Leex Hale ブログの表示速度を少しでも速くするために、ブログ内で読み込んでいるJSファイルとCSSファイルを圧縮せんと、「YUI Compressor」というツールを試してみました。 使い方 使い方は非常に簡単。まずはOnline YUI Compressorへアクセスしませう。 続いては「Code」の部分にCSS or JSファイルをコピペ、「File Type」を適宜切り替えて、オプションを選択したら「Compress」ボタンをクリックしましょう。 しばらくすると余計な改行や空白部分が消去された圧縮コードが吐き出されますので、あとは煮るなり焼くなりはんなり。 圧縮されたコードはあとから編集しにくいので、しっかりバックアップをとっておきましょう。あと、デザインなどが崩れる事も考えられるので張り替え後は確認を！（当サイトでは特にデザイン
7つのサンプルでjQueryを学ぼう！「jQueryが全く分からない人のため」の超初級者向け入門講座
HOME>jQuery>7つのサンプルでjQueryを学ぼう！「jQueryが全く分からない人のため」の超初級者向け入門講座 約半年前まで、興味はあれども全くもって触れたことのなかった「jQuery」。それどころか、「Javascript」を「Javasprict」と何度となく書き間違える癖のあった私。 結局、「スク水すいすいスクリプト」と語呂を合わせることによりようやく正しい綴りをマスターしたわけなんですが、仕事で扱うと言うこともあり多少はjQueryの仕組みが分かってきた今日この頃です。 そんなわけで、今回は「jQueryが全く分からない人のため」の超初級者向け入門講座と銘打ちまして、jQueryの基礎の基礎を学ぶための記事を書いてみました。 とは言っても「jQueryとはなんたるか」などといった難しい理論を記すつもりは一切ございません。（っていうかそんな偉そうなこと言える程修めてない
jQuery 指定した文字列をハイライトするプラグイン - 130単位
やりたいこと： 検索結果から、検索した文字列をハイライトしたい jQueryでプラグインとかないか探してみたら、ありました。 highlight: JavaScript text higlighting jQuery plugin http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html MITライセンスとなっています。あまりメジャーではないのか情報が少なめだったので、本家サイトを参考に導入手順を残しておいてみます。 使い方 1. jQuery本体とプラグインの読み込み <script>タグでjQuery本体、jquery.highlight-3.jsの順に読み込み <script type="text/javascript" sr
jQuery Grid Plugin – jqGrid
New version 5.8.7 of Guriddo jqGrid JS is released. The version contain numerous bug fixes and a lot of useful additions. Below the full list of the additions and fixes. Additions and Updates Add new function to add custom excel style – font and colors in onBeforeExport event Added parameters – this, value and options in editoptions.value object when it is a function. See: https://github.com/tonyt
[JS]実装も超シンプル、高さや幅が異なるエレメントを揃えるシンプルなスクリプト -equalize.js
エレメントの高さ（height）、幅（width）だけでなく、outerHeight, innerHeight, outerWidth, innerWidthのサイズを揃えるjQueryのプラグインを紹介します。 デモ：幅 equalize.jsの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> <script src="js/equalize.js" type="text/javascript"></script> Step 2: HTML HTMLは適用する要素を内包するラッパーを用意します。 下記はデモの高さを揃える方のHTMLです。 <div id="heigh
jQueryでスクロールすると上部に固定されるナビゲーション
jQueryでスクロールすると上部に固定されるナビゲーション グローバルナビゲーションはロゴの下に配置されていることが多いですが、スクロールするとナビゲーション部分だけが上部に固定されるようなものをjQueryでやってみたいと思います。 投稿日2012年02月21日 更新日2012年05月10日 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="
[はじめてのjQuery][css] jQueryを使用してhover時の画像にドロップシャドウがつくようにしてみた
jQuery Summit Notes / Robert Banh 今日も今日とてjqueryのお勉強中、おつぱ（ @OZPA ）です。 「ページのトップに戻る」ボタンを実装してみたり、ブログの最上部に位置固定のソーシャルボタンとサイト内検索フォーム内蔵バーを配置してみたりしているわけですが、今回はjQueryを使用して、メインカラムの画像にカーソルを合わせた時にドロップシャドウをつけてみる挙動を仕込んでみました。 メインカラムの画像にhover時ドロップシャドウをつける たまに、背景が白いスクリーンショットや透明なpngなどを貼り付けた際に、これまたバックグラウンドが真っ白な当ブログではどこが境界線なのかわからないということがよくありまして。 こんな画像ですとどこが境界線がわからない。 でまぁ全ての白い背景画像にドロップシャドウを今から付けたりするのは面倒くさいので、jQueryを使用し
![[はじめてのjQuery][css] jQueryを使用してhover時の画像にドロップシャドウがつくようにしてみた](https://cdn-ak-scissors.b.st-hatena.com/image/square/1a9264928a31685a7c06e095c81bf3909dadcb15/height=288;version=1;width=512/https%3A%2F%2Fozpa-h4.com%2Fwp-content%2Fuploads%2F4119057479_c09101901b3.jpg)
ColorBox - ポップアップ内を自由に設定できる活かしたjQuery
View Demos 1 2 3 4 5 Released under the MIT License, source on Github (changelog) Download Install via NPM npm install jquery-colorbox Compatible with: jQuery 1.3.2+ in Firefox, Safari, Chrome, Opera, Internet Explorer 7+ Supports photos, grouping, slideshow, ajax, inline, and iframed content. Lightweight: 10KB of JavaScript (less than 5KBs gzipped). Appearance is controlled through CSS so it can
[JS]大量の画像コンテンツに便利！ サムネイルを自動生成するスクリプト -NailThumb
大きいサイズの画像から、クロップやリサイズなどして小さいサイズのサムネイルを自動生成するjQueryのプラグインを紹介します。 サムネイルはテキスト配置やさまざまなエフェクトにも対応しています。 jQuery NailThumb [ad#ad-2] NailThumbのデモ NailThumbの使い方 NailThumbのデモ NailThumbは元画像のアスペクト比を維持したまま、クロップやリサイズをしてサムネイルをスクリプトで生成します。 サムネイルはさまざまなフォーマットが用意されています。 キャプション テキストをオーバーレイで表示することもできます。 NailThumbの使い方 NailThumbの基本的な使い方は、サムネイル用のコンテナとサムネイルのサイズ設定です。 外部ファイル スクリプトとスタイルシートを外部ファイルとして記述します。 <script type="text/
[JS]余分なHTMLは加えずに、セマンティックに実装するスマートフォン用のナビゲーション
デスクトップ時はアイテムが水平に並び、スマートフォン時は省スペースのドロップダウン型に変わるナビゲーションを実装するチュートリアルを紹介します。 デモページ：幅480pxで表示 実装 HTML HTMLは非常にシンプルで、リスト要素を使いnav要素で内包するだけです。 <nav id="nav-wrap"> <ul id="nav"> <li><a href="#">Button</a></li> <li><a href="#">Button</a></li> </ul> </nav> JavaScript スクリプトではスマートフォン用にdiv要素で「Menu」を加え、それがクリックされるとアニメーションでスライドします。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7
Build a Contacts Manager Using Backbone.js: Part 5 | Envato Tuts+
Welcome back to the Building a content viewer with Backbone series. Over the first four parts, we looked at almost every major component that ships with the latest version of Backbone including models, controllers, views and routers. In this part of the tutorial, we're going to hook our application up to a web server so that we can store our contacts in a database. We won't be looking at LocalStor
レスポンシブデザインに使えるjQueryプラグイン集 – creamu
「20 Useful jQuery Plugins for Responsive Web Design」という記事で、レスポンシブデザインに使えるjQueryプラグインが20個まとまっています。 上記はPHOTO SWIPE。スマートフォン用に、スワイプできるスライドショーを作ることができます。 isotope アニメーションでオブジェクトの位置が変更されます ResponsiveSlides.js シンプルなクロスフェードタイプのスライドショー The Heads-Up Grid オーバーレイでグリッドラインを表示 jQuery Masonry fluidなレイアウトが実現できる scrolldeck 矢印キーでページ移動、動きのあるプレゼンテーションを可能にする Elastislide ウィンドウサイズの変更に対応した、レスポンシブなカルーセルギャラリー AUTOMATIC IMAGE
[JS]ページ全体をダイナミックに横にスライドし、コンテンツを表示するスクリプト -PageSlide
デモ PageSlideの使い方 外部ファイル スタイルシートをhead内に記述します。 <link rel="stylesheet" type="text/css" href="jquery.pageslide.css"> ページの下（</body>の上）にスクリプトを記述します。 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="jquery.pageslide.min.js"></script> JavaScript PageSlideさせる要素を指定します。 <script type="text/javascript"> $('a').pa
Build a Contacts Manager Using Backbone.js: Part 3 | Envato Tuts+
Welcome to part three of our series that focuses on building applications using Backbone. If you haven't read parts one and two, I strongly recommend that you do -- just so you know where we're at and what we've covered so far. In part one, we took a basic look and models, views and collections. In part two, we looked at routers, events and the history modules. In this part, we're going to look fu
ブラウザベースのjQuery Mobileアプリ開発環境「codiqa」と「Application Craft」
jQuery MobileなどのすぐれたJavaScriptフレームワークの登場で、HTML5とJavaScriptを組み合わせたWeb標準によるモバイルアプリケーション開発が普及し始めています。 この記事では、Web標準によるアプリケーション開発をさらに簡単にしてくれる、WebブラウザベースのjQuery Mobile対応モバイルアプリケーション開発環境「codiqa」と「Application Craft」の2つを紹介しましょう。 Codiqa～jQuery Mobileアプリのモックアップがすぐ作れる モバイルデバイス対応のアプリケーションを開発するときに手間がかかるのが、小さい画面でも使いやすいユーザーインターフェイスの構築です。モックアップを作り、使い勝手を試す必要があります。 先月公開が始まった「codiqa」は、そのモックアップを手軽に、Webブラウザ上でドラッグ＆ドロップす
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.jqueryhelp.net/
Blogger
Build a Contacts Manager Using Backbone.js: Part 4 | Envato Tuts+
30 Days to Learn jQuery | Envato Tuts+
