function

1.状态机的控制 UML

2.未来控件的事件绑定

3.wizard UI的实现（visited,current,）

    /*reset*/
     1 ul,ol,li{list-style:none;margin:0;padding:0;}
     2 /*common*/
     3 body{font-size:12px;color:#333;-webkit-text-size-adjust:none;}
     4 a,textarea{outline:none;}
     5 .clearfix{zoom:1;}
     6 .clearfix:after{content:'.';display:block;visibility:hidden;clear:both;height:0px;}
     7 .steps li{float:left;background:url(../images/sx3.png) 0 16px repeat-x;width:2%;height:38px;}
     8 .steps .line-active{background:url(../images/sx3.png) 0 -11px repeat-x;}
     9 .steps .step{width:24%;}
    10 .steps .step1{width:16%;background:url(../images/sx3.png) 0 -11px repeat-x;}
    11 .steps .num{width:38px;height:38px;display:block;text-indent:-9999px;cursor:pointer;float:right;background:url(../images/sf3.png) 0 0 no-repeat;}
    12 .steps .line-last{width:12%;}
    13 .steps .visited .num1{background-position:-38px 0;}
    14 .steps .normal .num2{background-position:-76px 0;}
    15 .steps .current .num2{background-position:-114px 0;}
    16 .steps .visited .num2{background-position:-152px 0;}
    17 .steps .normal .num3{background-position:-190px 0;}
    18 .steps .current .num3{background-position:-228px 0;}
    19 .steps .visited .num3{background-position:-266px 0;}
    20 .steps .normal .num4{background-position:-304px 0;}
    21 .steps .current .num4{background-position:-342px 0;}
    22 .steps .visited .num4{background-position:-380px 0;}
    23 .steps .step-content{border:1px solid #dcdcdc;margin-top:20px;padding:10px;}

JS

 $(document).ready(function(){
     1   var moveToNextStep = function(that){
     2         that.addClass("current line-active");
     3         that.removeClass("normal");
     4         that.prev(".step").removeClass("current");
     5         that.prev(".step").addClass("visited");
     6
     7     };
     8   var moveToNextStepAgain= function(that){
     9         that.addClass("current line-active");
    10         that.removeClass("visited");
    11         that.prev(".step").removeClass("current");
    12         that.prev(".step").addClass("visited");
    13
    14     };
    15     $(".num").click(function(e){
    16     e.preventDefault();
    17     var oCurUrl = $(this).attr("href");console.log(oCurUrl);
    18     //if($(this).parent().prev(".step")[0]){
    19         if($(this).parent().hasClass("normal")){
    20             alert('stop');
    21         }else{
    22                  changeDiv();
    23                  $('#divHide').show();
    24                  $(".current").addClass("visited");
    25                  $(".current").removeClass("current");
    26                  $(this).parent().addClass("current");
    27                  $(this).parent().removeClass("visited");
    28             //     $(this).parent().addClass("current line-active");
    29             //  $(this).parent().nextAll().addClass("visited");
    30              $.ajax( {
    31                  url:oCurUrl,
    32                  success:function(data) {
    33                     $('.step-content').html(data);
    34                  }
    35               });
    36         }
    37   });
    38   //$(".next-btn")

 function buttonClick(){
    48     var oIndex;
    47         $(".step").each(function(index){
    46             if($(this).hasClass("current")){
    45                 oIndex = index;
    44             }
    43         });
    42         oCurUrl = $($(".step")[oIndex]).next(".step").children(".num").attr("href");
    41
    40         console.log(oCurUrl);
    39         $.ajax( {
    38          url:oCurUrl,
    37          success:function(data) {
    36             $('.step-content').html(data);
    35          }
    34       });
    33 }
    32
    31 function wizardLight(){
    30   var moveToNextStep = function(that){
    29         that.addClass("current line-active");
    28         that.removeClass("normal");
    27         that.prev(".step").removeClass("current");
    26         that.prev(".step").addClass("visited");
    25
    24     };
    23   var moveToNextStepAgain= function(that){
    22         that.addClass("current line-active");
    21         that.removeClass("visited");
    20         that.prev(".step").removeClass("current");
    19         that.prev(".step").addClass("visited");
    18
    17     };
    16
    15     var oIndex;
    14         $(".step").each(function(index){
    13             if($(this).hasClass("current")){
    12                 oIndex = index;
    11             }
    10         });
     9         oCurUrl = $($(".step")[oIndex]).next(".step").children(".num").attr("href");
     8         if($($(".step")[oIndex]).next(".step").hasClass("normal")){
     7         moveToNextStep($($(".step")[oIndex]).next(".step"));
     6         }else{
     5         moveToNextStepAgain($($(".step")[oIndex]).next(".step"));
     4         }
     3
     2 }

 function preButtonClick(){
    47     var oIndex;
    46         $(".step").each(function(index){
    45             if($(this).hasClass("current")){
    44                 oIndex = index;
    43             }
    42         });
    41         oCurUrl = $($(".step")[oIndex]).prev(".step").children(".num").attr("href");
    40
    39         console.log(oCurUrl);
    38         $.ajax( {
    37          url:oCurUrl,
    36          success:function(data) {
    35             $('.step-content').html(data);
    34          }
    33       });
    32
    31 }
    30
    29 function preWizardLight(){
    28
    27   var backToPrevStep = function(that){
    26
    25         that.addClass("current");
    24         that.removeClass("visited");
    23         that.next(".step").addClass("visited");
    22         that.next(".step").removeClass("current");
    21
    20   };
    19  //$(".previous-btn")
    18     var oIndex;
    17         $(".step").each(function(index){
    16             if($(this).hasClass("current")){
    15                 oIndex = index;
    14             }
    13         });
    12         oCurUrl = $($(".step")[oIndex]).prev(".step").children(".num").attr("href");
    11
    10         backToPrevStep($($(".step")[oIndex]).prev(".step"));
     9
     8     }

function notifyMessage(id,type,message){
     1 //alert(type);
     2     switch(type){
     3     case 'success':
     4         var span = $('<div class="Notification Alert Notification_Green"><div class="Alert_Icon Alert_Icon_Success"></div><div id="djv_trace_success" class="Notification_Container"><strong c       lass="Alert_Label" style>'+type+'</strong> <span id="id_error">'+message+'</span></div></div> ');
     5         $(id).append(span);
     6  //      alert(message);
     7        break;
     8     case 'error':
     9        alert("aaa");
    10         var span = $('<div class="Notification Alert Notification_Red"><div class="Alert_Icon Alert_Icon_Error"></div><div id="djv_trace_error" class="Notification_Container"><strong class="       Alert_Label" style>'+type+'</strong> <span id="id_error">'+message+'</span></div></div> ');
    11         $(id).append(span);
    12         break;
    13     case 'notify':
    14         var span = $('<div class="Notification Alert Notification_Blue"><div class="Alert_Icon Alert_Icon_Info"></div><div id="djv_trace_info" class="Notification_Container"><strong class="A       lert_Label" style>'+type+'</strong> <span id="id_notify">'+message+'</span></div></div>');
    15         $(id).append(span);
    16        break;
    17     default:
    18        alert("fdas");
    19 }
    20 }
    21
    22 function loadStep1(){
    23  $.ajax({
    24      url: 'steps.php?id=step1',
    25      success:function(data){
    26      $('.step-content').html(data);
    27      }
    28
    29 });
    30
    31 }
    32 function changeDiv(){
    33     $('#divHide').css("width",window.innerWidth).css("height",window.innerHeight);
    34 //alert($(window).height());
    35
    36 }

caseReview  

  $(document).ready(function(){
     1          var caseid = $('#djv_caseid').val();
     0     $.ajax({
     1         type: 'GET',
     2         url: '../api.php',
     3         data: {
     4             action: 'DJV_Case_API::get',
     5             caseId: caseid,
     6        },
     7     }).done(function(data) {
     8         var json_data = JSON.parse(data);
     9         console.log(data);
    10         console.log(json_data);
    11         //$('#id_btn').attr('type', 'hidden');
    12         $('#id_casenameText').text(json_data.detail.caseName);
    13         $('#id_istemplateCheckbox').text(json_data.detail.isTemplate);
    14         $('#id_entrypointText').text(json_data.detail.entryPointName);
    15         $('#id_typeCombo').text(json_data.detail.entryPointType);
    16         $('#djv_desc').val(json_data.detail.desc);
    17     });

 $('#id_save_assertion_btn').click(function(){
    34         var dataConnect=new Array();
    33         $(".add_assertion_class").each(function(index){
    32             var obj = {};
    31             obj["id"]   = $(this).attr('id'),
    30             obj["name"] = $('#id_testpoint').val();
    29             obj["desc"] = "desc";
    28             obj["type"] = $(this).find('#id_custom').val().toUpperCase();
    27             obj["cond"] = $(this).find('#id_equal').val().toUpperCase();
    26             obj["code"] = "test code";
    25             obj["data"] = "i:1";
    24             dataConnect.push(obj);
    23             });
    22         $.ajax({
    21         type: 'POST',
    20         url: '../api.php?astId=12',
    19         data: {
    18             action: "DJV_Case_API::setExpressions",
    17             expressions: dataConnect,
    16        },
    15        }).done(function(data) {
    14
    13         var json_data = JSON.parse(data);
    12         console.log(data);
    11         console.log(json_data);
    10         $('#dialog').dialog("close").find('.add_assertion_class').remove();
     9         });
     8 });

             $.ajax({
    25         type: 'GET',
    26         url: '../api.php',
    27         data: {
    28             action: 'DJV_Case_API::getSimulations',
    29             caseId: caseid,
    30        },
    31     }).done(function(data) {
    32         var json_data = JSON.parse(data);
    33         console.log(data);
    34         console.log(json_data);
    35        // var test=json_data.detail.mock[0].name;
    36         var mock=json_data.detail.mock;
    37         debugger;
    38         $.each(mock, function(index, item){
    39             var span = $('<span class="spanClass">Mock Point:</span> <span class="spanClassEx">'+item.name+'</span><a id="Mock Point'+index+'" href="javascript:void(0)" οnclick="getData('+it       em.id+');">view data</a><div style="height:1px"></div><br />');
    40             $("#djv_simulation_div").append(span);
     1 $('#dialog').delegate('select','change', function(ee){
     2         debugger;
     3         var div=$(this).parent().find('#id_custom');
     4         var str = "";
     5             if($(this).val().toLowerCase() == "custom"){
     6                   div.show();
     7             }else{
     8               div.hide();
     9             }
    10             });

 var addAssertionid=0;
     0 $('#id_add_assertion_btn').click(function(){
     1         var index= addAssertionid--;
     2          var $header = $('<div id="'+index+'" class="add_assertion_class"></div>')
     3                     .addClass('collapse')
     4                     .addClass('header')
     5                     .append('<span class="icon-arrow-down"></span>')
     6                     .append('<button title="Delete" class="delete_button_class ui-icon ui-icon-closethick" ></button>')
     7                     .append('<span>Assertion'+index+'</span>')
     8                     .click(function() {
     9                         $(this).next().slideToggle(500);
    10                         $(this).find('span[class^="icon-arrow-"]').toggleClass('icon-arrow-down').toggleClass('icon-arrow-right');
    11                     });
    12                     var $body = $('<div class="add_assertion_class"></div>')
    13                     .addClass('collapse')
    14                     .addClass('body')
    15                     .append('<select class="ComboClass" id="id_assertions_aip'+index+'" name="type"><option value="return" selected="selected">RETURN</option><option value="param">PARAM</opt       ion><option value="custom">CUSTOM</option></select> <a id="djv_editassertion_link" href="javascript:void(0)" οnclick="getData('+index+');">view sample</a><div id="id_custom" style="clear:bot       h;width:550px;height=50px;margin-top:12px;padding=5px;display:none"> <div style="width:420px;height:30px;"><select class="ComboClass" id="id_equal" name="type"><option value="equal" selected       ="selected" >==</option><option value="noequal">!=</option></select><input id="djv_pro_name"  class="textareaClass" type="text" name="proName" value="" style="border-top-width:3px;border-bot       tom-width:1px;padding-bottom:2px;margin-left:20px;padding-right:2px;"/></div><div style="width:420px;height:50px"><span style="width:65px;padding-right:17px;">code:</span><textarea style="ma       rgin-left:165px;"></textarea></div></div>');
    16
    17        $('#id_addassertion_div').append($header).append($body);
    18 });