The document ready function is used so that jQuery runs after all objects in

The document ready function is used so that jquery

This preview shows page 14 - 27 out of 34 pages.

The document ready function is used so that jQuery runs after all objects in the page are loaded. $(document).ready( function() { alert('Welcome to jQuery'); } ); 14
Image of page 14
FIT5032 Alternate Syntax Alternate syntax for document ready: $( function(){ alert('Welcome to jQuery'); } ); 15
Image of page 15
FIT5032 What is the default jQuery syntaxWhat is the default jQuery syntax A. $(action).(selector)B. $(choice).(selector)C. $(selector).selection()D. $(selector).action()E.None of the answers 16 KT33U4
Image of page 16
FIT5032 The jQuery document ready function, $(document).ready(XXXX);, has a short handThe jQuery document ready function, $(document).ready(XXXX);, has a short hand A.<% XXXX %>B.$( XXXX ); C. @XXXXD. All of the answersE.None of the answers 17 KT33U4
Image of page 17
FIT5032 Using jQuery
Image of page 18
FIT5032 Adding jQuery To HTML <script type='text/javascript' src=' Scripts/jquery.js ' /> To an MVC application, add to layout file: @Scripts.Render(" ~/bundles/jquery ") 19
Image of page 19
FIT5032 jQuery Example Selecting and colouring alternate lines (Match the id of the element) : $(document).ready(function () { $(' #data tbody tr:even').css('background-color', 'yellow'); }); To select id data, e.g.: <table id=" data "> 20
Image of page 20
FIT5032 If using Style Sheets Changing class of selected elements: $(document).ready(function () { $("#data tbody tr:even") .removeClass ("data"); $('#data tbody tr:even') .addClass ("rowColour2"); }); In StyleSheet: .rowColour2 { background-color: yellow; color: #666666; } 21
Image of page 21
FIT5032 jQuery UI Library
Image of page 22
FIT5032 Date Picker Add the date picker scripts (after other scripts): @Scripts.Render("~/Scripts/jquery-ui.js") @Scripts.Render("~/Scripts/jquery.ui.datepicker.js") Add your jQuery function (match the id): $(function () { $("#yearPub").datepicker(); }); 23
Image of page 23
FIT5032 Date Picker Continue The Date field ID is the name of the date field in the database e.g.: yearPub MVC automatically specifies the id of controls as being the same as their database attribute name. Add the Stylesheet references , which are included in the jQuery UI download to the Views/Titles/Create View. <link href=" ~/Content/themes/jquery.ui.all.css " rel="stylesheet" type="text/css" /> <link href=" ~/Content/themes/ jquery.ui.datepicker.css " rel="stylesheet" type="text/css" /> 24
Image of page 24
FIT5032 jQuery UI Dependent Scripts In the layout file add the relevant jQuery scripts and style sheets @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr") @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/jqueryui") @Styles.Render("~/Content/themes/base/css", "~/Content/css") 25
Image of page 25
FIT5032
Image of page 26
Image of page 27

You've reached the end of your free preview.

Want to read all 34 pages?

  • Fall '18

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture