jonmiles/bootstrap-treeview GitHub Bootstrapなサイトで階層的なツリービューを作成できるUIライブラリ「bootstrap-treeview」 Bootstrap標準のリスト風にツリービューを以下のように表示することができます。 階層的なデータ構造を表示するのに使えそうです 関連エントリ ツリー型の階層的なアイテムを選んで送信できるフォームUI実装jQueryプラグイン「Tree Multiselect」
jQuery plugin which creates a column based grid system with drag and drop.Details Column Grid System: All items flow from left to right, top to bottom. Drag & Drop: Click and drag elements to move them, even to different containers. Responsive: Resize the browser window so see the grid change with the new dimensions. Works on Touch: Enable drag and drop on touch devices by using the included jQuer
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce augue nulla, rhoncus sed faucibus sit amet, sagittis at metus. Mauris tristique dui eget turpis interdum ultricies. Donec volutpat, velit a congue convallis, nisi est ultricies tortor, sed pretium eros enim nec lorem. Pellentesque iaculis, felis ac interdum tincidunt, tortor lacus ultrices nisl, ut porta magna enim eu nunc. Cras nec ve
jQuery UI provides abstractions for low-level interaction and animation, advanced effects and high-level, themeable widgets, built on top of the jQuery JavaScript Library, that you can use to build highly interactive web applications. Rich effects and UI widgets jQuery UI features low-level effect and interaction API's as well as full-featured and highly configurable ready-to-use widgets. Suppor
jQuery UI の Slider プラグインを使ったスライダーにおいて、トラック上のクリックした場所へ、ハンドルを、アニメーション動作で移動させる方法。animate オプションの値に「slow」「normal」「fast」のいづれかを指定する。「slow」はゆっくりとした速度のアニメーション動作、「fast」は早い速度、「normal」はその中間の速度。 実装例(サンプル) 評価: 実装例(サンプル)について 初期値、最小値、最大値に下の値を設定してある。 初期値: 50 最小値: 0 最大値: 100 実装例(サンプル)の動作について スライダー中央の四角のハンドルをドラックして、トラック上を移動させることができる。 トラック上をクリックすると、ハンドルを、その場所へ、アニメーション動作で、移動させることができる。 ハンドルの左側をグレーに着色する。 スライダーに合わせて、「評価:
The datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input's value.
フォーム入力で日付を扱うことあると思いますが、数字だけの割にはいろいろと制御が面倒な部分でもあります。 入力フォーマット、年・月・日の制御など、作る側としてはかなり見えない部分の仕事が増えます。 入力するユーザの立場としても、フォームがドーンとあっただけでは入力に迷いますし、こういう局面ではカレンダーなどで曜日や日にち間隔を確認しますよね。 この両者の不便さを解消する方法として、jQueryのプラグインである「jQuery UI」の1機能、「Datepicker」で解消できます。 Datepickerを使用することで、フォームへの日付入力の際、カレンダーを表示して入力補助をするインターフェースを、簡単に実装できます。 jQueryを用意するjQuery UIはjQueryのプラグインであるため、jQuery本体が必要となります。 jQuery本体の準備は以前「「CrossSlide」写真や
ドラッグ&ドロップを行うにはjQuery UIの以下のサイトから Download Builder | jQuery UI UI core Draggable Droppable の3つにチェックをつけてダウンロード ドラッグ&ドロップで参考になったサイト jQuery UIのドラッグ&ドロップ(と複数選択)の解説 jQuery UIで実現! Ajaxで複数選択ドラッグ&ドロップ (1/4):パターンとライブラリで作るAjaxおいしいレシピ(5) - @IT ドラッグのエフェクトとか、どんな風にドラッグできるか一目で分かるデモ http://view.jquery.com/tags/ui/1.0.1a/demos/ui.draggable.html ドラッグ&ドロップの典型的なやつ。elementの(ドラッグ元からドラッグ先への)付け替える方法が分かった jQuery UI本家のドキュメン
Welcome to EasyUI EasyUI framework helps you build your web pages easily. GET STARTED What is EasyUI? easyui is a collection of user-interface components based on jQuery, Angular, Vue and React. easyui provides essential functionality for building modern, interactive, javascript applications. using easyui you don't need to write many javascript code, you usually define user-interface by writing so
HTMLとCSSによる表現を考える 複数のサムネイル画像を並べておき、画像をクリックするとモーダルウィンドウで拡大画像を表示するWebページを作成します。はじめに、HTML/XHTML(以下、HTML)とCSSでどのようにモーダルウィンドウを表現するか、静的なページを作って考えてみましょう。 HTMLは、ul/li要素で並べたサムネイル画像の後に、「glayLayer」と「overLayer」というid属性をつけたdiv要素を配置します。glayLayerはページ全体に重ねる半透明のレイヤーを表示するための要素で、overLayerは子ウィンドウを表示するための要素です。子ウィンドウに表示したい要素(今回はimg要素)はoverLayer内に配置します。 ▼サンプル01(HTML部分) <h1>jQueryを利用したモーダルウィンドウの作成</h1> <ul> <li><a href="i
Ninja UIはHTMLを使わずにJavaScriptで画面を描画していくUIコンポーネント。 Ninja UIはjQuery/JavaScript製のオープンソース・ソフトウェア。思うにWebサイトというのは表現力が高く、かつ自由度が高すぎるのだ。そのため見栄えにこりだすと収集がつかなくなる。またデザインセンスがないと格好いいサイトが作れない。 ボタンやアイコン アイディアがどれだけ良く、技術力があっても見栄えがぱっとしないサイトは受け入れられない。もうHTMLは書かず、JavaScriptで組んでしまうのはどうだろう。それを可能にするのがNinja UIだ。 Ninja UIはjQuery Webjutsu(Web術?)を掲げているライブラリで、枠組みだけHTML5で組み、コンポーネントの配置は全てJavaScriptだけで記述するライブラリだ。ボタンやドロワー、アイコン、ポップアッ
jQuery Core & Migrate - Git Builds UNSTABLE, NOT FOR PRODUCTION jQuery git build: script: uncompressed, minified, slim, slim minified module: uncompressed, minified, slim, slim minified jQuery 3.x git build: uncompressed, minified, slim, slim minified jQuery Migrate git build: uncompressed, minified jQuery Core - All 3.x Versions jQuery Core 3.7.1: uncompressed, minified, slim, slim minified jQuer
Note as of April 2010: While the plugin still works as it is, it has some shortcomings, and not maintained anymore. There are now plenty of alternative jQuery tree plugins, like jsTree. Note October 2010: Despite the above, I’ve moved the plugin to GitHub, fixed a bug when combining persist: “location” and prerendered: true, and released (tagged in Git) 1.4.1. Transform an unordered list into an e
jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice. What's New in jQuery UI 1.13? Compatibility with recent jQuery versions (up to 3.6): Usage of deprecated jQuery API
あけましておめでとうございます。 今年も淡々と更新をしていきます。よろしくお願い致します。 今年一発目のエントリはブラウザに分かりやすい通知を送れるスクリプトを色々とまとめてみました。 jNotify ページ全体がグレーアウトし、メッセージが強調表示されます。 他の操作がしばらくできないので、確実にメッセージを読んでもらえるようにできます。 アイコンの変更や、メッセージにHTMLを使うことも可能。 Notimoo ページの右上なんかにフェードインしながらブロックをアニメーション表示させられるJSライブラリ。 複数メッセージを連続して出すことが出来ます。 jQuery Notify bar Twitterの通知バーっぽいUIでユーザ通知できるjQueryプラグイン。 これも非常に分かりやすい通知が行えます。 jQnotice 吹き出しっぽいデザインで通知が行えます SlideNote 指定位
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く