Entries:
Comments:
Posts:

Loading User Information from Channel 9

Something went wrong getting user information from Channel 9

Latest Achievement:

Loading User Information from MSDN

Something went wrong getting user information from MSDN

Visual Studio Achievements

Latest Achievement:

Loading Visual Studio Achievements

Something went wrong getting the Visual Studio Achievements

Installing and Utilizing jQuery Plugins - 17

Download

Right click “Save as…”

jQuery Plugins are like mini-libraries of code that provide some extra functionality. There are thousands of jQuery Plugins available—most of them provide some user interface widget to display information or retrieve input in creative ways. In this lesson, Bob demonstrates the use of the jQueryUI Plugins from the jQuery team as a means of showing how to include and use jQuery Plugins in your web applications.

Tag:

Follow the Discussion

  • CompalinkCompalink

    Hi Bob, excelent tutorial!!
    I cannot make tablesorter work into the tabs plugin, is this possible?

    let me know

    thanks

  • @Compalink: I've never tried it ... however, I'll bet you may need to pay attention to simply copying and pasting their sample code ... I'm willing to bet there's a naming collision in their samples -- try using different variable names, for example.  At least, that's where I would look first.  Hope that helps!

  • I figured out the problem. It had to do with chrome's security features. It wasn't allowing files to access other files. 

     

    To anyone using chrome remember to include 

    --allow-file-access-from-files 

    as command option when running chrome.
  • @xly15: Nice tip.  Thanks for posting!  That would have been challenging to figure out.

  • AviAvi

    That is a great series !!!
    Q: is it possible to have differnt themes to different items ? i.e one theme to the tabs and another to the datepicker ?

  • @Avi: I didn't know the answer to this, but as it turns you you can!  See:

    http://stackoverflow.com/questions/988078/two-different-jquery-ui-themes-on-the-same-page

  • AviAvi

    Thank you !!!

  • PhilippePhilippe

    Great tutorial !! I'm really enjoying it.

    I know it must be a simple silly thing but I'm new to Javascipt and can't figure out why I can't link the new tab to my C9JS_16.html page since I put my script17.js file into a JS folder.

  • Re-opening this closed thread ...

  • rohitrohit

    hey bob ! thanks a ton.I am so grateful to u for putting these tutorials up.
    I have downloaded them all.I feel like thanking you on each video separately.
    I am preparing for Microsoft's 07480 and only source I m referring to is your html and javascript tutorials.They are helping me a lot.SO wanna bless u right now.Thanks again.
    God bless
    May I get to learn more of the upcoming technologies through your videos only.
    A special mention to voice's clarity.You are really gifted with the fluency and clarity.
    May god bless u.
    I ll thank you again after clearing this exam..

  • beckbeck

    Hi Bob,
    thank you for the video series. I'm writing only to say that the add() method used in this video is now deprecated in the current jQuery version, so just if you want to update. Moreover if you wish illustrate the new refresh() method to add tab it would be very appreciated.

    Bye!

  • @beck: Thank you!  Yes, I ran into another deprecated function (toggle()) in another video.  I may need to re-think a few of the code examples and re-do these.  Another to do item in a long list of to do's.  Sad

  • mohammadmohammad

    Hi bob , i want to ty for every tutorial you put in this or other websites . not just for beeing free to watch , it bcz of the style of your teaching , i can understand them all . it so nice .
    maybe my question is a little silly but , what ever i'll take my chance :D , i'm haven't seen this tutorial yet but i know this question is part of it , bob what's the deal of the $(this).each , when we writing our jquery plugin . i know it's using for chain ability but i can not understand how , how it is possible ?

    ty for any info , and thx again ;)

  • @mohammad: Hi and thanks for the nice note.  I've not authored ANY jQuery plugins myself (or I should say, I have authored some, but they've been small things for my own usage ... nothing I would allow the rest of the world to see!!!) but if I understand correctly, your challenge is the 'this' keyword ... what does 'this' mean inside of a plugin?

    If that's the case, this is an article I reference ... it's old, but I think it's still relevant here:

    http://remysharp.com/2007/04/12/jquerys-this-demystified/

    Hope that helps?

  • mohammadmohammad

    mmm , my bad . let me give you an EXM:

    $.fn.ChangeInputColor = function(options){

    var defaults = {color:'red',backgroundColor:"blue"}
    var settings = $.extend(defaults,options);

    //i didnt mean $(this),i mean why we should looping the return value.

    $(this).each(function(){
    return $(this).css({'background-color':settings.backgroundColor,'color':settings.color});
    });
    };

    $('input[type='text']').ChangeInputColor({color:"yellow",backgroundcolor:'red'});

  • Hi, Mr. Tabor.

    Another great series! Congratulations!

    Just to thanks a lot, again, for sharing your knowledge.

    Paulo Ricardo Ferreira

    Rio de Janeiro - Brazil

  • Hi Paulo, thanks for the nice words.  I started answering your question, but it seems like you edited it.  Did you have a question about localization?  Were you looking at this example?

    http://jqueryui.com/datepicker/#localization

  • ShujaShuja

    Hello,, Bob this series is just awesome,,,
    can you please provide the code also,,

  • @Shuja: Code is found here:

    http://channel9.msdn.com/Series/Javascript-Fundamentals-Development-for-Absolute-Beginners

    (See Download the entire series source code.) Admittedly, we need to make that more obvious.  thanks for the nice words!

  • ShujaShuja

    Thank you so much,,!!! Bob

  • 12yr old developer12yr old developer

    bob tabor you are awesome!Remember me from html5 and css3? Cool if you do! I am using cloud 9 ide so my website is automaticly hosted here is a link! https://c9.io/el_coder/punkishgeek1/workspace/home.html .That was my website workspace. I have not posted It yet neat huh I love it, let me know what you think!

  • @12yr old developer:  Nice work, keep learning a tiny bit every day ... before you know it, I'll be coming to YOU for a job.  Big Smile

  • 12 yr old developer12 yr old developer

    Of course It Is still under construction...

  • Hi Bob,

    Really, really good stuff. I also watched your HTML5/CSS3 series and thought it was excellent, too.

    Had some trouble with this session (17). The jQuery.com pages have changed enough that I had trouble finding the stuff you were using. In particular, for datepicker at this URL: "http://api.jqueryui.com/datepicker/#entry-examples" the events column is empty. What am I missing here?

    Thanks again for your valuable work!

  • @kd2uj: Yes, I see ... I think they changed out the style of their programming.  Instead of events per se, you have properties that point to functions (that you create).  Look at all the on___ properties, like :

  • Great work so far.

    However, on C9JS_17.html in the video 12:20 approx, the [Click-a-bob] Tab only loads the new page in Internet Explorer.

    It appears that Firefox just shows [Loading...] for the Tab without loading the new page, and Chrome does absolutely nothing at all.

    So would I be correct in thinking that these jQuery implementations are Microsoft only ?

    Also I noticed the id it produced was ui-tabs-2.

    Is there any control over what id is generated or can you work out what id it will generate and write code accordingly for other browsers ?

     

  • I think the consensus is that I should be using the latest version for both UI & Style

    Basically I did a download of the custom using Tabs & Datepicker with latest version and the Demo directory show documentation for Tabs that don't work.

    Tabs 3 and 4 demonstrate slow-loading and broken AJAX tabs, and how to handle serverside errors in those cases. Note: These two require a webserver to interpret PHP. They won't work from the filesystem.

        <script>
        $(function() {
            $( "#tabs" ).tabs({
                beforeLoad: function( event, ui ) {
                    ui.jqXHR.error(function() {
                        ui.panel.html(
                            "Couldn't load this tab. We'll try to fix this as soon as possible. " +
                            "If this wouldn't be a demo." );
                    });
                }
            });
        });
        </script>

    Not sure if this helps.

    Andy Smiley

     

     

     

  • @AndyRB: Hi, I'm not sure if I completely understood your question, but I do think that some things have changed with JQuery UI.  What exactly?  I've been following other technologies for the past year so I'm not as up to date on what has changed.  Sorry!  Hopefully this video serves as a "what's possible", but you'll want to go to their updated documentation for the details on how to get it working.  Sorry!

  • @ AndyRB - I finally got the tabs to work using the following code. Refresh method is used now in jQuery instead of the add and remove. Found information on this link:  http://jqueryui.com/upgrade-guide/1.9/#added-refresh-method     This is a little over halfway down the page labeled #7141.

    $(function() {
      //alert('got here');
      $("#tabs").tabs();
      $("<li><a href='C9JS_16.html'>Click-a-bob</a></li>")
        .appendTo("#tabs .ui-tabs-nav");
      $("#tabs").tabs("refresh");

    });

  • Pammer45 was really close.  Thanks Pammer45, for giving me the bread crumbs I needed to get this to work.

    I believe this will give the desired end result:

    $(function() {
      //alert('got here');
      $("#tabs").tabs();
      $("<li><a href='#tabs-4'>Click-a-bob</a></li>").appendTo("#tabs .ui-tabs-nav");
      $('<div id="tabs-4"><iframe src="C9JS_16.html" width="100%" height="300px" allowtransparency="true" frameBorder="0">Your browser does not support IFRAME</iframe></div>').appendTo("#tabs");
      $("#tabs").tabs("refresh");
    });

  • bilalbilal

    sir u teaching method is so good. sir whr i can find ur asp mvc course . can i find here ..........

Remove this comment

Remove this thread

close

Comment on the Post

Already have a Channel 9 account? Please sign in