jquery.sidr #15

uniquejava · 2016-01-03T03:03:01Z

最终效果如下：

定义一个菜单列表div>ul>li*n，让这个div默认隐藏，给定一个id，我把这段放在了index.html中做为body的最后一个child, 如下：

<body>
<div id="content"></div>
<div id="sidr" class="sidr left" style="display: none; left: 0px;">
    <div id="sideMenuAvatarContainer">
        <div id="sideMenuAvatar"></div>
        <div id="sideMenuUserName"></div>
    </div>
    <!-- Your content -->
    <ul>
        <li><a href="#home"><i class="glyphicon glyphicon-home"></i> 主页</a></li>
        <li><a href="#createOrder"><i class="glyphicon glyphicon-plus-sign"></i> 创建订单</a></li>
        <li><a href="#orders"><i class="glyphicon glyphicon-file"></i> 查看订单</a></li>
        <li><a href="#logout"><i class="glyphicon glyphicon-log-out"></i> 退出</a></li>
    </ul>
</div>
<script src="cordova.js"></script>
</body>

定义一个按钮, href指向刚才的菜单，这相按钮在HomeView.js的header里边

 <a id="btnMenu" class="menu-btn left" href="#sidr">
     <i class="glyphicon glyphicon-menu-hamburger"></i>
  </a>

最后是用js操作该按钮。这段代码放在了router里边，打开首页后会立即执行。（注意不能放在 home.hbs中，因为HomeView只能操作HomeView对应的div中的元素。而sidr菜单是定义在home.hbs之外的。我还加入在点击菜单以外的区域自动隐藏菜单的功能。

define([
    'jquery',
    'jquerySidr'

], function ($) {
//这里不必给 jquerySidr对应一个变量名，只要把它放在依赖列表中即可。
...
home: function () {
    //need to implement some common beforeRoute func here.
    if (this.oldView) {
        this.oldView.remove();
    }

    var v = new HomeView();
    this.oldView = v;
    $('#content').html(v.el);
    $('#btnMenu').sidr();


    $(document).click(function (e) {
        var container = $("#sidr");

        if (!container.is(e.target) // if the target of the click isn't the container...
            && container.has(e.target).length === 0) // ... nor a descendant of the container
        {
            $.sidr('close', 'sidr');

        }
    });
},

用requirejs引入sidr

require.config({
    baseUrl: 'lib/',
    paths: {
        jquery: 'jquery-2.1.4',
        underscore: 'underscore-1.8.3',
        backbone: 'backbone-1.2.3',
        mustache: 'mustache-2.2.0',
        templates: '../templates',
        router: '../router',
        text: 'requirejs-text-2.0.14',
        json: 'requirejs-json-0.4.0',
        jquerySidr: 'jquery.sidr',
        markdownConverter:'Markdown.Converter'
    },
    shim: {
        // nothing
    }
});

require(['../app'], function(App) {
    App.initialize();
})

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

jquery.sidr #15

jquery.sidr #15

uniquejava commented Jan 3, 2016

jquery.sidr #15

jquery.sidr #15

Comments

uniquejava commented Jan 3, 2016