ページの読み込み進捗状況をプログレスバーで表示されているのをたまに見かけますが、今回はjQueryでそれを実装してみたいと思います。前回記事「jQueryでページローディング機能を実装する」と合わせてページローディングのUIとしてみたり、…
jQueryでプログレスバー機能を実装する | オウンドメディア | 大阪市天王寺区ホームページ制作｜合同会社デザインサプライ-DesignSupply.LLC-
ページの読み込み進捗状況をプログレスバーで表示されているのをたまに見かけますが、今回はjQueryでそれを実装してみたいと思います。前回記事「jQueryでページローディング機能を実装する」と合わせてページローディングのUIとしてみたり、…
jQuery【 jQuery UI 】progressbar を使用してプログレスバーを作成 - プログラマカレッジ
1. progressbar を使用してプログレスバーを作成 jQuery UI の progressbar を使用して プログレスバーを作成します。 スタートボタンをクリックしてみて下さい。 上のサンプルのソースコードは次の通りです。 <script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script> <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script type="text/javascript"> $(function(){ $("#wkBtn").click(function(){ $("#wkPg").progre
レスポンシブでふわっと表示されるドロップダウンメニューを実装する「Responsive Multi-Level Menu」
Responsive Multi-Level Menu | Codrops 今回は、主にスマートフォンサイトで活躍しそうなレスポンシブタイプのドロップダウンメニューを紹介します。 限られたスペースからでも、メニューをふわっとアニメーションしながら展開して表示させてくれます。 まずは、サンプルをご覧下さい。 レスポンシブなドロップダウンメニューを実装する「Responsive Multi-Level Menu」サンプル 古いブラウザやIEなどでは作動しませんが、最新ブラウザが標準のスマホサイトにピッタリですね。 【設置方法】 こちらのResponsive Multi-Level Menuからソースをダウンロードします。このダウンロードしてきたソースファイルをもとに設置してみます。 ＜head＞部分にCSS関連を読み込む記述をします。 <link rel="stylesheet" type="
これはオシャレ！デザインとアニメーションが秀逸なメニューを実装するJSライブラリ - Noise of Web Programming
いつか使いたいと思ったので書いておく。 オシャレなデザインと、かっこいいアニメーションが魅力的なメニューが簡単に実装できる。下記リンクよりDemoページに飛ぶことが出来るので、一度試してみていただきたい。 RESPONSIVE MULTI-LEVEL MENU 使い方 まずはソースをダウンロード。DemoのHTMLも一緒にダウンロードできるので、簡単に実装可能。一応以下に個人的に一番イケてる！と思ったDemo 2の実装方法を書いておく。 HTML headタグ内では以下の5つのソースを読み込む。 <link rel="stylesheet" type="text/css" href="css/default.css"> <link rel="stylesheet" type="text/css" href="css/component.css"> <script src="js/jquer
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
ドロワーメニューが作れるjQueryライブラリ「drawer.js」のご紹介！ | HPcode
対応ブラウザ CSS3をサポートしているブラウザが対象です。 IE10 ～SafariChromeFirefox 公式サイトとCDNの設置 公式サイトにアクセスするとCDNが用意されています。GitHubでファイルをダウンロードすることもできますが、CDNの方が楽なので今回はこちらを利用します。 公式サイト → http://git.blivesta.com/drawer/ 記載されているサンプルコードを元に解説していきます。 完成形のソース こちらを「index.html」などの拡張子.htmlで保存するとドロワーの動作が確認できるはずです。 <!DOCTYPE html> <html> <head> <!-- drawer.css --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer
jQuery+CSS3で固定ナビゲーション→レスポンシブでハンバーガーメニューに切り替える
Posted: 2015.12.09 / Category: HTML&CSS, javascript / Tag: jQuery jQuery+CSS3を使用してスマホではハンバーガーメニューに切り替わる、固定ナビゲーションを作成してみます。 PC版のナビゲーションは基本構造は下記を使用します。 jQuery+CSS3でスクロールするとアニメーションして狭くなる固定ナビゲーション HTML #mobile-head はモバイル時色を付けてバーにします。 #global-nav はモバイル時ナビゲーションを開閉するボタンです。 三本の線がspanになります。 HTML <header id="top-head"> <div class="inner"> <div id="mobile-head"> <h1 class="logo">Logo</h1> <div id="nav-toggle
jQueryを使って実装する、かっこいいナビゲーションのまとめ | コリス
利用しやすいものから、利用シーンを選ぶものまで、jQueryを使って実装したナビゲーションを紹介します。
SmoothMenu
Updated: April 1st, 16' (v3.02): Fixed Chrome desktop falsely reporting as touch enabled, requiring clicking on menu items to drop down. Description: Smooth Navigation Menu is a multi level, CSS list based menu powered using jQuery that makes website navigation a smooth affair. And that's a good thing given the important role of this element in any site. The menu's contents can either be from dire
ThemeRoller | jQuery UI
Using ThemeRoller ThemeRoller allows you to design custom jQuery UI themes for tight integration in your projects. To create a custom theme, select the Roll your own tab and tweak the settings. As you work, the UI components to the right will update to reflect your design and you can download your theme whenever you like. If you'd like to use a pre-designed theme, select the Theme Gallery tab and
Resizable | jQuery UI 1.10 日本語リファレンス | js STUDIO
jQuery UI Resizableプラグインは選択している要素をリサイズ可能な要素にします。 最大最小の幅や高さなど、様々な指定を行うことが出来ます。 (リサイズのドラッグをするためのつまみを持つようになります) このウィジットはいくつかの機能的なCSSを必要とします。 このCSSが読み込めないと機能しないため、最初に必要とするCSSを読み込むようにしてください。 型：Selector or jQuery or Element 初期値：false リサイズしている要素と同期して同じようにリサイズさせたい要素を指定します。 $( ".selector" ).resizable({ alsoResize: "#mirror" }); // getter var alsoResize = $( ".selector" ).resizable( "option", "alsoResize" )
scrollnav.js
A small, dependency free JavaScript plugin for auto generating and tracking single page navigation (aka a Table of Contents) Get started View the demos Features Simple setup Pass your page’s content to scrollnav and it will generate the navigation and track scrolling automatically. Fully customizable All the styling is up to you, make scrollnav look and behave however works best for your project.
【jQuery UI】要素をドラッグ&ドロップで並び替え【Sortable】 - Qiita
jQuery UI のSortable機能を利用して、要素を動的に並び替えます。 実務で使う機会があり、またどこかで使いそうな感じもするので備忘録的なメモ。 目的 HTML要素をドラッグ&ドロップで動的に並び替える 環境 ECMA Script5 jQuery 1.11.1 jQuery UI ソースコード <!DOCTYPE html> <head> <meta charset="UTF-8"> <title>テスト</title> <!-- CSS読み込み --> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> <!-- CSSを記述 --> <style> .sort-elements { heigh
Sortable | jQuery UI 1.10 日本語リファレンス | js STUDIO
jQuery UI Sortableプラグインは、選択した要素をマウスによって並べ替え可能な要素にします。 テーブル行に適用したい場合は、tableではなくtbodyに指定しなければいけません。 型：jQuery or Element or Selector or String 初期値："parent" 選択した要素をドラッグ移動する際のヘルパー要素が挿入される場所を指定します。 (z-indexによる重なりなどの問題に対処するため) jQuery ヘルパーを挿入する要素をjQueryオブジェクトで指定します。 Element ヘルパーを挿入する要素を指定します。 Selector ヘルパーを挿入する要素をセレクターで指定します。 String "parent"文字列を指定すると、ヘルパーは並び替え要素の兄弟要素になります。 $( ".selector" ).sortable({ appe
jQuery UI datepickerを日本語化したりカスタマイズしたり - メン醤のjQuery workshop
前回に引き続きjQuery UIのdatepickerです。 やはりデフォルトのままだと色々不便があります。 前回はカラー(テーマ)のカスタマイズを紹介しました。 jQuery UIの導入方法と色を変えるためのカスタマイズ - メン醤のjQuery workshop 日本語化 公式のGitHubリポジトリよりdatepicker-ja.jsをDLします。 (Rawと書いてあるボタンをクリックするとこのファイルだけ取得できます) https://github.com/jquery/jquery-ui/blob/master/ui/i18n/datepicker-ja.js jsのjquery-uiディレクトリなどに置いてscriptタグで読み込ませます。 カレンダーの表示位置 カレンダーの表示位置はデフォルトで自動計算になっていますが、 テキストボックスの配置がウィンドウの下限に近い場合に
超簡単！カレンダーから日付入力する方法：jQuery ui Datepicker
2015.02.23 超簡単！カレンダーから日付入力する方法：jQuery ui Datepicker ツイート シェアする 共有する はてブ Pocket あなたのサイトの入力フォームは、日付入力が難しくなっていませんか？希望発送日時や納品日など日付に関する入力は意外と手間がかかるので、入力しやすいよう改善しましょう！フォームのユーザビリティ(使い勝手)は入力完了率やコンバージョン率に大きく影響からです。 ではどうすれば日付入力が簡単になるのでしょうか？答えは「カレンダー」を使用して日付入力をしてもらうのです。普段から見慣れているカレンダーを使用することで、直感的に日付を確認することができ、また1クリックするだけで選択出来ます。今回は「jQuery ui Datepicker」を使用して、カレンダーを簡単に実装する方法をご紹介します！ ▼サンプルページ jQuery-ui-datepic
jQuery UIを利用するには？
jQuery UIの基本機能を目的別リファレンスの形式でまとめる連載スタート。jQuery UIで提供されているコンポーネントと、基本的な利用法を説明する。 連載 INDEX 次回 → このシリーズでは、何回かにわたって、jQuery UIの基本機能を目的別リファレンスの形式でまとめていきます。 jQuery UIは、jQueryを拡張するライブラリ（プラグイン）の一種で、名前のとおり、ユーザー・インターフェイス（UI）に関わる機能を提供します。プラグインとはいえ、開発チームにはjQuery本家のメンバーも参加しているオフィシャルな存在であり、jQueryベースでリッチなUIを持ったWebアプリを開発するならば、まずjQuery UIの利用を検討することをお勧めします。 jQuery UIのコンポーネントは、大きくInteractions（インタラクション： マウスによる汎用的な対話処理）
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]スムーズに開閉する多段型のドロップダウンのナビゲーション | コリス
GitHub - artberri/sidr: Sidr is a jQuery plugin for creating side menus and the easiest way for doing your menu responsive.
リストから必要な物を選ぶUIを実現する「jQuery.SelectListActions」:phpspot開発日誌