jQuery插件
喜欢了《》 7小时前
喜欢了《》 12小时前
喜欢了《》
喜欢了《》
喜欢了《》
Copyright (C) 2013
All Rights Reserved 浙ICP备号-1 &您是第2717645位访客！你的位置： >
> 漂亮的jquery回到顶部插件jQuery GoUp
GoUp是一款非常漂亮而又十分装简单轻量的（go Top）插件，滚动条在网页顶部的时候，回来顶按钮是隐藏的，当用户往下滚动到一定高度时则出现，用户点击后，页面直接滚动回到顶部，然后按钮隐藏。
引入核心文件
&script&src=&/jquery/1.10.2/jquery.min.js&&&/script&
&script&type=&text/javascript&&src=&jquery.goup.min.js&&&/script&
写入JS，初始化插件
&&$(document).ready(function&()&{
&&&&&&&&&&&&$.goup({
&&&&&&&&&&&&&&&&trigger:&100,
&&&&&&&&&&&&&&&&bottomOffset:&150,
&&&&&&&&&&&&&&&&locationOffset:&100,
&&&&&&&&&&&&&&&&title:&'This&is&a&Demo',
&&&&&&&&&&&&&&&&titleAsText:&true
&&&&&&&&&&&&});
&&&&&&&&});
在那个出现（left或right）
locationOffset
距离屏幕的边距
bottomOffset
离底部的距离
containerRadius
containerClass
按钮的样式类
goup-container
arrowClass
&arrow元素的样式类
goup-arrow
containerColor
按钮的颜色
arrowColor
arrow的颜色
向下滚动多少像素后显示按钮
entryAnimation
按钮的动画方式 (&slide& or &fade&)
alwaysVisible
设置按钮一直出现
滚动的速度 (&slow&, &normal& or &fast&)
hideUnderWidth
页面宽度多少时按钮永久隐藏
鼠标悬浮在按钮时显示的标题
''
titleAsText
如果设置为真，title内容在按钮下方显示
titleAsTextClass
title的样式名
转载请注明： &
下载地址： |
与本文相关的文章导入资源：&script type="text/javascript" src="js/jquery.js"&&/script&
javascript代码：&script type="text/javascript"&
$(document).ready(function(){
//每页显示的数目
var show_per_page = 5;
//获取content对象里面，数据的数量
var number_of_items = $('#content').children().size();
//计算页面显示的数量
var number_of_pages = Math.ceil(number_of_items/show_per_page);
//隐藏域默认值
$('#current_page').val(0);
$('#show_per_page').val(show_per_page);
var navigation_html = '&a class="previous_link" href="javascript:previous();"&上一页&/a&';
var current_link = 0;
while(number_of_pages & current_link){
navigation_html += '&a class="page_link" href="javascript:go_to_page(' + current_link +')" longdesc="' + current_link +'"&'+ (current_link + 1) +'&/a&';
current_link++;
navigation_html += '&a class="next_link" href="javascript:next();"&下一页&/a&';
$('#page_navigation').html(navigation_html);
//add active_page class to the first page link
$('#page_navigation .page_link:first').addClass('active_page');
//隐藏该对象下面的所有子元素
$('#content').children().css('display', 'none');
//显示第n（show_per_page）元素
$('#content').children().slice(0, show_per_page).css('display', 'block');
function previous(){
new_page = parseInt($('#current_page').val()) - 1;
//if there is an item before the current active link run the function
if($('.active_page').prev('.page_link').length==true){
go_to_page(new_page);
function next(){
new_page = parseInt($('#current_page').val()) + 1;
//if there is an item after the current active link run the function
if($('.active_page').next('.page_link').length==true){
go_to_page(new_page);
//跳转某一页
function go_to_page(page_num){
//get the number of items shown per page
var show_per_page = parseInt($('#show_per_page').val());
//get the element number where to start the slice from
start_from = page_num * show_per_
//get the element number where to end the slice
end_on = start_from + show_per_
//hide all children elements of content div, get specific items and show them
$('#content').children().css('display', 'none').slice(start_from, end_on).css('display', 'block');
/*get the page link that has longdesc attribute of the current page and add active_page class to it
and remove that class from previously active page link*/
$('.page_link[longdesc=' + page_num +']').addClass('active_page').siblings('.active_page').removeClass('active_page');
//update the current page input field
$('#current_page').val(page_num);
CSS样式：&style&
#page_navigation a{
text-decoration:none
.active_page{
background:
color:white !
相关插件-分页
讨论这个项目（7）回答他人问题奖励jQ币
好丑。。。
PROMULGATOR
关注作者 (4)
收藏此插件 (16)
我当前jQ币余额：正在获取..
已下载次数：25
所需jQ币：1&!DOCTYPE html&
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
&title&非常智能漂亮的jquery分页效果插件&/title&
&style type="text/css"&
padding-top: 20
width: 800
width: 91%; /*height: 150*/
margin: 0;
.contents & p
padding: 8
width: 100%;
border-right: solid 1px #5f9000;
.table th, .table td
width: 16%;
height: 20
padding: 4
text-align:
border-left: solid 1px #5f9000;
border-left: solid 1px #5f9000;
border-bottom: solid 1px #5f9000;
background-color: #4f7305;
margin: 0;
height: 200
font-size: 14
background-color: W
#divs & div
width: 98%;
padding: 8
#divs & div p
width: 95%;
padding: 8
list-style:
margin: 0;
padding: 0;
padding: 10
#container
width: 100%;
border: solid 1
&script src="jquery-1.4.4.min.js" type="text/javascript"&&/script&
&script src="smartpaginator.js" type="text/javascript"&&/script&
&link href="smartpaginator.css" rel="stylesheet" type="text/css" /&
&script type="text/javascript"&
$(document).ready(function() {
$('#green-contents').css('display', 'none');
$('#black-contents').css('display', 'none');
$('ul li').click(function() {
$('#red-contents').css('display', 'none');
$('#green-contents').css('display', 'none');
$('#black-contents').css('display', 'none');
if ($(this).attr('id') == '1') $('#red-contents').css('display', '');
if ($(this).attr('id') == '2') $('#green-contents').css('display', '');
if ($(this).attr('id') == '3') $('#black-contents').css('display', '');
$('#green').smartpaginator({ totalrecords: 10, recordsperpage: 3, datacontainer: 'mt', dataelement: 'tr', initval: 0, next: 'Next', prev: 'Prev', first: 'First', last: 'Last', theme: 'green' });
$('#black').smartpaginator({ totalrecords: 5, recordsperpage: 1, datacontainer: 'divs', dataelement: 'div', initval: 0, next: 'Next', prev: 'Prev', first: 'First', last: 'Last', theme: 'black' });
$('#red').smartpaginator({ totalrecords: 32, recordsperpage: 4, next: 'Next', prev: 'Prev', first: 'First', last: 'Last', theme: 'red', onchange: function(newPage) {
$('#r').html('Page # ' + newPage);
&div id="wrapper"&
&div style="height: 30"&
&ul class="tab"&
&li style="background-color: #E71C18; border: solid 1px #F82723;" id="1"&Demo 1&/li&
&li style="background-color: #588500; border: solid 1px #5f9000;" id="2"&Demo 2&/li&
&li style="background-color: #1d1d1d; border: solid 1px #000;" id="3"&Demo 3&/li&
&div id="red-contents" class="contents" style="border: solid 1px #F82723;"&
$('#red').smartpaginator({ totalrecords: 100,
recordsperpage: 10,
theme: 'red',
onchange: function(newPage) {
$('#r').html('Page # ' + newPage);
This demo shows the use of onchange callback, on each page click you'll get the
new page no. So, you can pull data from your datasource, probably database or some
xml file. Smart Pagination can also filter your data automatically, this is usefull
if you only want client side pagination. Obvioulsy this will be suitable only for
small data. Click on Demo 2 to see and example.
&div style="height: 65 text-align: font-size: 2 padding-top: 40
color: #F82723" id="r"&
&div id="red" style="margin:"&
&div id="green-contents" class="contents" style="border: solid 1px #5f9000;"&
$('#green').smartpaginator({ totalrecords: 10,
recordsperpage: 3,
datacontainer: 'mt',
dataelement: 'tr',
theme: 'green' });
This demo shows how Smart Paginator can filter your data automatically. Here we
have an HTML table with 10 rows and 6 columns, and we want 3 recods to be displayed
on each page. For this you need to pass the id of the HTML table you want Smart
Paginator to filter see the datacontainer property, and you also need to set the
dataelement tag which is 'tr' for a table. 'datacontainer' and 'dataelement' properties
establish parent child relation, you can pass any element other than table as 'datacontainer'
and set the 'dataelement', Smart Paginator will filter the 'dataelements' gracefull.
See Demo 3 for for an example of this.
&table id="mt" cellpadding="0" cellspacing="0" border="0" class="table"&
&tr class="header"&
&div id="green" style="margin:"&
&div id="black-contents" class="contents" style="border: solid 1px #000;"&
$('#black').smartpaginator({ totalrecords: 5,
recordsperpage: 1,
datacontainer: 'divs',
dataelement: 'div',
theme: 'black' });
This demo shows the use of Smart Paginator with HTML elements other than table.
See how divs are displayed according to current page.
&div id="divs"&
&a href="http://www.codefans.net"&jQuery Content
Slider: jsCarousel&/a&&/h4&
jsCarousel is a jquery slider plugin that slides contents in multi direction. jsCarousel
slider can be used as a feature content slider as well. You can put any kind of
contents you want whether images, text, videos, news etc. it's up to you. One interesting
thing about jsCarousel slider is that you can make simple image gallery with thumbnail
support by using it. jsCarousel slider plugin gives you the source of image via
callback function, when you click on some image within slider. See Using jsCarousel
Slider section below to get an idea about using the callback function.
&a href="http://www.codefans.net"&jQuery
Image Preload Plugin: Smart Preload&/a&&/h4&
Smart Preloader is a small jQuery image preloading plugin that helps you preload
all the required images. Smart perloader plugin takes an array of images and notifies
via "oneachimageload" on each image load, and once all the images are loaded "onloadall"
callback functions is called. Both the "oneachimageload" and "onloadall" functions
are passed as parameters to Smart Preloader initializer function.&/p&
&a href="http://www.codefans.net"&jQuery
Pagination Plugin: Smart Paginator&/a&&/h4&
Smart Paginator is a comprehensive jQuery Pagination plugin that makes adding pagination
very simple task, all the navigation logic is built in and it is also very customizable.
Smart Paginator supports variety of parameters and custom themes, that can be used
to customize the look and feel to your desire.&/p&
&a href="http://www.codefans.net"&jQuery Spin
Button Plugin: Smart Spin&/a&&/h4&
Smart spin is a jQuery spin button plugin that mimics the very common windows spin
button control. Smart spin allows you to select a value between minimum and maximum
values using either mouse or keyboard. You can also enter a value via keyboard.
Smart spin contains a text box and "up" "down" buttons, it also supports "masking"(text
that appears when the control looses focus). Clicking the "up" button causes the
value to increment by step value (step value is configurable, default is 1), while
clicking the "down" button causes the value to decrement by step value. Clicking
up/down buttons and holding the left mouse button causes the values to change more
&a href="http://www.codefans.net"&jQuery Slider/Trackbar
Plugin: Smart Slider&/a&&/h4&
Smart Slider is a jQuery plugin that mimics the very common user interface track
bar component, which consists of a slider bar and tracker/pointer, where tracker
can be moved back and forth along the slider bar to select a value. Smart Slider
comes in three different styles with variety of custom parameters. You can also
use your own custom styles simply by defining your custom CSS classes. Smart Slider
supports different styles and custom themes. Using Smart Slider plugin is also very
simple, you just need a block element, Smart Slider script and CSS file, Smart Slider
automatically generate track bar UI.&/p&
&div id="black" style="margin:"&
所需金币： 5
文件大小：0.03MB
您当前剩余金币：0非常智能漂亮色彩丰富的简单jquery分页效果插件
非常智能漂亮色彩丰富的简单jquery分页效果插件脚本简介：
非常智能漂亮的jquery分页效果插件，通过此插件可以在客户端很容易实现分页效果，色彩丰富，经测试效果也非常不错，代码页码输入框。
下载地址：
解压密码：www.jb51.net 就是本站主域名，希望大家看清楚。
推荐使用 [
] 下载，使用 [
] 以上版本解压本站脚本。
如果这个脚本总是不能下载的请在评论中留言,我们会尽快修复，谢谢!
下载本站资源，如果服务器暂不能下载请过一段时间重试!
如果遇到什么问题，请评论留言，我们定会解决问题，谢谢大家支持!
本站提供的一些商业脚本是供学习研究之用，如用于商业用途，请购买正版。
本站提供的非常智能漂亮色彩丰富的简单jquery分页效果插件资源来源互联网，版权归该下载资源的合法拥有者所有。
不知如何下载的，可以查看}