JQuery Plugin manipulate text

From CoderLearner
Jump to: navigation, search

Description

Write a simple jquery plugin to manipulate text color.

Syntax


jQuery.fn.showtitle = function() {

                    return this.each(function() {
                        for (var i = 0; i < $(this).attr('title').length; i++) {
                            if (i === 0) {
                                $(this).append("-");
                            }
                            if (i % 2 === 0) {
                                $(this).append("<i class='bg_1'>" 
                                     + $(this).attr('title')[i]);
                            }
                            else {
                                $(this).append("<i class='bg_2'>" 
                                   + $(this).attr('title')[i]);
                            }
                        }
                    });
                };

Example 1

  • This is a simple example without using the jQuery plugin.
<!DOCTYPE html>
<html>
    <head>
        <title>jquery plugin 1</title>
        <script 
            type="text/javascript" 
            src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
        </script>

        <style>
            .bg_1 {
                font-size:14px;
                color:red;
            }

            .bg_2 {
                font-size:18px;
                color:blue;
            }
        </style>
        <script>


            $().ready(function() {


                var tile = $("a").html();

                for (var i = 0; i < tile.length; i++) {
                    if (i % 2 === 0) {
                        $('.display_ic').append("<i class='bg_1'>" + tile[i] + "</i>");
                    }
                    else {
                        $('.display_ic').append("<i class='bg_2'>" + tile[i] + "</i>");
                    }
                }
            });
        </script>
    </head>
    <body>
        <a href="coderlearner" title="learn simple jquery plugin">jQuery</a> <br/>
        
        <div class="display_ic"></div>
    </body>
</html>

Result

JQuery Plugin manipulate text 1.png

Example 2

  • Apply the concept from the first example, and convert it into jQuery plugin.


<!DOCTYPE html>
<html>
    <head>
        <title>jquery plugin 2</title>
        <script 
            type="text/javascript" 
            src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
        </script>

        <style>
            .bg_1 {
                font-size:14px;
                color:red;
            }

            .bg_2 {
                font-size:18px;
                color:blue;
            }
        </style>
        <script>


            $().ready(function() {
                jQuery.fn.showtitle = function() {

                    return this.each(function() {
                        for (var i = 0; i < $(this).attr('title').length; i++) {
// add "-" at the first character
                            if (i === 0) {
                                $(this).append("-");
                            }
// check for odd and even 
                            if (i % 2 === 0) {
                                $(this).append("<i class='bg_1'>" +      
                                            $(this).attr('title')[i]);
                            }
                            else {
                                $(this).append("<i class='bg_2'>" + 
                                   $(this).attr('title')[i]);
                            }
                        }
                    });
                };

// usage
                $("a").showtitle();


            });
        </script>
    </head>
    <body>
        <a href="coderlearner" title="learn simple jquery plugin">jQuery</a> <br/>
        <a href="google" title="search google">Google</a> <br/>
  
    </body>
</html>

Result

JQuery Plugin manipulate text 2.png