1. 首页
  2. 代码片断库
  3. jQuery
全部数据
text
javascript
php
markdown
sh
java
python
html
csharp
css
sql
c_cpp
PHP
ruby
xml
scss
json
swift
JavaScript
typescript
vbscript
powershell
CSS
apache_conf
ActionScript 3
r
ini
HTML
golang

jQuery jQuery自动编号

jQuery.fn.autoNumbering = function(options) {
	var defaults = {
		inverted: false,
		delimiter: ". "
	}
	
	var itemsLength = this.length;
	var opts = jQuery.extend(defaults,options);
		
	return this.each(function(index) {
		if(opts.inverted) {
			jQuery(this).prepend(itemsLength+opts.delimiter);
			itemsLength--;
		} else {
			jQuery(this).prepend((index+1)+opts.delimiter);	
		}
	});
};

/***TO USE***/

$('your element').autoNumbering({inverted:true,delimiter:". "});

jQuery 切换更多文字

$('.toggle').click(function() {
	var $this = $(this); 
	if ('[+]' == $this.text( )) { 
	     $this.text('[-]').parent( ).find('.hidden').show( ); 
	} 
	else { 
	     $this.text('[+]').parent( ).find('.hidden').hide( ); 
	}
});

jQuery JQuery通用对话框示例第1/2部分

<script type="text/javascript"> 
    $(function() {
        // dialog prepare function
        $.prepare_dialog = function() {
            $(document).find('body').append('<div id="generic_dialog"></div>');
            $('#generic_dialog').dialog({
                autoOpen: false,
                bgiframe: true,
                resizable: true,
                height:400,
                width: 800,
                modal: true,
                buttons:    {
                    'Close': function(){
                        $(this).dialog('close');
                    }
                }
            });
        }
        // dialog content polling
        $.fetch_dialog_content = function() {
            $.ajax({     
                type: 'POST',
                url: '{{$base_url_lang}}' + 'system/test/acl_editor_test/get_dialog_content',
                success: function(html_input){
                    $('#generic_dialog').html(html_input);
                    $('#generic_dialog').dialog('open');
                }
            });
        }
        // "click" event registration
        $('#open_first_editor').click(function(){
            $.fetch_dialog_content();
        });    
        
        // dialog preparation
        $.prepare_dialog();
        
    });
</script>

<div id="main_content">
    <a id="open_first_editor">Open First Dialog</a>
</div>

jQuery JQuery通用对话框示例第2/2部分

<script type="text/javascript">
    $(function() {
        // prepare second dialog
        $("#second_dialog").dialog({
            autoOpen: false,
            bgiframe: true,
            resizable: true,
            height:400,
            width: 800,
            modal: true,
            buttons:    {
                'Close': function(){
                    $(this).dialog('close');
                }
            }
        });
        // register click events
        $("#open_new_dialog").click(function(){
            $("#second_dialog").dialog('open');
        });
        $("#second_dialog_link").click(function(){
            alert("Second dialog link");
        });
        // register change events
        $("#selection").change(function(){
            alert($("#selection :selected").val());
        });
    }); 
</script>

<a id="open_new_dialog">
    Open Second Dialog
</a>

<div id="second_dialog">
    <a id="second_dialog_link">Click me</a>
    
    <select id="selection">
        <option value="0">first</option>
        <option value="1">second</option>
        <option value="2">third</option>
    </select>
</div>

jQuery Ransom，一个带动画的简单jQuery选项卡菜单

<script>
	$(function(){
  	// Document is ready
		$('.ransomStrip').not('.ransomStrip:eq(0)').animate({left: '-400px'});
		$('.ransomTab:eq(0)').addClass('ransomTabActive');
		$('.ransomTab').hover(function(){
			var indy = $('.ransomTab').index(this);
			$(this).addClass('ransomTabActive');
			$('.ransomTab').not(this).removeClass('ransomTabActive');
			$('.ransomStrip').not('.ransomStrip:eq('+indy+')').animate({left: '-400px'});
			$('.ransomStrip:eq('+indy+')').animate({left: '0px'});
		});
	});
</script>
</head>

<body class="">
	<h1>Ransom <em>by Cirrostratus Design Company</em></h1>
    <h2>A jQuery-powered tab menu inspired by iStockphoto.com</h2>
	<div id="ransom">
    	<div id="ransomMain">
    	</div><!--ransomMain-->
        <div id="ransomTabs">
            <div class="ransomTab">
            	<p>Web</p>
            </div><!--ransomTab-->
            <div class="ransomTab">
            	<p>Illustrations</p>
            </div><!--ransomTab-->
            <div class="ransomTab">
            	<p>Video</p>
            </div><!--ransomTab-->
        </div><!--ransomTabs-->
        
        <div class="ransomStrip" id="Web">
            <div class="ransomPrice">
            	<p>$10</p>
                <small>web</small>
            </div><!--ransomPrice-->
            <div class="ransomPrice">
            	<p>$20</p>
                <small>web</small>
            </div><!--ransomPrice-->
            <div class="ransomPrice">
            	<p>$40</p>
                <small>web</small>
            </div><!--ransomPrice-->
            <div class="ransomPrice">
            	<p>$50</p>
                <small>web</small>
            </div><!--ransomPrice-->
        </div><!--ransomStrip-->
        
        <div class="ransomStrip" id="Illustrations">
            <div class="ransomPrice">
            	<p>$5</p>
                <small>ill</small>
            </div><!--ransomPrice-->
            <div class="ransomPrice">
            	<p>$30</p>
                <small>ill</small>
            </div><!--ransomPrice-->
            <div class="ransomPrice">
            	<p>$40</p>
                <small>ill</small>
            </div><!--ransomPrice-->
            <div class="ransomPrice">
            	<p>$60</p>
                <small>ill</small>
            </div><!--ransomPrice-->
            <div class="ransomPrice">
            	<p>$90</p>
                <small>ill</small>
            </div><!--ransomPrice-->
        </div><!--ransomStrip-->
        
        <div class="ransomStrip" id="Video">
            <div class="ransomPrice">
            	<p>$15</p>
                <small>vid</small>
            </div><!--ransomPrice-->
            <div class="ransomPrice">
            	<p>$25</p>
                <small>vid</small>
            </div><!--ransomPrice-->
            <div class="ransomPrice">
            	<p>$50</p>
                <small>vid</small>
            </div><!--ransomPrice-->
        </div><!--ransomStrip-->
        
    </div><!--ransom-->

jQuery 淡入淡出功能

jQuery.fn.fadeToggle = function(speed, easing, callback) {
		return this.animate({opacity: 'toggle'}, speed, easing, callback);
	};

jQuery 在jQuery中创建/解析文本中的链接

$.fn.clickUrl = function() {
        var regexp = /((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi;
        this.each(function() {
            $(this).html(
                $(this).html().replace(regexp,'<a href="$1">$1</a>')
            );
        });
        return $(this);
    }

jQuery 动态调整文本大小

<!-- HTML -->
<a class="increaseFont">+</a> | <a class="decreaseFont">-</a>
| <a class="resetFont">=</a>

<span>Font size can be changed in this section</span>
<div class="section1">This won't be affected</div>
<div class="section2">This one is adjustable too!</div>

//JavaScript
<script type="text/javascript">
$(document).ready(function(){
  var section = new Array('span','.section2'); 
  section = section.join(',');

  // Reset Font Size
  var originalFontSize = $(section).css('font-size');
  $(".resetFont").click(function(){
    $(section).css('font-size', originalFontSize); 
  });

  // Increase Font Size
  $(".increaseFont").click(function(){
    var currentFontSize = $(section).css('font-size');
    var currentFontSizeNum = parseFloat(currentFontSize, 10);
    var newFontSize = currentFontSizeNum*1.2;
    $(section).css('font-size', newFontSize);
    return false;
  });

  // Decrease Font Size
  $(".decreaseFont").click(function(){
    var currentFontSize = $(section).css('font-size');
    var currentFontSizeNum = parseFloat(currentFontSize, 10);
    var newFontSize = currentFontSizeNum*0.8;
    $(section).css('font-size', newFontSize);
    return false;
  });
});
</script>

jQuery 从列表中选择值

<!-- HTML -->
<input type="text" id="input-text-4" size="40"/>
<ul id="values">
    <li>Smashing Magazine</li>
    <li>Woork Up</li>
    <li>Mashable</li>
</ul>

//JavaScript
$("ul[id='values'] li").click(function suggestValues(){
    input = $("input[id='input-text-4']");
    el = $(this).html();
      $(this).remove();
    newinput = input.val();
    newinput = (newinput + el + ", ");
    input.val(newinput);
  });

jQuery 从选择字段添加元素到列表中

<!-- HTML -->
<select id="my-list">
    <option value="1">Smashing Magazine</option>
    <option value="2">Woork Up</option>
    <option value="3">Mashable</option>
</select>
<input type="button" id="submit-list" value="Button"/>
<ul id="selected-items-list"></ul>

//JavaScript
$("#submit-list").click(function selectItem(){
    s = $("option:selected")
    el = s.text();
    destination = $("#selected-items-list");
    $(destination).append('<li>'+el+'</li>');
    $(destination +':last').css('display', 'none').fadeIn(1000);
    $("option:selected").remove();
    if($('#my-list option').length==0){
        $('input[id=submit-list]').attr('disabled', 'disabled');
    }
});