jQuery プラグイン開発の学習は実践から始まります メニュー プラグイン開発_jquery

これは高度なテクニックではありませんが、それでも初心者にとってはかなり難しいです。初心者の場合は、この記事から何かを学ぶことができれば幸いです。専門家の場合は、貴重なコメントや提案を残していただければ幸いです

1. どのプラグインを使用すればよいですか?
Web サイトや WEB アプリケーション システムで使用でき、外観を柔軟にカスタマイズでき、シンプルで使いやすく、拡張しやすく、安定したメニュー プラグインを実装したいと考えています。 Web サイトのメイン ナビゲーション バーまたは管理バックグラウンドで使用できます。

2. 望ましい効果は何ですか?
通常、メニューは折りたたまれた状態にあり、その中にマウスを移動すると、その下位のメニューが表示されます。HTML タグを使用してメニューの構造を設定することも、配列を使用して動的に生成します。

3. デザイン機能

画像の説明
メニュー項目のデフォルトの状態。
下位メニューがあり、そこにマウスを移動した状態。
間隔 (グループ化効果用)
下位レベルのメニューがあり、そこにマウスが移動していない状態です。
縦型レイアウトには下位メニューがあり、そこにマウスを移動したときの状態が表示されます。
フォーカスを取得した状態。
その他の機能
すべてのメニュー状態のスタイルは CSS を通じて制御され、必要に応じて柔軟に変更できます。
HTML と JavaScript を通じてメニューを生成します。
メニュー項目のクリックコールバック関数とジャンプアドレスを指定します(コールバック関数を指定する場合、URLアドレスは設定されませんが、URLアドレスはコールバック関数に渡されます)。
4. 機能を実装するには?
1. CSS スタイルを使用して外観を制御します。
*CSS 名の競合を避けるために、プラグインの名前空間を決定する必要があり、その下のすべてのスタイルはこの名前空間の下にあります。
2. メニュー タグの選択
* 一般的に、メニューを実装するほとんどのタグはリスト タグ

を選択しますが、これも例外ではありません。 。
メニュー項目:

gt;メニュー項目の表示名

3. 制御方法UL タグを表示するには
* CSS を使用して記号とインデントを削除します。
* CSS を使用して横方向に配置します。
(1) が最も一般的に使用されます。 : left;); しかし、この方法の最大の問題は、この方法があまり好きではないことです。
(2) インライン (表示: inline-block) メソッドを使用します。現在知られている問題は、この問題について説明した特別な記事がインターネット上にあることです。詳細。
※この方法を使ったところ、ブロック間に10px程度の隙間ができてしまうという小さな問題がありました。 HTML コード内のタグ間のギャップ (改行) を削除すると、これらのギャップはなくなりましたが、コードの構造が破壊され、動的に生成される場合は許容範囲内になります。そこで私は別の解決策を考えました。それは、各ブロック (

タグ) の左マージンを -10px に設定し、

の左内側マージンを 10px に設定することです。
5 . ブラウザの互換性
IE6 および IE7 では関連するテストは実施されていません。
6. 関数の実装と呼び出し
スタイル コントロール

コードをコピーします コードは次のとおりです:

コードの表示
/*名前の競合を避けるために、このプラグインのすべてのスタイルをこのクラスの下に置きます*/
.ctcx-menu
{
font-サイズ :14px;
}
.ctcx-menu ul
{
list-style-type:none;
margin:0;
パディング:0;
}
/*オフセットを設定*/
.ctcx-menu ul.offset
{
position:relative;
top:-32px;
left:100px;
}
.ctcx-menu ul li /*メニュー項目のスタイル*/
{
width:100px;
height:30px;
line-height:30px;
text-align:center ;
vertical-align:top;
margin:0;
padding:0;
}
/*メニュー項目のスタイル*/
.ctcx-menu a
{
表示:ブロック;
高さ:100%;
ボーダー:1px ソリッド #999;
背景色:#FFF;
テキスト装飾:なし;
カラー:# 000 ;
}
.ctcx-menu a:hover
{
背景色:#999;
カラー:#FFF;
}
.ctcx-menu a : active{}
/*水平メニュー*/
.ctcx-menu .horizo​​ntal
{
padding-left:7px;
}
.ctcx-menu .horizo​​ntal li
{
display:inline-block;
margin-left:-7px;
}
.ctcx-menu .horizo​​ntal li.item-has-children > a /*Have submenu メニュー項目style*/
{
}
.ctcx-menu .horizo​​ntal li.spacing /*水平方向の間隔*/
{
高さ:30px;
幅:10px;背景色:#000;
}
/*vertical menu*/
.ctcx-menu .vertical
{
}
.ctcx-menu .vertical li
{
margin-left:0px;
}
.ctcx-menu .vertical li.item-has-children > /*サブメニューのあるメニュー項目スタイル*/
{
}
.ctcx-menu .vertical li.spacing /*垂直間隔*/
{
高さ:10px;
幅:100px;
背景色:# 000;
}


プラグイン コード


コードをコピー コードは次のとおりです:

コードの表示
(function ($) {
$.fn.menu = function (options) {
if (typeof options != '未定義' && options.constructor === Array) options = { data: options };
var opts = $.extend({}, $.fn.menu.defaults, options);
var _tempMenuData = [];
// 戻り値级别
function getLevel(id) {
var _level = 0;
var _o = getMenuData(id);
while (_o != null) {
_level ;
_o = getMenuData(_o.pid);
}
return _level;
}
// 戻り値数对
function getMenuData(id) {
for (var i = 0; i if (opts.data[i].id == id)
return opts.data[i];
}
null を返す;
}
// 生成されたHTML
function getHtml(pid) {
var _li_data = getData(pid);
if (_li_data.length == 0) return null;
変数_ul = $('
');
$.each(_li_data, function (i, _d) {
var _children = getHtml(_d.id);
変数_li = $('
').appendTo(_ul);
if (_d.n == null || _d.n.length == 0) {
_li.addClass('spacing');
} else if (typeof _d.fn === '関数') {
$(' ').html(_d.n)
.click(function () {
_d.fn(_d.url);
}) .appendTo(_li);
} else if (_d.url.length > 0) {
$('') .html(_d.n).appendTo(_li);
}
if (_children != null) {
_li.addClass('item-has-children');
_children.appendTo(_li);
_li.bind({
マウスオーバー: function () {
_children.show();
},
マウスアウト: function () {
_children.hide();
}
});
}
})
if (pid == null && opts.type == 1) {
_ul.addClass('horizo​​ntal');
} else {
var _level = getLevel(pid );
_レベル > 0 && _ul.hide();
_ul.addClass('vertical');
if (_level > opts.type)
_ul.addClass('offset');
}
return _ul;
}
// 返下级データ数组
function getData(pid) {
var _data = [];
_tempMenuData = $.grep(_tempMenuData, 関数 (_d) {
if (_d.pid == pid) {
_data.push(_d);
return true;
}
false を返す;
}, true);
return _data;
}
return this.each(function () {
var me = $(this);
me.addClass('ctcx-menu');
if ( opts.data != null && opts.data.length > 0) {
$.merge(_tempMenuData, opts.data);
me.append(getHtml(null));
}else {
。 ; } ); $.fn.menu.defaults = {
type: 1, //メニューの表示モード (主に、最初のレベルが水平か垂直かを指します。デフォルトは水平 1、垂直です) 0)
/*
data : メニューの配列データを動的に生成します。このデータを指定すると、メニューはこのデータで埋められます (メニュー内の元のデータは置き換えられます)
データ形式: [menu] ,menu,...]
メニューオブジェクトの形式: { id: 1, pid: null, n: 'メニュー名 1', url: '#', fn: コールバック関数}
*/
);


JS コードを呼び出します




コードをコピー


コードは次のとおりです:


コードの表示
$(function () {
var _menuData = [
'#' },
{ id: 4, pid: null, n: 'メニュー名4 '、url：'＃ '}、
{id：5、pid：null、n：'メニュー名5 ''、url： '＃'}、
'メニュー名7'、url： ' #' },
3, n: 'メニュー名 9'、URL: '#' },
11、pid: 9、n: 'メニュー名 11'、url: '#' },
>}：0、データ：_menudata}）;


html



コードは次のとおりです:


View Code


               

                   
• 一级菜单1

                   
• 一级菜单2

                   
• 
                          一级菜单3
                         
  
                             
  • 二级菜单1
  
                             
  • 二级菜单2
  
                             
  • 二级菜单3
  
                             
  • 
                                    二级菜单4
                                   
    
                                       
    • 三级菜单1
    
                                       
    • 三级菜单2
    
                                       
    • 三级菜单3
    
                                       
    • 三级菜单4
    
                                       
    • 三级菜单5
    
                                   
    
                               
  
                             
  • 二级菜单5
  
                         
  
                     

                   
• 一级菜单4

                   
• 一级菜单5

               

           

           

           

               

                   
• 一级菜单1

                   
• 一级菜单2

                   
• 
                          一级菜单3
                         
  
                             
  • 二级菜单1
  
                             
  • 二级菜单2
  
                             
  • 二级菜单3
  
                             
  • 
                                    二级菜单4
                                   
    
                                       
    • 三级菜单1
    
                                       
    • 三级菜单2
    
                                       
    • 三级菜单3
    
                                       
    • 三级菜单4
    
                                       
    • 三级菜单5
    
                                   
    
    
  
                                                                ​                        ul>
  gt;
                                                                                                                           < ;/div>
  
  
  
  7. Download
  

Click here to download usage examples and all files.