タグ

関連タグで絞り込む (0)

  • 関連タグはありません

タグの絞り込みを解除

JavaScriptとjQueryとWeb制作に関するhalohalolinのブックマーク (33)

  • 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

    halohalolin
    halohalolin 2014/03/20
    jQueryで構築されたGoogleCalendarクローン。予約管理システムのカレンダーUIにピッタリ!
  • Liveweave HTMLエディター

    Check out our Python playground! Python is the most popular general-purpose programming language in the world, widely used in Artificial Intelligence, Machine Learning, and Data Science projects. Supports popular Python libraries like Numpy, Matplotlib, SciPy, Pandas, and more! Share your public code with anyone, or make it private Features advanced auto-completion technology Try it now!

    halohalolin
    halohalolin 2013/09/15
    JQueryやJavaScriptおよびCSSの挙動がWebブラウザ上のみで手軽にすぐ試せるHTMLエディター、外出時のネットカフェ上でテストコードを組んだりブログ更新するのに便利かも
  • 実際のサイト上で動作するチュートリアルが簡単に作れるIntro.jsが便利すぎる件 - (゚∀゚)o彡 sasata299's blog

    2013年05月08日18:21 JavaScript 実際のサイト上で動作するチュートリアルが簡単に作れるIntro.jsが便利すぎる件 さて、先日簡単なチュートリアル作ろうと思ったんですが、どうやるのが良いのかなーと思って悩んでました。キャプチャ取ってそこに説明文を書いて…ってしてもいいんですけど、キャプチャだと一部分なのでサイト上のどの辺なのかわかりにくかったり、サイト側は変更したのにキャプチャが古いままとかになったりしちゃいますよね>< とか思って探してみたらこちらの Intro.js が便利だったので紹介してみます。 さて、この Intro.js を使うとですね、サイト上で動作するチュートリアルを簡単に作れるんですよ。使い方も簡単で、動作させたい要素に対して data-intro (表示する説明文) と data-step (チュートリアルの何番目に表示するか) を指定します。チ

    halohalolin
    halohalolin 2013/05/09
    Webアプリのチュートリアルに使える、注目すべき点を手順を追ってライトアップして紹介してくれる
  • 普通のテーブルをExcel風に超カッコよくしてくれるjQueryプラグイン「ParamQuery」:phpspot開発日誌

    ParamQuery jQuery Grid Plugin 普通のテーブルをExcel風に超カッコよくしてくれるjQueryプラグイン「ParamQuery」 ありきたりなカッコいい、とはいえないような以下のテーブルがあったとします プラグインで初期化すれば、ソータブル、エディタブル、なクールなテーブルに早がわり これは5,6年前でいえば魔法だと思う方は少なくないでしょう。 関連エントリ レスポンシブなテーブルを作るjQueryプラグイン「MediaTable」 テーブルをグラフに変換してくれるjQueryプラグイン レスポンシブなテーブル作りに役立つjQueryプラグイン「FooTable」 テーブルを簡単にカッコよくスタイリングできるjQueryプラグイン「tablecloth.js」 シンプルにテーブルにソート機能を持たせるだけのjQueryプラグイン「jQuery Table So

    halohalolin
    halohalolin 2013/01/11
    ただのテーブルが、ソータブル、エディタブル、なクールなテーブルに早がわりにしてくれるものの一種、ParamQuery jQuery Grid Plugin も気になる → http://paramquery.com/grid
  • その場でデータを編集。BootstrapやjQuery UIに対応した·X-editable MOONGIFT

    X-editableはBoostrapやjQuery/jQuery UIで使えるIn-place Editorです。 表示されている内容を編集する際にその場ですぐに編集できるようにするのがIn-place Editorです。それをBootstrap、jQuery UIなどに対応させたのがX-editableになります。 こんな感じでポップアップで編集できます。 エラー表示にも対応。 カレンダーでの入力。 選択式も可能です。 インラインで編集もできます。 こちらはjQuery UI版。 この場合も選択式などが使えます。 X-editableは単純な文字列入力の他に、選択やテキストエリアでの入力にも対応しています。入力チェックも可能で、エラーの際にそのまま表示を残せます。純粋なjQueryにも対応しているのでWebサービスに組み込んでみるのはいかがでしょう。 X-editableはJavaSc

    その場でデータを編集。BootstrapやjQuery UIに対応した·X-editable MOONGIFT
    halohalolin
    halohalolin 2012/12/04
    PC向けWebアプリにおけるアカウントの編集や、データベースの編集画面に使えそう、ポップアップが出て編集、エラー表示に対応(日本語対応は不明)、カレンダー・選択式対応
  • [JS]jQueryのプラグイン100選 -2011年総集編

    2011年に紹介したものを中心としたjQueryのプラグイン100+α選です。 今年はCSS3の影響もあってかアニメーションのエフェクトが目立ちました。また、Resposive Web Design用の可変ものや動画・テキストを扱ったものも多かったですね。 [ad#ad-2] 動画関連 画像ギャラリー関連 画像拡大関連 画像配置・キャプション関連 背景画像関連 コンテンツスライダー・カルーセル関連 タブ関連 ナビゲーション関連 レイアウト関連 パネル・ボックス関連 ツールチップ・ティッカー関連 アニメーション関連 エフェクト関連 スクロール操作・スクロールコンテンツ関連 リスト関連 テーブル関連 フォーム関連 テキスト関連 見出し抽出関連 ローディング関連 エレメント・コンテンツ生成 その他 動画関連

    halohalolin
    halohalolin 2011/12/13
    ...画像配置・キャプション関連/コンテンツスライダー・カルーセル関連/タブ関連/ナビゲーション関連/レイアウト関連/パネル・ボックス関連/ツールチップ・ティッカー関連/アニメーション関連/エフェクト関連...
  • 広告等に使えそうなjQueryプラグインいろいろ - かちびと.net

    この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 広告表示などにうまく使えそうな jQueryプラグインのまとめです。 諸事情で調べたのでついでに メモしておきます。応用すれば 画像を使ったものは全て広告に 使えますが、その中でも特に 良さそうだったものを中心に。 広告に使えるというか、クリック率を高めそうとか目立たせるとかそういう類のプラグインになります。曖昧なまとめですが個人的なメモになりますのでご了承下さい。順不同です。 Cycle Plugin 省スペース内で画像を切り替えるプラグインです。エフェクトもいつくか選べます。 Cycle Plugin jQuery.popeye こちらも省スペースに置けるギャラリー。マウスを乗せるとキャプションが出てそこにリンクも貼れます。 jQuery.popeye Step

    halohalolin
    halohalolin 2010/10/21
    省スペース内で画像を切り替える/省スペースに置けるギャラリー/シンプルなカルーセル/端にめくり/クリックでひっくり返る/フリップ/onmouseで別画像・オーバーレイ/テキスト連続表示/LPO/RSS一行見出し
  • フォントサイズを変える「大・中・小」ボタンを実装する方法

    知り合いのデザイナーさんに、「大・中・小」のボタンでフォントサイズを変更する方法ってどうやるのですか?という質問をいただきました。 CSSJavaScript(場合によってはJSのみ)で簡単にできてしまうので、サンプルをご紹介しておきます。 フォントサイズを変える「大・中・小」ボタン実装 jQueryを使ってフォントサイズを変える「大・中・小」ボタンをサクサクっと実装してみようと思います。 まずは仕様を考えてみましょう。 仕様 ・大・中・小のボタンをクリックするとフォントサイズが変更される ・それぞれのボタンにIDをセットしておき、そのID名をもとにclassをセット ・CSSにあらかじめ各class用のフォントサイズを入れておく ・再度訪れたとき、クッキー情報があればそのサイズ、なければ中サイズを。 スタイルシートごと変更する方法もあるのですが、今回はCSSとclassでセットで対応し

    フォントサイズを変える「大・中・小」ボタンを実装する方法
    halohalolin
    halohalolin 2010/05/21
    jQueryを使ってフォントサイズを変える「大・中・小」ボタンをサクサクっと実装
  • – このドメインはお名前.comで取得されています。

    このドメインは お名前.com から取得されました。 お名前.com は GMOインターネット(株) が運営する国内シェアNo.1のドメイン登録サービスです。 ※表示価格は、全て税込です。 ※サービス品質維持のため、一時的に対象となる料金へ一定割合の「サービス維持調整費」を加算させていただきます。 ※1 「国内シェア」は、ICANN(インターネットのドメイン名などの資源を管理する非営利団体)の公表数値をもとに集計。gTLDが集計の対象。 日のドメイン登録業者(レジストラ)(「ICANNがレジストラとして認定した企業」一覧(InterNIC提供)内に「Japan」の記載があるもの)を対象。 レジストラ「GMO Internet Group, Inc. d/b/a Onamae.com」のシェア値を集計。 2024年5月時点の調査。

    halohalolin
    halohalolin 2010/04/21
    jquery plug-in各種:グラフを作る/ファイルをアップロードする/フォームにうっすらテキストを表示する/日時の入力を軽減してくれる/並び替えをする
  • これは新しい日付ピッカー実装用jQueryプラグイン「calendarPicker」:phpspot開発日誌

    BugsVoice - turn bugs into opportunities これは新しい日付ピッカー実装用jQueryプラグインのjQuery.calendarPickerが公開されています。 通常、日付ピッカーというとカレンダーを想像しますが、今回紹介するものは次のようなUIで、1週間が基となっています。 不要な日付を出来る限り非表示にすることで、分かりやすくなったりする場面もありそうです。 現在の日付は黄色の枠で表示されるようになってるみたいです。 オプションに値を与えることで、月、曜日の表示名カスタマイズをすることが出来るのでローカライズも容易ですね。 関連エントリ GoogleカレンダーみたいなカレンダーをjQueryで一瞬で作成できる「jquery-week-calendar」 jQueryを使ったカレンダー型、日付入力補完ライブラリ

    halohalolin
    halohalolin 2010/03/27
    不要な日付を出来る限り非表示にしたカレンダー、1週間が基本になっている
  • Dynamic Drive DHTML Scripts- Ultimate Fade-in slideshow (v2.0)

    Note: March 7th, 16': Updated to v2.6.1 for miscellaneous bug fixes. Description: This is a robust, cross browser fade in slideshow script that incorporates some of your most requested features all rolled into one. Each instance of a fade in slideshow on the page is completely independent of the other, with support for different features selectively enabled for each slideshow. Here's a lowdown on

    halohalolin
    halohalolin 2010/03/04
    jQueryを利用したFlashがなくてもフェードインフェードアウトのスライドショーが実装出来るプラグイン
  • ブラウザが落ちてもフォーム内容が消えないようにするjQueryプラグイン「jQuery autosave」:phpspot開発日誌

    ブラウザが落ちてもフォーム内容が消えないようにするjQueryプラグイン「jQuery autosave」 2010年01月19日- rikrikrik.com - jQuery autosave plug-in ブラウザが落ちてもフォーム内容が消えないようにするjQueryプラグイン「jQuery autosave」。 データを編集中にフォームに書き込んでいて、ブログ記事などが消えたりするとても悲しい気持ちになりますが、このプラグインを使えばデータをブラウザのクッキーに保存してくれて、次にアクセスした時にリストアできるという素晴らしいプラグインです。 クッキー保存のため、サーバに保存する必要はないですし、手軽に使うことができそうです(ブラウザごとにクッキーに依存した文字数制限などは存在すると思います) こういうことを1からやろうとすると結構大変ですが、毎度のことながら、jQueryプラグ

    halohalolin
    halohalolin 2010/01/21
    Cookieにフォームの内容を自動保存する。IEでページ戻り(history.go(-1))の際に、新しいタブを作ったりすると入力内容が消える問題にも対応できそう!
  • 製品の特徴についてカッコよく表示できるjQueryプラグイン「Feature List」:phpspot開発日誌

    製品の特徴についてカッコよく表示できるjQueryプラグイン「Feature List」。 次のような、製品の紹介なんかでどこかで見たようなUIパーツを簡単に実装できるみたいです。 実装方法 最初はちょっと難しいような気もするのですが、実はかなり簡単で次のように<div>以下に2つのulを置いておきます <div id="feature_list"> <ul id="tabs"> <li> <a href="javascript:;"> <img src="services.png" /> <h3>Services</h3> <span>Lorem ipsum dolor sit amet consect</span> </a> </li> <li> <a href="javascript:;"> <img src="programming.png" /> <h3>Programming<

    halohalolin
    halohalolin 2009/12/14
    会社のトップページなどに使えそう
  • スクロールした位置についてくるサイドバーをjQueryで実装するサンプル例:phpspot開発日誌

    スクロールした位置についてくるサイドバーをjQueryで実装するサンプル例が公開されており、チュートリアルと共にダウンロード可能になっています。 サンプルを見ると、殆どの面倒なことがjQuery側にてやってくれるため、非常に簡単なプログラムになっています。 付いてくるのがリアルタイムにしすぎるとガクガクして酔いますが、ちょっとした遅延があったあと、アニメーションして付いてくるので、動きとしてもよいですね。 jQueryの学習用に、また実際にサイトにサクッと組み込んでみる際にもよさそうですね。 以下のエントリを参照してください。 Scroll/Follow Sidebar, Multiple Techniques | CSS-Tricks

    halohalolin
    halohalolin 2009/12/05
    フレームの代わりとしてメニューに使えそう
  • Site Under Maintenance

    We'll be back soon! Our site is currently undergoing maintenance. Please check back later.

    halohalolin
    halohalolin 2009/10/22
    文字数をカウント/残り文字数をカウント/エラーチェック/リストから入力/リストへ入力
  • GoogleカレンダーみたいなカレンダーをjQueryで一瞬で作成できる「jquery-week-calendar」:phpspot開発日誌

    GoogleカレンダーみたいなカレンダーをjQueryで一瞬で作成できる「jquery-week-calendar」 2009年08月05日- jquery-week-calendar - Project Hosting on Google Code GoogleカレンダーみたいなカレンダーをjQueryで一瞬で作成できる「jquery-week-calendar」。 次のような、ドラッグ&ドロップでイベントを作れるGoogle カレンダー風のウィジェットがjQueryプラグインとして公開されました。 なんと、次の1行で初期化という簡単っぷりです。 $("#calendar").weekCalendar(); 当然、コールバックを設定して、イベント追加時のコードをかけたりします。 プロジェクトページのリファレンスも充実しているようで、カスタマイズも簡単でしょう。 関連エントリ とても洗練さ

    halohalolin
    halohalolin 2009/08/06
    ドラッグ&ドロップでイベントを作れるGoogle カレンダー風のウィジェットがjQueryプラグイン、初期化はたった1行のみ
  • まだまだあったJavaScript製のWYSIWYGエディタコンプリート:phpspot開発日誌

    まだまだあったJavaScript製のWYSIWYGエディタコンプリート、ということで、ブログで紹介していない(したものも一部あるかもしれませんが)ライブラリ等をメインにご紹介。 WYSIWYGといっても、それぞれの使い方には特徴があって、微妙に自分の使い勝手にあってなかったりする場合もありますね。ということで選択肢を増やすという意味でご紹介 Free Rich Text Editor OfficeスタイルのリッチなWYSIWYGエディター →デモページ jHtmlArea - The all NEW HTML WYSIWYG Editor for jQuery WYSWYGエディタ実装用jQueryプラグイン jwysiwyg シンプルなUIのWYSIWYGエディター。jQueryプラグイン SPAW Editor UIが美しいタブ付きWYSIWYGエディタ →デモページ TTW HT

    halohalolin
    halohalolin 2009/08/05
    JavaScript製のWYSIWYGエディタあれこれ
  • まずは、mixiアプリを使ってみよう、作ってみよう

    まずは、mixiアプリを使ってみよう、作ってみよう:基礎から分かる、mixiアプリ作成入門(1)(1/3 ページ) mixiのアプリ?それって何? 「mixiアプリ」は、iGoogleのガジェットのように、SNS「mixi(ミクシィ)」上に組み込まれて実行される、Webアプリケーションです。主に、JavaScript+XML+HTMLCSSで作ります(やり方によっては、Flashなども使える)。 誰でも開発でき、人が開発したmixiアプリを自分のマイページなどに自由に組み込むことができます。また、Webアプリケーションのため課金方式は異なりますが、iPhoneアプリのようにmixiアプリを作って公開することで報酬を得ることもできます。 mixiアプリは、2009年6月現在、オープンβ環境のみで利用可能となっています。正式版は、8月公開予定です(参考:「mixiアプリ」8月に正式公開 販売

    まずは、mixiアプリを使ってみよう、作ってみよう
    halohalolin
    halohalolin 2009/06/23
    JavaScript+XML+HTML+CSSで作ります/mixiアプリの作り方を一度覚えると、ほかのOpenSocialに対応している環境であるgooホームやMySpace、iGoogle、Orkut、OpenPNEベースのSNSサービスなどにも簡単に応用できる
  • 無限に回転するカルーセルUI実現用jQueryプラグイン実装チュートリアル:phpspot開発日誌

    jQuery Infinite Carousel | jQuery for Designers - Tutorials and screencasts 無限に回転するカルーセルUI実現用jQueryプラグイン実装チュートリアル 次のような、最後のアイテムに移動しても、最初に戻る無限に回転するカルーセルを作成していくチュートリアルが公開されています。 スクリーンキャストで、作成の過程についても紹介されていて、分かりやすい。 単純に誰かの開発環境を覗くという意味でも勉強になりそう。 更に、図入りで、仕組み・コードについて紹介する形のチュートリアルになっています。 関連エントリ ナビゲーションメニューを1歩進んだものに引き上げるjQueryチュートリアル集 jQueryやPHPを使った便利な仕組みのチュートリアル集 jQueryクライアントとPHPサーバ間をJSONで結ぶチュートリアル

    halohalolin
    halohalolin 2009/06/20
    画像リストの一部を表示し、左右クリックでスクロールするギャラリーが作りやすくなるプラグイン
  • ページ内の画像のダウンロードを超簡単に制限できる「dwImageProtector for jQuery」:phpspot開発日誌

    ページ内の画像のダウンロードを超簡単に制限できる「dwImageProtector for jQuery」 2009年06月15日- dwImageProtector Plugin for jQuery ページ内の画像のダウンロードを超簡単に制限できる「dwImageProtector for jQuery」。 Flickr などで導入されていますが、右クリックしてダウンロードしようとすると、元画像ではなくダミーの画像のダウンロードが開始する、という仕組みを簡単に実現するためのjQueryプラグインです。 ダウンロードしようとすると、ダウンロード開始するものの、ダミー画像(blank.gif)がターゲットになります。 単純に、元画像にダミー画像(blank.gif)を被せているというハックなのですが、画像の右クリックダウンロードを抑制したい方には便利に使えます。 以下のようなケースで保存す

    halohalolin
    halohalolin 2009/06/20
    クライアントから画像をダウンロードできないようにしてくれと依頼されたものの、右クリック禁止のjavascriptを組み込む事には良心が咎める場合に使えそう