jQuery日曆外掛編寫jquery.calendar.js
阿新 • • 發佈：2019-01-16
jQuery日曆外掛編寫(jquery.calendar.js)：
目前比較難解決的問題是：
1、面板問題，雖然可以自定義面板，但是使用起來還是有一定的困難。
樣式預覽：
預設面板1：
自定義面板2：(深藍)
自定義面板3：(大紅)
自定義面板4:炫酷黑
呼叫：
$(".startTime").showCalendar({ bgColor:"#000000", topColor:"#000000", weekBgColor:"#000000", weekFontColor:"#FFFFFF", innerBorder:"1px solid #FFFFFF", ymFontColor:'#FFFFFF', ymBgColor:'#000000', ymHoverBgColor:'#00CCCC', arrowColor:"#FFFFFF", noThisMonthFontColor:'#9F9F9F', thisMonthFontColor:'#FFFFFF', thisMonthBgColor:'#000000', dateHoverFontColor:'#FFFFFF', dateHoverBgColor:'#00CCCC', tableBorder:'1px solid #FFFFFF', btnBorder:'0', btnBgColor:'#000000', btnFontColor:'#FFFFFF', btnHoverBgColor:'#00CCCC', btnHoverFontColor:'#FFFFFF' });
引數：
var defaultOptions = { //class名稱 className:'strongCalendar', //日曆格式'yyyy-MM-dd'('yyyy-MM-dd','yyyy年MM月dd日') format:'yyyy-MM-dd', //高度,預設220px height:220, //寬度:預設與文字框寬度相同 width:$(this).innerWidth(), //日曆框離文字框高度 marginTop:1, //浮層z-index zIndex:99, //間隙距離,預設為5px spaceWidth:8, //字型大小,預設9pt fontSize:9, //日曆背景色 bgColor:'#FFFFFF', //預設淺灰色 borderColor:"#AFAFAF", //頂部背景顏色,預設為淡灰色 topColor:'#FFFFFF', //當前年月字型顏色 ymFontColor:'#535353', //年月份操作背景色 ymBgColor:'#FFFFFF', //年月份移上背景色 ymHoverBgColor:'#EFEFEF', //箭頭顏色 arrowColor:'#535353', //裡層邊框 innerBorder:'1px solid #AFAFAF', //表格邊框 tableBorder:'0px solid #AFAFAF', //星期背景顏色 weekBgColor:'#EFEFEF', //星期字型顏色 weekFontColor:'#535353', //上個月和下個月日期的字型顏色 noThisMonthFontColor:'#CFCFCF', //這個月的日期字型顏色 thisMonthFontColor:'#535353', //這個的日期背景顏色 thisMonthBgColor:'#FFFFFF', //日期移上時字型顏色 dateHoverFontColor:'#3399CC', //日期移上時字型顏色 dateHoverBgColor:'#EFEFEF', //button邊框 btnBorder:'1px solid #AFAFAF', //button背景色 btnBgColor:'#FFFFFF', //button字型顏色 btnFontColor:'#535353', //button滑鼠移上顏色 btnHoverBgColor:'#EFEFEF', //button滑鼠移上字型顏色 btnHoverFontColor:'#3399CC' };
測試程式碼：
具體jquery.calendar.js<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>無標題文件</title> <script type="text/javascript" src="jquery-1.9.1.js"></script> <script type="text/javascript" src="jquery.calendar.js"></script> <style type="text/css"> *{margin:0;padding:0;font-family:微軟雅黑} input{margin-top:20px;margin-left:20px;border:1px solid #AFAFAF; line-height:25px;font-size:10pt;width:200px;height:30px; border-color:#535353} </style> </head> <body> <input type="text" readonly="readonly" class="startTime"/> <input type="text" readonly="readonly" class="endTime" /> <input type="text" readonly="readonly" class="testTime" /> </body> <script type="text/javascript"> //預設面板 $(".startTime").showCalendar(); //自定義深藍面板 $(".endTime").showCalendar({ className:'endDate_', bgColor:"#3399CC", topColor:"#3399CC", weekBgColor:"#3399CC", weekFontColor:"#FFFFFF", innerBorder:"0", ymFontColor:'#FFFFFF', ymBgColor:'#33AADD', ymHoverBgColor:'#00CCCC', arrowColor:"#FFFFFF", noThisMonthFontColor:'#BFBFBF', thisMonthFontColor:'#FFFFFF', thisMonthBgColor:'#3399CC', dateHoverFontColor:'#FFFFFF', dateHoverBgColor:'#00CCCC', btnBorder:'0', btnBgColor:'#3399CC', btnFontColor:'#FFFFFF', btnHoverBgColor:'#00CCCC', btnHoverFontColor:'#FFFFFF' }); //自定義大紅面板 $(".testTime").showCalendar({ className:'testDate_', innerBorder:"0", topColor:"#FF0000", ymFontColor:'#FFFFFF', ymBgColor:'#FF0000', ymHoverBgColor:'#FF9900', arrowColor:"#FFFFFF", weekBgColor:"#FFFFFF", weekFontColor:'#000000', noThisMonthFontColor:'#AFAFAF', thisMonthFontColor:'#000000', dateHoverFontColor:'#FFFFFF', dateHoverBgColor:'#FF7700', btnBorder:'0', btnBgColor:'#FF0000', btnFontColor:'#FFFFFF', btnHoverBgColor:'#FF7700', btnHoverFontColor:'#FFFFFF' }); </script> </html>
/**
* jquery日曆外掛jqyery.calendar.js
* @author:xuzengqiang
* @since :2015-2-4 15:31:39
**/
;(function($){
jQuery.fn.extend({
showCalendar:function(options){
var defaultOptions = {
//class名稱
className:'strongCalendar',
//日曆格式'yyyy-MM-dd'('yyyy-MM-dd','yyyy年MM月dd日')
format:'yyyy-MM-dd',
//高度,預設220px
height:220,
//寬度:預設與文字框寬度相同
width:$(this).innerWidth(),
//日曆框離文字框高度
marginTop:1,
//浮層z-index
zIndex:99,
//間隙距離,預設為5px
spaceWidth:8,
//字型大小,預設9pt
fontSize:9,
//日曆背景色
bgColor:'#FFFFFF',
//預設淺灰色
borderColor:"#AFAFAF",
//頂部背景顏色,預設為淡灰色
topColor:'#FFFFFF',
//當前年月字型顏色
ymFontColor:'#535353',
//年月份操作背景色
ymBgColor:'#FFFFFF',
//年月份移上背景色
ymHoverBgColor:'#EFEFEF',
//箭頭顏色
arrowColor:'#535353',
//裡層邊框
innerBorder:'1px solid #AFAFAF',
//表格邊框
tableBorder:'0px solid #AFAFAF',
//星期背景顏色
weekBgColor:'#EFEFEF',
//星期字型顏色
weekFontColor:'#535353',
//上個月和下個月日期的字型顏色
noThisMonthFontColor:'#CFCFCF',
//這個月的日期字型顏色
thisMonthFontColor:'#535353',
//這個的日期背景顏色
thisMonthBgColor:'#FFFFFF',
//日期移上時字型顏色
dateHoverFontColor:'#3399CC',
//日期移上時字型顏色
dateHoverBgColor:'#EFEFEF',
//button邊框
btnBorder:'1px solid #AFAFAF',
//button背景色
btnBgColor:'#FFFFFF',
//button字型顏色
btnFontColor:'#535353',
//button滑鼠移上顏色
btnHoverBgColor:'#EFEFEF',
//button滑鼠移上字型顏色
btnHoverFontColor:'#3399CC'
};
var settings = jQuery.extend(defaultOptions,options || {}),
$body = $("body"),
date = new Date(),
currentYear = date.getFullYear(),
currentMonth = date.getMonth(),
monthDay = [],
//行高
lineHeight = parseInt(settings.height-4*settings.spaceWidth)/9,
$calendar,
//觸發事件物件
$target = $(this),
current ;
//對於小於10的數字前+0
Number.prototype.addZero = function(){
return this<10?"0"+this:this;
};
var Calendar = {
//星期列表
weeks : ['日','一','二','三','四','五','六'],
//每月的天數
months : [31,0,31,30,31,30,31,31,30,31,30,31],
//初始化日曆
loadCalendar:function(){
$body.append("<div class="+settings.className+"></div>");
$calendar = $("."+settings.className);
//新增核心html
$calendar.append(Calendar.innerHTML());
//樣式載入
Calendar.styleLoader();
//核心日曆載入
Calendar.loaderDate(currentYear,currentMonth);
//事件繫結
Calendar.dateEvent();
},
//日曆核心HTML
innerHTML:function(){
var htmlContent = {};
htmlContent = "<div class='cal_head'>"+ <!--頭部div層start-->
"<div class='year_oper oper_date'>"+
"<div class='year_sub operb'><b class='arrow aLeft'/></div>"+
"<div class='year_add operb'><b class='arrow aRight'/></div>"+
"<span class='current_year'></span>"+
<!--位置互換下,考慮到span後面float:right會換行-->
"</div>"+
"<div class='month_oper oper_date'>"+
"<div class='month_sub operb'><b class='arrow aLeft'/></div>"+
"<div class='month_add operb'><b class='arrow aRight'/></div>"+
"<span class='current_month'></span>"+
"</div>"+
"</div>"+ <!--頭部div層end-->
"<div class='cal_center'><table cellspacing='0'></table></div>"+
"<div class='cal_bottom'>"+ <!--底部div層start-->
"<button class='clear_date'>清空</button>"+
"<button class='today_date'>今天</button>"+
"<button class='confirm_date'>確定</button>"+
"</div>";<!--底部div層end-->
return htmlContent;
},
//日曆樣式載入
styleLoader:function(){
$calendar = $("."+settings.className);
//總彈出層樣式設定
$calendar.css({"border-width":"1px",
"border-color":settings.borderColor,
"background-color":settings.bgColor,
"border-style":"solid",
"height":settings.height,
"width":settings.width,
"z-index":settings.zIndex,
"font-size":settings.fontSize+"pt"
});
Calendar.setLocation();
//日曆頂部樣式設定
var $calHead=$calendar.find(".cal_head"),
$operDate=$calendar.find(".oper_date"),
$arrow=$calHead.find(".arrow"),
$center=$calendar.find(".cal_center"),
$ctable=$center.find("table"),
//箭頭大小
arrowWidth = 6,
$calBottom = $calendar.find(".cal_bottom");
$calHead.css({"height":lineHeight+2*settings.spaceWidth,
"background-color":settings.topColor
});
$operDate.css({"margin-top":settings.spaceWidth,
"margin-left":settings.spaceWidth,
"float":"left",
"border":settings.innerBorder,
"text-align":"center"
});
//設定operDate包含邊框的實際寬度
$operDate.outerWidth(($calHead.width()-3*settings.spaceWidth)/2);
$operDate.outerHeight(lineHeight);
$operDate.find(".operb")
.css({"width":"20px",
"background":settings.ymBgColor,
"height":$operDate.innerHeight(),
"cursor":"pointer"
});
$operDate.find(".year_sub,.month_sub")
.css({"float":"left","border-right":settings.innerBorder});
$operDate.find(".year_add,.month_add")
.css({"float":"right","border-left":settings.innerBorder});
$operDate.find("span")
.css({"color":settings.ymFontColor,
"line-height":$operDate.height()+"px"
});
//設定箭頭樣式
$operDate.find(".aLeft")
.arrow({"direction":"left",
"width":arrowWidth,
"height":arrowWidth*2,
"color":settings.arrowColor
});
$operDate.find(".aRight")
.arrow({"direction":"right",
"width":arrowWidth,
"height":arrowWidth*2,
"color":settings.arrowColor
});
$arrow.css({
"margin":"0 auto",
"margin-top":parseInt($operDate.innerHeight())/2-arrowWidth
});
//載入中間表格樣式
$center.css({
"border":settings.innerBorder,
"margin-left":settings.spaceWidth,
"overflow":'hidden'
});
//載入中間表格實際寬度
$center.outerWidth($calendar.width()-2*settings.spaceWidth);
$center.height(lineHeight*7);
$ctable.find("td").css({"text-align":"center"});
$calBottom.css({"margin-right":settings.spaceWidth});
$calBottom.find("button")
.css({"border":settings.btnBorder,
"background":settings.btnBgColor,
"color":settings.btnFontColor,
"margin-top":settings.spaceWidth,
"margin-left":settings.spaceWidth,
"float":"right","width":"20%"
});
$calBottom.find("button").outerHeight(lineHeight);
//去除button連結的虛線框
$("."+settings.className+" button").focus(function(){this.blur()});
$operDate.find(".operb").hover(function(){
$(this).css("background",settings.ymHoverBgColor);
},function(){
$(this).css("background",settings.ymBgColor);
});
$calBottom.find("button").hover(function(){
$(this).css({"background":settings.btnHoverBgColor,"color":settings.btnHoverFontColor});
},function(){
$(this).css({"background":settings.btnBgColor,"color":settings.btnFontColor});
});
},
//事件繫結
dateEvent:function(){
var $calendar = $("."+settings.className);
$calendar.find(".year_add").click(function(){Calendar.yearAdd();});
$calendar.find(".year_sub").click(function(){Calendar.yearSub();});
$calendar.find(".month_add").click(function(){Calendar.monthAdd();});
$calendar.find(".month_sub").click(function(){Calendar.monthSub();});
$calendar.find(".confirm_date").click(function(){Calendar.confirm();});
$calendar.find(".today_date").click(function(){Calendar.getToday();});
$calendar.find(".clear_date").click(function(){Calendar.clear();});
},
//當前日期:年份和月份
date:function(){
var $calendar = $("."+settings.className);
return {
year:parseInt($calendar.find(".current_year").html()),
month:parseInt($calendar.find(".current_month").html())
};
},
//年份自增
yearAdd:function(){
Calendar.loaderDate(Calendar.date().year+1,Calendar.date().month-1);
},
//年份自減
yearSub:function(){
Calendar.loaderDate(Calendar.date().year-1,Calendar.date().month-1);
},
//月份自增
monthAdd:function(){
var year = Calendar.date().year, month = Calendar.date().month;
if(month==12) {
month=1;
year=year+1;
} else {
month=month+1;
}
Calendar.loaderDate(year,month-1);
},
//月份自減
monthSub:function(){
var year = Calendar.date().year, month = Calendar.date().month;
if(month==1) {
month=12;
year=year-1;
} else {
month=month-1;
}
Calendar.loaderDate(year,month-1);
},
//日期選擇
dateChoose:function($object){
var year = Calendar.date().year, month = Calendar.date().month;
//上一個月
if($object.hasClass("pre_month_day")) {
if(month == 1) {
year = year-1;
month = 12;
} else {
month = (month-1).addZero();
}
//當前月
} else if($object.hasClass("this_month_day")) {
month = month.addZero();
//下一個月
} else {
if(month == 12) {
month = "01";
year = year + 1;
} else {
month = (month+1).addZero();
}
}
current.val(year+"-"+month+"-"+$object.text());
},
//確定事件
confirm:function(){
Calendar.destory();
},
//是否是閏年
isLeapYear:function(year){
if((year%4==0 && year%100!=0) || (year%400==0)) {
return true;
}
return false;
},
//指定年份二月的天數
februaryDays:function(year){
if(typeof year !== "undefined" && parseInt(year) === year) {
return Calendar.isLeapYear(year) ? 29:28;
}
return false;
},
getWeek:function(num){
return Calendar.weeks[num];
},
//獲取指定月份[0,11]的天數
getMonthDay:function(year,month){
if(month === 1){
return Calendar.februaryDays(year);
}
month=(month===-1)?11:month;
return Calendar.months[month];
},
//今天
getToday:function(){
var date = new Date(),
year = date.getFullYear(),
month = (date.getMonth()+1).addZero(),
day = date.getDate().addZero();
current.val(year+"-"+month+"-"+day);
Calendar.destory();
},
//清空
clear:function(){
current.val("");
Calendar.destory();
},
//設定日曆位置
setLocation:function(){
$calendar = $("."+settings.className);
var left = current.offset().left,
top = current.offset().top + current.innerHeight() + settings.marginTop;
$calendar.css({"position":"absolute","left":left,"top":top});
},
//關閉日曆
destory:function(){
$("."+settings.className).empty().remove();
},
//初始化日曆主體內容
loaderDate:function(year,month){
//初始化日期為當前年當前月的1號,獲取1號對應的星期
var oneWeek=new Date(year,month,1).getDay(),
$calendar = $("."+settings.className),
$calTable = $calendar.find("table"),
//這個月天數
thisMonthDay = Calendar.getMonthDay(year,month),
//獲取上一個的天數
preMonthDay;
//清空日期列表
$calTable.html("");
$calendar.find(".current_year").text(year+"年");
$calendar.find(".current_month").text((month+1)+"月");
if(oneWeek == 0) oneWeek = 7;
if(i==0) {
preMonthDay = Calendar.getMonthDay(year-1,11);
} else {
preMonthDay = Calendar.getMonthDay(year,month-1);
}
var start = 1, end = 1;
for(var i=0;i<7;i++) {
var dayHTML = "";
if(i==0) {
$calTable.append("<tr class='week_head'><tr>");
}
for(var j=1;j<=7;j++) {
//設定星期列表
if(i==0) {
$calTable.find(".week_head").append("<td>"+Calendar.getWeek(j-1)+"</td>");
} else {
if((i-1)*7+j<=oneWeek) { //從第二行開始設定值
dayHTML+="<td class='pre_month_day'>"+(preMonthDay-oneWeek+j)+"</td>";
} else if((i-1)*7+j<=thisMonthDay+oneWeek ){
var result=(start++).addZero();
dayHTML+="<td class='this_month_day'>"+result+"</td>";
} else {
var result=(end++).addZero();
dayHTML +="<td class='next_month_day'>"+result+"</td>";
}
}
}
if(i>0){
$calTable.append("<tr>"+dayHTML+"</tr>");
}
}
Calendar.tableStyle();
},
//表格樣式初始化
tableStyle:function(){
//表格中單元格的寬度
var $center = $calendar.find(".cal_center"),
$calTable = $calendar.find("table"),
tdWidth = parseFloat($center.width())/7;
$calTable.find("td").css({"width":tdWidth,"text-align":"center",
"color":"#AFAFAF",
"background":settings.thisMonthBgColor,"cursor":"pointer",
"color":settings.thisMonthFontColor,
"border-top":settings.tableBorder,
"border-right":settings.tableBorder});
$calTable.find(".week_head td")
.css({"background":settings.weekBgColor,
"cursor":"auto","border":"0",
"color":settings.weekFontColor
});
$calTable.find(".pre_month_day,.next_month_day")
.css({"color":settings.noThisMonthFontColor,"background":"transparent"});
//去除最右側表格的右邊框
$calTable.find("td:nth-child(7n)").css({"border-right":0});
$calTable.find("td").outerHeight(lineHeight);
$calTable.find("tr[class!=week_head] td").hover(function(){
$(this).css({"background":settings.dateHoverBgColor,
"color":settings.dateHoverFontColor
});
},function(){
$(this).css({"background":settings.thisMonthBgColor});
if($(this).hasClass("this_month_day")) {
$(this).css({"color":settings.thisMonthFontColor});
} else {
$(this).css({"color":settings.noThisMonthFontColor});
}
}).click(function(){Calendar.dateChoose($(this));});
}
};
return this.each(function(){
$target.click(function(){
//觸發物件,請寫在點選事件中,不然會做為全域性變數!
current = $(this);
//如果沒有生成日曆元素
if($("."+settings.className).length == 0) {
Calendar.loadCalendar();
}
});
//事件觸發物件
$(document).click(function(event){
var $calendar = $("."+settings.className)
if(!$target.triggerTarget(event) && !$calendar.triggerTarget(event)) {
Calendar.destory();
}
});
});
},
/**
*描述:生成指定箭頭樣式
**/
arrow:function(options){
var defaultOptions = {
color:'#AFAFAF',
height:20,
width:20,
//方向:預設向上'top',供選擇['up','bottom','left','right']
direction:'top'
};
var settings = jQuery.extend(defaultOptions,options||{}),
current = $(this);
function loadStyle(){
current.css({"display":"block","width":"0","height":"0"});
if(settings.direction === "top" || settings.direction === "down") {
current.css({
"border-left-width":settings.width/2,
"border-right-width":settings.width/2,
"border-left-style":"solid",
"border-right-style":"solid",
"border-left-color":"transparent",
"border-right-color":"transparent"
});
if(settings.direction === "top") {
current.css({
"border-bottom-width":settings.height,
"border-bottom-style":"solid",
"border-bottom-color":settings.color
});
} else {
current.css({
"border-top-width":settings.height,
"border-top-style":"solid",
"border-top-color":settings.color
});
}
} else if(settings.direction === "left" || settings.direction === "right") {
current.css({
"border-top-width":settings.height/2,
"border-bottom-width":settings.height/2,
"border-top-style":"solid",
"border-bottom-style":"solid",
"border-top-color":"transparent",
"border-bottom-color":"transparent"
});
if(settings.direction === "left") {
current.css({
"border-right-width":settings.width,
"border-right-style":"solid",
"border-right-color":settings.color
});
} else {
current.css({
"border-left-width":settings.width,
"border-left-style":"solid",
"border-left-color":settings.color
});
}
}
}
return this.each(function(){ loadStyle(); });
},
//觸發事件是否是物件本身
triggerTarget:function(event){
//如果觸發的是事件本身或者物件內的元素
return $(this).is(event.target) || $(this).has(event.target).length > 0;
},
//面板
skin:function(){
}
});
})(jQuery);相關推薦
jQuery日曆外掛編寫jquery.calendar.js
jQuery日曆外掛編寫(jquery.calendar.js)： 目前比較難解決的問題是： 1、面板問題，雖然可以自定義面板，但是使用起來還是有一定的困難。 樣式預覽： 預設面板1： 自定義面板2：(深藍) 自定義面板3：(大紅) 自定義面板4:炫酷黑 呼叫：
基於jQuery日曆外掛製作日曆
這篇文章主要介紹了基於jQuery日曆外掛製作日曆的相關資料,需要的朋友可以參考下 來看下最終效果圖吧： 是長得醜了一點，不要吐槽我-。- 首先來說說這個日曆主要的製作邏輯吧： ·一個月份最多有31天，需要一個7X6的表格去裝載 ·如果知道了某個月份1號是星期幾，這個月份有多少天，一個迴圈就可以顯示某個月的
JQuery日曆外掛My97DatePicker日期範圍限制
My97DatePicker是一個非常優秀的日曆外掛，不僅支援多種呼叫模式，還支援日期範圍限制。 常規的呼叫比較簡單，如下所示： 1 <input class="Wdate" id="d1" onclick="Wda
簡易的jQuery日曆外掛
===================== 說明：閒著無聊蠻去搜索了下，下面這個網址是無意間搜到的，反正我是下載了一個日曆外掛是可以用的 =================== 首先下載樣式啥的連結：https://pan.baidu.com/s/1eLpURtpJ
jquery.calendar.js日曆中日期的格式變化
我在專案中用到jquery的calendar日期控制元件，但是要使用不同的日期格式，研究了半天發現了修改格式的屬性， <input type="text" id="time" value="" class="xxxx"/> <div sty
Jquery外掛（下拉框帶本地模糊搜尋值的外掛）jquery.searchableSelect.js
jquery.searchableSelect.css需要引入的js和Css <script src="/js/plugins/searchableSelect/jquery.searchableSelect.js"></script> <link h
日曆任務外掛（jquery版）
先放張圖和原始碼 jquery版 ： https://gitee.com/under_the_sky/dateTask/tree/master/jquery%E7%89%88 下載地址 ：https://gitee.com/under_the_sky/dateTask.git
CMS系統常用外掛之jquery.validate.js
作為一名應屆萌新，入職半年，本來已做好遨遊java後端開發海洋的準備，但作為部門重（xiang）點（mu）培（yao）養（qiu）物件，還是先從前端做起吧。本著我是社會主義一塊磚，哪裡需要哪裡搬得原則，我還是欣然接受了。半年時間，前端從入門到入坑，陸續做了兩個專
【常用 JS 外掛】jQuery zTree 樹形結構外掛
zTree zTree 是一個依靠 jQuery 實現的多功能 “樹外掛”。優異的效能、靈活的配置、多種功能的組合是 zTree 最大優點。 頁面引用 CSS 部分 <link rel="stylesheet" href="/static/assets/
JQuery提示框tips外掛：jquery.contip.js
jquery.contip.js 是一個基於JQuery的氣泡提示框tip外掛。輕量級，扁平化，不用載入CSS檔案，自定義風格，事件監聽，程式碼註釋清晰，可擴充套件性強。 //示例程式碼： var pop = $('.elm').contip({ align: 'b
jquery 外掛開發／外掛編寫$.fn.extend(),$.extend()
jquery外掛開發大概有三種方式: 1,$.extend()-在jquery名稱空間即jquery本身上新增靜態方法;呼叫,例如:$.myPlugin();而非$('ele').myPlugin(); 2,$.fn.extend()- 3,$.widget()-$.ext
Jquery的時間外掛值，angular Js獲取方式
弄了一個時分的外掛 ： jquery.timepicker.css jquery.timepicker.js 截圖： 這個外掛是用Jquery的，所以，Angular如何獲取值呢？ <script src="https://cdn.bootcss.com/jqu
【常用 JS 外掛】jQuery DataTables 自定義查詢
前提 因為需要根據不同的分類查詢資料，可以點選一個按鈕，重新重新整理表格。 js "ajax": { "url": "/article/page", "data":function (d) { d.cid = $("#cid"
【常用 JS 外掛】jQuery TreeTable 樹表格外掛
TreeTable treeTable 是跨瀏覽器、效能很高的 jQuery 的樹表元件，它使用非常簡單，只需要引用 jQuery 庫和一個 js 檔案，介面也很簡單。 優點： 相容主流瀏覽器：支援 IE6 和 IE6+, Firefox, chrome, Opera,
推薦一個挺好用的jquery外掛，jquery.jqplot.js（畫圖）,此處簡略得說一下折線圖的畫法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html
jQuery外掛實戰之fullcalendar（日曆外掛）Demo
jQuery的外掛非常多，應用的場景也非常豐富，今天我這裡給大家介紹一款非常實用的日曆頁面開發外掛 - fullcalendar，目前最新版本是1.5.1，使用這款外掛能夠快速幫助你快速程式設計實現基於web的日曆檢視功能，大家可能都使用過outlook的日曆項功能，使用日
25個超棒的jQuery日曆和日期選取外掛(1)
jQuery被認為是最好的JavaScript庫，因為它簡單易用、靈活，並有大量的外掛。 本文介紹25個非常不錯的jQuery日曆和日期選取外掛，希望對各位有用。您也可以在jQuery給力外掛大閱兵查詢更多的jQuery外掛。 1. Simple JQuery Date P
如何編寫jquery外掛之輪播圖
對於一位合格的前端開發人員來說，首頁圖片輪播可謂是必會的基本功。那麼我們聊一聊如何用jquery封裝自己的輪播外掛。 首先必須要聊到的jquery為我們提供的兩大擴充套件方法，$.fn和$.extend(),$.extend相當於為jQuery類（注意，JavaScript
JavaScript操作SVG畫相簿：基於jquery的外掛jquery.svgmagic.js
1.svgmagic.js外掛操作SVG方法： 示例：http://blog.csdn.net/linshutao/article/details/30053233 jquery.svgmagic.js地址：https://github.com/dirkgroenen/SV
簡單的Jquery 外掛編寫
jQuery如此流行，各式各樣的jQuery外掛也是滿天飛。你有沒有想過把自己的一些常用的JS功能也寫成jQuery外掛呢？如果你的答案是肯定的，那麼來吧！和我一起學寫jQuery外掛吧！ 先想好做個什麼功能 這是第一步，也是很重要的一步，鑑於咱們都是剛學習寫jQ