先週、jQuery と CSS3 を利用したデジタル時計を作成しました。この更新では、HTML5 オーディオ要素を使用してアラームを設定するためのサポートを追加します。 アイデア アラームをサポートしてデジタル時計を拡張するには、先週のコードにいくつかの重要な機能を追加する必要があります: アラームを設定および編集する方法が必要です。これには、アラームの時刻を設定するためのフィールドを含むある種のダイアログが必要になります; 毎秒、アラームが鳴るかどうかを確認する必要があります。必要に応じて、小さなオーディオ ファイルを再生し、[Times up] ダイアログを表示します。 これらの機

モバイルの登場以来、Web サイトはますます「アプリ」に変わりつつあります。ローカルで実行されるアプリケーションにとって意味のある概念は、Web に転送されます。そのうちの 1 つは、ページの読み込み状態を表示する「進行状況バー」を Google の一部の Web サイトに最近追加したことです。 この簡単なヒントでは、新しい NProgress jQuery プラグインを使用して、進行状況バーを Web ページに追加します。詳細を知りたい場合は、読み続けてください! NProgress プラグイン NProgress は、ページの上部にインタラクティブなプログレス バーを表示する jQue

プログレス バーは最近非常に人気があり、サイトにプログレス バーを追加するのに役立つプラグインがたくさんあります。しかし、どうやって自分で作るのですか？問題は、すでに多くの実装が存在することです。そのため、このチュートリアルでは、進行状況メーターが組み込まれたボタンなど、別のものをコーディングします。 フォームを送信したり、AJAX を介してコンテンツをロードしたりしながら、進行状況を表示するのに最適です。また、CSS3 スタイルとトランジションを使用して、カスタマイズを容易にします。 HTML チュートリアルの最初のセクションでは、HTML マークアップを記述します。これは、後で説明する

セキュリティとプライバシーは、現時点でホットなトピックです。これは、私たちがセキュリティにアプローチする方法を内省的に見る機会です。それはすべて妥協の問題です-利便性と完全なロックダウン.今日のチュートリアルは、両方を少し混ぜ合わせようとする試みです。 今日作成するアプリは、ユーザーが自分のコンピューターからファイルを選択し、パス フレーズを使用してクライアント側で暗号化できるようにする実験です。サーバー側のコードは必要なく、クライアントとサーバー間で情報が転送されることもありません。これを可能にするために、HTML5 FileReader API と JavaScript 暗号化ライブラリ

素敵な写真は、デザインを際立たせるのに大いに役立ちます。しかし、Tutorialzine では、1 枚の写真では不十分な場合があり、実際に必要なのは、ユーザーの注意を引き、アプリにダイナミクスをもたらす、画像のスムーズなスライドショーであることに気付きました。ただし、このようなスライドショーの実装は難しい場合があるため、その作業を行う小さなプラグインを作成することにしました. 仕組み それは本当に簡単です！まず、通常どおりに画像を html に挿入する必要があります。それが終わったら、データ属性を追加する必要があります - data-slideshow - その値を、スライドショーにしたい一

JavaScript と jQuery を知っていると思いますか?私たちの挑戦でそれを証明してください！あなたは敵、ボス、成長した Web 開発者を泣かせるのに十分な div に直面するでしょう。 JavaScript と jQuery の高度なスキルと、それらをすべて完了するには昼休みが必要です。そして最高の部分は？まるで働いているように見えます！ $.fn.blue = function(){ if(this.filter(.bomb).length) return _FAIL(You triggered a bomb!); for(var i=0; i <

jQuery は優れたライブラリです。 IE6がブラウザのナンバーワンだった頃です。当時は、回避するのが面倒な癖や違いがあり、jQuery はクロス ブラウザー コードを記述するのに最適なツールでした。 しかし、今日では、Web ブラウザーは当時よりも大幅に進歩しています。 ES5 が提供するすべての機能を快適に使用できます。また、DOM の操作をより快適にする素晴らしい HTML5 API を自由に使用できます。開発者は現在、一部のプロジェクトで jQuery を除外しても、生産性を維持できる立場にあります。 誤解しないでほしいのですが、jQuery は今でも素晴らしいライブラリであり、

今日は、クールな実験を紹介したいと思います。これはかわいいファイル ブラウザで、サイトのどこかにあるフォルダにアップロードして、ドキュメント、写真、その他のファイルを世界中と共有できます。アプリは PHP と jQuery で構築され、CSS3 を広く使用しています。デザインには画像やアイコンは使用されていません。アニメーションはスムーズで、スマートフォンでも問題なく動作します。 サイトでの使用方法 上のダウンロードボタンからzipファイルをダウンロードしてください。解凍してから、サーバーにアップロードします。フォルダ files 共有したいものすべてを配置する場所です。これ以上の設定は必要

このチュートリアルでは、PHP と jQuery を使用してシャウト ボックスを作成します。これにより、Web サイトの訪問者が互いに短いコメントを残すことができます。シャウトはファイルとしてサーバーに保存され、MySQL のようなデータベースは必要ありません。簡単にするために、2 つの PHP ライブラリを使用します。叫び声を json ファイルとして保存するための Flywheel と、人間が読み取れる相対タイム スタンプを作成するための RelativeTime です。 Composer を使用してこれらのライブラリをインストールします。 クライアント側では、プレーンな jQuery

Web 開発は難しく、学ぶべきことがたくさんあります。開発者とデザイナーは、多くの新しいテクノロジーとトレンドを把握する必要があります。しかし、コミュニティは活発に活動しており、私たちの仕事に役立つすばらしいライブラリとプラグインを作成しています。ここに私たちのお気に入りのいくつかがあります。それらのすべてが今年リリースされたわけではありませんが、すべて過去数か月で更新されており、ブックマークに追加するのに最適です. 1.アニメーション Animsition は、CSS アニメーション ページ遷移用のシンプルで使いやすい jQuery プラグインです。さまざまなフェードアウト、回転、反転など

このチュートリアルでは、jQuery を使用してミニ ヘルプ システムを作成します。これは、Web アプリケーションのユーザーにヘルプ テキストまたはガイドを表示する小さなウィジェットになります。ウィジェットのコンテンツはリアルタイムで検索可能になり、一致するすべての用語が強調表示されます。 アイデア この例を機能させるには、次のことを行う必要があります: 入力を聞く必要があります テキストボックスのイベント。入力は切り取り/貼り付けや元に戻す/やり直しなどのイベントをキャッチするため、キーを押すよりもこれを好みます。ただし、古いブラウザ (

グラフは、データを表示する際の優れた視覚補助です。それらなしでは、プロフェッショナルな管理パネルを構築することはできません。また、セットアップも難しいです。ただし、これを簡単にする新しいライブラリー xCharts があります。今日は、Twitter Bootstrap の daterange picker と一緒に使用して、MySQL テーブルからデータを取得する Web アプリケーション用のきれいな AJAX を利用したグラフを作成します。 HTML デモの HTML 構造は非常に単純です。チャートの初期化と日付ピッカーのために、ページに要素を追加する必要があります。とにかくページにブー

Tumblr は、コンテンツを作成および公開するための洗練されたインターフェイスを備えたブログ サービスです。このチュートリアルでは、これをニュース発行システムの基盤として使用します。 Tumblr ブログの最新の投稿を循環し、それらをニュース項目としてユーザーに表示する単純なウィジェットを開発します。ニュースを追加するには、Tumblr ダッシュボードで新しいブログ投稿を作成します。 HTML 私たちが書いているコードは、jQuery プラグインとして編成されます。これにより、移植可能になり、既存の Web サイトに簡単に埋め込むことができます。プラグインが実行されると、AJAX を使用し

このチュートリアルでは、コンピューターからブラウザー ウィンドウに写真をドラッグして、Instagram のようなフィルターを適用できるシンプルな Web アプリを作成します。この目的のために、いくつかの JavaScript ライブラリとプラグインを使用します: Caman.js - 画像にさまざまな効果やフィルターを適用できる強力なキャンバス操作ライブラリです。この例で使用する 18 個のプリセット フィルターが付属しています (必要に応じてさらに作成できます)。 Filereader.js - これは、HTML5 のドラッグ アンド ドロップ イベントの軽量なラッパーであり、操作がはる

jQuery には、すばらしいものを作成する素晴らしいプログラマーのコミュニティがあります。ただし、リリースされたものすべてをふるいにかけ、絶対に必要な宝石を見つけるのは難しくなる可能性があります.そのため、この投稿では、50 個の新しい jQuery プラグインと JavaScript ライブラリのコレクションを紹介します。適切に適用すると、サイトを楽しく使用できるようになります。プラグインは、ブラウジングしやすいようにカテゴリ別に編成されています。お楽しみください! ダイアログ ブラウザの組み込みダイアログは使いやすいですが、見苦しく、カスタマイズできません。アプリケーションをシャープで

このチュートリアルでは、AJAX ファイル アップロード フォームを作成します。これにより、訪問者はドラッグ アンド ドロップまたは個別に選択して、ブラウザからファイルをアップロードできます。この目的のために、強力な jQuery File Upload プラグインと適切な jQuery Knob を組み合わせて、洗練された CSS3/JS 駆動のインターフェイスを提供します。 HTML いつものように、基本的な HTML5 ドキュメントから始めます: <!DOCTYPE html> <html> <head> <meta

jQuery は、間違いなく今日の Web で最も人気のある JavaScript ライブラリです。トップ Web サイトの 70% で使用されており、Web 開発のデファクト スタンダードになりつつあります。プログラミングの仕事を探しているなら、ライブラリを知っていることは大きな利点です。 教材の質と入手可能性という点でも、物事は進歩しています。言い換えれば、今こそ Web 開発について学ぶのに最適な時期です!この記事では、私が jQuery を使い始めたときにあればよかったと思うリソースのリストを見つけ、すべての初心者にお勧めします。 まず、jQuery ファミリについて説明します j

1 年前、私は、Yahoo の API とブラウザーに組み込まれた地理位置情報機能を利用した天気予報 Web アプリの作成に関するチュートリアルを公開しました。ただし、最近 Yahoo はこれらの無料 API を廃止したため、本日、Web アプリを別のサービスである OpenWeatherMap に変換します。 OpenWeatherMap API OpenWeatherMap は無料で使用できるだけでなく、次の 5 日間の予報を返し、Yahoo が 2 つしかできなかったことを 1 つの API 要求で実行します。 API は一連の地理座標を直接取得し、気象データを返します (最初に都市を

私たちは皆、jQuery が大好きです。このサイトは、ライブラリを使用した美しい例の作成にも専念しています。しかし、jQuery が賢明な選択ではない状況もあります。単純な DOM 操作または 1 つまたは 2 つの AJAX リクエストにのみ使用している場合、ページの読み込み時間を遅くし、追加の依存関係を導入する理由は何ですか? この問題は、モバイル デバイスではより深刻です。ご覧のとおり、Google のような CDN 経由で jQuery を含めていますが、それでも無料ではありません。ダウンロードして解析するにはまだ時間がかかります。 jQuery を普及させたまさにその理由である完全

Tutorialzine の読者とちょっとした実験を共有したいと思います - TouchTouch。これは、Web ページ上の写真のコレクションをタッチ フレンドリーなモバイル ギャラリーに変える jQuery プラグインです。すべての主要なブラウザー (IE7 以下を除く) で動作し、最も重要なことは、iOS と Android を念頭に置いて特別に設計されていることです。 ハイライト スムーズな CSS3 アニメーションとトランジション; 画面いっぱいに表示され、デバイスの向きの変化に反応するレスポンシブ CSS インターフェース。 必要なときにだけ写真をプリロードします。 写真のスワイ