2013年7月16日 星期二

Jsrender + superfish DEMO

navigate.html
<script id="navigate" type="text/x-jsrender">           
    <li>
        <a href="{{:url}}">{{:name}}</a>
        {{if childList != null && childList.length > 0}}
             <ul>
                {{for childList tmpl='#navigate' }}
                {{/for}}
             </ul>
        {{/if}}
    </li>

</script>​

navigateData.json
[{"name":"men","url":"#","id":"001","childList":[
            {"name":"衣服","url":"#","id":"100","childList":[
                {"name":"夏威夷風","url":"#","id":"100","childList":null},
                {"name":"日本風","url":"#","id":"200","childList":null}
                ]},
            {"name":"褲子","url":"#","id":"200","childList":null}]},
    {"name":"kinds","url":"#","id":"002","childList":[
            {"name":"衣服","url":"#","id":"100","childList":null},
            {"name":"褲子","url":"#","id":"200","childList":null}]},
    {"name":"woman","url":"#","id":"003","childList":[
            {"name":"衣服","url":"#","id":"100","childList":null},
            {"name":"褲子","url":"#","id":"200","childList":null}]}] 

index.html
<!DOCTYPE html>
<html>
    <head id="docHead">
        <title>Jsrender + superfish DEMO</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta http-equiv="content-language" content="zh-TW">
        <!--include Jquery superfish plugin of css-->
        <link rel="stylesheet" href="css/superfish.css"/>
    </head>
    <body>
        <div></div>
        <!--menu-->
        <ul class="sf-menu">          
        </ul>  
        <!--include Jquery-->
        <script src="lib/jquery-1.10.2.min.js" type="text/javascript"></script>
        <!--incude templates Engine-->
        <script src="lib/jsrender.min.js" type="text/javascript"></script>
        <!--incude Jquery superfish menu plugin-->
        <script src="lib/hoverIntent.js" type="text/javascript"></script>
        <script src="lib/supersubs.js" type="text/javascript"></script>
        <!--process-->
        <script type="text/javascript">
            (function(window, undefined) {
                //test for chrome or firefox
                //console.log(window);
                var loadTemplates = function() {
                     $.get("./templates/navigate.html", function(data) {                        
                           $("#docHead").append(data);
                            getNavigateData();
                      }); 
                };

                var getNavigateData = function() {
                      $.get('./data/navigateData.json', function(result) {                        
                         //console.log(result);
                          $(".sf-menu").html($('#navigate').render(result));
                       },"json");
                };

                var init = function() {
                    loadTemplates();
                }
                init();
            })(window);
        </script>
    </body>    
</html>
















參考資料: