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>

參考資料：

• superfish plugin
• jsrender

JQuery cookie wirte and rade

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>cookie操作測試</title>
<meta name="description" content="" />
<meta name="author" content="小J、小花" />
<script src="./lib/jquery-1.7.2.min.js"></script>
<script src="./lib/jquery.cookie.js"></script>
<style>
li{
list-style: none;
font-size: 14px;
}
</style>
<script>
//cookie是以key value存在瀏覽器上，
//每個cookie最大4k，
//以存文字存在瀏覽器中，
//每個瀏覽器所能使用最大數量不同，IE8更新後可支援到50
//因為cookie是以存文字保存資料，因此：
//若是複雜物件型態資料想存進cookie中，就必須將物件序列化成某種字串模式，而JSON就是一種不錯的選擇。
//此處以JSON為範例

JQuery & ASP.NET Ajax測試

JavaScript Code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AJAX Remote Test</title>
<meta name="description" content="" />
<meta name="author" content="小J" />
<script src="./lib/jquery-1.7.2.min.js"></script>
  <script>
jQuery.support.cors = true;   
  $(document).ready(function(){  
  $("#callBtn").click(function (event) {
helloWorld();
});

$('#showDataBtn').click(function (event){
alert(getData());
});  
  });