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

    ジョルジュくん


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


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

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

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

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

      0
        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
            1234567
            891011121314
            15161718192021
            22232425262728
            293031    
            << October 2017 >>
            My Apps
            有料アプリ

            無料アプリ

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