[Codeigniter-users] CodeIgniterとJQueryに連携について

Back to archive index

和泉慎一[S.Izumi] shini****@izu*****
2011年 7月 10日 (日) 14:26:25 JST


濱口様

こんにちは、和泉です。
ご質問の内容からすると、JQueryの動作が目標ということでよろしかったでしょうか?

ご質問いただいている、ファンクションについては以下のような内容で
動作を確認しました。
すべてview内への記述です。

------------- src

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"
></script>

<script type="text/javascript">
   $(function() {
       $("#image").click(function(e) {
           if (document.all) {
               rel_x = e.offsetX;
               rel_y = e.offsetY;
           } else {
               rel_x = e.pageX - $("#image").offset()["left"];
               rel_y = e.pageY - $("#image").offset()["top"];
           }
           $("#crop_x").text(rel_x); // spanへ変更の為 textへ書き換え
           $("#crop_y").text(rel_y); // spanへ変更の為 textへ書き換え
       }); // 最後の括弧追加
   }); // 最後の括弧追加
</script>
</head>

<body>
    <img src="http://k.yimg.jp/images/top/sp/logo.gif" id="image">
    <div>
        x=<span id="crop_x"></span>
    </div>
    <div>
        y=<span id="crop_y"></span>
    </div>
</body>
</html>

--------------- // src

# クリック内容に応じて遷移する場合は、質問URLにあるように、
# $("#test").load("load.php?id=" + ids);
# これを適宜変更追記すれば良いかと思います。

...となるとAJAXの質問になってしまいますが。

-------------------------------------------
和泉慎一 (。・ω・。)ノぁぃ♪
shini****@izu*****


2011年7月10日7:19 HAMAGUCHI Seiji <hamag****@smile*****>:
> 参加者の皆さん
>
> いつもお世話になっております。濱口@スマイルロジックです。
> 現在、CodeIgniter 2.0.x でシステムを構築しています。
>
> タイトルの通り、CodeIgniterとJQueryに連携について質問があります。
>
> JavaとPHPの連携は、以下のページで何となく理解できたのですが、
> http://e0166.blog89.fc2.com/blog-entry-363.html
> これを、CodeIgniterに適用する場合はどうすれば様のでしょうか?
>
> やりたい事は、画像の上下(半分から上・半分から下)を認識して、
> 半分から上をクリックした場合、ある処理を行い、下をクリックした場合、
> 別の処理をするといった具合です。JQueryで画像の座標を取得するのは
> 以下のようにすれば良いのは判ったのですが...
>
> <script type="text/javascript">
> <!--//
>    $(function() {
>        $("#image").click(function(e) {
>            if (document.all) {
>                rel_x = e.offsetX;
>                rel_y = e.offsetY;
>            } else {
>                rel_x = e.pageX - $("#image").offset()["left"];
>                rel_y = e.pageY - $("#image").offset()["top"];
>            }
>            $("#crop_x").val(rel_x);
>            $("#crop_y").val(rel_y);
>
> お知恵を頂けると幸いです。以上、よろしくお願いします。
>
> --
> スマイルロジック(smileLogic)
> HAMAGUCHI Seiji
> mail: hamag****@smile*****
> tel: 090-6168-3463
> web: http://smilelogic.jp/
> titter : http://twitter.com/smilelogic_jp/
> Skype: mako10z
>
> _______________________________________________
> Codeigniter-users mailing list
> Codei****@lists*****
> http://lists.sourceforge.jp/mailman/listinfo/codeigniter-users
>
>




Codeigniter-users メーリングリストの案内
Back to archive index