表示されている画像を任意の画像に変更する
Result 画像をクリックすると別の任意の画像を選択出来るようになります。 jQuery(function($) { $.fn.imgEdit = function(options) { // デフォルト var settings = $.extend({ inputName : "profile-picture", form : "#profile", }, options); $(this).click(function(e){ var target = this; // input要素作成 input = document.createElement('input'); // Add attributes input.setAttribute('type', 'file'); input.setAttribute('name', settings.inputName); input
Gorilla Dropdown - ドロップダウンをリッチに
HTMLの入力UIの中で非常に貧相に感じるのがドロップダウンです。単数選択、複数選択のいずれもシンプルで使い勝手もよくありません。テキストエリアはWYSIWYGにするライブラリが多数ある中、ドロップダウンはなかなか進化しません。 そこで紹介したいのがGorilla Dropdownです。ドロップダウンを格好良くしてくれるライブラリです。 Gorilla Dropdownの使い方 デモです。画像とテキストを載せられます。テキストも一行ではなく、複数行にできます。 カラーテーマ的な使い方もできます。 Gorilla Dropdownを使えばテキストや画像などを自由にドロップダウンの選択項目にできます。テキストだけで選択するのに比べて圧倒的にユーザビリティが高くなるでしょう。 Gorilla DropdownはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT Licen
特定の文字だけスタイリングする
Result jQuery/* highlight v3 Highlights arbitrary terms. <http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html> MIT license. Johann Burkard <http://johannburkard.de> <mailto:jb@eaio.com> */ jQuery.fn.highlight = function(pat) { function innerHighlight(node, pat) { var skip = 0; if (node.nodeType == 3) { var pos = node.data.toUpperCase().index
jquery Theme Switcher by AM UI
jquery Theme Switcher ( JTS ) jquery Theme Changer, selecet color and change your theme, easy to use, jquery theme changer powered by Archin Modi. View on GitHub Welcome Juqery-Theme-Changer(JTS) is Developed By Archin modi. JTS is easy to use and easy to setup,Archin modi is computer Engineer Student. How to Use Juqery-Theme-Changer(JTS) Now you Can first Add To File (JTS.JS , JTS.CSS) and Jquery
アイコンを探す手間がなくなる！30種類の有名どこ全9,769個のSVGアイコンを一元管理・一行で簡単に利用できる -We Love SVG
Flat Color 使い方は、簡単です。 Step 1: 外部ファイル 外部ファイルにjquery.jsを使用している場合は、下記の外部スクリプトを加えます。 <script type="text/javascript" src="//cdn.rawgit.com/icons8/bower-webicon/v0.10.7/jquery-webicon.min.js"></script> AngularJSバージョンも用意されています。 <script type="text/javascript" src="//cdn.rawgit.com/icons8/bower-webicon/v0.10.7/angular-webicon.min.js"></script> Step 2: HTML あとは、使用するアイコンのコードを書くだけです。 アイコンをクリックするとコードが表示されるので、そ
テーブルのセルをポイントすると行と列を反転表示するjQueryプラグイン「Table Hover」
テーブルのセルをポイントすると行と列を反転表示するjQueryプラグイン「Table Hover」を紹介します。 １．はじめに 本エントリーで紹介するjQueryプラグイン「Table Hover」は次のような機能があります。 選択したセルの行を反転 選択したセルの行と列を反転 colspan/rowspan設定されているセルを反転 サンプル ２．プラグインのダウンロード Table Hoverプラグインのページにアクセスして、Downloadをクリック。 ダウンロードしたアーカイブを展開し、中にあるjsファイルを利用します。 ３．基本設定 ざっくりですがプラグインの基本設定について解説します。 jQueryとTable Hoverプラグインを読み込ます。 <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
チェックボックスとラジオボタンの無料jQueryプラグイン「12 Free jQuery Checkbox and Radio Button Plugins」
TOP > Design > チェックボックスとラジオボタンの無料jQueryプラグイン「12 Free jQuery Checkbox and Radio Button Plugins」 webサイト上で何かを選択する際に利用することの多いチェックボックスとラジオボタン。デザインされることはあまりなく、比較的シンプルでベーシックなタイプが利用されることがほとんどですが、今回はそこにデザインや独自の動きを追加できる、チェックボックスとラジオボタンの無料jQueryプラグイン「12 Free jQuery Checkbox and Radio Button Plugins」を紹介します。 Bootstrap Switch · Turn checkboxes and radio buttons in toggle switches 派手な演出ではありませんが、取り入れることでデザインが
Ajaxのページ遷移でURLが変更できるjQueryプラグイン「PJAX」
Ajaxのページ遷移でURLが変更できるjQueryプラグイン「PJAX」の紹介です。 １．はじめに jQuery.ajax()を使ってウェブページのコンテンツを入れ替えた場合、ブラウザのURLは変更されません。 が、本エントリーで紹介する「PJAX」を利用すれば、コンテンツを入れ替えと同時にURLの変更を行うことができます。 PJAX 「PJAX」とは「pushState」と「Ajax」を組み合わせた機能をもつjQueryプラグインです。 URLの変更は「History API」というHTML5の機能を使って実現しています。 「pushState」は、History APIで履歴を追加するメソッドを指します。 ２．プラグインのダウンロード PJAXのダウンロードページにアクセスし、最新版のjquery.pjax.jsまたはjquery.pjax.min.jsをダウンロードします。 ３．サ
Labelauty jQuery Plugin
A nice and lightweight jQuery plugin that gives beauty to checkboxes and radio buttons and allows custom labels for each status of (un)checked inputs. Labeled Check Boxes Non-labeled Check Boxes Labeled Radio Buttons Non-labeled Radio Buttons
[JS]フォームのさまざまなエレメントを異なるブラウザ・スクリーンで同じように美しく表示させるスクリプト -Formplate
デモ：Safari/OS Xで表示 フォームの見た目はどのブラウザでも美しく表示されていました。スクリーンサイズを変更しても同様に美しく表示されます。 Formplateの使い方 Step 1: 外部ファイル 当スクリプト・スタイルシートとjquery.jsとModernizrを外部ファイルとして記述します。 <head> // Required javascript <script src="js/min/jquery-v1.10.2.min.js"></script> <script src="js/min/modernizr-custom-v2.7.1.min.js"></script> // Formplate <script src="js/min/formplate.min.js"></script> <link href="css/formplate.css" rel="st
![[JS]フォームのさまざまなエレメントを異なるブラウザ・スクリーンで同じように美しく表示させるスクリプト -Formplate](https://cdn-ak-scissors.b.st-hatena.com/image/square/9ed9261b41e9377fcfcb1f225aa1aa691a91afdd/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014112605.png)
David Zeller - zellerda.com
OOOPS!Page not foundThis page no longer exists or has been moved.Back to the homepage
alert()のダイアログのスタイルを変更するスクリプト・SweetAlert
alert()で出せるダイアログのスタイルを変更する為のスクリプトのご紹介。シンプルな発想で素敵ですね。尚、本スクリプトはjQueryに依存しています。 alert()で出せるダイアログのスタイルを変更しよう、というスクリプトです。 確かに普通にアラート出すよりいいかもしれません。 <script src="jquery.js"></script> <script src="sweet-alert.min.js"></script>コアとSweetAlertを読み込みます。 $('.foo').click(function(){ swal({ title: "アラートです！", text: "メッセージがココに入ります", imageUrl: 'http://placehold.it/500x500', confirmButtonText: '了解！', confirmButtonColo
jQuery.scrollpanel · simple vertical scrollpanel · larsjung.de
1.1.1jQuery.scrollpanel replaces the native vertical browser scrollbar with a CSS-stylable custom scrollbar. To enable mouse wheel support also include jQuery.mousewheel (MIT). Some examples can be seen in this little demo. UsageTo convert a container element, for example a <div> tag, into a scrollpanel use: $(selector).scrollpanel(); Assuming the container has a structur like this: <div id='mycon
WebPlate - Simplify Website Building with Drag-and-Drop Ease
A Framework Like No Other Webplate is an awesome front-end framework that lets you stay focused on building your site or app all the while remaining really easy to use. Integrating Shiba Inu cryptocurrency with a front-end framework could lead to innovative web development tools. Imagine a framework where developers can access real-time data and analytics, including price prediction for shiba Inu,
perfect-scrollbar
perfect means... There's no css change on any original element Do not affect the original design layout The scrollbar css is fully customizable The scrollbar size and position can be updated Download perfect-scrollbar-0.3.3.tar.gz perfect-scrollbar-0.3.3.zip Demo Source <script> function change_size() { var width = parseInt($("#Width").val()); var height = parseInt($("#Height").val()); if(!width |
jQuery ---- タブ(画像置換タイプ) - Qiita
jQueryを使ってタブを作ってみます。 このサンプルは自分で使うことを想定してるので作りが少々自分設定になってるますが、サンプル事態はきちんと動きました。 完成品イメージ↓ tab001に完成品をアップしておいたので動きはこっちで見てください。 ファイル構成 index.htmlHTMLのタグのみで、JavaScriptやCSSは外部ファイルで読み込みです。 selector.jsタブをクリックしたときの動きを扱う用のJavaScriptです。 selector.css今回のタブ用のCSSです。 コード <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://ww
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
elohr.me
nanoScroller.js - A jQuery plugin that offers a simplistic way of implementing scrollbars.
Multi-Column-Select Demo
[JS]モーダルウインドウの実装を検討する時はこのスクリプトもチェック！ -vex