[B! form][ui] p130のブックマーク

フォーム周りで覚えておくと便利なCSS Snippets - NxWorld

フォーム周りでCSSを使ってスタイリングしていく際に、個人的によくど忘れしてしまうものや便利だと思うプロパティやスニペットをまとめました。全体的に普段からCSSをよく触っている人にとっては特別目新しいものはないかと思いますが、まだCSSを触り始めて間もない方やこれからCSSを触ってみようという方は覚えておくと便利だと思うのもいくつかあるので参考にしてみてください。紹介している内容はブラウザ（特にIE9以下）によっては使用できないものや表示確認ができないものもいくつか含まれています。各要素のデフォルトスタイルを削除フォームで使用するinputやtextareaなどの要素はブラウザやデバイスによって見た目は異なりますが、予めボーダー・グラデーション・角丸といったスタイルが適用されています。特にこだわりがなければこのまま使用したり、多少手を加えるだけということもありますが、異なるブラウ

p130 2015/03/27

ど忘れしがちなのでこれは助かる。

リンク

【JavaScript】AngularJSを触ってみた【MVCフレームワーク】 | ウェブ戦略・コンサルティング UNIONNET Inc.

2014.09.16 こんにちわ。以前のスーツが入らなくなり落ち込んでいる山尾です。今日は話題のJavascriptのMVCフレームワークAngularJSを触ったので少し紹介します。少し前にVue.jsを触ったことがあったのですがAngularJSも触ってみようと思い手を出したのですが・・ Vueよりいい！！何がいいってドキュメントやサンプルが豊富！これは僕みたいな未熟者が学習するにあたってデカいことですよ。僕はずっとjQuery一辺倒で戦ってきたのですが、jQueryの惜しいとこめんどくさいとこを補ってくれるすげーやつです。ちなみに僕はAngularJSの事をずっとアングラージェイエスって呼んでたんですがアンギュラージェイエスらしいです。この業界だとこんなこと結構ありますよね？勘違いして覚えてしまう文字。英語難しい・・・そんなAngularJSの機能の一部をご紹介しま

p130 2014/09/19

リアルタイムに反応してくれる挙動が気持ち良い…けどタグ内に構文書くの違和感。もしかしたら別の方法ありそうだから、ちょっと使ってみる。

リンク

指定した桁数ごとに自動で区切るスクリプト -Politespace | コリス

デモページデモでは、さまざまな区切りができます。 3桁ずつ区切るなどの同数の区切り料金など 4桁ずつ区切るなどの同数の区切りクレジットカードなど 3桁、4桁など異なる数の区切り郵便番号など指定数の区切りの後、残りはフリー米の電話番号など日本の電話番号のように最初の桁が2桁か4桁、というのは扱えないのがちょっと残念。 Politespaceの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。 <head> ... <script src="js/jquery.js"></script> <script src="js/politespace.js"></script> </head> Step 2: JavaScript jQueryのセレクタで適用を指定し、スクリプトを実行します。 <script> jQuery( func

p130 2014/04/30

リンク

jQuery：チェックされたら or 入力されたら送信可能にするボタンを実装する方法 - NxWorld

割と頻繁に使うので備忘録。 jQueryを使用して「チェックボックスにチェックされたら送信可能にするボタン」と「文字が入力されたら送信可能にするボタン」をそれぞれ実装する方法です。特にチェックボックスの方は利用規約などに同意してもらったかの部分で用いたりと使う場面が多いのではないかと思います。チェックボックスにチェックされたら送信可能にするボタンページが表示された際はイメージ左のようにボタンにはdisabledが指定されて送信できない状態になっています。それを「利用規約に同意します」というテキスト横にあるチェックボックスにチェックが入ったら、ボタンに指定してあるdisabledを解除して送信可能にするというものです。実装にはjQueryを使用するので予め読み込ませおき、それぞれ下記のように記述をします。 <input type="checkbox" id="check" /><l

p130 2014/02/27

リンク

ふわっと下から浮き出るツールチップ

3）吹き出しのアニメーション表示させる要素が整ったところで、いよいよアニメーションを付けていきます。サンプルのように、下からふわっと浮き出る動きを設定します。サンプル（その4）まず、アニメーションの内容から指定します。アニメーションの開始時点（0%）では、「bottom:15px;」の位置に置き、「opacity:0;」で完全に透明な状態にして消しておきます。アニメーションの終了時点（100%）では、マウスオーバした際の位置指定と同じく「bottom:25px;」とし、「opacity:1;」で透明度をなくします。そして、これに「bubbleUp」という名前を付けます。さらに、マウスオーバした際のセレクタ「a.tooltip:hover span」に対して、アニメーションの制御指定をします。アニメーションの開始から終了までの時間を0.2秒にし、アニメーションは1回だけ（＝繰り