mass Framework menu 플러그인

menu 플러그인의 구조는tabs 플러그인을 바탕으로 개선된 것으로 앞으로는tabs 플러그인까지도 이런 새로운 형식으로 바뀔 것이다.아마도 머지않아, 나는 이러한 구조를 새로운 모듈로 추상화하여, 그 안에 모든 UI 플러그인을 계승할 수 있는 클래스를 제공할 것이다.
새 플러그인 시스템의 개요:
4

플러그인 이름은 실례적인 방법 이름이고 이 플러그인은 $에만 실례적인 방법을 추가합니다. 예를 들어tabs 플러그인은 $에만 있습니다.fn에 tabs 방법을 추가합니다

이 실례적인 방법은 플러그인을 초기화하고 소각하며 플러그인을 호출하는 여러 가지 방법을 동시에 가지고 있다

어떤 요소가mass의 노드 체인 대상 $(node)로 포장된 후에 이 플러그인 방법을 처음으로 호출합니다. 즉, 플러그인을 초기화하는 것입니다.일반적으로 매개 변수는 하나의 대상이다

이 노드 체인 대상이 다시 플러그인 방법을 호출할 때 전송된 첫 번째 파라미터가 문자열이면 이 플러그인 대상이 이 방법이 있는지 없는지를 판정하고 이 방법이 호출될 것이다

현재 UI를 제거하려면 "destroy"를 입력하십시오

모든 플러그인 대상은 getUI, invoke,destroy,setOptions 방법으로 모두parent,target,ID 속성을 가지고 있다

다음 menu 플러그인의 구성 매개 변수:
data
필요합니다.하나의 대상 수조, 안의 대상은 html 또는sub 속성을 요구하고sub도 유사한 구조의 대상 수조이다.
hover_class
선택할 수 있습니다.메뉴 항목을 옮길 때 작용하는 클래스입니다. 기본값은hover입니다.
direction
선택할 수 있습니다.사용 가능한 값은 "vertical"또는 "horizontal"이며 기본값은 "vertical"입니다.

#bright .main_menu,
#bright .sub_menu{
width:130px;
-moz-box-shadow:0 0 10px #06c;
-webkit-box-shadow:0 0 10px #06c;
box-shadow:0 0 10px #06c;
z-index:100
}
#bright .menu_item{
width:120px;
padding-left:10px;
height:24px;
line-height:24px;
border-bottom:1px solid #fff;
background:#0088aa;
color:#fff;
}
#bright .hover {
background:#f36100!important;
color:black;
}
#black .menu_item{
width:120px;
padding-left:10px;
height:24px;
line-height:24px;
border-bottom:1px solid #fff;
background:#000;
color:#fff;
z-index:100;
}
#black .hover {
background:#636!important;
color:black;
}


      $1.require("ready,20120303_menu",function( ){
               $1("#black").menu({
                    data: [
                        {
                            html:"  ",
                            sub:[
                                {html:"  "},
                                {html:"  "},
                                {html:"  "}
                            ]
                        },
                        {
                            html:"    ",
                            sub:[
                                {html:"Vim"},
                                {html:"NetBeans"},
                                {html:"Git"}
                            ]
                        },
                        {
                            html:"    ",
                            sub:[
                                {html:"Web  ",sub:[
                                        {html:"HTML"},
                                        {html:"javascript"},
                                        {html:"CSS"}
                                    ]},
                                {html:"Python"},
                                {html:"Java  "},
                                {html:"C/C++"},
                                {html:"Android  "}
                            ]
                        },
                        {html:"    ",sub:[
                                {html:"IOS"},
                                {html:"window"},
                                {html:"ubuntu"}
                            ]}
                    ],
                    direction: "horizontal"
                });
            });

$1.require("ready,20120303_menu",function( ){
$1("#black").menu({
data: [
{
html: "수필",
sub:[
{html: "생활"},
{html: 잡문},
{html: "사고"} & #13;
]
},
{
html: "프로그래밍 도구",
sub:[
{html:"Vim"},
{html:"NetBeans"},
{html:"Git"}
]
},
{
html: "프로그래밍 언어",
sub:[
{html: 웹 개발,sub:[
{html:"HTML"},
{html:"javascript"},
{html:"CSS"}
]},
{html:"Python"},
{html: "Java 언어"},
{html:"C/C++"},
{html: "안드로이드 개발"} & #13;
]
},
{html: "운영체제",sub:[
{html:"IOS"},
{html:"window"},
{html:"ubuntu"}
]}
],
direction: "horizontal"
});
});

$1.require("ready,20120303_menu,20120303_api",function( _,_,api ){
var pathMap = {
"모듈 로드 모듈": "core/$",
'특징 탐정 모듈':'support/$',
"언어 확장 모듈": "lang/$",
"클래스 공장 모듈": "class/$", & #13;
"선택기 모듈": "query/$", & #13;
"데이터 캐시 모듈": "데이터/$",
노드 모듈: "node/$",
속성 모듈: "attr/$",
이벤트 모듈: 이벤트/$,
스타일 모듈: css/$,
애니메이션 모듈: fx/$,
"조작 흐름 모듈": "flow/$", & #13;
'데이터 상호작용 모듈':'aax/$'& #13;
}
var makeData = function( json, path ){
return Object.keys( json ).map(function(key){
var ret = {
html: key
}
var new_path = path + (typeof pathMap[key] == "string"? pathMap[key] : key) + "."
if(typeof json[ key ] === "object"){
ret.sub = makeData( json[ key ], new_path);
}else{
ret.attr = {
type: json[ key ],
path: new_path + "html"
}
}
return ret;
},json );
}
var menu = $1("#bright").menu({
data: makeData(api, "")
}).menu("getUI").target;

$1(document).click(function(e) {//다른 곳에서 2단계 또는 2단계 이상의 하위 메뉴를 숨기려면 누르십시오 & #13;
if(!$1.contains(menu[0], e.target)){
menu.find(".sub_menu:visible").hide();
}
})

})


      #black .menu_item{
                width:120px;
                padding-left:10px;
                height:24px;
                line-height:24px;
                border-bottom:1px solid #fff;
                background:#000;
                color:#fff;
            }
            #black .hover {
                background:#636!important;
                color:black;
            }

mass Framework의 모든 API를 표시하는 복잡한 수직 메뉴를 추가합니다.


 #bright .main_menu,
            #bright .sub_menu{ 
                width:130px;
                -moz-box-shadow:0 0 10px #06c;
                -webkit-box-shadow:0 0 10px #06c;
                box-shadow:0 0 10px #06c;
            }
            #bright .menu_item{
                width:120px;
                padding-left:10px;
                height:24px;
                line-height:24px;
                border-bottom:1px solid #fff;
                background:#0088aa;
                color:#fff;
            }
            #bright .hover {
                background:#f36100!important;
                color:black;
            }


    $1.require("ready,more/menu,more/api",function( _,_,api ){
    var pathMap = {
                    "模块加载模块":  "core/$",
                    "特征侦探模块":  "support/$",
                    "语言扩展模块":  "lang/$",
                    "类工厂模块":    "class/$",
                    "选择器模块":    "query/$",
                    "数据缓存模块":  "data/$",
                    "节点模块":      "node/$",
                    "属性模块":      "attr/$",
                    "事件模块":      "event/$",
                    "样式模块":      "css/$",
                    "动画模块":      "fx/$",
                    "操作流模块":    "flow/$",
                    "数据交互模块":  "ajax/$"
    }
    var makeData = function( json, path ){
        return  Object.keys( json ).map(function(key){
            var ret = {
                html: key
            }
            var new_path = path + (typeof pathMap[key] == "string" ? pathMap[key] :  key) + "."
            if(typeof json[ key ] === "object"){
                ret.sub = makeData( json[ key ], new_path);
            }else{
                ret.attr = {
                    type: json[ key ],
                    path: new_path + "html"
                }
            }
            return ret;
        },json );
    }
    //上面的代码用于生成menu的数据包
    var menu = $1("#bright").menu({
        data: makeData(api, "")
    }).menu("getUI").target;
    
    $1(document).click(function(e){//点击其他处隐藏二级或二级以上的子菜单
        if(!$1.contains(menu[0], e.target)){
            menu.find(".sub_menu:visible").hide();
        }
    })

menu 플러그인에 대한 더 자세한 설명은github에서 보십시오.
posted on 2012-03-03 18:25 司徒正美 읽기(...)댓글(...)编辑收藏

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

Fragmenta의 각서

라고 할까, 그것 밖에 발견되지 않았기 때문에 시도해보기로 했습니다. 다만, 내용을 보면 어플리케이션을 만드는 프레임워크로서 사용되는 것도 의식하고 있는 것 같습니다. 하지만, 지금은 정확하지 않은 것 같기 때문에,...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

mass Framework menu 플러그인

좋은 웹페이지 즐겨찾기