您的位置:首页 > Web前端 > JQuery

JQuery Common Method (keeping Update)

2014-03-06 15:00 176 查看
//----------JQuery Common Method -----------
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="javascript" >

//1. Truncate a string
function truncate{
var title = "This is your title";
var shortText = jQuery.trim(title).substring(0, 10).split(" ").slice(0, -1).join(" ") + "...";
alert(shortText );
}

//2. Mouse Event
function mouseoverAndmouseout()
{
$( "p" ).bind( "mouseenter mouseleave", function( event ) {
$( this ).toggleClass( "over" );
});

$( "li" ).hover(
function() {
$( this ).append( $( "<span> ***</span>" ) );
}, function() {
$( this ).find( "span:last" ).remove();
}
);

$('li').hover(
function(){
$(this).append();
}, function(){
$(this).find().remove();
}
);
}

//3. jQuery弹出层始终垂直居中
function popup(popupName){
var _scrollHeight = $(document).scrollTop(),//获取当前窗口距离页面顶部高度
_windowHeight = $(window).height(),//获取当前窗口高度
_windowWidth = $(window).width(),//获取当前窗口宽度
_popupHeight = popupName.height(),//获取弹出层高度
_popupWeight = popupName.width();//获取弹出层宽度
_posiTop = (_windowHeight - _popupHeight)/2 + _scrollHeight;
_posiLeft = (_windowWidth - _popupWeight)/2;
popupName.css({"left": _posiLeft + "px","top":_posiTop + "px","display":"block"});//设置position
}
$(function(){
$(".btn1").click(function(){
popup($("#div1"));
});
$(".btn2").click(function(){
popup($("#div2"));
});
});

//4. jquery获取对象坐标

function getPosition()
{
//获取页面某一元素的绝对X,Y坐标,可以用offset()方法:

var X = $('#DivID').offset().top;
var Y = $('#DivID').offset().left;

//获取相对(父元素)位置:

var X = $('#DivID').position().top;
var Y = $('#DivID').position().left;
}

//5. to make the child element a drag handle
//<div class="parent">
//<divc class="draggable"></div>
//</div>
function childDrag()
{
$(".parent").draggable({ handle: ".draggable" });
}

//6. Dialog
function showDialog()
{
$("#DivID").dialog({
autoOpen: false,
modal: true,
position: { of: $(document.body) },
height: 180,
width: 325,
buttons: {
'Cancel': {
value: "Cancel",
"class": "CancelButton",
click: function () {
$(this).dialog('close');
}
},
'Continue': {
value: "Done",
click: function () {
$(this).dialog('close');
}
}
},
open: function () {
$('div[role="dialog"]').find('input[type="button"]:first').css('margin-right', '175px');
}
});
}

//7. Create Mask
var createMask = function () {
var mask = $('<div id="_mask_"></div>').css({
zIndex: 99,
width: '100%',
height: document.documentElement.clientHeight,
backgroundColor: '#A2A2A2',
position: 'absolute',
top: document.documentElement.scrollTop || document.body.scrollTop,
//top: 0,
//left: 0,
left: document.documentElement.scrollLeft,
//filter: 'alpha(opaticy=30)',
opacity: 0.3,
display: 'none'
})
.appendTo('body');

var popupmask = $('<div id="_popup_mask_"></div>').css({
zIndex: 199,
width: '100%',
height: document.documentElement.clientHeight,
backgroundColor: '#A2A2A2',
position: 'absolute',
top: document.documentElement.scrollTop || document.body.scrollTop,
//top: 0,
//left: 0,
left: document.documentElement.scrollLeft,
//filter: 'alpha(opaticy=30)',
opacity: 0.3,
display: 'none'
})
.appendTo('body');

$(window).resize(function () {
mask.css({
height: document.documentElement.clientHeight,
width: '100%'
});
popupmask.css({
height: document.documentElement.clientHeight,
width: '100%'
});
});

$(window).scroll(function () {
$('#_mask_').css({
'top': document.documentElement.scrollTop || document.body.scrollTop,
'width': document.documentElement.scrollWidth
});
$('#_popup_mask_').css({
'top': document.documentElement.scrollTop || document.body.scrollTop,
'width': document.documentElement.scrollWidth
});
});
};

var showMask = function () {
$('#_mask_').fadeIn('fast').click(function () { hideMask() });
};

//8.get Parameter By Name
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

//9. ajax processbar
$(document).ajaxStart(function () {
//Show your progressbar here
$("#divWait").spinner({ displayMode: 'page' });
}).ajaxStop(function () {
//Hide your progressbar here
$('#divWait').spinner(false);
});

//10. set Arrows
function setArrows(div) {
if (col != undefined) {
col = col.replace(' ▲', '').replace(' ▼', '');
//var header = $('th a:contains(' + col + ')');
var header = col;

if (div != undefined) {
if (dir == 'ASC') {
$('#' + div + ' th a').each(function () {
if ($(this).text() == header) {
$(this).text($(this).text() + ' ▲');
}
});
}
if (dir == 'DES') {
$('#' + div + ' th a').each(function () {
if ($(this).text() == header) {
$(this).text($(this).text() + ' ▼');
}
});
}
}
else {
if (dir == 'ASC') {
$('th a').each(function () {
if ($(this).text() == header) {
$(this).text($(this).text() + ' ▲');
}
});
}
if (dir == 'DES') {
$('th a').each(function () {
if ($(this).text() == header) {
$(this).text($(this).text() + ' ▼');
}
});
}
}
}
}

//11. insert Blank Rows in Grid in table
function insertBlankRowinGrid(divID, baseRowCount, colspan) {
//insert blank rows in table
var rowCount = 0;
$('#'+divID+' tr.gridRow').each(function () {
rowCount++;
});
$('#'+divID+' tr.gridAltRow').each(function () {
rowCount++;
});
var html = '';
if (rowCount < baseRowCount) {
for (var i = 0; i < baseRowCount - rowCount; i++) {
html += "<tr class='tempRow' style='height:24px;'><td colspan='" + colspan + "'> </td></tr>";
}
html += "<tr class='gridFoot'><td colspan='" + colspan + "'> </td></tr>";
$(html).appendTo($('#' + divID + ' tr.gridRow').parent());

if ($('#' + divID + ' table tfoot').html() != null) {
$('#' + divID + ' tr.gridRow').parent().find('tr.gridFoot').remove();
}
}
else if (rowCount == baseRowCount) {
if ($('#' + divID + ' table tfoot').html() == null) {
html = '';
html = "<tr class='gridFoot'><td colspan='" + colspan + "'> </td></tr>";
$(html).appendTo($('#' + divID + ' tr.gridRow').parent());
}
}
}

//12. insert NoRecord
function insertNoRecord(height, colspan, divID, labelID) {
var count = $('#' + labelID).text();
if (count == 0) {
var html = '<tr style="height:' + height + ';border:1px solid #84a1c6;"><td colspan="' + colspan + '" align="center">No Record</td></tr>'
+ '<tr class="gridFoot"><td colspan="' + colspan + '"> </td></tr>';
$(html).appendTo($('#' + divID + ' table tbody'));
}
}

//13. event.preventDefault and event.stopPropagation()
function eventTest(event)
{
event.preventDefault();//preventDefault prevents the default action the browser makes on that event.
event.stopPropagation();//stopPropagation stops the event from bubbling up the event chain.
}

//14. textarea maxlength in IE

$(function() {
$("textarea[maxlength]").bind('input propertychange', function() {
var maxLength = $(this).attr('maxlength');
if ($(this).val().length > maxLength) {
$(this).val($(this).val().substring(0, maxLength));
}
})
});

</script>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: