0
    無事に jQuery UI も使えるようになり、
    div要素もドラッグできるようになりました

    ジョルジュくん


    今回は、div をドラッグするために記述した内容について
    ちょっと説明したいと思います


    0
      ひょんなことから、ホームページを作ることになって、
      見た目をよくするために、スライドショーなんか使いたいな〜
      なんて思ったのはいいけれど、そう簡単にうまくいくわけはなく...

      あ〜でもない、こ〜でもないと
      最終的に、jQuery + jQuery UI とやらを使うことになりました

      で、何とかできたものの完全には理解できていないので、
      ブログの更新がてら、一歩ずつ勉強していくことにしました
      ※このブログは、JUGEMを使用しています

      jQuery UI [ホームページへ]
      jQuery UI

      1
      jQuery で記事を折り畳もう!ということで、
      やってみました

      !...実は今、見てはいけないものを見てしまいました
      でも、見ていないフリをして先に進みたいと思います

      ...

      ということで、
      まずは、折り畳みに使う jQuery を追加します(赤いとこ)
      <script type="text/javascript"> 
           $(function(){
                $("a[href^='http://']").attr("target","_blank");
                $(".open").click(function(){
                     $("#slideBox").slideToggle("slow");
                });
           });
      </script>
      *ひとつ前の記事の jQuery 記述部分に追加しています

      次に、CSS の部分を追加します(赤いとこ)
      /* divの色をグレーに変えてみます */
      .divColorGray{background:#eeeeee; padding:10px}
      /* divの折りたたみ */
      .open{
           background: #ffffff;
           color: #3399dd;
           cursor: pointer;
           width:100px;
           padding: 5px
           }
      #slideBox{
           display:none;
           }

      仕上げに、HTMLで<p>と<div>に
      折り畳みに使う命令を記述します(赤いとこ)
      <div> の部分は前回つくった CSSを使い、
      薄いグレーで表示するようにもしています(青いとこ)
      <p class="open">[ 記事の続き ]</p>
      <div id="slideBox" class="divColorGray">
      中身がでてきました<br>
      でてきたでしょ?<br>
      わかりやすく<div>の中はグレーで表示してます<br>
      色が必要なければ class="divColorGray"を消せばいいですよ<br>
      </div>
      <p>の中身をクリックすると、<div>が開くようになります
      class="open"と、id="slideBox"が連動するんでしょうね

      さてさて、うまく動いてくれるでしょうか?
      ↓↓この下の[記事の続き]ってとこをクリックします↓↓↓↓

      [ 記事の続き ]

      中身がでてきました
      でてきたでしょ?
      わかりやすく<div>の中はグレーで表示してます
      色が必要なければ class="divColorGray"を消せばいいですよ
      ↑↑この上に出てきますよ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑


      で、「見てはいけないもの」が何か?っていうと
      ...
      ...
      ...ブログを書くところに「記事の続き」ってのを書く場所がありました
      ...当たり前のハナシ?...なの?

      0

        このブログは、JUGEMを利用しています
        Tap Jockey のホームページを作るために、
        ロリポップのレンタルサーバーを使っていたので、
        無料のロリポブログ = JUGEMでブログ ってことになりました

        で、プログラムのことを書こうとすると、
        記事がなが〜くなっちゃって、
        複数の記事を表示するときに見にくいんですよね
        だから記事を折り畳みたいな...
        と思って、jQueryとやらを使おうと試みました

        あと、jQueryなんて使ってたら、
        なんかおしゃれなブログになりそうですし...(違う?)

        ということで、時間がかかると思いますが
        記事を折り畳めるように jQueryを勉強していきます


        そんなこんなで、jQueryってJUGEMでどうやって使うんだ?と調べた結果を報告

        JUGEMにログインしてからの
        [デザイン] > [HTML・CSS編集]から
        [HTML編集フォーム]のボックスの中に
        <script type="text/javascript" src="http://js.jugem.jp/jquery/1.3.2/jquery.min.js"></script>
        の一文を入れるといいようです
        ココですね(赤いとこ)

        <link rel="alternate" media="handheld" type="application/xhtml+xml" href="{mobile_url}" />
        <script type="text/javascript" src="./template/js/cookie.js"></script>
        <script type="text/javascript" src="http://js.jugem.jp/jquery/1.3.2/jquery.min.js"></script>

        ん〜でから、昨日はさらにその下に
        「外部リンクを別タブで開くようにする」ために、
        この5行を追加した次第です(青いとこ)

        <link rel="alternate" media="handheld" type="application/xhtml+xml" href="{mobile_url}" />
        <script type="text/javascript" src="./template/js/cookie.js"></script>
        <script type="text/javascript" src="http://js.jugem.jp/jquery/1.3.2/jquery.min.js"></script>

        <script type="text/javascript"> 
             $(function(){
                  $("a[href^='http://']").attr("target","_blank");
             });
        </script>

        これはまぁおそらく、
        「http://」で始まるリンクは別のタブで表示しますよ〜
        ってことなのだと思います
        *Safari は、別ウィンドウで開きましたけど


        え?なにげに jQueryの説明のところが薄いグレーになってますね
        これ CSSっていうんですよ、エッヘン!...って、
        世間では当たり前かもしれませんが、
        初心者なので大目に見てください
        jQueryと一緒に勉強しなくちゃいけないようですし


        ということで、これは
        [デザイン] > [HTML・CSS編集]
        [CSS編集フォーム]の中の...え〜
        どこに書こうかな?
        まぁわかりにくいのでとりあえず一番下に

        /* divの色をグレーに変えてみます */
        .divColorGray{background:#eeeeee; padding:10px}

        と追加して、
        ブログを書くときに <HTMLモード>

        <div class="divColorGray">
        ここはdivの中身です<br>
        背景がグレーになりますよ<br>
        きっとね<br>
        </div>

        って書いてみたら...

        ここはdivの中身です
        背景がグレーになりますよ
        きっとね

        できました

        終わり

        ...

        はやく記事を折り畳まなきゃ...


        0
          外部リンクをタブで開く
          ということで Google を開いてみる

          >> Google

          ...タブじゃなくて別ウィンドウで開いた...
          Safari で確認したからかな?

          おぉ!Firefoxだとタブで開いた 

          jQuery というか JavaScript でさえ全く理解していないので
          少しずつでも、いい感じのブログにするために勉強していきます

          [参考]


          1

          Calendar
          S M T W T F S
                1
          2345678
          9101112131415
          16171819202122
          23242526272829
          3031     
          << December 2018 >>
          My Apps
          有料アプリ

          無料アプリ

          Selected entries
          Categories
          AdSense
          Sponsored Links
          Archives
          Recent comment
          Links
          Profile
          Search this site.
          Others
          Mobile
          qrcode
          powered
          無料ブログ作成サービス JUGEM