參考: http://www.jb51.net/article/76093.htm
如前所述, 不要什么都想到 jquery的 腳本js, 應該首先推薦的是 css 和 元素本身的事件 函數 如: onclick, select選擇框的 onchange="search()" 函數方法.
Aria: a:ri2, 詠嘆調, aria-label通常是放在bootstrap的標簽中, 用來做為描述信息的
比較成熟的js 分頁器控件: (自帶js代碼的操作: 是基於bootstrap的 bootsrtapPaginator)
參考: http://blog.csdn.net/guying4875/article/details/50685860
各個參數的含義:
有5種組件結構, 即整個控件 上的操作按鈕的類型: type,為：'first', prev, page, next, 'last'.
**如果要為一個元素添加多個類, 則使用addClass('cls1 cls2') 多個類之間 用 "空格" 而不是用 "逗號"隔開, 否則會把 逗號看作是一類的 一部分, 而實際上就沒有包含 逗號的類 **
$("p").addClass("selected");
$("p").addClass("selected1 selected2");
不管是你原來就寫的 靜態的html代碼中的元素, 還是 由 js插件在 解析后 生成的 "動態代碼""實時代碼", 只要在 firefox中, 查看得到的 元素標簽, 都可以通過在style中 寫css樣式, 改變默認的顯示方式!! 比如修改bootstrap-paginator的 分頁器的外觀...
可以在 鏈接標簽a 中放 任何標簽, 包括 div, p等. 而且 可以 在 h1, h2, hx之類的標簽中, 放 鏈接a標簽, 如 循環輸出列表 標簽時... 就是這樣實現 的
特別注意的是, bootstrap paginator的外觀顯示的 只是 在 #example的div內, 增加的一個 ul列表>li*數字 的列表, 當前被選中的li只是增加了一個 .active的類. 所以 默認的 分頁器,就是 list列表的默認樣式, 前面有黑色小圓點的. 你完全可以根據自己的需要, 通過書寫css 重載 分頁器的樣式! 如修改分頁器按鈕的 顏色, 大小,邊框等. 並且可以修改分頁器的 文字內容等...
實際上, 分頁器中的 按鈕, 就是 li中的 鏈接a 標簽!!
最終, 單擊分頁器上 的按鈕的時候, 實際上, 就是 增加 了 "ul>li>a鏈接的" [ href ] 鏈接地址, 這個鏈接地址 就是將要跳轉/更新 的頁面地址. 實際上在跳轉 鏈接頁面的時候, 默認的是 重新請求 整個頁面, 是在頁面上加上 get 傳參 如: showMessage.html?page=6 是在整個頁面 獲取到 數據二維數組后, 通過 頁數對輸出結果進行 "過濾""篩選" 而已!!
要對 ul > li > a 的css 標簽嚴格區分, 比如 如果將顏色的css屬性, 寫在 li上, 並不會 對 a 鏈接 起作用..., 所以 一定要 寫在 a上面才會生效!
雖然可以對 分頁器的ul 使用 addCss('btn-group'), 對li 使用 addCss('btn btn-primary') 等樣式, 但是 這種樣式只是在 頁面初始化的時候,有效, 但是一旦 點擊后, 這種class樣式就沒有了, 所以 要想讓 "分頁器 獲得永久的 樣式外觀" , 還得要 在style中 書寫, 不能 用js 來寫!
但是后來發現 , 使用 分頁器中的 選項: itemContainerClass: function(type, page, current){ ...return 'btn btn-success'}, 方法, 也可以永久地 為 分頁器按鈕添加類. 這種方法也是可選的, 前面那種 自己寫css 樣式也是可以的! 而且, 自定義的樣式更靈活!!
** 如何修改hr水平線的顏色和 粗細**
通常我們想到 設置顏色是用 color, 實際上他是沒有效果的! 因為color 是針對元素中的文字 的顏色而言的! 而hr是 水平線不是 文字, 所以color無效 , 應該把hr看作是 同 段落p div等類似的元素. 所以, 設置hr的顏色, 是設置: backgorund-color, 而且要設置一個 1px+ 的高度, border可以設置為none;
hr style="background-color: #abc; height: 2px; border: none;" 就好了!
要弄清楚paginator中的 參數type , page, current 的含義
- page:是指當前 這個按鈕 屬於 第幾頁； 返回的類字符串只對 該鏈接按鈕有效
if (page == 5) return 'btn btn-default';則只有第 page 5 頁這一個 按鈕會顯示為btn - current: 是指當前分頁器處在第幾頁; 返回的字符串將對整個/ 所有的 鏈接按鈕都有效...
if (current=7) return 'btn btn-primary, 則當來到/點擊 第7 頁的時候, 將會使所有的 鏈接都 顯示為 btn.
要注意paginator 的options 中, 如果是自定義 樣式, 最好不要寫 itemContainerClass, 因為這個選項, 即使你function中為空, 它也會返回 默認的樣式, 把你前面的自定義樣式 給 "覆蓋"了, 從而使得自定義樣式 不起作用, 所以 最好就是不寫!!!