: javascript

テキストの横に線を引くjQueryプラグインを作ってみた(jquery.titleliner.js v1.0.0)

titleliner-imgFW

見出しとかに使われるデザイン要素で、両サイドに線を引くやつってありますよね。あれいちいち画像で作るのもなんだかスマートじゃない気がするので、jQueryプラグインでなんとかならんもんか?って事で勉強がてら作ってみました。

最初っから言い訳しておきます。

僕が初めて作ったjQueryプラグインです。プログラマーの方々が見れば、どんくさいソースだとは思いますがご容赦ください。

基本的な制作理念

まずは、以下の事を気をつけて制作しました。

  1. 線の色やフォントの大きさマージン等はCSSで調整できる事
  2. 文字の量やウインドウ幅によって自動的にサイズ調整できる事
  3. HTMLは極力シンプルな記述で実現できる事

ソース一覧

HTMLソース

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jquery.titleliner.js Demo</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="jquery.titleliner.js"></script>
<script type="text/javascript">
  $(function(){
    $('.liner-title').TitleLiner();
  });
</script>
<style type="text/css">
  .liner-title { margin: 60px auto; text-align: center; width: 90%; }
  .liner-title .liner-text { padding: 0px 20px; }
  .liner-title .liner-top { border-bottom: 1px solid rgba(0,0,0,0.2); }
  .liner-title .liner-bottom { border-top: 1px solid rgba(255,255,255,1.0); }
</style>
</head>
<body>
  <h1 class="liner-title">jquery.titleliner.js v1.0.0</h1>
</body>
</html>

プラグインソース

 (function TitleLiner($) {
	$.fn.TitleLiner=function(){
		return this.each(function(){
			$(this).wrapInner(wraper)
			       .append(lineR)
				   .prepend(lineL);
			$(this).css({ 'display' : 'block', 'position' : 'relative' });
			$(this).find("span").css({ 'display' : 'block' });
			$(this).children(".liner-text, .liner-line").css({ 'position' : 'absolute', 'top' : 0 });
			var $this = $(this);
			var changeCSS = function () {
				var linerW = $this.innerWidth();
				var linerH = $this.children(".liner-text").innerHeight();
				var linerTextW = $this.children(".liner-text").width();
				var linerTextWout = $this.children(".liner-text").outerWidth();
				var borderWt = $this.find(".liner-top").outerHeight();
				var borderWb = $this.find(".liner-bottom").outerHeight();
				var lineW = parseInt((linerW-linerTextWout)/2);
				var lineHt = parseInt((linerH/2)-borderWt);
				var lineHb = parseInt((linerH/2)-borderWb);
				$this.children(".liner-text").css({ 'width' : linerTextW, 'left' : lineW });
				$this.children(".liner-line").css({ 'width' : lineW, 'height' : linerH });
				$this.css({ 'height' : linerH });
				$this.find(".liner-top").css({ 'height' : lineHt });
				$this.find(".liner-bottom").css({ 'height' : lineHb });
				$this.find(".liner-left").css({ 'left' : borderWt });
				$this.find(".liner-right").css({ 'right' : 0 });
			}
			 changeCSS();
			 $(window).on('resize', changeCSS);
		});
	};
	var line = '<span class="liner-top"></span><span class="liner-bottom"></span>';
	var wraper = '<span class="liner-text"></span>';
	var lineL = '<span class="liner-left liner-line">'+line+'</span>';
	var lineR = '<span class="liner-right liner-line">'+line+'</span>';
})(jQuery);

使い方

Javascriptの読み込み

jquery.com からjQueryをダウンロードして読み込むか、googleのライブラリを使ってjQueryを読み込みましょう。

jquery.titleliner.jsを読み込んでください。

どのクラスまたは、IDにjquery.titleliner.jsを反映させるか指定してください。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="jquery.titleliner.js"></script>
<script type="text/javascript">
  $(function(){
    $('.liner-title').TitleLiner();
  });
</script>

HTMLの設定

任意のタグにクラスまたは、IDを指定してください。

<p class="liner-title">jquery.titleliner.js v1.0.0</p>

jquery.titleliner.jsを反映させると、下記のようなソースが生成されます。

<p class="liner-title" style="display: block; position: relative; height: **px; ">
  <span class="liner-left liner-line" style="display: block; position: absolute; top: 0px; width: **px; height: **px; left: 0px; ">
    <span class="liner-top" style="display: block; height: **px; "></span>
    <span class="liner-bottom" style="display: block; height: **px; "></span>
  </span>
  <span class="liner-text" style="display: block; position: absolute; top: 0px; width: **px; left: **px; ">
  Title Liner
  </span>
  <span class="liner-right liner-line" style="display: block; position: absolute; top: 0px; width: **px; height: **px; right: 0px; ">
    <span class="liner-top" style="display: block; height: **px; "></span>
    <span class="liner-bottom" style="display: block; height: **px; "></span>
  </span>
</p>

titleliner図にするとこんな感じです。

CSSの設定

cssの設定をしてデザインしてください。

<style type="text/css">
  .liner-title { margin: 60px auto; text-align: center; width: 90%; }
  .liner-title .liner-text { padding: 0px 20px; }
  .liner-title .liner-top { border-bottom: 1px solid rgba(0,0,0,0.2); }
  .liner-title .liner-bottom { border-top: 1px solid rgba(255,255,255,1.0); }
</style>

今後の課題

今のところセンタ揃えしかできなくて、オプションの指定で右寄せや左寄せにできたり、両サイドのspanの個数を指定できたりすると素敵かなと思います。
まぁ、のんびりと改良していきたいと思います。

Tags: , , ,