【jQuery】jsonからアイテムをランダム出力 - style01
例えばAから6個、Bから4個それぞれランダムで選ぶとき。 ajaxでjsonを読み込みます。 デモページhtml $(function () { //アイテムをランダムで出す var $result = $('#result'); $.ajax({ type: 'GET', url: 'item.json', dataType: 'json' }).then( function (data) { console.log('成功'); var LIMIT_NUM = 10; //上限 function choiceItem(fruitsItem) { var FRUITS_NUM = fruitsItem; var VEGETABLES_NUM = LIMIT_NUM - FRUITS_NUM; var itemChoiceArray = []; //itemのIDを入れる function
なぜ人は必死でjQueryを捨てようとしているのか
最近はやりのjQuery Hateの謎に迫る！ （というか、これであってるのか教えてほしいという発表）
jQueryでリンクを無効にする | 私的雑録
$(function () { // aタグを無効 $('#case1').css('pointer-events', 'none'); // aタグを削除 $('#case2').contents().unwrap(); // 遷移を止める $('#case3').click(function () { return false; }); });
jQuery URLive — a URL live preview plugin
URLive is a jquery plugin that helps you create a live preview snippet of a url based on the Open Graph properties of the page, similar to a url preview in a facebook post. The plugin works with any element that has a url content or value, even on <a> tag with <href>. It is lightweight and doesn't require any back-end code as data scraping is done asynchronously with AJAX using the Yahoo Query Lan
jQueryで横スクロールのアニメーションするサイトを作る方法
「Smooth Vertical or Horizontal Page Scrolling with jQuery」で紹介されていた方法を参考に、jQueryでサイト全体を横や縦にスクロールさせる１つの方法を紹介しちゃいます！。 デモ スクロールさせる方法はいくつかあるのですが、今回の記事では一番簡単だと思われる方法を紹介することにします。まずは、デモをごらんください。元記事のデモはもっとかっこいいです。 デモを見る 考え方 基本的には、下のイメージのように、横スクロールでは、コンテンツを横に並べて、横長のコンテンツを作り、スクロールバーをスライドさせて見えるコンテンツを制御するのが一般的です。縦スクロールの場合も考え方は同じです。 ※縦スクロールのやり方は記事の後で紹介します。 基本レイアウト HTMLとCSSは、下記のようになります。 <!DOCTYPE html> <html lan
JavaScriptを使って、自サイトでの「はてなブックマーク」の人気記事一覧を表示する
ソーシャルブックマークの「はてなブックマーク」。ここで自分のサイトの記事がどれだけブックマークされているかわかるのですが、 それをブックマーク数が多い順で並べる方法をJSで試したので、ご紹介です。 既存のブログパーツ わざわざJSを使わなくても、ブログパーツを使えば 簡単に設置ができるのですが、デザインの柔軟性にはかけるのでJSで簡単にできないかなと思った次第です。以下がブログパーツを設置したサンプルです。 はてブ人気エントリーをパーツで設置 APIを呼び出す まずはその人気エントリーを取得するAPIのアドレスが以下になります。 http://b.hatena.ne.jp/entrylist/json?sort=count&url=[サイトのURL]&callback=hatebuCallback [サイトのURL]に自分のサイトのアドレスを。callbackの後ろはあとで書くJSのfun
要素をドラッグ＆ドロップで自由にリサイズできる「jQuery Splitter」:phpspot開発日誌
jQuery Splitter | jQuery Plugins 要素をドラッグ＆ドロップで自由にリサイズできる「jQuery Splitter」。 通常、ブロック要素というと固定が当たり前ですが、jQuery SPlitterを使えば、Windowsアプリケーションのようにペインをリサイズ可能です。 使い方も色々とありそうです。 マウスで簡単リサイズ JSのコードは次のように split メソッドを呼んで実装しているようで簡単です。 <script> jQuery(function($) { $('#widget').width(700).height(400).split({orientation:'vertical', limit:100}); $('#foo').split({orientation:'horizontal', limit:10}); $('#a').split({
少しのコードで実装可能な20のjQuery小技集
2016年6月22日 jQuery 素敵な動きを手軽に実装できるJavaScriptライブラリ「jQuery」。jQueryには多くのプラグインが揃っていますが、以前書いた「少しのコードで実装可能な20のCSS小技集 」に続き、今回はプラグインなしで実装できるjQueryの小技を紹介します！「jQueryってなんだ？」という人もコピペで実装できますよ！サンプルも用意したのでぜひご覧ください！ ↑私が10年以上利用している会計ソフト！ 追記：この記事で紹介されているいくつかの方法が、今ではCSSのみで実装可能です！詳しくは「かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技」をご覧ください。 jQueryの基本的な使い方 まずはjQuery本家からjQueryファイルをダウンロードします。<head> 内に下記を記述し、jQueryファイルを読み込みます
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]用途にあったページネーションが実装できるスクリプト -Pajinate
長いリストやコンテンツに表示を小分けにするページネーションを簡単に適用できるスクリプトをThe Silver Liningから紹介します。
jQueryを利用したタブメニューを設置
jQueryを利用したタブメニューを設置してみます。タブは設定した間隔で自動に移動します。ソースはこれから紹介しますが画像やCSSファイルはサンプルファイルにあるのでダウンロードしてお使いください。 body部分はこんな感じです。タブの数は自由に変更できます。 <div id="rotate"> <ul> <li><a href="#fragment-1"><span>Section 1</span></a></li> <li><a href="#fragment-2"><span>Section 2</span></a></li> <li><a href="#fragment-3"><span>Section 3</span></a></li> <li><a href="#fragment-4"><span>Section 4</span></a></li> <li><a href="#
フォーム周りに使えるjQueryプラグイン50 – creamu
フォームをより使いやすくしたい。 そんなときに使えそうなのが、『50 jQuery Plugins for Form Functionality, Validation, Security and Customisation』。フォーム周りに使えるjQueryプラグイン集です。 バリデータやアップローダ、パスワードの安全性チェックなど、いろいろありますね。 jQuery “Highlight” Plugin フォーカスが当たっているフォームに背景画像を敷いて、ハイライトしてくれるプラグイン Autotab: jQuery Auto-Tabbing and Filtering 電話番号などのinputで、自動で次のinputにカーソルを移動してくれる jQuery NobleCount Twitterのような、あと何文字入力できる、を表示してくれる「jQuery NobleCount」 AJ
[JS]ページの流れをさえぎらない画像拡大スクリプト - jQuery.popeye
画像を拡大するスクリプトとしてはLightboxやfancyboxが有名ですが、これらはページの流れをさえぎってしまう弱点をかかえています。 この弱点を改良すべく開発された新しい画像拡大（ギャラリー機能付）スクリプトをChristoph Schüßlerから紹介します。
縦書き表記をサポートするテキストレイアウトエンジン·Nehan MOONGIFT
NehanはJavaScript製のオープンソース・ソフトウェア。コンピュータはアメリカ発とあって、左から右に表記されるのが基本だ。アラビア語のように右から左に表記される場合もあるが、それでも横に流れるのは変わらない。日本語のように縦に書かれることは考慮されていない。 だが日本人である以上、慣れはあるとは言え縦書きの方が分かりやすい。それは今後電子書籍が流行っていく中で必ずネックになるはずだ。とは言え出力自体縦書きにするのは難しい。そこで表示だけを切り替えるのがNehanだ。 NehanはHTMLでは通常通り横向きに書かれている文章をJavaScriptを使って縦書きに変換する。カギ括弧など単純に縦に並べると問題のある文字は画像を使って置き換えてくれる。これによってぐんと見やすい状態になる。 実際の使い方としてはclassの中に幅、高さ、フォントサイズを指定する程度で良い。特に何も考えずに
ページのフッターに常に便利リンクを固定で表示するためのjQueryプラグイン「jQuery Fubar」:phpspot開発日誌
jQuery Fubar ? How To Create A Website Toolbar From Scratch And Add Widgets To It | AddyOsmani.com | Where Web Businesses Grow ページのフッターに常に便利リンクを固定で表示するためのjQueryプラグイン「jQuery Fubar」。 ページフッターに、ツールバーなどでソーシャルサイトへの投稿リンクなどが表示されていると便利なだけでなく、ソーシャルによって情報が広まる可能性も高めてくれます。 そういうツールバーを簡単に実装するためのjQueryプラグインがチュートリアルとともに公開されました。 実装された画面は次のようになっており、なかなかクールな上、ガクガク動かずに固定なので目障りにもなりません。 同じような物を実装したい場合があった際に覚えておくとすぐに実装でき
画像をキャプション付で超クールに切り替えるjQueryプラグイン「s3Slider」:phpspot開発日誌
s3Slider jQuery plugin 画像をキャプション付で超クールに切り替えるjQueryプラグイン「s3Slider」。 次のように、画像に半透明のキャプションを付けつつクールにアニメーションさせられるjQueryプラグインです。 動きを実際に見てみましょう。かなりかっこいいです。 s3Sliderプラグインの使い方とダウンロードはこちら 実装のHTMLは次のように結構綺麗になってますので、安心して使えます。 ページのヘッダーあたりに置くとかなりのオシャレ感を出すことが出来ますね。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryのセレクタメモ - Qiita