タグ

javascriptに関するsyoshimura1のブックマーク (8)

  • jQuery UI Datepicker 日付選択 | hijiriworld Web

    日付の入力フォームを作った場合、入力されるフォーマットは揃えておきたいものです。 じゃあ、入力フォームの隣に「※日付は『yyyy/mm/dd』形式で入力してください」と書いておこう、なんて、そんな原始的なことをしてはいけません。 ユーザビリティ的にも、ポップアップカレンダーなどの入力支援を設置するのが良いです。 日付の入力支援を実装する方法はいくつかありますが、時代はjQueryだ!ということで、今回は、jQuery UI のDatepickerの実装方法を紹介します。 ・jQuery ・jQuery UI ・jQuery UI Datepicker 目次 1. デザインをカイスタマイズ 2. ダウンロード 3. フォルダ構成 4. 実装 デザインをカイスタマイズ まず、ブラウザ上で、jQueryで実装できるUIのカスタマイズをまとめて行います。 →jQuery UI ThemeRolle

  • IMG.complete属性で画像の読み込み状態を確認する

    画像が読み込めたか、読み込みに失敗したか。 これを知るのに、onloadとonerrorで察知する方向でスクリプト書いていたら、時々どちらにも引っかからないのに画像が表示されることがある。 何がしたかったかというと、テキトウに作ったページに埋め込んだ、まともに管理してないおかげで使ってるの忘れて消してしまったりしてちゃんとロードできなかったときに、ロードできなかった画像を非表示にしてなかったことにするスクリプトを書こうとした。 こんな感じでerrorが起きた画像をなかった事にしたり、成功した画像にデコレーションをつけようかと思ったのだけど、たまにデコレーションがかからない画像が表示される。 $(function(){ $('img').each(function(){ $(this).load(function(){ $(this).css({ // OK! ついでにちょっとデコレーション

  • jQuery非同期、Image()で画像読み込み表示|jquery|POPSブログ|POPS WEB KOUBOU

    jQueryで、画像読み込み表示には色々な方法はありますが、javascriptの new Image()を使用して表示させる例が多いようです。 new Image()での、画像読み込み表示 jQueryで、画像読み込み表示には色々な方法はありますが、javascriptの new Image()を使用して表示させる例が多いようです。ネットで調べれば沢山の情報がありますが、私の場合の経験を踏まえて記述します。 Image()が使用される理由は、 1. 表示サイズではなく画像の実寸を得ることができる。 2. 画像にアクセスして、ロード完了を知ることができる。 3. ERRORの場合の処理ができる。(余り使用はされていないが、、) 4. Loading中の「Loading画像」など表示させる時に便利。 5. jQueryで画像のロードに適したメソッドがない。(ほとんどが、html text な

  • ページの読み込みが完了してから表示させるには? - OKWAVE

    ロードが完了して発生するイベントにonloadがあります。 方針としては、最初「now loading」のみを表示し、に元々のページ全体を非表示にしておいてonloadイベントで表示させます。 以下のコードを参考にしてみてください。 ------------------------------------------------------------ <html> <head> <script type="text/javascript"> window.onload = function() { document.getElementById('gg0').style.display = 'none'; document.getElementById('gg').style.display = 'block'; } </script> <style type="text/css"> #

    ページの読み込みが完了してから表示させるには? - OKWAVE
    syoshimura1
    syoshimura1 2014/02/25
    “window.onload = function() { setTimeout("show()",2000); }”
  • jQueryでDOM操作する際の基本記述を勉強し直してみたよ。

    久し振りにJavaScriptを触ったら物凄く忘れていたので、まずはjQueryの基記述をもう一度勉強し直してみました!DOMを操作する事って多々あると思いますので、ある意味チートシートのように見て頂くと嬉しいです。DOM以外にも偶数処理やクローン等も載せておきます。 親要素を取得する方法 まずは親要素の取得系からいきましょー。 一つ上の親要素取得 jQuery // 一つ上の親要素取得 $(".hoge").parent(); // 要素がdivなら取得する。divでなければ空(Objectは返ってくる) $(".hoge").parent("div"); 親全取得 jQuery // 親全取得 $(".hoge").parents(); // 親を指定して取得 $(".hoge").parents(".class_name"); 開始要素から最も近い親要素を選択 jQuery //

    jQueryでDOM操作する際の基本記述を勉強し直してみたよ。
  • DOMメソッド|DOM(Document Object Model): Element|JavaScript/DOM|PHP & JavaScript Room

    <form action="#"> <select id="pulldown"> <option value="" selected>---------</option> </select> <input type="button" value="プルダウン生成" onclick="fCreatePulldownMenuA()" /> </form> <script type="text/javascript"> function fCreatePulldownMenuA(){ var todofuken=["---------","北海道","州","四国","九州","沖縄"]; var selObj=document.getElementById("pulldown"); var length=selObj.childNodes.length-1; if(length>0){ /*

    DOMメソッド|DOM(Document Object Model): Element|JavaScript/DOM|PHP & JavaScript Room
  • 七章第四回 ノードをまとめて扱う:DocumentFragment — JavaScript初級者から中級者になろう — uhyohyo.net

    七章第四回 ノードをまとめて扱う:DocumentFragmentこのページの最終更新日:2018年7月29日 今回解説するのは、DocumentFragmentというものです。これは、題名の通り、複数のノードをまとめて扱うのに必要なものです。 実はこれはノードの一種です。つまり、「テキストノード」とか「要素ノード」とかと同じように、「DocumentFragment」という種類のノードがあるのです。 ノードの一種だから、appendChildなどで子ノードを追加したり、あるいはcloneNodeでDocumentFragment自身をコピーしたりもできます。 このDocumentFragmentはどういった意味を持つノードなのかということですが、典型的な説明としては「小型のdocumentのようなものである」とされます。 つまり、DocumentFragmentは、ひとつの独立した木構造

    七章第四回 ノードをまとめて扱う:DocumentFragment — JavaScript初級者から中級者になろう — uhyohyo.net
  • Including inline javascript using content_for in rails

    I am using content_for and yeild to inject javascript files into the bottom of my layout but am wondering what the best practice is for including inline javascript. Specifically I'm wondering where the put the script type declaration: <% content_for :javascript do %> <script type="text/javascript"> ... </script> <% end %> or <% content_for :javascript do %> ... <% end %> <script type="text/javascr

    Including inline javascript using content_for in rails
  • 1