質問編集履歴

2 質問方法の変更

beginner_t

beginner_t score 699

2017/11/18 09:40  投稿

ドロワーメニューのカスタマイズ
いつもお世話になっております。
表題の件ですが、
下記URLにてwordpressのテーマを製作しております。
ドロワーメニューにプラグイン「Drawer」を利用しており、wordpressのカスタムメニューとして、表示しています。
対象URL:[サイト](http://master.t0m0t.com/)
【実現したい事】
・<ul class="drawer-menu">を指定してiScrollのスクロール用のstyleを入れたい。
drawerではメニューの数が多くなるとiScrollによって、ドロワーメニュー内がスクロールできるようになっています。
その際のstyleが<nav class="drawer-nav" role="navigation">直下に初めに記載されているタグに挿入されるようになっているようです。
iScrollによって挿入されるstyleタグ
```html
style="transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1); transition-duration: 0ms; transform: translate(0px, 0px) translateZ(0px);"
```
```html
<body class="drawer drawer--left">
 <header role="banner">
   <button type="button" class="drawer-toggle drawer-hamburger">
     <span class="sr-only">toggle navigation</span>
     <span class="drawer-hamburger-icon"></span>
   </button>
   <nav class="drawer-nav" role="navigation">
     <ul class="drawer-menu">
       <li><a class="drawer-brand" href="#">Brand</a></li>
       <li><a class="drawer-menu-item" href="#">Nav1</a></li>
       <li><a class="drawer-menu-item" href="#">Nav2</a></li>
     </ul>
   </nav>
 </header>
```
上記の場合は<ul class="drawer-menu">にスクロール用のstyleが挿入され、正常に動作しますが、
```html
<body class="drawer drawer--left">
 <header role="banner">
   <button type="button" class="drawer-toggle drawer-hamburger">
     <span class="sr-only">toggle navigation</span>
     <span class="drawer-hamburger-icon"></span>
   </button>
   <nav class="drawer-nav" role="navigation">
   <h2 class="drawer-brand">Brand</h2>
     <ul class="drawer-menu">
       <li><a class="drawer-menu-item" href="#">Nav1</a></li>
       <li><a class="drawer-menu-item" href="#">Nav2</a></li>
     </ul>
   </nav>
 </header>
```
このような場合は<ul class="drawer-menu">にstyleがつかずに、
<nav>の直下にある<h2 class="drawer-brand">Brand</h2>にstyleが挿入されてしまいます。
iScrollはの利用方法は
```javascript
var myScroll = new IScroll('#wrapper', {
   mouseWheel: true,
   scrollbars: true
});
```
上記のようにidを指定することはできるのですが、
drawerでは上記のクラスの指定している場所がわかりません。
```javascript
/*!
* jquery-drawer v3.2.2
* Flexible drawer menu using jQuery, iScroll and CSS.
* http://git.blivesta.com/drawer
* License : MIT
* Author : blivesta <design@blivesta.com> (http://blivesta.com/)
*/
;(function umd(factory) {
   'use strict';
   if (typeof define === 'function' && define.amd) {
       define(['jquery'], factory);
   } else if (typeof exports === 'object') {
       module.exports = factory(require('jquery'));
   } else {
       factory(jQuery);
   }
}(function Drawer($) {
   'use strict';
   var namespace = 'drawer';
   var touches = typeof document.ontouchstart != 'undefined';
   var __ = {
       init: function init(options) {
           options = $.extend({
               iscroll: {
                   mouseWheel: true,
                   scrollbars: true,
                   preventDefault: false
               },
               showOverlay: true
           }, options);
           __.settings = {
               state: false,
               events: {
                   opened: 'drawer.opened',
                   closed: 'drawer.closed'
               },
               dropdownEvents: {
                   opened: 'shown.bs.dropdown',
                   closed: 'hidden.bs.dropdown'
               }
           };
           __.settings.class = $.extend({
               nav: 'drawer-nav',
               toggle: 'drawer-toggle',
               overlay: 'drawer-overlay',
               open: 'drawer-open',
               close: 'drawer-close',
               dropdown: 'drawer-dropdown'
           }, options.class);
           return this.each(function instantiateDrawer() {
               var _this = this;
               var $this = $(this);
               var data = $this.data(namespace);
               if (!data) {
                   options = $.extend({}, options);
                   $this.data(namespace, { options: options });
                   __.refresh.call(_this);
                   if (options.showOverlay) {
                       __.addOverlay.call(_this);
                   }
                   $('.' + __.settings.class.toggle).on('click.' + namespace, function toggle() {
                       __.toggle.call(_this);
                       return _this.iScroll.refresh();
                   });
                   $(window).on('resize.' + namespace, function close() {
                       __.close.call(_this);
                       return _this.iScroll.refresh();
                   });
                   $('.' + __.settings.class.dropdown)
                       .on(__.settings.dropdownEvents.opened + ' ' + __.settings.dropdownEvents.closed, function onOpenedOrClosed() {
                       return _this.iScroll.refresh();
                   });
               }
           }); // end each
       },
       refresh: function refresh() {
           this.iScroll = new IScroll(
               '.' + __.settings.class.nav,
               $(this).data(namespace).options.iscroll
           );
       },
       addOverlay: function addOverlay() {
           var $this = $(this);
           var $overlay = $('<div>').addClass(__.settings.class.overlay + ' ' + __.settings.class.toggle);
           return $this.append($overlay);
       },
       toggle: function toggle() {
           var _this = this;
           if (__.settings.state) {
               return __.close.call(_this);
           } else {
               return __.open.call(_this);
           }
       },
       open: function open() {
           var $this = $(this);
           if (touches) {
               $this.on('touchmove.' + namespace, function disableTouch(event) {
                   event.preventDefault();
               });
           }
           return $this
               .removeClass(__.settings.class.close)
               .addClass(__.settings.class.open)
               .drawerCallback(function triggerOpenedListeners() {
               __.settings.state = true;
               $this.trigger(__.settings.events.opened);
           });
       },
       close: function close() {
           var $this = $(this);
           if (touches) $this.off('touchmove.' + namespace);
           return $this
               .removeClass(__.settings.class.open)
               .addClass(__.settings.class.close)
               .drawerCallback(function triggerClosedListeners() {
               __.settings.state = false;
               $this.trigger(__.settings.events.closed);
           });
       },
       destroy: function destroy() {
           return this.each(function destroyEach() {
               var _this = this;
               var $this = $(this);
               $('.' + __.settings.class.toggle).off('click.' + namespace);
               $(window).off('resize.' + namespace);
               $('.' + __.settings.class.dropdown).off(__.settings.dropdownEvents.opened + ' ' + __.settings.dropdownEvents.closed);
               _this.iScroll.destroy();
               $this
                   .removeData(namespace)
                   .find('.' + __.settings.class.overlay)
                   .remove();
           });
       }
   };
   $.fn.drawerCallback = function drawerCallback(callback) {
       var end = 'transitionend webkitTransitionEnd';
       return this.each(function setAnimationEndHandler() {
           var $this = $(this);
           $this.on(end, function invokeCallbackOnAnimationEnd() {
               $this.off(end);
               return callback.call(this);
           });
       });
   };
   $.fn.drawer = function drawer(method) {
       if (__[method]) {
           return __[method].apply(this, Array.prototype.slice.call(arguments, 1));
       } else if (typeof method === 'object' || !method) {
           return __.init.apply(this, arguments);
       } else {
           $.error('Method ' + method + ' does not exist on jQuery.' + namespace);
       }
   };
}));
```
 
どのように編集または追記をすれば、任意のIDにiScrollのstyleをつけることができるのでしょうか?  
 
ご教授お願いできないでしょうか。
宜しくお願い致します。
  • JavaScript

    38574 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQueryプラグイン

    839 questions

    jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

  • WordPress

    15853 questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

1 文言の変更

beginner_t

beginner_t score 699

2017/11/16 17:49  投稿

いつもお世話になっております。
表題の件ですが、
下記URLにてwordpressのテーマを製作しております。
ドロワーメニューにプラグイン「Drawer」を利用しており、wordpressのカスタムメニューとして、表示しています。
対象URL:[サイト](http://master.t0m0t.com/)
【実現したい事】
・<ul class="drawer-menu">を指定してiScrollのスクロール用のstyleを入れたい。
drawerではメニューの数が多くなるとiScrollによって、ドロワーメニュー内がスクロールできるようになっていますが、
その際のstyleが<nav class="drawer-nav" role="navigation">直下のタグに挿入されるようになっています。
drawerではメニューの数が多くなるとiScrollによって、ドロワーメニュー内がスクロールできるようになっています。
その際のstyleが<nav class="drawer-nav" role="navigation">直下に初めに記載されているタグに挿入されるようになっているようです。
iScrollによって挿入されるstyleタグ
```html
style="transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1); transition-duration: 0ms; transform: translate(0px, 0px) translateZ(0px);"
```
```html
<body class="drawer drawer--left">
 <header role="banner">
   <button type="button" class="drawer-toggle drawer-hamburger">
     <span class="sr-only">toggle navigation</span>
     <span class="drawer-hamburger-icon"></span>
   </button>
   <nav class="drawer-nav" role="navigation">
     <ul class="drawer-menu">
       <li><a class="drawer-brand" href="#">Brand</a></li>
       <li><a class="drawer-menu-item" href="#">Nav1</a></li>
       <li><a class="drawer-menu-item" href="#">Nav2</a></li>
     </ul>
   </nav>
 </header>
```
上記の場合は<ul class="drawer-menu">にスクロール用のstyleが挿入され、正常に動作しますが、
```html
<body class="drawer drawer--left">
 <header role="banner">
   <button type="button" class="drawer-toggle drawer-hamburger">
     <span class="sr-only">toggle navigation</span>
     <span class="drawer-hamburger-icon"></span>
   </button>
   <nav class="drawer-nav" role="navigation">
   <h2 class="drawer-brand">Brand</h2>
     <ul class="drawer-menu">
       <li><a class="drawer-menu-item" href="#">Nav1</a></li>
       <li><a class="drawer-menu-item" href="#">Nav2</a></li>
     </ul>
   </nav>
 </header>
```
このような場合は<ul class="drawer-menu">にstyleがつかずに、
<nav>の直下にある<h2 class="drawer-brand">Brand</h2>にstyleが挿入されてしまいます。
iScrollはの利用方法は
```javascript
var myScroll = new IScroll('#wrapper', {
   mouseWheel: true,
   scrollbars: true
});
```
上記のようにidを指定することはできるのですが、
drawerでは上記のクラスの指定している場所がわかりません。
```javascript
/*!
* jquery-drawer v3.2.2
* Flexible drawer menu using jQuery, iScroll and CSS.
* http://git.blivesta.com/drawer
* License : MIT
* Author : blivesta <design@blivesta.com> (http://blivesta.com/)
*/
;(function umd(factory) {
   'use strict';
   if (typeof define === 'function' && define.amd) {
       define(['jquery'], factory);
   } else if (typeof exports === 'object') {
       module.exports = factory(require('jquery'));
   } else {
       factory(jQuery);
   }
}(function Drawer($) {
   'use strict';
   var namespace = 'drawer';
   var touches = typeof document.ontouchstart != 'undefined';
   var __ = {
       init: function init(options) {
           options = $.extend({
               iscroll: {
                   mouseWheel: true,
                   scrollbars: true,
                   preventDefault: false
               },
               showOverlay: true
           }, options);
           __.settings = {
               state: false,
               events: {
                   opened: 'drawer.opened',
                   closed: 'drawer.closed'
               },
               dropdownEvents: {
                   opened: 'shown.bs.dropdown',
                   closed: 'hidden.bs.dropdown'
               }
           };
           __.settings.class = $.extend({
               nav: 'drawer-nav',
               toggle: 'drawer-toggle',
               overlay: 'drawer-overlay',
               open: 'drawer-open',
               close: 'drawer-close',
               dropdown: 'drawer-dropdown'
           }, options.class);
           return this.each(function instantiateDrawer() {
               var _this = this;
               var $this = $(this);
               var data = $this.data(namespace);
               if (!data) {
                   options = $.extend({}, options);
                   $this.data(namespace, { options: options });
                   __.refresh.call(_this);
                   if (options.showOverlay) {
                       __.addOverlay.call(_this);
                   }
                   $('.' + __.settings.class.toggle).on('click.' + namespace, function toggle() {
                       __.toggle.call(_this);
                       return _this.iScroll.refresh();
                   });
                   $(window).on('resize.' + namespace, function close() {
                       __.close.call(_this);
                       return _this.iScroll.refresh();
                   });
                   $('.' + __.settings.class.dropdown)
                       .on(__.settings.dropdownEvents.opened + ' ' + __.settings.dropdownEvents.closed, function onOpenedOrClosed() {
                       return _this.iScroll.refresh();
                   });
               }
           }); // end each
       },
       refresh: function refresh() {
           this.iScroll = new IScroll(
               '.' + __.settings.class.nav,
               $(this).data(namespace).options.iscroll
           );
       },
       addOverlay: function addOverlay() {
           var $this = $(this);
           var $overlay = $('<div>').addClass(__.settings.class.overlay + ' ' + __.settings.class.toggle);
           return $this.append($overlay);
       },
       toggle: function toggle() {
           var _this = this;
           if (__.settings.state) {
               return __.close.call(_this);
           } else {
               return __.open.call(_this);
           }
       },
       open: function open() {
           var $this = $(this);
           if (touches) {
               $this.on('touchmove.' + namespace, function disableTouch(event) {
                   event.preventDefault();
               });
           }
           return $this
               .removeClass(__.settings.class.close)
               .addClass(__.settings.class.open)
               .drawerCallback(function triggerOpenedListeners() {
               __.settings.state = true;
               $this.trigger(__.settings.events.opened);
           });
       },
       close: function close() {
           var $this = $(this);
           if (touches) $this.off('touchmove.' + namespace);
           return $this
               .removeClass(__.settings.class.open)
               .addClass(__.settings.class.close)
               .drawerCallback(function triggerClosedListeners() {
               __.settings.state = false;
               $this.trigger(__.settings.events.closed);
           });
       },
       destroy: function destroy() {
           return this.each(function destroyEach() {
               var _this = this;
               var $this = $(this);
               $('.' + __.settings.class.toggle).off('click.' + namespace);
               $(window).off('resize.' + namespace);
               $('.' + __.settings.class.dropdown).off(__.settings.dropdownEvents.opened + ' ' + __.settings.dropdownEvents.closed);
               _this.iScroll.destroy();
               $this
                   .removeData(namespace)
                   .find('.' + __.settings.class.overlay)
                   .remove();
           });
       }
   };
   $.fn.drawerCallback = function drawerCallback(callback) {
       var end = 'transitionend webkitTransitionEnd';
       return this.each(function setAnimationEndHandler() {
           var $this = $(this);
           $this.on(end, function invokeCallbackOnAnimationEnd() {
               $this.off(end);
               return callback.call(this);
           });
       });
   };
   $.fn.drawer = function drawer(method) {
       if (__[method]) {
           return __[method].apply(this, Array.prototype.slice.call(arguments, 1));
       } else if (typeof method === 'object' || !method) {
           return __.init.apply(this, arguments);
       } else {
           $.error('Method ' + method + ' does not exist on jQuery.' + namespace);
       }
   };
}));
```
ご教授お願いできないでしょうか。
宜しくお願い致します。
  • JavaScript

    38574 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQueryプラグイン

    839 questions

    jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

  • WordPress

    15853 questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る