• 很实用的JQuery代码片段(转)


    1 元素屏幕居中

    jQuery.fn.center = function () {
        this.css("position","absolute");
        this.css("top",($(window).height()-this.height())/2+$(window).scrollTop()+"px");
        this.css("left",($(window).width()-this.width())/2+$(window).scrollLeft()+"px");
        return this;
    }
    $("#myDiv").center();

    2 获取页面路径相关参数

    //值:http://42du.cn/list#jq
    var url = document.URL;
    //值:http:
    var protocol = location.protocol;
    //值:42du.cn
    var host = location.host;
    //值:jq
    var hashP = document.URL.split('#')[1];

    3 删除内联样式

    $("*[style]").attr("style", "");

    4 长度限制并截取

    var $elem = $("#title");
    if($elem.text().length > 30) {
        $elem.text($elem.text().substr(0, 27)+"...");
    }

    5 外链新窗口打开

    $("a[@href^='http']").attr('target','_blank');

    6 测试JQuery与其它库冲突情况

    //测试冲突代码
    $("#jqtest").click( function() {
       alert("jQuery is working!");
    });
    //避免冲突
    var $jq = jQuery.noConflict();
    $jq("#jqtest").click( function() {
       alert("jQuery is working!");
    });

    7 加载JQuery即使CDN掉线

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="/media/js/jquery.js"></script>')</script>

    8 加载遮罩层,点击移除

    $('<div id="overlay"></div>')
    .css({
        position    : 'fixed',
        top         : 0,
        left        : 0,
        right       : 0,
        bottom      : 0,
        opacity     : 0.6,
        background  : 'black',
        display     : 'none'
    })
    .appendTo('body')
    .fadeIn('normal')
    .click(function () {
        $(this).fadeOut('normal', function () {
            $(this).remove();
        })
    });

    9 元素固顶

    //注意调整边界值
    $(window).scroll(function() {
        if ($(window).scrollTop() > 100) {
            $('#navbar').css({'position' : 'fixed', 'top' : 0});
        } else {
            $('#navbar').css({'position' : 'relative', 'top' : 'none'});
        }
    });

    10 禁止右键菜单

    $(document).bind('contextmenu', function () {
        return false;
    })

    11 对象插件模版代码

    (function($){
       var MyPlugin = function(element, options) {
           var elem = $(element);
           var obj = this;
           var settings = $.extend({param: 'defaultValue'}, options || {});
           // 公有方法
           this.publicMethod = function(){
               console.log('public method called!');
           };
           // 私有方法
           var privateMethod = function() {
               console.log('private method called!');
           };
       };
       $.fn.myplugin = function(options) {
           return this.each(function(){
               var element = $(this);
               // Return early if this element already has a plugin instance
               if (element.data('myplugin')) return;
               // pass options to plugin constructor
               var myplugin = new MyPlugin(this, options);
               // Store plugin object in this element's data
               element.data('myplugin', myplugin);
           });
       };
    })(jQuery);

     

  • 相关阅读:
    TextView走马灯
    Android apk安装时出现“解析软件包错误”
    Android Studio调试手机或者安装APK的时候出现install failed test only
    如何动态改变报表的行高列宽
    如何动态的给报表添加目录
    免费报表工具零代码零基础轻松搞定 web 报表
    脚本中如何做填报数据校验
    脚本填报表的条件查询
    脚本模式下的填报表制作
    交叉填报表的制作
  • 原文地址:https://www.cnblogs.com/acuier/p/6851776.html
Copyright © 2020-2023  润新知