最近、チュートリアル機能が表示されるアプリケーションを見かける頻度が増えてきました。 そこで intro.js でチュートリアル機能を作ってみることにしました。 サンプル <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Intro.js Demo</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.1.0/intro.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.1.0/introjs.min.css" rel="stylesheet" type="text/css"> </head> <body
Frontend environments evolve rapidly nowadays and modern browsers have already implemented a great deal of DOM/BOM APIs which are good enough for production use. We don't have to learn jQuery from scratch for DOM manipulation or event handling. In the meantime, thanks to the spread of frontend libraries such as React, Angular and Vue, manipulating the DOM directly becomes anti-pattern, so that jQu
本記事で使用している AngularJS のバージョン 1.2.16 angular.element 先日紹介した ng Global APIs の中に angular.element というメソッドが用意されています。 このメソッドは、デフォルトでは "jQuery lite" または "jqLite" と呼ばれる AngularJS が提供する jQuery のサブセット ( 軽量版 jQuery ) オブジェクトを返しますが、ドキュメントを読む限り制限が多く、困ることが少なくありません。 どのくらい制限されているかというと、、、 https://docs.angularjs.org/api/ng/function/angular.element より addClass() after() append() attr() bind() - Does not support namesp
jquery.pep.js is a lightweight jQuery plugin which turns any DOM element into a draggable object. It works across mostly all browsers, from old to new, from touch to click. I built it to serve a need in which jQuery UI’s draggable was not fulfilling, since it didn’t work on touch devices (without some hackery). All of Pep’s options are outlined on Github, so take a look. Feel free to email me with
Gantt online is served by Twproject project management software - Discover how to get your projects done! x Create and share free Gantt chart Twproject Gantt editor is a free online tool for creating and sharing Gantts Start now, it's free! Twproject Gantt is a free online Gantt chart editor to easily create & update your projects. Create complex structure, add dependencies and identify critical p
シンプルなHTMLで、さまざまなデザインの円グラフが簡単に作成できるjQueryのプラグインを紹介します。 EASY PIE CHART [ad#ad-2] EASY PIE CHARTの使い方 実装は、3ステップです。 Step 1: 外部ファイル 「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。 外部ファイルはhead内に記述してください。 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="/path/to/jquery.easy-pie-chart.js"></script> <link rel="styl
jQueryでスクロールすると上部に固定されるナビゲーション グローバルナビゲーションはロゴの下に配置されていることが多いですが、スクロールするとナビゲーション部分だけが上部に固定されるようなものをjQueryでやってみたいと思います。 投稿日2012年02月21日 更新日2012年05月10日 html & css htmlです。 html <h1><a href="#">タイトル</a></h1> <div class="nav"> <ul class="clearfix"> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">NEWS</a></li> <li><a href="#">LINK</a></li> </ul> <!-- /#nav --></div> <div id="
jQuery 1.7が公開されたので、早速1.6.xからの更新内容をまとめてみました。 jQuery: » jQuery 1.7 Released (リリース記事) Version 1.7 – jQuery API (公式ドキュメント、1.7で変更があったもののみ) 1.7 all tickets – jQuery Core – Bug Tracker (1.7の全チケット) リリース記事の翻訳じゃないです。 主な変更点 個人的に気になったものをピックアップしてみますよ。 既存の .bind()や .live()等に置き換わる .on(), .off()を追加 .bind(), .delegate(), .live()が統合されました。(これらも引き続き使用できます。) →詳細後述します。 toggleと.stop()の連携を改善 toggle系と組み合わせた際におかしくなってしまうのが改
HTML5熱いですね。いろんな意味で BigPipeやら、HTMLでテンプレートエンジンとかいろいろ出ていますがユーザービリティ下げちゃいけないよねって事は、どの技術でも大切な共通項ですね。pjax = pushState + ajax使えば、リッチな人にはサクサクなUIを、そうじゃない人にもそれなりに提供できる。その上、戻るボタンもサーチエンジンにも優しいとくれば、これは試さないわけには行かないですね。 動作サンプル: http://pjax.atu.si/ Pjaxするとどうなるのか? 非同期動作時 http://pjax.atu.si にアクセスをして、リンクをクリックすると要素が非同期に変更される。 非同期に更新されているがURLは、シンプルなものに変更される。 同期動作時 http://pjax.atu.si/parts/x や http://pjax.atu.si/parts/
別の記事でも書いたけど、個人で開発しているWebアプリでは、だいたいjQuery UIを使用してる。 今回はその中でもよく利用しているdialogの使い方をまとめておく。dialog機能を使うと、割と簡単にエラーダイアログやフォーム表示用のサブウィンドウを作成することができる。http://jqueryui.com/demos/dialog/ 僕の使い方としては、あらかじめ使用するダイアログやサブウィンドウをHTML内に非表示で埋め込んでおき、必要な時にダイアログとして表示する、という方法をとっている。1つのファイルにまとまってると、本体のHTML、ダイアログ、サブウィンドウを区別なく編集できるので結構楽だと思う。 OKダイアログ(通知やエラー表示用)、確認ダイアログ、フォームダイアログをそれぞれ表示できるサンプルを書いておく。よく使うOKダイアログや確認ダイアログは関数化しておくと便利。
WordPress をお使いの方にはおなじみの All in One お問い合わせフォームプラグイン「Contact Form 7」には入力値チェックの機能が備わっています。備わっておるのですが、フォームの入力値チェックを行う jQuery プラグインなんかが巷に溢れており、Contact Form 7 でぜひそれを使いたいというニッチな要望もあるような気がします。 必要がないとか、苦労に見合う価値が認められないからニッチなのであり、ネットで探しても情報がありませんとなるのですが、wpxtreme では実用性はともかく面白そうだったりヒマだったらやってみる方針なので Contact Form 7 × 各種 jQuery フォームバリデーションプラグインインテグレーションプロジェクトを始めます。第1段は A jQuery inline form validation, because val
License: Same as jQuery (Dual GPL + MIT) Author: Doug Neiner Download: InFieldLabels.zip Source: GitHub Size: Under 1KB Minified and gzipped Overview: This is a simple plugin that turns properly formatted HTML forms into forms with in-field label support. Labels fade when the field is focussed and disappear when text entry begins. Clearing a field and leaving brings back the label. Browser Suppor
When it comes to form validation, it’s hard to have a versatile solution that works with every form. Figuring out how to display errors is not a simple task. This is something I tried to remedy with this script. When an error needs to be displayed, the script creates a div and positions it in the top right corner of the input. This way you don’t have to worry about your HTML form structure. The ro
Thinking to create a website? Of course, to sustain in this fast moving culture, you should have a website on your own.Now having an appealing and informative quality web site becomes a compulsion. Because through the websites, you can broaden your business and your thoughts by interacting with more people. While beginning, you may land … Read more How do you feel if there is an interface for crea
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く