ページ内リンクのプラグインを作成しました。

JS


簡単なページ内リンクのプラグインを作成しました。


The Link In A Page

HTML

<body>
  <div id="container">
    <header>
      <h1>The Link In A Page</h1>
    </header>
    <nav>
      <ul>
        <li class="ex01 link_button" data-from="ex01">
          <p><a href="#ex01">ex01</a></p>
        </li>
        <li class="ex02 link_button" data-from="ex02">
          <p><a href="#ex02">ex02</a></p>
        </li>
        <li class="ex03 link_button" data-from="ex03">
          <p><a href="#ex03">ex03</a></p>
        </li>
        <li class="ex04 link_button" data-from="ex04">
          <p><a href="#ex04">ex04</a></p>
        </li>
        <li class="ex05 link_button" data-from="ex05">
          <p><a href="#ex05">ex05</a></p>
        </li>
      </ul>
    </nav>
    <div id="content">
      <section id="ex01" data-to="ex01">
        <h2><span>ex01</span></h2>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
      </section>
      <section id="ex02" data-to="ex02">
        <h2><span>ex02</span></h2>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
      </section>
      <section id="ex03" data-to="ex03">
        <h2><span>ex03</span></h2>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
      </section>
      <section id="ex04" data-to="ex04">
        <h2><span>ex04</span></h2>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
      </section>
      <section id="ex05" data-to="ex05">
        <h2><span>ex05</span></h2>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
      </section>
    </div>
  </div>
</body>

jQuery

$(function(){
    //nav fixed
    var pos = $('nav').offset().top;
    var elemHeight = $('nav').outerHeight(true);

    $(window).scroll(function(){
      var nowTop = $(this).scrollTop();
      fixed($('nav'),nowTop);
      changeColor($('nav a'),'#e77b4a',nowTop);
    });

    //ページ内リンク
    $('.link_button a').linkInPage({
      'offset': 60,
      'easing': 'easeOutCubic'
    });

    //navのカラーをscrollTopによって変える
    //対応のコンテントの領域内で色を変える
    function changeColor(elem,color,nowTop){
      elem.each(function(){
        var to = $(this).attr('href');
        var toPos = $(to).offset().top - 60;
        var contentHeight = $(to).innerHeight();

        //対応のコンテントのtop位置かつそのコンテント領域内なら
        if(nowTop >= toPos && nowTop < toPos + contentHeight){
          $(this).css('color',color);
        }else{
          $(this).css('color','black');
        }
      })
    }

    //navをfixed
    function fixed(elem,nowTop){
      if(nowTop >= pos - 30){
        elem.css({
          'background': 'rgba(250,250,250,0.8)',
          'position': 'fixed',
          'top': 0 + 10
        });
        //navの高さが無くなった分、その高さ分のマージンを作る
        $('#content').css('padding-top',elemHeight);
      }else if(elem.css('position') === 'fixed'){
        if(nowTop < pos -30){
          elem.css({
            'background': 'rgba(255,255,255,0.8)',
            'position': 'relative',
            'top': 0
          });
          $('#content').css('padding-top',0);
        }
      }
    }


  });

  //プラグイン
  ;(function($){
      $.fn.linkInPage = function(options){
        var opts = $.extend({},$.fn.linkInPage.defaults,options);
        var duration = opts.duration;
        var easing = opts.easing;
        var offset = opts.offset;

        $(this).click(function(){
          var to = $(this).attr('href');
          var toPos = $(to).offset().top - offset;

          $('html,body').animate({'scrollTop': toPos},duration,easing);

          //リンク無効
          return false;
        });
      };

      $.fn.linkInPage.defaults = {
        'duration' : 300,
        'easing': 'swing',
        //margin-top
        'offset': 20
      };
    })(jQuery);

実行部分
プラグイン部分を読み込んで入れば実行可能です

//ページ内リンク
    $('.link_button a').linkInPage({
      //margin-top
      'offset': 60,
      //easing、今回はjquery.easing.jsを読みこんでいるのでeaseOutCubicを選択
      'easing': 'easeOutCubic'
      durationも任意の数値を指定できる
    });

指定文字以上の文を切り取り、文末に「...」を追加する

JS


簡単なプラグインを作成しました。


Omit

jQuery

;(function($){
  $.fn.omit = function(cnt){
    var elem = $(this);
    var mark = '...';
    elem.each(function(){
      var str_origin = $(this).text();
      //文字数でカット
      var str = str_origin.slice(0,cnt);
      //タイトル属性に元の文字列を設定
      $(this).attr('title',str_origin);
      //カットした文字列に「...」を追加
      $(this).text(str + mark);
    });

    return this;
  }
})(jQuery);

$(function(){
  //対象の要素に対してomit(引数)を実行する
  $('.omit').omit(50);
  $('.omit2').omit(25);
});

対象の要素に対して、omit(文字数)を実行すれば文字数以降の文字が切り取られ、「...」が追加されます。
要素が複数の場合も可能です。

cssで指定幅以上の文字を切り取り、末尾に「...」をつける

CSS

参考リンク → http://monopocket.jp/blog/css/2866/

指定の要素のスタイルに

例えばp要素であれば

p{
    width: 200px;
    margin: 0 auto;
   //以下３つのcssを適用する
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

これで、幅200px以上の分の場合は切り取られ、「...」が文末に付けれます。

おそらく文字制限の場合は、phpとかjQueryになるかと。

ToolTip

JS




tooltip

簡単なツールチップのプラグインを作成してみました。
data-tooltipで対象の要素を指定し、ホバーしている最中にマウス付近に表示されます。

;(function($){
      $.fn.toolTip = function(options){
        var elem = $(this);
        var opts = $.extend({},$.fn.toolTip.defaults,options);
        var explanation = opts.explanation;
        var width = opts.width;
        var fontSize = opts.fontSize;
        var color = opts.color;
        //色設定
        var colorKind = {
          cool :{
            border: '#82c1d7'
          },
          warm : {
            border: '#e0623a'
          },
          normal : {
            border: '#323333'
          }
        };

        //tooltipのデザイン、内容
        var tooltip = $('<div>')
                        .text(explanation)
                        .css({
                          'position' : 'absolute',
                          'top' : 0,
                          'left' : 0,
                          'width' : width,
                          'padding' : '5px 10px',
                          'font-size' : fontSize,
                          'background' : 'white',
                          'border' : '2px solid black',
                          'border-color' : colorKind[color]['border'],
                          'border-radius' : '5px',
                          'box-shadow' : '0 0 10px rgba(25,25,25,0.2)',
                          'display' : 'none'
                        });
        //tooltipの表示
        function showToolTip(x,y){
          elem.after(tooltip).css({
            'top': y -50,
            'left': x + 10
          }).hover(
            function(){
              $(this).next().fadeIn(600);
            },
            function(){
              $(this).next().fadeOut(200);
            }
          );
        }

        //tooltipの移動
        function moveToolTip(x,y){
          tooltip.css({
            'top': y - 50,
            'left': x + 10
          });
        }

        //座標取得、showToolTip関数実行
        $(window).mousemove(function(e){
          posX = e.pageX;
          posY = e.pageY;
          showToolTip(posX,posY);
          moveToolTip(posX,posY);
        });

        return this;
      }

      $.fn.toolTip.defaults = {
        explanation: {},
        width: '200px',
        fontSize: '13px',
        color: 'cool'
      };
    })(jQuery);

    $(function(){
      $('input[data-tooltip="1"]').toolTip({
        //必須
        explanation:'全角半角英字でご入力ください'
        //任意
        width:幅
        fontSize:フォントサイズ
        color:cool,warm,normal
      });
      $('input[data-tooltip="2"]').toolTip({
        explanation:'全角カナでご入力ください'
      });
      $('input[data-tooltip="3"]').toolTip({
        explanation:'例）example@test.com'
      });

      ループを使えば、もっと簡潔に書けます
    });

jQuery(11)

JS

Manipulation

append()

要素内部にコンテンツを追加する

appendTo()

要素の中身を他の要素に追加する

prepend()

要素内部の先頭にコンテンツを追加する

prependTo()

要素の中身を他の要素に追加する

after()

各要素の後ろにコンテンツを追加する

before()

各要素の前にコンテンツを追加する

insertAfter(A)

指定した要素をAの後ろに追加する

insertBefore(A)

指定した要素をAの前に追加する

RSS

PHP

RSSの練習でいくつかのRSSをまとめたページを作りました。

http://yuto-m.sakura.ne.jp/admin/assignment/php/rss/

以下コードです。

<?php
  $rss = simplexml_load_file("http://www.meiji.co.jp/news/meiji_press.xml");
  $i = 0;
  $suntry = array();
  foreach ($rss->channel->item as $item) {
    if($i++ > 4) { break; }
    $suntry[$i]['link'] = $item->link;
    $suntry[$i]['title'] = $item->title;
    $suntry[$i]['date'] = date('Y年m月d', strtotime($item->pubDate));
    $suntry[$i]['des'] =$item->description;
  }

  $rss = simplexml_load_file("http://www.kirin.co.jp/rss/news/release.rdf");
  $kirin = array();
  $i = 0;
  foreach ($rss->item as $item) {
    $dc = $item->children('http://purl.org/dc/elements/1.1/');
    if($i++ > 4) { break; }
    $kirin[$i]['link'] = $item->link;
    $kirin[$i]['title'] = $item->title;
    $kirin[$i]['date'] = date('Y年m月d', strtotime($dc->date));
    $kirin[$i]['des'] =$item->description;
  }

  $rss = simplexml_load_file("http://rss.sapporobeer.jp/rss/sapporo_1.xml");
  $sapporo = array();
  $i = 0;
  foreach ($rss->channel->item as $item) {
    if($i++ > 4) { break; }
    $sapporo[$i]['link'] = $item->link;
    $sapporo[$i]['title'] = $item->title;
    $sapporo[$i]['date'] = date('Y年m月d', strtotime($item->pubDate));
    $sapporo[$i]['des'] =$item->description;
  }

  $rss = simplexml_load_file("http://www.calpis.co.jp/utility/rss/xml/topics.xml");
  $i = 0;
  $calpis = array();
  foreach ($rss->channel->item as $item) {
    if($i++ > 4) { break; }
    $calpis[$i]['link'] = $item->link;
    $calpis[$i]['title'] = $item->title;
    $calpis[$i]['date'] = date('Y年m月d', strtotime($item->pubDate));
  }
?>
<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>RSSの練習</title>
  <link rel="stylesheet" href="rss.css">
  <link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
</head>
<body>
  <article>
    <h1>RSS DRINK</h1>
    <div id="container">
      <section class="suntry">
        <h2>SUNTRY</h2>
        <?php foreach ($suntry as $value) :?>
        <div class="box">
          <section class="info">
            <h3 class="date"><?php echo $value['date'];?></h3>
            <p class="title"><a href="<?php echo $value['link'];?>"><?php echo $value['title'];?></a></p>
          </section><!-- date end -->
        </div><!-- box end -->
        <?php endforeach ;?>
      </section><!-- suntry end -->
      <section class="kirin">
        <h2>KIRIN</h2>
        <?php foreach ($kirin as $value) :?>
        <div class="box">
          <section class="info">
            <h3 class="date"><?php echo $value['date'];?></h3>
            <p class="title"><a href="<?php echo $value['link'];?>"><?php echo $value['title'];?></a></p>
          </section><!-- date end -->
        </div><!-- box end -->
        <?php endforeach ;?>
      </section><!-- kirin end -->
      <section class="calpis">
        <h2>CALPIS</h2>
        <?php foreach ($calpis as $value) :?>
        <div class="box">
          <section class="info">
            <h3 class="date"><?php echo $value['date'];?></h3>
            <p class="title"><a href="<?php echo $value['link'];?>"><?php echo $value['title'];?></a></p>
          </section><!-- date end -->
        </div><!-- box end -->
        <?php endforeach ;?>
      </section><!-- calpis end -->
      <section class="sapporo">
        <h2>SAPPORO</h2>
        <?php foreach ($sapporo as $value) :?>
        <div class="box">
          <section class="info">
            <h3 class="date"><?php echo $value['date'];?></h3>
            <p class="title"><a href="<?php echo $value['link'];?>"><?php echo $value['title'];?></a></p>
          </section><!-- date end -->
        </div><!-- box end -->
        <?php endforeach ;?>
      </section><!-- sapporo end -->
    </div>
  </article>
</body>
</html>

@charset "utf-8";
  /* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
  html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

  body{
    font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    letter-spacing: 1px;
    line-height: 1.2;
  }
  a{
    text-decoration: none;
    color: black;
  }
  a:hover{
    text-decoration: underline;
  }
  h1{
    text-align: center;
    font-size: 50px;
    margin: 30px;
  }
  #container{
    width: 960px;
    margin: 0 auto;
  }
  #container>section{
    overflow: hidden;
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 2px solid #363636;
  }
  section h2{
    text-align: center;
    font-size: 50px;
  }
  section h2,section .box{
    width: 300px;
    box-sizing: border-box;
    padding: 10px 20px;
    display: inline-block;
    vertical-align: top;
    font-family: 'Ubuntu', sans-serif;
  }
  .suntry h2{
    color: #3f85ff;
    padding-top: 30px;
  }
  .kirin h2{
    color: #f11f0e;
    padding-top: 30px;
  }
  .calpis h2{
    color: #9bc9e3;
    padding-top: 15px;
  }
  .sapporo h2{
    color: #e3d70b;
    padding-top: 30px;
  }
  .box h3{
    font-size: 18px;
    margin-bottom: 10px;
    padding: 2px 10px;
    border-left: 5px solid #6eb3ff;
  }
  .box .title{
    color: #353636;
    padding-left: 8px;
  }