Asial Blog

Recruit! Asialで一緒に働きませんか?

フロントエンド(HTML5)の一覧

jQuery 3.0βリリース。2系と3系の違いについて

カテゴリ :
フロントエンド(HTML5)
タグ :
JavaScript
jQuery
icon
jQuery 2系と3系の違いについて。なお3系はβ版の情報を元にしています。

jQueryから離れるためのJavaScript代替ライブラリまとめ

カテゴリ :
フロントエンド(HTML5)
タグ :
JavaScript
jQuery
Monaca
Minified.js
jQueryの代わりに使えるJavaScriptライブラリを紹介します。

初心者のコーダーでも簡単に実装出来るJavaScript/jQuery Tips

カテゴリ :
フロントエンド(HTML5)
タグ :
Tech
JavaScript
jQuery
icon
こんにちは、鴨田です。

今更感はすごくあるとは思いますが、
コーダー初心者でも簡単なjQueryのコードで、
ちょっとした運用を楽に出来るTipsを紹介したいと思います。

決定版?! スマホページ用のリストレイアウトHTMLテンプレートを書いてみた

カテゴリ :
フロントエンド(HTML5)
タグ :
Tech
HTML5
CSS3
jQuery
icon
こんにちは、鴨田です。

年の瀬ですね。
年をとる毎に一年があっという間に過ぎてしまうので、
もう今年も終わりかと嘆く日々です。

ということで、個人的には今年最後のブログとなります。

スマホサイトを作っていると、
見出しリストの作り方というのが、大分テンプレート化するので、
今日は自分メモも兼ねて、リストテンプレートを作りたいと思います。

パララックスというか、スクロールでアニメーションさせるjQueryプラグイン「ScrollTween.js」

カテゴリ :
フロントエンド(HTML5)
タグ :
Tech
JavaScript
jQuery
パララックス
アニメーション
icon
こんにちは、鴨田です。

今年に入ってから、パララックス効果を用いたサイトをよく見かけますね。
春くらいに話題になって、定番のプラグインもあるので、最近もいろいろなところで見かけます。

とはいえ、最近は視差効果で奥行きを表現するというよりも、
単純にスクロールに連動してアニメーションさせることも含めて、
パララックスサイトと呼んでいるが多いのではとも思います
何かと話題のスマホアプリ「comm」もそうですね。

そんな流行に従って、パララックスサイトの作り方を少しご紹介できればと思います。

jQueryで簡単にドラッグ&ドロップのソートを実装する方法

カテゴリ :
フロントエンド(HTML5)
タグ :
Tech
JavaScript
jQuery
jQueryUI
UX
jQueryで簡単にドラッグアンドドロップのソートを実装する方法
jQuery UIを使ったリッチでオシャンティなソートを紹介します。
まずはデモをご覧ください。

jQuery用プラグイン「Autocomplete」を使って入力補完機能を実装してみる

カテゴリ :
フロントエンド(HTML5)
タグ :
Tech
JavaScript
jQuery
ピクチャ 2.png
こんにちは、中川です。

アシアルブログの検索でも利用している、suggest(入力補完)機能、便利ですよね。
以前「jQuery用プラグイン「jquery.suggest」を使って入力補完機能を実装してみる」という記事で松田がライブラリ紹介しています。

しかし、「jquery.suggest」ですが、表示が味気なかったり、カスタマイズ面で、若干モノ足りない部分が出てきました。。。
で、補完機能を実装する為のJavaScriptですが、いろいろ探せば結構たくさんでてきまして、その中でも使いやすく、機能も豊富でカスタマイズもしやすいjQueryプラグインの「Autocomplete」というものを見つけましたので紹介したいと思います。

ツールチップjQueryプラグイン「qtip」を使ってみました

カテゴリ :
フロントエンド(HTML5)
タグ :
Tech
JavaScript
jQuery
ラーメン
サンプル1
jQueryのプラグインのひとつで「qtip」を使ってみました。
ツールチップ形式でポップアップで奇麗に表示することができます。
実際に使った方法のご紹介をしていきます。

簡単にテーブルをカッコよくするjQueryプラグイン「Flexigrid」を使ってみた

カテゴリ :
フロントエンド(HTML5)
タグ :
Tech
JavaScript
jQuery
Flexigrid
icon
こんばんは。松田です。
ほんのちょっと手を入れるだけで、ただのテーブルレイアウトがかっこよくなってしまうjQueryプラグイン「Flexigrid」を使ってみました。
「Flexigrid」を使うと、カラムの表示/非表示機能、色分け、配置換えなどいろんな機能を自動的に付けてくれます。

jQueryで長いURLやメールアドレスを折り返して表示する

カテゴリ :
フロントエンド(HTML5)
タグ :
Tech
jQuery
Firefox
JavaScript
icon
Firefoxでは、長い半角文字をtableタグのtdタグなどに入れた場合折り返して表示することができずに重なって表示されていまう場合があります。先日、Firefoxの上記の仕様でデザインが崩れると報告をいただいた際に対応した方法をご紹介したいとおもいます。