ノンプログラマーのためのjQuery生成ツールノンプログラマーのためのjQuery生成ツール（サンプル） ノンプログラマーのためのjQuery生成ツールは下のスクリーンショットのように入力してください。
MdN Design｜総合情報サイト
第8回「最近注目を集めているJavaScript/jQueryのツール・テクニック45」 2010年04月09日 今回は、JavaScriptやjQueryを使ったテクニックやツールなどを紹介しよう。これまで同様の記事を何度か掲載してきたが、今回は海外で多くの注目を浴びたものを厳選している。フォームやボタン、カレンダー、ナビゲーション、デバッグ関連などさまざまな記事を紹介するので、ぜひチェックしてほしい。また、後半ではJavaScriptに関するリファレンスサイトなども紹介している。 余談だが、Smashing Magazineのページ上部にネットワークタブがあることをご存知だろうか。こちらでも記事を紹介しているので、ぜひご覧いただきたい。 翻訳元サイト：Smashing Magazine http://www.smashingmagazine.com/ 原文：45 Fresh Usefu
jQueryでthisの子要素を取得するやり方いろいろ | Base Views
公開 2010年6月6日（日） 更新日 2014年8月18日（月） スポンサーリンク jQueryを使っていて、thisとその子要素を同時に指定したい場合がある。 結構いろんなやり方があるみたいで、取りあえず使いやすそうなので下の3通り。 $("hoge",this) $(this).children("hoge") $(this).find("hoge") 一番上がシンプルでいいかと思うんですが、取得したいthis直下の要素名をthisの手前に書くんですね… 使いどころは多そうですが、例えば下みたいなの。「Click1」をクリックしたらその直下の<div>が隠れるようにしたい場合とか。 <ul> <li>Click1 <div> <h2>Menu1</h2> <p>text1</p> </div> </li> <li>Click2 <div> <li>Menu2</li> <li>tex
[jQuery] アニメーションしながら開く「続きを読む」をjQueryで実装する
長い文章を3行ぐらいで切っておいて、続きを読むボタンクリックでアニメーションしながら全文表示させてみます。 デモはこちら HTML <div class="grad-wrap"> <span class="grad-trigger">続きを読む</span> <div class="grad-item"> <p>近頃岡田さんへ講義人身少々招待にするあり権力…</p> </div> </div> トリガーとなるボタン.grad-triggerと高さを変化させる.grad-itemをgrad-wrapで囲います。 CSS .grad-wrap { position: relative; } .grad-wrap + .grad-wrap { margin-top: 40px; } .grad-trigger { /*ボタンのスタイルはご自由にどうぞ*/ } .grad-item { posit
![[jQuery] アニメーションしながら開く「続きを読む」をjQueryで実装する](https://cdn-ak-scissors.b.st-hatena.com/image/square/e45aef30f59b2788e85409f3cf151e1c2b520743/height=288;version=1;width=512/https%3A%2F%2Fmetrograph.jp%2Fwp-data%2Fwp-content%2Fuploads%2F2015%2F08%2Ftemplate.jpg)
[JS]画像や動画、iframeもLightbox風に立ち上げるjQueryプラグインColorboxの使い方 | WEBデザインのTIPSまとめサイト「ウェブネタチョ」
CSSやHTML、javascriptやjQuery、WordPressやプラグインなど、WEBデザインにちょっと便利なTIPSまとめブログ。サイト制作時に見つけた小ネタなどをまとめて紹介します。
![[JS]画像や動画、iframeもLightbox風に立ち上げるjQueryプラグインColorboxの使い方 | WEBデザインのTIPSまとめサイト「ウェブネタチョ」](https://cdn-ak-scissors.b.st-hatena.com/image/square/7d3c7b3666836ef850915d69004985b2383bda40/height=288;version=1;width=512/https%3A%2F%2Fwebantena.net%2Fwp-content%2Fuploads%2F2014%2F03%2F172387489.jpg)
ドラッグ＆ドロップで並べ替える対象となる要素を指定
項目 3-1 項目 3-2 項目 3-3 実装例の動作について 「項目 1」にカーソルを合わせると、カーソルの形状が移動用カーソル形状になる。「項目 1」をドラッグし、「項目 2」のボックスの上に持ってくると、「項目 2」のボックスが上へ移動し、「項目 2」のボックスと「項目 3」のボックスの間にスペースができる。そのスペースへドロップすると、「項目 1」のボックスと「項目 2」のボックスが入れ替わり、「項目 2」「項目 1」「項目 3」のボックスの順番になる。 実装例のソースコード 読み込み 読み込み方は、2種類ある。パスは、それぞれ、アップロードした場所を指定する。 まとめて読み込む場合 <link rel="stylesheet" href="themes/base/jquery.ui.all.css"> <script type="text/javascript" src="jqu
ドラッグ＆ドロップで並べ替えた順番を送信
jQuery UI の Sortable プラグインを使い、ドラッグ＆ドロップで並べ替えた順番を、送信する方法。 「この並び順を送信」ボタンを押すと、「この順番でよろしいですか？」という確認ダイアログが出現し、「OK」を選択した場合、項目IDを送信する。 実装例（サンプル） 項目名 A (項目ID:1) 項目名 B (項目ID:2) 項目名 C (項目ID:3) 項目名 D (項目ID:4) 項目名 E (項目ID:5) 実装例の動作について 「項目名 A」をドラッグして、下へ動かし、「項目名 B」の上に持ってくると、「項目名 B」が上へ移動し、「項目名 B」と「項目名 C」の間にスペースができる。そのスペースへドロップすると、「項目名 A」と「項目名 B」が入れ替わり、「項目名 B」「項目名 A」「項目名 C」…の順番になる。 「この並び順を送信」ボタンを押すと、 項目名 B (項目ID
jQueryで簡単にドラッグ＆ドロップのソートを実装する方法
読む：3分 試す：15分 はじめまして、4月にアシアルへ入社した噂の好青年こと高橋です。 今日はjQuery UIを使ったオシャンティなソートを紹介します。 まずはデモをご覧ください。 「こんなメンド・・・大変そうなUIできるかなぁ？」 心配ご無用！jQueryさんはやってくれます！！ まずは必要なソースを準備します。 下記からそれぞれ最新版をダンロードしてください。 http://jquery.com/download/ （24/7/19時点で ver 1.7.2） http://jqueryui.com/download （24/7/19時点で ver 1.8.21） ファイル構造・読み込み等は割愛します。 今回覚えるべき、たったひとつのシンプルなキーワード 「sortable」 まずはHTMLいきます <table class="table table-striped table-b
FullCalendar - JavaScript Event Calendar
npm install @fullcalendar/angular import { Component } from '@angular/core' import { CalendarOptions } from '@fullcalendar/angular' @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { calendarOptions: CalendarOptions = { initialView: 'dayGridMonth', events: [ { title: 'event 1', date: '2019-04-01' }, { title: 'e
wdCalendar - jQuery Based Google Calendar Clone
wdCalendar is a jquery based google calendar clone. It cover most google calendar features. User can choose to have a daily view, weekly view or monthly view. User can easily create, update or remove events by drag & drop. It is very simple to to integrate wdCalendar with a database. wdCalendar is free (open source LGPL license), easy to use, and with great functionalities. You can check out the d
View customize pluginを使いこなす
第10回 redmine.tokyo にて発表したView Customize Plugin の資料です。
JavaScript / jQueryでtableの行を「追加」「削除」「移動」「変更」させる方法
まず「リスト選択」の列の選択肢から「B」を選択します。 ⇒「リスト名」が「B」に変更されます。（変更）「追加/削除」の列の「+」ボタンを押します。 ⇒行が追加されます。（追加）追加された行の「リスト順」の列の「↑」をクリックします。 ⇒行が上へ移動します。（移動）移動した行の「リスト順」の列の「↓」をクリックします。 ⇒行が下へ移動します。（移動）最後に、好きな行の「追加/削除」の列の「-」ボタンを押します。 ⇒行が削除されます。（削除） いかがでしょうか。まあ、よくある機能ですね。では、この機能の実装方法について以下にまとめておきたいと思います。 HTMLHTMLでは、以下の点がポイントとなります。 それぞれの機能を発生させるためのイベントハンドラをセットしておきます。操作の対象となる「行」の部分は<tbody>タグ内に記述するようにします（これが後々大事になります）。JavaScrip
jQuery – 目的の場所にさくっと要素を追加する | 1：n – DETELU Blog
「いろんなセレクタ指定方法＋αを覚えて、目的の要素をさくっと取得する」で要素をさくっと選択できるようになったら、次は選択した要素を元に、さくっと新しく要素を追加する方法を覚えて見ましょう。 「新しく要素を追加する」というのはAjaxで外部データを読み込み、リスト一覧を表示させる場合などに頻繁に利用します。たとえばtwitterからデータを読み込んでサイドバーに表示する、といった場合です。 他にもホームページに新しい商品を追加して「NEW」という画像を表示することがあると思いますが、一ヶ月後には消したいという場合、直接HTMLに書き込んでいると、いちいち修正しないといけません。それをうまくJavascriptで追加するようにして上げれば、修正の必要がなくなります。 class名に日時を添えて、そのclass名につけられた日時と現在の日時と比べて処理をさせます。少しスクリプトは荒い例ですが、下
Onsen UIの舞台裏で働くAngularJSの世界
AngularJS流のデータ／コントローラー／表示の実装方法と、AngularJSのディレクティブによるHTML要素の操作方法、データの追加、AngularJS機能のサービスについて解説する。 ← 前回 連載 INDEX 次回 → 前回は、Monacaで作成した“初めてのOnsen UIアプリ”のファイルの中身を調べ、それをAngularJS流に書き換えた。3回目の今回は、Onsen UIの舞台裏で働くAngularJSの世界に入っていく。 AngularJSはグーグル純正のJavaScriptフレームワークで、モデル、ビュー、コントローラー（MVC）というデザインパターンが採用されている。連載1回目で述べたように、Onsen UIを使ったMonacaアプリでJavaScriptをAngularJS流に記述できるようになると、AngularJSを直接扱わない標準的な方法よりも、アプリの“か
外部コンテンツをiframeサイズで拡大縮小させたり、固定幅コンテンツをウィンドウサイズでピッタリ表示させる方法
<iframe src="http://blog.asial.co.jp" frameborder="1" width="600" height="600"></iframe> <iframe src="http://blog.asial.co.jp" frameborder="1" width="600" height="600" style="zoom:0.55"></iframe> 通常 zoom:0.55 悲しいことに、iframeの横幅・縦幅が0.55倍になるだけで、 iframe内のコンテンツが縮小されるわけではないのです。 Firefoxなどのブラウザでは、そもそもzoomすらされていない状態になります。 また、iOSではそもそもiframeの幅指定を無視します。 ではどうすればよいのでしょうか？ 答えとしては、CSS3が解釈できるブラウザ限定にはなりますが、 CSS3のtr
時刻入力に便利な「Timepicker for Bootstrap」
「Timepicker for Bootstrap」は、テキストボックスへの時刻入力を便利にしてくれるjQueryプラグインです。 Bootstrap2版はこちら Datepicker for Bootstrap (別記事) 実装方法 ダウンロード / サンプル (v0.2.6) スクリプト <link href="bootstrap.min.css" type="text/css" rel="stylesheet"> <link href="css/timepicker.css" type="text/css" rel="stylesheet"> <script src="jquery.min.js" type="text/javascript"> <script src="js/bootstrap-timepicker.js" type="text/javascript"> 時刻指定時
jQuery Cheat Sheet
Copying .clone() DOM Insertion, Around .wrap() .wrapAll() .wrapInner() DOM Insertion, Inside .append() .appendTo() .html() .prepend() .prependTo() .text() DOM Insertion, Outside .after() .before() .insertAfter() .insertBefore() DOM Removal .detach() .empty() .remove() .unwrap() DOM Replacement .replaceAll() .replaceWith()
短期間である程度までjQueryができるようになる独学Webデザイン勉強法を書いてみる - Yukihy Life
HTML、CSSの勉強法を以前書きました。 www.yukihy.com この記事を書いたあと、jQueryに挑戦をして、まだまだ完璧ではないものの実際にこのはてなブログを通して、いろんなブログパーツのようなものを作ることができました。 そこで、jQueryを勉強するとき、効率良く身につけられる方法を書いていきたいと思います。 僕自身いろんな本やツールに手を出しながら進めてきたので、実際に下の通りに行ったわけではありませんが、もう一度勉強しなおすとしたらこういったようにやるなといった感じです。 それではレッツゴー！ jQueryを身につけるための最短ステップ ステップ１ Progateで手を動かしながら学ぶ ステップ２ 平行してWebデザインレシピの記事を読む ステップ３ ドットインストールで総復習&補完 ステップ４ 書籍を参考に実際に作ってみる 作りながら学ぶjQueryデザインの教科書
無料麻雀ツール＆アプリ 点数計算＆牌効率ラボ
JavaScriptでプログラミングした麻雀の小粒プログラム集を公開しています。稚拙なものばかりですが、プログラムのヒントや参考になれば幸いです。
jQuery+非同期通信でスマフォライクなチャットを作る その２ - 北海道苫小牧市のホームページ制作 STUDIO KEY
jQuery+非同期通信でスマフォライクなチャットを作る その２ 2014年08月17日 2015年7月9日追記 : jQueryチャットの高機能版の記事を書いていますので合わせてどうぞ Sqlite版 https://studio-key.com/646.html お絵かき版 https://studio-key.com/1018.html 以前、jQueryでチャットを作る記事を書いたのですが、jQueryチャットというキーワードで来られる方が割と多くびっくりしています。LINEなどがある現代ではブラウザチャットなんて過去の遺物だと思ってましたので。 いつかもうちょとマシなものをと思っていたのですが、このお盆中の深夜、ふいに書きたくなり、朝まで掛かって新しいものを作りました。 2014-08-18追記 ちょっとスタンプ機能を付けてみました。素材はhttp://iconhoihoi.oo
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
