几款常用的js 插件集锦
说明:笔者刚入行,写的都是初级内容,还请各位看官多多指教。
1. poshytip
用途: 弹出提示框
如何使用:
文件头中加入
<link href="@Url.Content("~/Content/poshytip/tip-yellow/tip-yellow.css")" rel="stylesheet" type="text/css"/>
<script src="@Url.Content("~/Content/poshytip/jquery.poshytip.min.js")" type="text/javascript"></script>
实例
$(".showTips").poshytip({
content: function () { return $(this).text(); }
});
2. Uploadify
用途: 附件上传
弊端: 在IE下可以正常使用,在FF和Chrome中无法正常使用
原因:浏览器通过flash组件实现文件上传的不同。IE 使用相同的session。 而FF 打开一个新的连接, 所以服务器将会认为该连接是未认证的用户。
<link href="@Url.Content("~/Content/uploadify/uploadify.css")" rel="Stylesheet" type="text/css" />
<script src="@Url.Content("~/Content/uploadify/jquery.uploadify.js")" type = "text/javascript"></script>
实例: var uploader = '@Url.Action("UploadAttachments")';
$("#fileUploadCtrl").uploadify({
buttonText: "请选择附件",
width: 100,
height: 23,
swf: '@Url.Content("~/Content/uploadify/uploadify.swf")',
uploader: uploader,
formData: {
'masterId': $("#taskIds").val().trim(),
'type': 'task'
},
fileSizeLimit: 2048000,
queueID: 'fileQueue',
removeCompleted: false,
multi: true,
/*//在浏览窗口底部的文件类型下拉菜单中显示的文本
fileTypeDesc: '支持的格式:',
//允许上传的文件后缀
fileTypeExts: '*.doc;*.docx',*/
queueSizeLimit: 50,
auto: false
});
UploadAttachments 上传方法。
/// <summary>
/// 附件上传
/// </summary>
/// <returns></returns>
public ActionResult UploadAttachments()
{
Response.ContentType = "text/plain";
Response.Charset = "utf-8";
var file = Request.Files["Filedata"];
if (file != null)
{
try
{
string masterId = RequestHelper.GetParamsString("masterId");
string type = RequestHelper.GetParamsString("type");
string path = "";
if (type.Equals("task")) {
path = Definition.TASKATCH_PATH_PREFIX;
}else if(type.Equals("evaluation")){
path = Definition.EVALMATERIAL_PATH_PREFIX;
}
string dirPath = this.Server.MapPath(path);
string uploadPath = Path.Combine(dirPath, masterId);
string physicalPath = Path.Combine(uploadPath, file.FileName);
string relativePath = Path.Combine(path, masterId, file.FileName);
if (!Directory.Exists(uploadPath))
{
Directory.CreateDirectory(uploadPath);
}
file.SaveAs(physicalPath);
string[] Ids = masterId.Split(',');
foreach (var item in Ids)
{
var material = new Attachment()
{
Id = CommonTools.CreateUniqueKey(),
MasterId = item,
Path = relativePath,
Name = file.FileName,
ContentType = file.ContentType
};
_attachService.CreateAttachment(material);
}
//下面这句代码缺少的话,上传成功后上传队列的显示不会自动消失
Response.Write("1");
}
catch (Exception)
{
Response.Write("0");
}
}
else
{
Response.Write("0");
}
return new EmptyResult();
}
解决方法:
在页面中保存session的值,并在服务器端处理前给session赋值。
代码:
在Global.asax中加入以下代码
protected void Application_BeginRequest(object sender, EventArgs e)
{
try {
string session_param_name = "ASPSESSID";
string session_cookie_name = "ASP.NET_SessionId";
if (HttpContext.Current.Request.Form[session_param_name] != null)
{
UpdateCookie(session_cookie_name, HttpContext.Current.Request.Form[session_param_name]);
}
else if (HttpContext.Current.Request.QueryString[session_param_name] != null)
{
UpdateCookie(session_cookie_name, HttpContext.Current.Request.QueryString[session_param_name]);
}
}catch{
}
try
{
string auth_param_name = "AUTHID";
string auth_cookie_name = FormsAuthentication.FormsCookieName;
if (HttpContext.Current.Request.Form[auth_param_name] != null)
{
UpdateCookie(auth_cookie_name, HttpContext.Current.Request.Form[auth_param_name]);
}
else if (HttpContext.Current.Request.QueryString[auth_param_name] != null)
{
UpdateCookie(auth_cookie_name, HttpContext.Current.Request.QueryString[auth_param_name]);
}
}
catch {
}
}
private void UpdateCookie(string cookie_name, string cookie_value)
{
HttpCookie cookie = HttpContext.Current.Request.Cookies.Get(cookie_name);
if (null == cookie)
{
cookie = new HttpCookie(cookie_name);
}
cookie.Value = cookie_value;
HttpContext.Current.Request.Cookies.Set(cookie);
}
在页面中 加入
var AUTHID = "@(Request.Cookies[FormsAuthentication.FormsCookieName] == null ? string.Empty : Request.Cookies[FormsAuthentication.FormsCookieName].Value)";
var ASPSESSID = "@Session.SessionID";
3. ztree
用途:树形显示
<link href="@Url.Content("~/Content/zTree/zTreeStyle.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Content/zTree/js/jquery.ztree.all-3.5.js")" type="text/javascript"></script>
4. WdatePicker
用途: 日期显示
<script src="@Url.Content("~/Content/DatePicker/WdatePicker.js")" type="text/javascript"></script>
5. Tabs
用途: 显示tabs
<link href="@Url.Content("~/Content/jquery-easyui-1.3.3/themes/gray/tabs.css")" rel="Stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/jquery-easyui-1.3.3/themes/icon.css")" rel="Stylesheet" type="text/css" />
<script src="@Url.Content("~/Content/jquery-easyui-1.3.3/jquery.easyui.min.js")" type = "text/javascript"></script>
6. 验证validate
<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>