jQuery Libraries

.jQuery Libraries

Web page by Kevin Harris of Homer IL

Please contact Kevin Harris of Homer IL concerning this web site

"jQuery has changed the way that millions of people write JavaScript."

jQuery UI and jQuery Mobile are two widely used open-source libraries which are build on top of the jQuery JavaScript library. See the jQuery article for more information on jQuery. jQuery UI provides advanced user interface components (widgets), effects, interactions, and themes. Popular jQuery UI widgets include: Datepicker, Autocomplete, Accordian, Slider, and Select menu. Also popular are the transition animations and the ThemeRoller which allows for interactively customizing CSS. jQuery Mobile is an HTML5-based user interface system designed for responsive web applications on mobile devices. It contains transitions, events, and widgets optimized for the touch control.

jQuery User Interface

.jQuery UI

jQuery UI is a collection of GUI widgets, animated visual effects, and themes implemented with the jQuery Javascript library. The jQuery UI site allows you to pick the components you wish to use and download a version of jQuery containing just those components, or you can download the full package of jQuery UI. In Visual Studio you can install jQuery using the NuGet package manager. The NuGet package manger will verify the jQuery dependencies exist, or also download any missing dependencies.


.Get jQuery UI using NuGet


Get jQuery UI using NuGet

NuGet will download the jquery-ui-{version}.js and jquery-ui-{version}.min-jsfiles into the Scripts folder and the themes folder (containing the images and individual CSS files) into the Content directory.

Next create the CSS and JS bundles in the BundleConfig.cs file as follows:

            bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
            "~/Scripts/jquery-ui-{version}.js"));

            bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                          "~/Content/themes/base/core.css",
                          "~/Content/themes/base/resizable.css",
                          "~/Content/themes/base/selectable.css",
                          "~/Content/themes/base/accordion.css",
                          "~/Content/themes/base/autocomplete.css",
                          "~/Content/themes/base/button.css",
                          "~/Content/themes/base/dialog.css",
                          "~/Content/themes/base/slider.css",
                          "~/Content/themes/base/tabs.css",
                          "~/Content/themes/base/datepicker.css",
                          "~/Content/themes/base/progressbar.css",
                          "~/Content/themes/base/theme.css"));


Create Two Bundles in BundleConfig.cs

Then render the CSS and JS bundles in the _Layout.cshtml.cs file as follows:

@*jQuery UI CSS*@
@Styles.Render("~/Content/themes/base/css")

@*jQuery UI JS*@
@Scripts.Render("~/bundles/jqueryui")


Register the CSS and JS Bundles in _Layout.cshtml

Now the jQuery UI widgets can be used in the views.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
@{
    ViewBag.Title = "Home Page";
}

<p style="padding-bottom:200px">Current Date: <input type="text" id="currentDate"></p>

@section Scripts {
    <script type="text/javascript">
        $(function () {
            $("#currentDate").datepicker();
        });
    </script>
}


jQuery UI Date Picker Code in Index.cshtml View

.jQuery UI Date Picker


jQuery UI Date Picker

jQuery Mobile

.jQuery Mobile

jQuery Mobile (jQM) is a touch-optimized web framework implemented with jQuery. It is designed for touch interfaces in iPhones, iPads, Android, Windows Phones, Kindles, and Blackberries. Additionally it works in all the major desktop browsers. Where as jQuery UI uses JavaScript to implement widgets and effects, jQuery Mobile uses the HTML5 data- attributes to implement widgets, effects, and styles.

The procedure for installing jQM is similar to the procedure for jQuery UI as described above. That is, use NuGet to install the JavaScript and CSS files, then create and register files in bundles.

.jQuery Mobile


Install jQuery Mobile using NuGet



Error | ASP.NET Developer

Error

Error message

  • Warning: Cannot modify header information - headers already sent by (output started at /srv/disk9/1218369/www/kcshadow.net/aspnet/includes/common.inc:2748) in drupal_send_headers() (line 1232 of /srv/disk9/1218369/www/kcshadow.net/aspnet/includes/bootstrap.inc).
  • PDOException: SQLSTATE[42000]: Syntax error or access violation: 1142 INSERT command denied to user '1218369_b2cf'@'185.176.40.58' for table 'watchdog': INSERT INTO {watchdog} (uid, type, message, variables, severity, link, location, referer, hostname, timestamp) VALUES (:db_insert_placeholder_0, :db_insert_placeholder_1, :db_insert_placeholder_2, :db_insert_placeholder_3, :db_insert_placeholder_4, :db_insert_placeholder_5, :db_insert_placeholder_6, :db_insert_placeholder_7, :db_insert_placeholder_8, :db_insert_placeholder_9); Array ( [:db_insert_placeholder_0] => 0 [:db_insert_placeholder_1] => cron [:db_insert_placeholder_2] => Attempting to re-run cron while it is already running. [:db_insert_placeholder_3] => a:0:{} [:db_insert_placeholder_4] => 4 [:db_insert_placeholder_5] => [:db_insert_placeholder_6] => http://www.kcshadow.net/aspnet/?q=jquerylibraries [:db_insert_placeholder_7] => [:db_insert_placeholder_8] => 54.162.171.242 [:db_insert_placeholder_9] => 1534727899 ) in dblog_watchdog() (line 160 of /srv/disk9/1218369/www/kcshadow.net/aspnet/modules/dblog/dblog.module).
The website encountered an unexpected error. Please try again later.