タグ

サンプルとjQueryに関するyoumaydreamのブックマーク (10)

  • Ring

    Ringとは、リクルートグループ会社従業員を対象にした新規事業提案制度です。 『ゼクシィ』『R25』『スタディサプリ』など数多くの事業を生み出してきた新規事業制度は、 1982年に「RING」としてスタートし、1990年「New RING」と改定、そして2018年「Ring」にリニューアルしました。 リクルートグループの従業員は誰でも自由に参加することができ、 テーマはリクルートの既存領域に限らず、ありとあらゆる領域が対象です。 リクルートにとって、Ringとは「新しい価値の創造」というグループ経営理念を体現する場であり、 従業員が自分の意思で新規事業を提案・実現できる機会です。 Ringフロー その後の事業開発手法 Ringを通過した案件は、事業化を検討する権利を得て、事業開発を行います。 さまざまな事業開発の手法がありますが、例えば既存領域での事業開発の場合は、 担当事業会社内で予算や

  • iScroll4でネイティブに近いスマホ向けHTMLページを作成する

    <div id="wrapper"> <ul> <li>row1</li> <li>row2</li> <li>row3</li> ... </ul> </div> var myScroll; function loaded() { myScroll = new iScroll('wrapper'); } document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); document.addEventListener('DOMContentLoaded', loaded, false); DOMの読み込み完了後でないとiScrollが実行できないため、DOMContentLoadedイベント発生後にnewされるようになっています。 また、タッチ時に余計な動きを起こさないようにtouc

    iScroll4でネイティブに近いスマホ向けHTMLページを作成する
  • CSSのiframeを二つ並べて、スクロールを連動させる

    僕が使う都合上、左はoverflow:hiddenにして、右のフレームにしかスクロールバーが出ないようにしている。 右のスクロールバーを動かすと両方のフレームが連動してスクロールされるようにするにはjQueryを使ってこう書く。 #migiでscrollイベントが起こったら、#hidariのscrollTopを#migiのscrollTopと同じところまでスクロールする。 ってことをしている。 上のサンプルもちゃんと連動してスクロールされるはず。 MacのSafari, Firefox, Google Chrome, Opera,あとiPhoneのmobileSafari(二指スクロール)で動作確認した。

  • jQuery $.ajaxでJSON・JSONP読み込みに使用する主なオプション

    はじめに 簡単にJSONまたはJSONPを読み込みたい場合は以前の記事を参照。 1分でわかるjQuery $.ajaxによるJSON・JSONP読み込み方法 type 主にGETかPOSTを指定。受け取るときはGET、送信するときはPOST。 url 読み込み先または送信先のURLを指定。例えばJSONを読み込みたいときは以下のようになる。 $.ajax({ type: 'GET', url: 'https://iwb.jp/s/js/data.json' }); $.ajaxのurlオプションを使用したサンプル cache キャッシュの有無をtrueかfalseで指定。注意しなければいけないのはJSONの場合はデフォルトでcache:true、JSONPの場合はcache:falseとなっている点だ。つまりJSONをキャッシュをしたくない場合はcache:falseを指定しなければならな

    jQuery $.ajaxでJSON・JSONP読み込みに使用する主なオプション
  • いろんなセレクタ指定方法+α

    ずいぶん以前にセレクタについて書いたのですが、今回はセレクタの種類を抜粋して、記述例と説明書きにまとめてました。「セレクタとは?」という方は、まず下記記事を読んでみて下さい。 jQueryを使ってみよう。(基編 セレクタ1) +αというのはトラバース(走査)系のメソッドです。「この要素を抜き出したい!」と思ったときにセレクタだけでは抜き出しにくい場合があります。そういうときにトラバース(走査)系のメソッドを使うと、簡単にできたりするので覚えておくと便利なものです。 「こういう書き方をすると、こういう要素が選択される」という例で説明を添えていますが、数が多いので説明書きは、ほんとうに添えた程度です。説明だけではわかりにくいと思うので動作サンプルを用意しました。動作サンプルを眺めながら、ちらっと説明書きをチェックしてもらえれば「なるほど!」となるはず。。。ご利用ください。 jQuery セレ

  • jQueryメモ:クリックしたのは何番目の要素?

    クリックした要素、例えばリストなんかで、そのクリックした要素がリスト中の何番目なのかというのを取得する方法、以前は普通に使っていたような気がするのですが、ここ最近思い出せない。検索してもなかなかでてこなかったりして悩んだのですが、普通にリファレンスに書いてあるじゃーんってのに遅いですが気づいたのでメモエントリー。 何番目の要素か 何番目の要素なのかを調べるには、jQueryのindex()を使う。 ■サンプルHTML <div id="test0"> <ul> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> <li>リスト4</li> <li>リスト5</li> <li>リスト6</li> </ul> <p>クリックした要素は<span>?</span>番目です</p> </div> リストをクリックした際に「?」の部分が変わる。クリックした要素が何番目

    jQueryメモ:クリックしたのは何番目の要素?
  • jQuery UI の Slider による、数値範囲をGUIで設定するスライダー

    jQuery UI の Slider プラグインを使い、数値の範囲をGUIで設定するスライダーを作る方法。数値の範囲をGUIで設定するスライダーを作るには、values、min、max、range オプションなどを使う。 実装例(サンプル) 範囲: 実装例(サンプル)について 初期値、最小値、最大値に下の値を設定してある。 初期値: 1001 ~ 3000 最小値: 0 最大値: 10000 実装例(サンプル)の動作について スライダーの2つの四角のハンドルをドラックして、トラック上を移動させることができる。 左のハンドルで、範囲の小さい値の方を指定。右ののハンドルで、範囲の大きい値の方を指定。 トラック上をクリックすると、ハンドルを、その場所へ、移動させることができる。 スライダーに合わせて、「範囲:」の右横の数値が変化する。 実装例(サンプル)のソースコード 読み込み パスは、それぞれ

  • 【jQuery】グラフの描画をやってみた - Asterisk - アスタリスク -

    どうも。 今回はプログラムの覚え書きです。ふとグラフの描画ってどうするんだろう?って思ったので。 色々と探して Flotr2 と言うライブラリを使うことにしました。 ライセンスは MIT License のようなので、将来的に何か作って公開することも考えると丁度いいかなと。 ディレクトリ構造 . ├── css │   └── bootstrap.min.css ├── js │ ├── bootstrap.min.js │ ├── flotr2.min.js │ └── jquery-2.0.1.js └── index.html index.html <!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="description" content=""> <meta name="viewpor

    【jQuery】グラフの描画をやってみた - Asterisk - アスタリスク -
  • オープンソースで公開されているPinterestクローンのソフトウェア・Pinry

    OSSで公開されている、Pinterestクローンソフトウェア・Pinryのご紹介です。すでに類似サイトも沢山あるので今更感あるかもですけど、アイデア次第で用途の幅も広がると思うのでメモ。 画像や動画、Webページをシェア出来るソフトウェア。PinterestライクなWebサイトを構築したいなら一考しても良さそうですね。Pythonで作られています。 昨年あたりから人気が出た画像共有サイト、PinterestのようなWebサービスを作成出来る、というOSSです。ライセンスはGPLみたい。 公式の動作サンプルです。 動作サンプル ↑ スクショです。見るからにクローンです。 ↑ 投稿用のブックマークレットや投稿画面もそのまま。 作ってみたいけど時間が足りない・・うぐぐ・・詳細は以下よりどうぞ。 Pinry

    オープンソースで公開されているPinterestクローンのソフトウェア・Pinry
  • ke-tai.org > Blog Archive > JavaScriptを使ってQRコードを作れる「jQuery.qrcode」

    JavaScriptを使ってQRコードを作れる「jQuery.qrcode」 Tweet 2011/4/18 月曜日 matsui Posted in ソフト紹介, 記事紹介・リンク | No Comments » もはやモバイルとは切っても切れない関係となっているQRコードですが、JavaScriptを使ってQRコードを作れるjQueryプラグイン「jQuery.qrcode」というものがあるようです。 ダウンロードはこちらのgithubのサイトから行えます。 → github jeromeetienne / jquery-qrcode [github.com] 簡単な解説はこちらです。 → jquery.qrcode.js – Jerome Etienne [jeromeetienne.github.com] このQRコードは実際に「jQuery.qrcode」を使って表示しています。

  • 1