开发者

How to use Pines Notify jquery plugin?

开发者 https://www.devze.com 2023-01-25 00:06 出处:网络
I want to show notification on my website using Pines Notify jQuery plugin but i dont know how to use it. Could someone please provide some exampl开发者_StackOverflowe code?This is the only link I ha

I want to show notification on my website using Pines Notify jQuery plugin but i dont know how to use it. Could someone please provide some exampl开发者_StackOverflowe code?


This is the only link I have found for documentation: http://sourceforge.net/apps/mediawiki/pines/index.php?title=Pines_Notify


This is pretty simple to find out.

  1. Go to the pines notify website: http://pines.sourceforge.net/pnotify/

  2. Click around on the buttons until you find the kind of effect you want to do yourself.

  3. In either Chrome or Firefox w/Firebug, just right click on the button for the effect you want. You'll see an input tag, and you want the code inside the onclick="":


onclick="$.pnotify({
    pnotify_title: 'Regular Notice',
    pnotify_text: 'Check me out! I\'m a notice.'
});"

So if you want to call this at the end of your html doc after you've loaded jquery, you just do something like this:


// call your jquery and pines notify plugin scripts first

$.pnotify({
   pnotify_title: 'Whatever the Title Is',
   pnotify_text: 'This is the text of the notice!'
});

Obviously there are more options, and you can find them by either inspecting the source of the demo page, or by looking at the pines jquery plugin and finding where they define the options.


It looks like the documentation for Pines Notify is rather lacking. My advice is to look through the HTML source of the demo website. All the JavaScript is on that page (with tons of inline event handlers, yuck).


Make sure to include the appropriate files in your HTML. Then, here is some example javascript code.

function gaserror(){
var distance = Number(document.cars.distance.value);
switch( $('#listofcars :selected').text())
{
    case 'Volvo':
        if (distance>500)
            {
            $.pnotify({
                title: 'Error',
                text: 'You have run out of gas!',
                addclass: 'custom',
                type: 'error',
                opacity: 0.8,
                nonblock: true,
                nonblock_opacity: 0.2,
                sticker: false,
                stack: false,
                mouse_reset: false,
                history:false, //prevents the yellow error history tab from appearing after error triggered
                before_open: function(pnotify) {
                        pnotify.css({
                            "top": ($(window).height() / 2) - (pnotify.height() / 2),
                            "left": ($(window).width() / 2) - (pnotify.width() / 2)
                        });
                    }
                });
            }
        break;}}
0

精彩评论

暂无评论...
验证码 换一张
取 消