Archive for the ‘ jQuery関連 ’ Category
これ、便利そうなのでメモ的にエントリー。Twitterの入力フォームにある、残り文字数のカウントを実現してくれるjQueryのプラグインです。細かいオプションも充実していて素敵。
↑ こんな感じに実装できます。
ユニークなのは「文字数制限は140文字、残り30字になったら色を変えて警告する」といったことができる点ですな。導入やマークアップも簡単なのでお勧めです。詳細は以下からどうぞ。
これ、ちょっとメモ的にエントリー。IE6には対応していませんが、日本語も通るし、わりとよくできているので。
↑ こういうエディターをさくっと実現できます。
マークアップも簡単ですね。
$(function(){
$("textarea").htmlarea();
});
また当然のことながらコントロール部分を制御するオプションも利用可能です。CSSをオプションから制御できるのはうれしいですね。以下のチュートリアルがわかりやすいかな。
» jHtmlArea – The all NEW HTML WYSIWYG Editor for jQuery
そんなことよりデモを見たい、という方は以下からどうぞ。
» jHtmlArea Live Demo – WYSIWYG HTML Editor for jQuery
覚えておいて損はないかもですね。詳細＆ダウンロードは以下からどうぞ。
「Some Useful JavaScript & jQuery Snippets」なるエントリーがありましたよ。Part 1とPart 2がありますが、どちらも使える感じかな。ちょっとメモ的にエントリーっす。興味のない方はスルーの方向で・・・。
個人的に使いそうなものをいくつか紹介してみますかね。
var tog = false; // or true if they are checked on load
$('a').click(function() {
$("input[type=checkbox]").attr("checked",!tog);
tog = !tog;
});
↑ チェックボックスを全ON/OFF切り替え。良く使いますね。
if($(element).is(":visible") == "true") {
//The element is Visible
}
↑ ある要素が見えているかどうか。hiddenとか良く使うので。
$(document).ready(function(){
$(document).bind("contextmenu",function(e){
return false;
});
});
↑ 右クリックを禁止する。
if ($("#elementid").length) {
//it does!
}
↑ 特定の要素の存在チェック。
元記事にはもっとたくさんありますよ。よろしければどうぞ。
いつか使いそうなのでメモ的にエントリー。
jQueryから簡単にGoogle Mapsを生成することができるようになるプラグインですよ。マークアップも簡単です。
$('selector').googleMaps({
latitude: 49.26063518364422,
longitude: -123.15673828125
});
↑ こんな感じ。
またオプションも充実していますね。ピンをたてたり、コントロールを消したりとかできるようです。詳細＆ダウンロードは以下からどうぞ。
これはいつか使いたいのでさくっとメモ的にご紹介。
jQuery Roundaboutを使えば立体的にぐるぐる回るコンテンツギャラリーを作れます。横方向だけでなく、縦方向や斜め方向にも回転できてかなりかっちょいい。
↑ この右側のようなやつ。ま、これはシンプルすぎるけど。
マークアップも簡単ですな。詳細＆ダウンロードは以下からどうぞ。
なお、デモを見たい人はこちら。
これ、いつか使うかも、という意味でメモ的にエントリー。
ページの下部にオーバーレイする感じでちょっとした広告を表示させたい場合がありますよね。
↑ こういうやつ。
これってページ下部に固定しつつ、「閉じる」ボタンを実装し、Cookieにも対応させて「二度と表示させない」とさせたいときがありますよね。
そうした機能を実現してくれるのがMEERKATです。jQueryのプラグインですな。似たようなものもありますが、IE6にも対応している点が素敵です。
マークアップも簡単で、位置やらアニメーションも指定できるので便利ですよ。いつか使わなくちゃ。
詳細＆ダウンロードはこちらからどうぞ。
デモはこちらから。3種類用意されています。フルスクリーンにも対応していますね。
ちょっと個人的にタイムリーなのでメモ的にご紹介。画像にキャプションをのせられるプラグインですね。アニメーション効果も素敵。
似たようなプラグインもありますが、Captifyはマークアップが簡単なのと、2.3kbしかないのが気に入ったのでご紹介。
↑ こうやってマウスオーバーするとキャプションが現れます。
表示させたいテキストは上にもあるように、ALT属性にいれておけばOKです。AすでにLT設定してある画像だと、jQueryで一気にcaptifyクラスをつけちゃう、という手も有効かもです。
スタイリッシュなサイトを作りたいときには良いかもですね。覚えておいて損はないかと。
詳細＆ダウンロードは以下からどうぞ。
ちょっとメモ。いつか使う（ことを検討する）。どこかで紹介したっけかな・・・まぁ、いいか。
非商用だと無料で使えるグラフ描画ライブラリですね。オプションが豊富すぎてかなりいろいろできそう。
↑ こんなのがちょちょいと。
↑ ある範囲をズームさせる機能なんてのもあります。
↑ オプションのレファレンスが使いやすい。
商用だと有料、かつ、GoogleのCharts APIも相当きているので使いどころは検討したいところですが、知っておいても損はないですね。詳細＆ダウンロードは以下からどうぞ。
» Highcharts – Interactive JavaScript charts for your webpage
おっと、これは便利そう。いつか使うかもしれないのでメモ的にエントリー。
jParseはjQueryだけでXMLをパースしてくれるプラグインですな。コードがシンプルで素晴らしいですよ。たとえばこんな感じ。
$('#digg-feed').jParse({
ajaxOpts: {url: 'digg-feed.xml'},
elementTag: ['title', 'link', 'digg:category', 'digg:diggCount'],
output: '<div class="digg-entry-cont"><h4><a href="jpet1">jpet0</a></h4><p>Category: jpet2 | Comments: jpet3</p></div>',
count: '#count'
});
こうするとid=”digg-feed”にoutputの内容が突っ込まれるというわけですな。最近はXMLを読んで表示するだけのアプリでも結構便利なものが作れますからね。これはいいかも。
詳細＆ダウンロードは以下からどうぞ。
「CakePHPのAjaxヘルパーってprototypeかよ・・・」というjQueryラヴァーへ捧げるエントリー。
jQuery+CakePHPでAjaxしちゃう方法ですよ。例題として簡単なタスク管理システムつくるぜ。
↑ こういうやつ。/tasks/indexの画面す。
タスクをFormからSubmitすると下のリストに画面遷移なく追加されていく、というものです。
以下、作業ログ。
■ DB設定
こんな感じで。ちょーてきとー。
DROP TABLE IF EXISTS tasks; CREATE TABLE tasks ( id int(11) unsigned NOT NULL auto_increment, title varchar(255), created datetime NOT NULL, modified datetime NOT NULL, PRIMARY KEY (id), KEY created (created), KEY modified (modified) );
あとモデルも適当につくっておいてください。
■ jQueryから
まずはJavaScriptを書いちゃうのがわかりやすいでしょう。いじるのは「views/tasks/index.ctp」です。なお、layoutの方でjQueryを読み込んでおくのを忘れずに。
面倒だから全部貼り付けてみる。
<h2>Tasks</h2>
<?php
echo $form->create('Task', array('default'=>false));
echo $form->input('title');
echo $form->submit('Add');
echo $form->end();
?>
<ul id="tasks">
<?php foreach($tasks as $task) { ?>
<li><?= h($task['Task']['title']); ?></li>
<?php } ?>
</ul>
<script language="JavaScript">
$(function() {
$("#TaskAddForm").submit(function() {
$.post('/tasks/ajax_add', {
title: $("#TaskTitle").val()
}, function(rs) {
$("#tasks").prepend(rs);
$("#TaskTitle").val('').focus();
});
});
});
</script>
注意する点は、formがsubmitされても画面遷移しちゃわないようにform作るときに”default”をfalseにすることぐらいすかね。
■ コントローラー
で、ajaxで呼び出されるajax_addも含め、コントローラーはこんな感じ。わかりやすいようにコメントつけといたよー。「controllers/tasks_controller.php」です。
class TasksController extends AppController {
var $name = 'Tasks';
// ajax呼び出しに必要
var $components = array('RequestHandler');
// とりあえずタスクの一覧表示
function index() {
$this->set('tasks', $this->Task->findAll());
}
// ajaxで呼び出される関数
function ajax_add() {
// デバッグ情報出力を抑制
Configure::write('debug', 0);
// ajax用のレイアウトを使用
$this->layout = "ajax";
// ajaxによる呼び出し？
if($this->RequestHandler->isAjax()) {
// POST情報は$this->params['form']で取得
$title = $this->params['form']['title'];
// DBに突っ込みます
$this->Task->id = null;
$this->data['Task']['title'] = $title;
$this->Task->save($this->data);
// 表示用のデータをviewに渡す
$this->set('t', $title);
}
}
}
何点か。
■ ビュー関連
ビューは「views/tasks/ajax_add.ctp」と「views/layout/ajax.ctp」、それから先ほどJavaScriptを書いた「views/tasks/index.ctp」ですな。
まずはajaxのlayout。出力以外何もいらないので一行ね。
<?php echo $content_for_layout ?>
次にajax_add.ctp。今回要素をliで追加していくのでこんな感じ。コントローラーから渡された「t」を表示します。
<li><?php echo h($t); ?></li>
■ まとめ
ま、こんなところですかね。jQueryのコードから書いていくとまぁ、わかりやすいのでは。今回は一番典型的っぽい$.postを取り扱いましたが、他のAjaxも似たような感じでできるかと思います。ご参考までに。
なお、一番参考になったチュートリアルはこちらでした。あわせてどうぞ。
誠Biz.IDの「Webサービス図鑑」を応援中です！
