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 });
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
