Webixとsnap.jsを組み合わせる。

Webixは、スマートフォンでの表示に対応したUIフレームワークですが、いわゆるスライドメニューと呼ばれるコンポーネントをもっていません。

そこでスライドメニューはsnap.jsを使って実装しそれ以外はwebixを組み合わせて画面をつくってみました。
良い感じで組み合わさったので、今後利用していきたいと思います。

サンプル

<!DOCTYPE HTML>
<html lang="ja">
<head>
<title>snap.js + Webix</title>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
    
<!-- snap.js用スタイルシート-->   
<link rel="stylesheet" type="text/css" href="../css/snap.css">
<link rel="stylesheet" type="text/css" href="../css/snap_opt.css">

<!-- webix用スタイルシート -->
<link rel="stylesheet" href="http://shimz.me/libs/webix/codebase/webix.css" type="text/css" charset="utf-8">

<style>
html, body{
    margin: 0px;
    padding: 0px;
}
html, body, #webix-view {
    width: 100%;
    height: 100%;
}   
</style>

</head>
<body>
    
<!-- slide menu -->
<div class="snap-drawers">
    <div class="snap-drawer snap-drawer-left">
        <div>
            <h3>メニュー</h3>
            
            <h4>サブメニュー１</h4>
            <ul>
                <li><a>ほげ１</a></li>
                <li><a>ほげ２</a></li>
            </ul>
        </div>
    </div>
    <div class="snap-drawer snap-drawer-right"></div>
</div>
<!-- slide menu end -->

<!-- mein contents -->    
<div id="content" class="snap-content">
    <div id="toolbar">
        <a  id="open-left"></a>
        <h1>Webix & Snap.js</h1>
    </div>
    <div id="webix-view" data-snap-ignore="true"></div>         
</div>
<!-- mein contents end -->
        
        
<!-- snap.js(スライドメニューライブラリ) -->       
<script type="text/javascript" src="../js/snap.js"></script>
<!-- webix.js -->
<script src="http://shimz.me/libs/webix/codebase/webix.js" type="text/javascript" charset="utf-8"></script>

<script>
/* snap.js初期化*/
(function(){
    snapper = new Snap({
        element: document.getElementById('content')
    }); 
    
    var addEvent = function addEvent(element, eventName, func) {
        if (element.addEventListener) {
            return element.addEventListener(eventName, func, false);
        } else if (element.attachEvent) {
            return element.attachEvent("on" + eventName, func);
        }
    };
    
    addEvent(document.getElementById('open-left'), 'click', function(){
        if( snapper.state().state=="left" ){
            snapper.close();
        } else {
            snapper.open('left');
        }
    });
    
})();

/* モバイルsafariがリンクを開くのを防ぐ */
(function (a, b, c) {
    if(c in b && b[c]) {
        var d, e = a.location,
            f = /^(a|html)$/i;
        a.addEventListener("click", function (a) {
            d = a.target;
            while(!f.test(d.nodeName)) d = d.parentNode;
            "href" in d && (d.href.indexOf("http") || ~d.href.indexOf(e.host)) && (a.preventDefault(), e.href = d.href)
        }, !1)
    }
})(document, window.navigator, "standalone");   

/* webix初期化*/   
(function(){
    webix.ui.fullScreen();
    webix.ui({
        //webixコンポーネントを表示する要素のid属性を指定
        container:"webix-view",
        rows:[
            {template:"header", height:35 },
            {template:"row 1"},
            {view:"resizer"},
            {template:"row 2"},
            {view:"resizer"},
            {
                cols:[
                    { template:"column 1", width:150},
                    { view:"resizer" },
                    { template:"column 2"},
                    { template:"column 3"}
                ]
            }
        ]
    }).show();
})();   
</script>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

<!DOCTYPE HTML>

<head>

<title>snap.js + Webix</title>

<style>

html, body{

margin: 0px;

padding: 0px;

}

html, body, #webix-view {

width: 100%;

height: 100%;

}

</style>

</head>

<body>

<div>

<h4>サブメニュー１</h4>

<ul>

</ul>

</div>

</div>

<h1>Webix & Snap.js</h1>

</div>

</div>

/* snap.js初期化*/

(function(){

snapper = new Snap({

element: document.getElementById('content')

});

var addEvent = function addEvent(element, eventName, func) {

if (element.addEventListener) {

return element.addEventListener(eventName, func, false);

} else if (element.attachEvent) {

return element.attachEvent("on" + eventName, func);

}

};

addEvent(document.getElementById('open-left'), 'click', function(){

if( snapper.state().state=="left" ){

snapper.close();

} else {

snapper.open('left');

}

});

})();

/* モバイルsafariがリンクを開くのを防ぐ */

(function (a, b, c) {

if(c in b && b[c]) {

var d, e = a.location,

f = /^(a|html)$/i;

a.addEventListener("click", function (a) {

d = a.target;

while(!f.test(d.nodeName)) d = d.parentNode;

"href" in d && (d.href.indexOf("http") || ~d.href.indexOf(e.host)) && (a.preventDefault(), e.href = d.href)

}, !1)

}

})(document, window.navigator, "standalone");

/* webix初期化*/

(function(){

webix.ui.fullScreen();

webix.ui({

//webixコンポーネントを表示する要素のid属性を指定

container:"webix-view",

rows:[

{template:"header", height:35 },

{template:"row 1"},

{view:"resizer"},

{template:"row 2"},

{view:"resizer"},

{

cols:[

{ template:"column 1", width:150},

{ view:"resizer" },

{ template:"column 2"},

{ template:"column 3"}

]

}

]

}).show();

})();

</script>

</body>

</html>

サンプル

投稿者: shimizu