Autocomplete | jQuery UI
Autocomplete Enables users to quickly find and select from a pre-populated list of values as they type, leveraging searching and filtering. The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are tags for programming languages, give "ja" (for Java or JavaScript) a try. The datasource is a simple JavaScript array, provided to the widget using the source
Select2 4.0.0 jQueryプラグイン 新バージョンここがすごいよ - Qiita
先日jQueryで使えるドロップダウン代替プラグイン5選でご紹介したSelect2プラグインですが、もうすぐメジャーバージョンアップを控えていて、この記事を作成している現在リリース候補版となっています。 Select2 https://select2.github.io/ ここで新バージョンがどのように改善されているのかいくつかご紹介したいと思います。 公式ドキュメントからの情報をまとめています。 コードのフルリファクタリング これまで3年間維持してきたコアのコードを全て書き直したとのこと。 ソースの見やすさやパフォーマンス向上が期待できますね。 後方互換性ももちろん持たせているそうです。 新しいプラグインフレームワーク プラグインを簡単に実装しやすくするためにアダプタシステムが用意されています。 本体に手を入れずに気軽に拡張できるのが良さそうですね。 代替input要素の排除 これまで、
Reactを使うとなぜjQueryが要らなくなるのか - Qiita
はじめに React（通称 React.js1）を全く知らない、あるいは幾つか記事を見たけどなんなのかピンと来ていない、という人のために書いています。 「jQuery くらいしか知らない」くらいの人に具体的に雰囲気を知ってもらうのが目的であり、すでにやる気がある人向けのチュートリアルではありません。やる気が出れば日本語版ドキュメントを読んで手を動かせばあっという間なので、そこまでの興味が出ることを目標にしています。 以降では ES2015 (ES6) の文法（アロー関数とか）を使っています。この部分が怪しい人は先にアロー関数と const 文だけでも知ってから先に進んでください。 以下の説明中、このアイコンで表すのは（2023 年現在から見た）『昔話』です。新しく自分のコードを書く際には本来知らなくていいことですが、古い記事を見たときに混同しないための参考情報として書いてあります。この記事
ng-inspector - The AngularJS inspector pane for your browser
ng-inspector is a browser extension for Chrome, Safari and Firefox that adds an inspector pane to help you develop, debug and understand your AngularJS applications. Crypto users will benefit from these browser extensions in order to get the most out of their research. There are similar browser extensions for crypto users and traders that helps them with cryptocurrency trading and help them to tak
[JavaScript] 全角を2、半角を1と数えるコード | きほんのき
JavaScriptで全角を2、半角を1と数える必要があったので調べてみたら、大量に参考になるページが出てきました。結構需要があるのですね。 html5のcanvas上にテキストを描画する際、テキストの長さを取得するにはmeasureText()メソッドを使います。canvasを初めて使った時、このメソッドに気づかず、「全角を2、半角を1として数え、フォントサイズを掛けて長さを求めよう」などと考えたのですね。その時に必要になったわけですが、これで正しいwidthが分かるわけもなく。 それはそれとして、表題のコードは非常に有用で使い所も多いのでメモしておきます。コードはこちらを参考にさせていただきました。 var charcount = function (str) { len = 0; str = escape(str); for (i=0;i<str.length;i++,len++)
スクリプトを動的に読み込む方法 | JavaScript プログラミング解説
スクリプトを動的に読み込むには、scipt要素をスクリプトで作成し、それをドキュメントに追加します。コードで記述すると、それは次のようになります。 var script = document.createElement( 'script' ); script.type = 'text/javascript'; script.src = filename; var firstScript = document.getElementsByTagName( 'script' )[ 0 ]; firstScript.parentNode.insertBefore( script, firstScript ); 作成済みのscript要素のsrcプロパティだけを変更する方法では、初回の1回だけしか読み込みが実行されません。よってこのようにscript要素の作成から行います。 この方法を利用して、クロ
JavaScriptのデバッグ方法 – JSを嫌いにならないためのTips | POSTD
この記事のオリジナルは voxxed に投稿されたものです。 JavaScript関連の問題を抱えるチームをサポートする仕事を通じて、いくつか共通の問題点があることに気づきました。もしあなたもJavaScriptに対するイライラを感じているのであれば、この記事は何らかの助けになるかもしれません。おことわり：私がお教えするヒントはすでにご存知のものもあるとは思いますが、うまくいけば、多少なりとも有用な情報があるかもしれません。特にエンタープライズアプリケーションやCMSソリューションを構築する際に有効なヒントです。チームの誰もが話したがらないCMSのコードについてお話しします。いずれも必要に応じて採用できるものです。 debuggerステートメント 大半のブラウザでサポートされているにもかかわらず、JavaScriptを書く際に最も活用しきれていない機能の1つです。debuggerステートメ
クリックするとテキストボックスにかわるラベルを実装
Flickrなどでは、写真の編集画面でキャプションをラベルとして表示しておきクリックするとテキストボックスやテキストエリアに変換してくれて編集させるようなインターフェイスを実装しています。結構いいですよね～。そこで実装してみました。 スクリプト <script type="text/javascript" src="jquery.min.js"></script> <div id="div802">3.25</div> <input id="div802-edit" name="div802" style="display:none;"></input> <script type="text/javascript"> $('#div802').click(function() { $('#div802').css( 'display', 'none'); $('#div802-edit')
一定時間経過後に指定したページへ移動する - JavaScript
サンプルと機能 → Sample 1：一定時間経過後にページを移動 → Sample 2：一定時間経過後にページを移動（<META>タグ使用） 一定時間経過後にページを移動させます。 サイトを引っ越した時や、NotFoundページに設置すると効果的です。 サンプルスクリプト 緑の文字が変更箇所で、赤い文字が対応するスクリプトです。 "//"以下はコメントです。削除しても影響ありません。 必要な箇所をコピー＆貼り付けして編集してください。 → Sample 1：一定時間経過後にページを移動 <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- // 一定時間経過後に指定ページにジャンプする mnt = 5; // 何秒後に移動するか？ url = "http://www.eweb-de
JavaScript、jQuery、両者を使って要素を並べ替える - すたら日記
"Yahoo!知恵袋"で下記のような質問に出会ったので、実際に作ってみました。 javascriptによる順序の並び替え。 - Yahoo!知恵袋 http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1487903314 実験ページ http://usamimi.info/~sutara/sample/jq_sort.php ソース(抜粋)※ 全文は、実験ページのソースをご覧下さい。 並べ替えるリストid名の数値の順番に並べ替えます。 <ol id="test1"> <li id="3">id:3 cccccc</li> <li id="4">id:4 dddddd</li> <li id="1">id:1 aaaaaa</li> <li id="2">id:2 bbbbbb</li> </ol> JavaScript var
セレクトボックスのoption要素を並び替えたい！
こんちわ。松田です。 最近作っているシステムで、以下のようなお題が出されました。 問：セレクトボックスで選択した要素を↑↓ボタンで並び替えよ。ただし、CTRL選択による複数選択にも対応すること。（10点） JavaScriptのライブラリは腐るほど出回っているのでとりあえずググろうかと思いましたが、そもそもなんてキーワードで検索したらいいのか分かりません。 「セレクトボックス 並び替え」「selectbox 要素 移動」「selectbox move」・・・ うーん。。。 日本語で検索して引っかからないと、英語ページに救いを求め、だんだんとシンプルな英単語でググっていくことになりますが、今回はなかなかいい結果が見つかりません。 そんなわけでこれは自分で実装してみることにしました。 まずは↓ボタンから作るか。ということで、クリックしたら呼び出される関数をとりあえず定義。 そして、<optio
「AngularJS」と「はてブAPI」で作るChromeアプリの作り方を完全公開！ -
どうも、まさとらん（@0310lan）です。 今回は、Googleが提供する「Chromeブラウザ」で動作するアプリケーションを作ってみたいと思います。 「なんだか難しそう…」と思うかもしれませんが、ざっくり言ってしまうと普通に「Webページ」を作るのと変わりません。 そこで、簡単なサンプルアプリを作りながら、自分だけのChromeアプリ開発に挑戦してみましょう！ ■Chromeアプリとは？ 開発を始める前に、まずは予備知識としてChromeアプリの「種類」についてご紹介しておきます。 実は、「Chromeアプリ」と言っても、いくつか異なる種類があります。 例えば、「Appspector」というChromeアプリは、ブラウザの機能を拡張することで、表示されているWebページがどんな技術を利用して作られているのかを表示できるようになります。（https://chrome.google.com
JavaScript/ウィンドウ/入力ダイアログを表示する - TAG index
入力できるダイアログを表示するスクリプトです。 以下のサンプルでは、ユーザー名に tama と hana が登録されています。 <html> <head> <title>TAG index Webサイト</title> <script type="text/javascript"> <!-- function disp(){ // 入力ダイアログを表示 ＋ 入力内容を user に代入 user = window.prompt("ユーザー名を入力してください", ""); // 入力内容が tama の場合は example_tama.html にジャンプ if(user == 'tama'){ location.href = "example_tama.html"; } // 入力内容が hana の場合は example_hana.html にジャンプ else if(user ==
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...
jQueryで使えるドロップダウン代替プラグイン5選 - Qiita
サービス終了のお知らせ
開発メモ：文字列の最後の１字を削除｜理総研Web＠中学受験専門理科総合研究所
JavaScriptの配列の使い方まとめ。要素の追加,結合,取得,削除。 - Qiita
GitHub - yubinbango/yubinbango
Marked.js で Markdown をクライアント側でパースして表示する - Qiita
