jQuery插件接口
目前創(chuàng)新互聯(lián)公司已為1000多家的企業(yè)提供了網(wǎng)站建設、域名、虛擬空間、網(wǎng)站托管、服務器托管、企業(yè)網(wǎng)站設計、徐州網(wǎng)站維護等服務，公司將堅持客戶導向、應用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。
1.一種是掛在jQuery命名空間下的全局函數(shù)，也可稱為靜態(tài)方法
var mynavtion=$.bjPageNation(callback,5);
mynavtion.pageInit(1,100);
function callback(){
mynavtion.getPageIndex();
}
上面的代碼我只是簡簡單單的將自己封裝好的myPageNation掛名在jQuery對象上，后續(xù)調(diào)用的方法都是在自己封裝好的對象中。
jQuery.extend({
myPageNation:myPageNation
});
2.另一種是jQuery對象級別的方法，即掛在jQuery原型下的方法，這樣通過選擇器獲取的jQuery對象實例也能共享該方法.
var mynavtion=$().bjPageNation(callback,5);
mynavtion.pageInit(1,100);
function callback(){
mynavtion.getPageIndex();
}
jQuery.fn.extend({
bjPageNation:myPageNation
});
pagenumber頁碼，
pagecount分頁數(shù)量，
buttonClickCallback點擊分頁的函數(shù)，
TotalCount記錄總數(shù)
PageEnter：true 跳頁false不跳頁
$("#pager").pager({
pagenumber: pageclickednumber,
pagecount: Math.ceil(total / 8),
buttonClickCallback: PageClick,
TotalCount: total,
PageEnter: true
});
PageClick = function (pageclickednumber) {
}
html做點一個按鈕就彈出文字的代碼：
最基本的彈出窗口代碼
SCRIPT LANGUAGE="javascript"
!-- window.open ('page.html') -- /SCRIPT
經(jīng)過設置后的彈出窗口
SCRIPT LANGUAGE="javascript"
!-- window.open ('page.html', 'newwindow', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=n o, status=no') //--
/SCRIPT
用函數(shù)控制彈出窗口
html
head
script LANGUAGE="JavaScript"
!-- function openwin() { window.open ("page.html", "newwindow", "height=100, width=400, toolbar =no, menubar=no, scrollbars=no, resizable=no, location=no, status=no") //} //--
/script
/head
body onload="openwin()"
/body
/html
同時彈出2個窗口
script LANGUAGE="JavaScript"
!-- function openwin() { window.open ("page.html", "newwindow", "height=100, width=100, top=0, left=0,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=n o, status=no")//window.open ("page2.html", "newwindow2", "height=100, width=100, top=1 00, left=100,toolbar=no, menubar=no, scrollbars=no, resizable=no, loca tion=no, status=no")//} //--
/script
主窗口打開文件1.htm，同時彈出小窗口page.html
如下代碼加入主窗口head區(qū):
script language="javascript"
!-- function openwin() { window.open("page.html","","width=200,height=200") } //--
/script
加入body區(qū): a href="1.htm" onclick="openwin()"open/a
彈出的窗口之定時關(guān)閉控制
首先，將如下代碼加入page.html文件的head區(qū):
script language="JavaScript"
function closeit()
{ setTimeout("self.close()",10000) //毫秒 }
/script
在彈出窗口中加上一個關(guān)閉按鈕
FORM
INPUT TYPE='BUTTON' VALUE='關(guān)閉' onClick='window.close()'
/FORM
內(nèi)包含的彈出窗口-一個頁面兩個窗口
html
head
SCRIPT LANGUAGE="JavaScript"
function openwin()
{ OpenWindow=window.open("", "newwin", "height=250, width=250,toolbar=no,scrollbars="+scroll+",menubar=no");
//OpenWindow.document.write("TITLE例子/TITLE")
OpenWindow.document.write("BODY BGCOLOR=#ffffff")
OpenWindow.document.write("h1Hello!/h1")
OpenWindow.document.write("New window opened!")
OpenWindow.document.write("/BODY")
OpenWindow.document.write("/HTML")
OpenWindow.document.close() }
/SCRIPT
/head
body
a href="#" onclick="openwin()"打開一個窗口/a
input type="button" onclick="openwin()" value="打開窗口"
/body
/html
終極應用--彈出的窗口之Cookie控制
首先，將如下代碼加入主頁面HTML的HEAD區(qū):
script
function openwin(){
window.open("page.html","","width=200,height=200") }
function get_cookie(Name) { var search = Name + "=" var returnvalue = "";
if (document.cookie.length 0) { offset = document.cookie.indexOf(search)
if (offset != -1) { offset += search.length end = document.cookie.indexOf(";", offset);
if (end == -1)
end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end)) } }
return returnvalue; }
function loadpopup(){ if (get_cookie('popped')==''){ openwin()
document.cookie="popped=yes" } }
/script
Asp教程-ASP應用
this.Response.Write(Scriptwindow.open('WebForm7.aspx','','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=yes,width=750,height=470,left=80,top=40');/script");
彈出跟你當前的窗口有沒有菜單工具欄沒有關(guān)系,你只要在頁面中寫一個腳本它就彈出了.比如
a href=# onclick="window.open('xxx.aspx','窗口名稱','參數(shù)');"xxxxx/a
以下列出一些彈出窗口的參數(shù)：
(如:"fullscreen=yes, toolbar=yes")。下面是被支持的各種特性。
channelmode = { yes | no | 1 | 0 } 是否在窗口中顯示階梯模式。默認為no。
directories = { yes | no | 1 | 0 } 是否在窗口中顯示各種按鈕。默認為yes。
fullscreen = { yes | no | 1 | 0 } 是否用全屏方式顯示瀏覽器。默認為no。
height = number 指定窗口的高度，單位是像素。最小值是100。
left = number 指定窗口距左邊框的距離，單位是像素。值必須大于或者等于0。
location = { yes | no | 1 | 0 } 指定是否在窗口中顯示地址欄。默認為yes。
menubar = { yes | no | 1 | 0 } 指定是否在窗口中顯示菜單欄。默認為yes。
resizable = { yes | no | 1 | 0 } 指定是否在窗口中顯示可供用戶調(diào)整大小的句柄。默認為yes。
scrollbars = { yes | no | 1 | 0 } 指定是否在窗口中顯示橫向或者縱向滾動條。默認為yes。
status = { yes | no | 1 | 0 } 指定是否在窗口中顯示狀態(tài)欄。默認為yes。
titlebar = { yes | no | 1 | 0 } 指定是否在窗口中顯示標題欄。在非調(diào)用HTML Application或者一個對話框的情況下，這一項將被忽略。默認為yes。
toolbar = { yes | no | 1 | 0 } 指定是否在窗口中顯示工具欄，包括如前進、后退、停止等按鈕。默認為yes。
top = number 指定窗口頂部的位置，單位是像素。值必須大于或者等于0。
width = number 指定窗口的寬度，單位是像素。最小值是100。
jquery動態(tài)實現(xiàn)表格分頁的方法是利用自帶的分頁插件jQuery.page.js。
下面是使用方法：
$(".tcdPageCode").createPage({
? pageCount:10,
? current:1,
? backFn:function(p){
? ? ? //單擊回調(diào)方法，p是當前頁碼
? }
});
pageCount：總頁數(shù)
current：當前頁
實現(xiàn)分頁的tab如下：
div class="tcdPageCode"
span class="disabled"上一頁/span
span class="current"1/span
a href="javascript:;" class="tcdNumber"2/a
a href="javascript:;" class="tcdNumber"3/a
a href="javascript:;" class="tcdNumber"4/a
span.../span
a href="javascript:;" class="tcdNumber"6/aa href="javascript:;" class="nextPage"下一頁/a/div
實現(xiàn)效果：
百度一下吧。
1、引入文件
link rel="stylesheet" href="css/jquery.fullPage.css"
script src="js/jquery.min.js"/script
!-- jquery.easings.min.js 用于 easing 參數(shù)，也可以使用完整的 jQuery UI 代替，如果不需要設置 easing 參數(shù)，可去掉改文件 --
script src="js/jquery.easings.min.js"/script
!-- 如果 scrollOverflow 設置為 true，則需要引入 jquery.slimscroll.min.js，一般情況下不需要 --
script src="js/jquery.slimscroll.min.js"/script
script src="js/jquery.fullPage.js"/script
2、HTML
div id="dowebok"
div class="section"
h3第一屏/h3
/div
div class="section"
h3第二屏/h3
/div
div class="section"
h3第三屏/h3
/div
div class="section"
h3第四屏/h3
/div
/div
每個 section 代表一屏，默認顯示“第一屏”，如果要指定加載頁面時顯示的“屏幕”，可以在對應的 section 加上 class=”active”，如：
div class="section active"第三屏/div
同時，可以在 section 內(nèi)加入 slide，如：
div id="dowebok"
div class="section"第一屏/div
div class="section"第二屏/div
div class="section"
div class="slide"第三屏的第一屏/div
div class="slide"第三屏的第二屏/div
div class="slide"第三屏的第三屏/div
div class="slide"第三屏的第四屏/div
/div
div class="section"第四屏/div
/div
3、JavaScript
$(function(){
$('#dowebok').fullpage();
});
1、選項
選項 類型 默認值 說明
verticalCentered 字符串 true 內(nèi)容是否垂直居中
resize 布爾值 false 字體是否隨著窗口縮放而縮放
slidesColor 函數(shù) 無 設置背景顏色
anchors 數(shù)組 無 定義錨鏈接
scrollingSpeed 整數(shù) 700 滾動速度，單位為毫秒
easing 字符串 easeInQuart 滾動動畫方式
menu 布爾值 false 綁定菜單，設定的相關(guān)屬性與 anchors 的值對應后，菜單可以控制滾動
navigation 布爾值 false 是否顯示項目導航
navigationPosition 字符串 right 項目導航的位置，可選 left 或 right
navigationColor 字符串 #000 項目導航的顏色
navigationTooltips 數(shù)組 空 項目導航的 tip
slidesNavigation 布爾值 false 是否顯示左右滑塊的項目導航
slidesNavPosition 字符串 bottom 左右滑塊的項目導航的位置，可選 top 或 bottom
controlArrowColor 字符串 #fff 左右滑塊的箭頭的背景顏色
loopBottom 布爾值 false 滾動到最底部后是否滾回頂部
loopTop 布爾值 false 滾動到最頂部后是否滾底部
loopHorizontal 布爾值 true 左右滑塊是否循環(huán)滑動
autoScrolling 布爾值 true 是否使用插件的滾動方式，如果選擇 false，則會出現(xiàn)瀏覽器自帶的滾動條
scrollOverflow 布爾值 false 內(nèi)容超過滿屏后是否顯示滾動條
css3 布爾值 false 是否使用 CSS3 transforms 滾動
paddingTop 字符串 0 與頂部的距離
paddingBottom 字符串 0 與底部距離
fixedElements 字符串 無
normalScrollElements 無
keyboardScrolling 布爾值 true 是否使用鍵盤方向鍵導航
touchSensitivity 整數(shù) 5
continuousVertical 布爾值 false 是否循環(huán)滾動，與 loopTop 及 loopBottom 不兼容
animateAnchor 布爾值 true
normalScrollElementTouchThreshold 整數(shù) 5
2、方法
名稱
說明
moveSectionUp() 向上滾動
moveSectionDown() 向下滾動
moveTo(section, slide) 滾動到
moveSlideRight() slide 向右滾動
moveSlideLeft() slide 向左滾動
setAutoScrolling() 設置頁面滾動方式，設置為 true 時自動滾動
setAllowScrolling() 添加或刪除鼠標滾輪/觸控板控制
setKeyboardScrolling() 添加或刪除鍵盤方向鍵控制
setScrollingSpeed() 定義以毫秒為單位的滾動速度
3、回調(diào)函數(shù)
名稱
說明
afterLoad 滾動到某一屏后的回調(diào)函數(shù)，接收 anchorLink 和 index 兩個參數(shù)，anchorLink 是錨鏈接的名稱，index 是序號，從1開始計算
onLeave 滾動前的回調(diào)函數(shù)，接收 index、nextIndex 和 direction 3個參數(shù)：index 是離開的“頁面”的序號，從1開始計算；
nextIndex 是滾動到的“頁面”的序號，從1開始計算；
direction 判斷往上滾動還是往下滾動，值是 up 或 down。
afterRender 頁面結(jié)構(gòu)生成后的回調(diào)函數(shù)，或者說頁面初始化完成后的回調(diào)函數(shù)
afterSlideLoad 滾動到某一水平滑塊后的回調(diào)函數(shù)，與 afterLoad 類似，接收 anchorLink、index、slideIndex、direction 4個參數(shù)
onSlideLeave 某一水平滑塊滾動前的回調(diào)函數(shù)，與 onLeave 類似，接收 anchorLink、index、slideIndex、direction 4個參數(shù)
重慶分公司
重慶分公司
