Essential Cheat Sheet: Convert jQuery to JavaScript | Envato Tuts+Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
jQueryのtoggleでアコーディオンメニューやタブをさくっと実装する方法 | Page 3 of 3 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
その3.「toggleClass」を使ってスイッチのオン・オフを切り替える 上記の2つだけでも結構使えますが、それに加えてメニューボタンのオン・オフ状態で見た目を変えたい場合もあるかと思います。 そんなときは「toggleClass」を使って装飾しましょう。 →デモはこちら これ、「.addClass()」や「.removeClass()」はいらないんです。 必要な記述は、わずか1行！ JS <script> $(function(){ $("#acMenu dt").on("click", function() { $(this).next().slideToggle(); $(this).toggleClass("active");//追加部分 }); }); </script> HTML さっきと同じです。 CSS #acMenu dt{ display:block; width:1
2019年になってもまだjQueryを使用している理由
現在、jQueryを使用している人、そしてjQueryを取り去ろうとしている人がいると思います。jQueryの使用に対する一つの考え方を紹介します。 Why I'm still using jQuery in 2019 by Martin Tournoij 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は元サイト様のライセンスの元、翻訳しています。 2019年になってもまだjQueryを使用しているのはなぜですか Hacker News での議論 多くの人が「普通のJavaScriptを使えば、jQueryは必要ない」と主張しています。私は多くを必要としないので、jQueryを必要としませんが、確かに便利です。 You might not need jQueryのようなページでは、jQueryを捨てるのは簡単だというアイデアを売り込もうとしていますが、逆にこのページの最初の例
一休.comホテルページのスマホ版からjQuery依存を取り除くためにやったこと - 一休.com Developers Blog
一休.comでWebフロントエンドを開発している宇都宮です。 先日、一休.comホテルページのスマホ版から、jQueryを取り除きました。jQueryを取り除いた経緯、やったこと、結果について書きます。 ちなみに、ホテルページには以下のURLでアクセスできます（スマホで開くか、PCの場合はUAをスマホに偽装する必要があります） https://www.ikyu.com/sd/00001290/ なぜjQueryを取り除いたのか？ どうやったのか 何をやったのか jQuery.ajax() => fetch に置き換え fetchのpolyfillを採用した理由 DOM操作を標準APIに置き換え 要素の取得 show/hide addClass/removeClass html/text アニメーション $.ready() イベントフィルタリング jQueryの使用を防ぐ目印 jQuery削
スマートフォンでのタッチイベントと移動を区別する方法 | スターフィールド株式会社
PCで画像をクリックしてポップアップウィンドウが出てくるhtmlですが、 スマートフォンだとスクリーンが狭いから、普通にページの下部（上部）に行くつもりですが、 画像をタッチしたら、ポップアップウィンドウが出てきて困ったことがあります。 これは、jqueryのtouchstartイベントを使うではなく、 touchstartからtouchmoveイベントがあるかをチェックする工夫で解決できます。 $(function() { $( 'div' ).on( { 'touchstart': function() { this.isTouch = true; }, 'touchmove': function() { this.isTouch = false; }, 'touchend': function() { if(this.isTouch == true){ // popupイベントを発生
jQueryで実装するtapイベント - うつつのがれ
スマホ対応のWebサイトやアプリで、タップに対してなにか動作させたい時、clickイベントを使うとすこし反応が鈍く感じることがあります。 スマホなどのタッチデバイスでは、clickイベントの発火にわずかなタイムラグが設けられているからのようです（多分ダブルタップを検出するためだと思います）。 そこで、touchstartやtouchendを組み合わせてタップ動作を検出する方法がよく取られますが、より汎用的にjQueryでclickなどと同じように扱えるtapイベントを作りました。 /* jQuery Tap Event */ (function($, window) { "use strict"; var RANGE = 5, events = ["click", "touchstart", "touchmove", "touchend"], handlers = { click: fun
jQuery リファレンス：ajaxStop
索引 ├ リファレンス目次 ├ アルファベット順 └ 検索 Core：コアとなる仕組み ├ 目次 ├ jQuery(selector) ├ jQuery(html) ├ jQuery(function) ├ jQuery.holdReady() ├ jQuery.noConflict() └ jQuery.sub() 他ページ参照 └ jQuery.when() Selectors：セレクタ └ 目次 基礎 ├ *（すべて） ├ element（html要素） ├ #id名（ID属性） ├ .class名（clas属性） ├ 複数のセレクタ(and) └ 複数のセレクタ(or) 階層関連 ├ 先祖 子孫 ├ >（子要素） ├ +（直近の後要素） └ ~（後要素） 属性 ├ [属性名] ├ [属性名='値'] ├ [属性名!='値'] ├ [属性名^='値'] ├ [属性名$='値'] ├
jQueryでajax完了後に実行開始したい処理があるときの対応 - Webデザインとかコーディングを勉強中の方に届けたいTipsを発信するブログ
ajaxって便利ですよね。 非同期でコンテンツを追加読み込みする際は必須の手法です。 あまりない状況かと思いますが、今回ajaxで読み込んだコンテンツの高さを取得する必要がありました。 しかもajaxの実行はループ内（each関数）で数回行うという合わせ技です。 処理の順序としては、 （１）ajaxでコンテンツ読み込み。を数回繰り返し。 （２）読み込んだ各コンテンツの高さ取得。をまた数回繰り返し。 です。繰り返しの繰り返しです。 が、この処理の実行順序がなんとも不安定。 かつ、（２）の処理が（１）の実行途中で先走っている始末。 ダメダメの繰り返しじゃんってことで調べました。 ajaxCompleteで解決！と思いきやajaxCompleteを使えば、ajax処理が完了した時点で着火します。 用途はこんな感じです。 $(document).ready(function(){ //コンテンツ読
jQuery UI Touch Punch - Touch Event Support for jQuery UI
Tested on iPad, iPhone, Android and other touch-enabled mobile devices. jQuery UI Touch Punch is a small hack that enables the use of touch events on sites using the jQuery UI user interface library. Currently, jQuery UI user interface library does not support the use of touch events in their widgets and interactions. This means that the slick UI you designed and tested in your desktop browser wil
iPhoneのclickイベントの挙動
iPhoneのclickイベントの挙動 本エントリーは軽めのjQuery Advent Calendar 2012最終日のエントリーです。 iPhoneはonメソッドを利用したclickイベントに結構クセがあるのでそれを解説したい思います。 <p class="target">ターゲット</p> このようなHTMLにclickイベントをバインドしていきます。 まずは次のようなコード。 $(".target").click(function(){ $(this).css("background","red"); }); sample これはちゃんと動きます。 次のコード。 $(".target").on("click",function(){ $(this).css("background","red"); }); これもちゃんと動きます。 sample これを踏まえた上で次からが動かないコ
On- and off-canvas menus - mmenu.js
By default, the plugin will prepend the menu to the BODY and hide it from sight. When the menu is being opened, the page slides out of view, revealing the menu and blocking the page from interaction. In other forms, the menu can be revealed by sliding in view, hiding the page behind it. This kind of behavior is called an "off-canvas" menu. An "on-canvas" menu on the other hand, is always opened an
「position: sticky;」より便利！スクロールしたらヘッダやサイドバーがぴたっと貼り付くスクリプト -Fixed Sticky
HTMLは汚さずに、ヘッダ、ナビゲーション、サイドバー、ボタンなど、さまざまな要素をスクロールした際に指定した位置にぴたっと貼り付けるスクリプトを紹介します。 IE7+からサポートされており、「position: sticky;」の代替になる便利なスクリプトです。 Fixed Sticky- GitHub Fixed Stickyの特徴 Fixed Stickyのデモ Fixed Stickyの使い方 Fixed Stickyの特徴 Fixed Stickyで貼り付ける要素の位置は、親要素に依存します。 つまり、スクロールしてぴたっと貼り付く位置は、常に親要素となるコンテナ内です。 基本的な動作を見てみましょう。 まずは、要素に「top: 20px;」を指定してみます。
jQuery Plugin For Html Print Preview - printPreview
Print-Preview is a jQuery plugin that allows a "Print Preview" button to open a new browser window displaying specific print area of your webpage. How to use it: 1. Load jQuery library and the printPreview.js script in the web page. <script src="jquery.min.js"></script> <script src="js/printPreview.js"></script> 2. Create a Print Preview button on the webpage. <button id="btnPrint">Print Preview</
【スマホでも使いやすい！】モバイルフレンドリーなレスポンシブメニューの基本
レスポンシブなナビゲーションの作り方は膨大な数ほどありますが、良いものを作ろうとすると少し大変です。 レスポンシブメニューはモバイルにも対応し、タッチ操作が行われるデバイスのことも考えなければなりません。 この記事ではモバイルにも対応したレスポンシブメニューの作り方をご紹介します。 まずは基本をおさえよう レスポンシブメニューをデザインする際には、ユーザーがどのようにモバイル端末を使用するのかを知っておく必要があります。 優れたナビゲーションは次のルールを守って作成されています。 ・メニューのトグルがわかりやすい ・全てのボタンやリンクがタッチしやすい大きさになっている ・タップした際にフィードバックがある ・サブメニューにもアクセスできる ・エフェクトがシンプルである ・様々なブラウザに対応している ここからは順を追って、レスポンシブメニューのデザイン法を紹介していきます。今回はオフキャ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Resizable - jQuery UI API 1.8.4 日本語リファレンス - StackTrace
1216彩票-官网平台
GitHub - posabsolute/jQuery-printPage-plugin: A plugin that print any linked pages without loading a popup
Any Html Elements Printing Plugin For jQuery - printMe
GitHub - etimbo/jquery-print-preview-plugin: jQuery plugin for print preview (modal window)
jQuery.print by DoersGuild