ラベル jQuery の投稿を表示しています。 すべての投稿を表示
ラベル jQuery の投稿を表示しています。 すべての投稿を表示

2013年12月6日金曜日

デフォルトのスクロールバーを非表示にしてかっこいいスクロールバーを使用できるようにするjQueryプラグイン

デフォルトのスクロールバーを非表示にしてかっこいいスクロールバーを使えるようにするjQueryプラグインのご紹介です。
実はあまりデフォルトのスクロールバーは好きではないので、何かいいものが無いかと探していた時に見つけました。
その名もperfect-scrollbarです。

プロジェクトページはこちら
Githubはこちら


使い方

まず、サイトからZIPファイルをダウンロードします。
ZIPファイルを解凍したら、srcディレクトリ内にある下記の3ファイルを使用します。

  • jquery.mousewheel.js
  • perfect-scrollbar.js
  • perfect-scrollbar.css

上記のファイルを使用したい箇所で読み込みます。

<link href="/css/perfect-scrollbar.css" rel="stylesheet" type="text/css">
<script src="/js/perfect-scrollbar.mousewheel.js"></script>
<script src="/js/perfect-scrollbar.js"></script>

perfect-scrollbarを呼び出します。

<script type="text/javascript">
jQuery(function() {
  jQuery("div#scroll").perfectScrollbar();
});
</script>

スクロールバーが必要なところに下記のようにCSSを設定します。
(必須のもののみ記述しています)

div#scroll 
{
    position : relative;
    overflow : hidden;
    width    : 200px;  // ココはお好みで
    height   : 200px;  // ココもお好みで
}

実装のサンプルはこんな感じになります。

<!DOCTYPE html>
<html>
<head>
<title>perfect-scrollbarの実装サンプル</title>
<link href="/css/perfect-scrollbar.css" rel="stylesheet" type="text/css">
<script src="/js/perfect-scrollbar.mousewheel.js"></script>
<script src="/js/perfect-scrollbar.js"></script>
<script type="text/javascript">
jQuery(function() {
  jQuery("div#scroll").perfectScrollbar();
});
</script>
<style type="text/css">
div#scroll
{
    position : relative;
    overflow : hidden;
    width    : 200px;
    height   : 200px;
}
</style>
</head>
<body>
<div id="scroll">
  <ul>
    <li>スクロール1</li>
    <li>スクロール2</li>
    <li>スクロール3</li>
    <li>スクロール4</li>
    <li>スクロール5</li>
    <li>スクロール6</li>
    <li>スクロール7</li>
    <li>スクロール8</li>
    <li>スクロール9</li>
  </ul>
</div>
</body>
</html>

これでデフォルトのスクロールバーのデザインに悩まされずにすみますね!

2013年11月27日水曜日

動的に共通のクラス名を持つ要素の高さを揃える

動的に横で配置されているボックスの高さを揃える際に、作成したコードをjQueryプラグイン化してみました。
下記がコードになります。

(function(jQuery) {
  jQuery.fn.height_trim = function(options) {
    var target = options['target'];
    var max_height = 0;

    jQuery(target).each(function() {
      jQuery(this).height("auto");
      var box_height = jQuery(this).height();
      if (max_height < box_height) {
        max_height = box_height;
      }
    });
    jQuery(target).height(max_height);
  }
})(jQuery);

処理内容としては最大の高さを保持する変数し、指定されたクラスが指定されているボックスの高さをループで比べていきループの処理終了後に、指定されているクラスの高さを変更します。
動的に変更するため、ループの最初に「jQuery(this).height("auto")」を指定することで全てのボックスの高さを初期化(自動)に合わせています。

使い方

<script type="text/javascript">
jQuery(function() {
  jQuery(document).height_trim({"target" : "クラス名セレクタ"});
});
</script>