1.SmartWizard 向導插件
第一步：引用js文件
1 <link href="http://www.cnblogs.com/Style/js/jquery.smart_wizard.css" rel="stylesheet" type="text/css" /> 2 <script src="http://www.cnblogs.com/Style/js/jquery.smartWizard-2.0.js" type="text/javascript"></script>
在css文件里控制向導的高度和寬度
.swMain { float: left; width: 100%;/*向導寬度,原來是width:980px;*/ } .swMain .loader
{
color: #5A5655;
background: #FFF url(../images/loader.gif) no-repeat 5px; /*這個路徑要寫對了，否則會觸發應用程序異常（文件未找到）*/
} .swMain .stepContainer div.content { height: 460px;/*向導每一步高度,原來是height:460px;*/ width: 100%;/*向導每一步寬度,原來是width:968px;*/ clear: both; }
css中引用的背景圖路徑要寫對了，否則會觸發 void Application_Error(object sender, EventArgs e) 事件，異常時文件未找到。
第二步：定義HTML代碼應用CSS樣式
<!-- Smart Wizard --> <div id="wizard" class="swMain"> <ul> <li><a href="#step-1"> <label class="stepNumber"> 1</label> <span class="stepDesc">Basic<br /> 基本參數 </span></a></li> <li><a href="#step-2"> <label class="stepNumber"> 2</label> <span class="stepDesc">Communication<br /> 通訊參數 </span></a></li> <li><a href="#step-3"> <label class="stepNumber"> 3</label> <span class="stepDesc">tags<br /> 點信息 </span></a></li> <li><a href="#step-4"> <label class="stepNumber"> 4</label> <span class="stepDesc">XML<br /> <small>設備描述文件</small> </span></a></li> </ul> <div id="step-1"> </div> <div id="step-2"> </div> <div id="step-3"> </div> <div id="step-4"> </div> </div>
第三步：頁面初始化時應用樣式調整大小
//初始化向導 function initWizard() { $('#wizard').smartWizard({ labelNext: '下一步', labelPrevious: '上一步', labelFinish: '完成', onLeaveStep: leavestepCallback, onShowStep: showstepCallback, enableAllSteps: true }); var h = document.body.clientHeight; if (h > 400) { $(".stepContainer").height(h - 170); //根據 $(".swMain .stepContainer div.content").height(h - 170); } $("#templateXML").height(h - 230); }
初始化時注冊了幾個事件回調，可以在這些函數里處理校驗和初始化操作。比如我在第二步里用到了easyui的datagrid控件，當顯示時需要調用resize 函數，否則表格是出不來的，這問題用了半天才找到原因，一開始以為是css樣式沖突導致的。
//顯示下一步 function showstepCallback(obj) { var step_num = obj.attr('rel'); if (step_num == 2) { $("#table_Communication_datagrid").css("display", "block").datagrid('resize'); $("#table_ProtocalParameter_datagrid").css("display", "block").datagrid('resize'); } else if (step_num == 3) { $("#table_Point_datagrid").css("display", "block").datagrid('resize'); } return true; }
向導的大小也是比較麻煩的，在css樣式里設置高度100%，不起作用，所以用代碼控制大小了。
2.uploadify上傳插件
第一步：應用js文件
<script src="../Style/js/uploadify-v3.1/jquery.uploadify-3.1.js" type="text/javascript"></script> <link href="../Style/js/uploadify-v3.1/uploadify.css" rel="stylesheet" type="text/css" />
第二步：在HTML代碼里使用table布局方式使用上傳插件。
<tr> <th class="ItemName" style="width: 100px;"> 驅動文件: <%--<input type="checkbox" name="ReplaceFile" value="" />覆蓋現有文件--%> </th> <td> <input type="text" id="CfgFileName" name="CfgFileName" readonly="readonly" class="easyui-validatebox" data-options="required:true,missingMessage:'請上傳驅動配置文件'" style="width: 260px;" value="" /> <div id="some_file_queue"> <%--用於顯示上傳的flash文件--%> </div> </td> <td style="padding: 0px; vertical-align: middle; padding-top: 10px;"> <input type="file" name="uploadify" id="uploadify" /> <%--用於顯示上傳的按鈕--%>
</td> </tr>
本來想把“上傳”按鈕直接放到路徑文本框后面，但顯示的效果總是會出現換行，所以使用table布局，放到一個新的單元格里了。
第三步：頁面加載時初始化上傳插件
function initUploadify() { /// <summary>初始化上傳控件</summary> $("#uploadify").uploadify({ height: 20, swf: '../Style/js/uploadify-v3.1/uploadify.swf', buttonText: "瀏覽...", // fileTypeExts: "*.xml", progressData: 'percentage', queueID: "some_file_queue", onUploadSuccess: function (file, data, response) { var result = eval('(' + data + ')'); if (result.success) { $("#DriverName").val(result.obj.DriverName); $("#DriverFileName").val(result.obj.DriverFileName); $("#CfgXML").val(result.obj.FileName); $("#CfgFileName").val(file.name + ",保存成功!"); $("#IsCfgXMLUpdate").val(true); } else { $("#CfgFileName").val("文件保存失敗," + result.msg + "!"); $("#IsCfgXMLUpdate").val(false); } }, uploader: '../AjaxHandler/UploadHandler.ashx?Type=Driver&folder=<%=DriverFolder %>', width: 120 }); }
詳細參數可以看它官網示例，這里注意的是從后台返回來的數據 data 是字符串格式，所以需要使用 eval轉成對象。
后台代碼：
public override bool ProcessRequestcontext() { try { this.Context.Response.ContentType = "text/plain"; this.Context.Response.Charset = "utf-8"; string folder = this.Context.Request["folder"]; string folderPath = HttpContext.Current.Server.MapPath(folder) + "\\"; string type = this.Context.Request["Type"]; if (!Directory.Exists(folderPath)) Directory.CreateDirectory(folderPath); //有可能權限不夠 HttpPostedFile file = this.Context.Request.Files["Filedata"]; if (file != null) { string filePath = folderPath + file.FileName; if (File.Exists(filePath)) File.Delete(filePath); file.SaveAs(filePath); //成功時返回文件的完整路徑 if (type == "Driver")//驅動文件 { XmlDocument doc = new XmlDocument(); doc.Load(filePath); DriverCfg cfg = DriverCfg.LoadCfg(doc); var cfgInfo = new { DriverName = cfg.DriverName, DriverFileName = cfg.DriverFileName, FileName = folder + "\\" + file.FileName }; this.Context.Response.Write(JsonConvert.SerializeObject(new JSON(true, cfgInfo))); } else if (type == "Photo") { string fileUrl = folder + "\\" + file.FileName; this.Context.Response.Write(JsonConvert.SerializeObject(new JSON(true, null, fileUrl))); } } else { this.Context.Response.Write(JsonConvert.SerializeObject(new JSON(false, null, "上傳的文件為空"))); } return true; } catch (Exception ex) { this.Context.Response.Write(JsonConvert.SerializeObject(new JSON(false, null, ex.Message, ex))); return false; } }