[RESOLVED]append method to jquery plugin

i write this plugin and now i want add method to this plugin such as this

$.createMessage().removeMessage()

how can i do it?

my code is

$(function () {

    $.extend({

        createtext: function (options) {

            var setting = {
                holder: "",
                text: "",
            }

            if (options != null) {
                $.extend(setting, options)
            }

            var $this = $(setting.holder)

            $this.find("div#CreatetextHolder").remove()


            $this.append("<div id='CreatetextHolder'><span></span><p class='Createtext'>" + setting.text + "</p></div>")

            $this.find("div#CreatetextHolder").fadeIn('slow')

        }

    })
})

thank you for your help

I’m not sure exactly what you are going for, but if you wanted an example of how to extend a method that would allow you to add and remove your text, you could just use :

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script type='text/javascript'>
$(function () {
    // Indicate you'll be extending jQuery
    $.extend({
        // Create your createtext extension 
        createtext: function (options) {

            // Define your default settings
            var setting = { holder: "", text: ""}

            // If no settings are provided, use the default
            if (options != null) {
                $.extend(setting, options)
            }
            // Find a reference to the holder
            var $this = $(setting.holder)
            // Remove any CreateTextHolder elements within your element
            $this.find("div#CreatetextHolder").remove();
            // Add a new one
            $this.append("<div id='CreatetextHolder'><span></span><p class='Createtext'>" + setting.text + "</p></div>")
            // Fade it in
            $this.find("div#CreatetextHolder").fadeIn('slow')
        },
        removetext: function(options){

            // Define your default settings
            var setting = { holder: ""}

            // If no settings are provided, use the default
            if (options != null) {
                $.extend(setting, options)
            }
            // Find a reference to the holder
            var $this = $(setting.holder)
            // Remove any CreateTextHolder elements within your element
            $this.find("div#CreatetextHolder").remove();
        }
    })
})
</script>
<script type='text/javascript'>
  $(function(){
         // Create your text
         $.createtext({ holder: '#example', text: 'This is text'});   
         // After 5 seconds, remove it
         setTimeout(function(){
           $.removetext({ holder: '#example'});
         },5000);
  });
</script>
</head>
<body>
   <div id='example'></div>
</body>

The above demonstrates using the $.createtext() function to specify an element and generate your specific text. You can then use the $.removetext() function to remove all of the text that was added via your $.createtext() function.

You can see a basic working example of this here.

Leave a Reply