Home
Search results “Jquery ui dialog options”
jquery dialog widget
 
09:47
Link for all dot net and sql server video tutorial playlists https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1 Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/07/jquery-dialog-widget.html In this video we will discuss jQuery dialog widget with examples. 2 simple steps to get the jQuery dialog widget on a web page 1. Place the content inside a div element <div id="dialog">This is jQuery dialog widget example</div> 2. Find the div element and call jQuery UI dialog() function $('#dialog').dialog(); There are many jQuery dialog options to customize the dialog widget. Here are some of the most commonly used options title - Sets the title of the dialog. You can also use the title attribute of the div element to set the title for the dialog. If both are specified title option value overrides the value set using th element title attribute draggable - Boolean option that determines if the dialog can be draggable by the title bar resizable - Boolean option that determines if the dialog is resizable closeOnEscape - Boolean option that determines if the dialog can be closed by pressing the Esc key modal - Boolean option that determines if the dialog is modal dialog. With modal dialog other items on the page will be disabled and cannot be interaced with until the dialog is closed autoOpen - Boolean option that determines if the dialog should open automatically upon initialization. If set to false, the dialog will stay hidden until the open() method is called
Views: 23567 kudvenkat
Message Box Widget in JQuery UI
 
12:32
A dialog is a floating window that contains a title bar and a content area. The dialog window can be moved, resized and closed with the 'x' icon by default. If the content length exceeds the maximum height, a scrollbar will automatically appear. A bottom button bar and semi-transparent modal overlay layer are common options that can be added. More Info on dialog or MessageBox in jQuery UI - http://api.jqueryui.com/dialog/ jQuery UI icons - https://api.jqueryui.com/theming/icons/ Video by - Tanmay Sakpal Simple Snippets Channel link - https://www.youtube.com/simplesnippets
Views: 3835 Telusko
Show jQuery UI Modal Popup Window on Button Click with Example
 
08:54
Here I will explain show simple jQuery ui modal popup window on button click with example or creating modal popup window using jQuery ui plugin modal popup features or open jQuery modal popup window on button click with example. ------------- May be you like this -------------- umbraco playlist : https://www.youtube.com/watch?v=zoefdruzmGE&list=PLv0T7WlllnSnYRedhwL8x-atkVxrSdd3m Angularjs playlist : https://www.youtube.com/watch?v=KXjD1RiAz1U&list=PLv0T7WlllnSkCfNftTNY8tWqCFWT0sIMd jquery playlist : https://www.youtube.com/watch?v=jVncasz_iyw&list=PLv0T7WlllnSkkNahiiWu_GMXq49X5ccfe F Wcf playlist : https://www.youtube.com/watch?v=NB4k0RC6vl0&list=PLv0T7WlllnSmcGHacEQnLgKvitcJEsSl6 c# playlist: https://www.youtube.com/watch?v=ZrP0NKbsr8s&list=PLv0T7WlllnSl9pZWMaMGsyoAmqZtW4gM0
Views: 56666 Go Freelancer
Custom Simple Alert, Confirm, Prompt with jQuery
 
04:53
Support Donate for me: https://www.patreon.com/codetube Follow me: https://www.facebook.com/mycodetube/ https://plus.google.com/+kautubecodeghazali My Social Media: https://www.facebook.com/tghazalipidie https://www.twitter.com/tghazalipidie Thank you very much for watching my new video on this channel Code Tube. You can contribute to this channel by giving support, make the subtitle, or comments that are supportive.
Views: 7734 Code Tube
Autocomplete Widget in JQuery UI
 
09:16
Autocomplete widget Enables users to quickly find and select from a pre-populated list of values as they type, leveraging searching and filtering. When typing in the autocomplete field, the plugin starts searching for entries that match and displays a list of values to choose from. By entering more characters, the user can filter down the list to better matches. More Info on dialog or Autocomplete in jQuery UI - http://api.jqueryui.com/autocomplete/ Video by - Tanmay Sakpal Simple Snippets Channel link - https://www.youtube.com/simplesnippets
Views: 4176 Telusko
jquery ui video tutorial 17 - Creating Checkboxradio Widget
 
12:44
jquery ui video tutorial 17 - Creating Checkboxradio Widget jquery ui - Creating Checkboxradio Widget: Checkboxradio Widget: enhances the checkbox and radio input elements to theme able buttons Creating Checkboxradio Widget: 1. Create a new HTML document with basic HTML document structure code <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Checkboxradio Demo</title> </head> <body> </body> </html> 2. Link the necessary jQueryUI libray files to the HTML document <link href="jquery-ui/jquery-ui.min.css" rel="stylesheet" type="text/css"/> <script src="jquery-ui/external/jquery/jquery.js" type="text/javascript"></script> <script src="jquery-ui/jquery-ui.min.js" type="text/javascript"></script> 3. Code the structure of the widget (i.e. HTML or markup): To create a Checkboxradio widget; we need to create checkbox or radio input elements based on the requirement, with associated label element Code for radio inputs: <fieldset> <legend>Select Gender</legend> <label for="rdbMale">Male</label> <input type="radio" name="rdbGender" id="rdbMale" value="m" checked/> <label for="rdbFemale">Female</label> <input type="radio" name="rdbGender" id="rdbFemale" value="f"/> </fieldset> Code for checkbox inputs: <fieldset> <legend>Select Hobbies</legend> <label for="chkMusic">Music</label> <input type="checkbox" name="chkHobbies" id="chkMusic" value="m"/> <label for="chkDrawing">Drawing</label> <input type="checkbox" name="chkHobbies" id="chkDrawing" value="d"/> <label for="chkGaming">Gaming</label> <input type="checkbox" name="chkHobbies" id="chkGaming" value="g"/> </fieldset> 4. Select the element using jQuery and call the respective jQuery UI function on it Select the element using jQuery selector, call checkboxradio jQuery UI function on it <script type="text/javascript"> $("input[type=radio]").checkboxradio(); $("input[type=checkbox]").checkboxradio(); </script> ========================================= Follow the link for next video: jquery ui video tutorial 18 - Creating Button Widget https://youtu.be/iAQrPfPhbV8 Follow the link for previous video: jquery ui video tutorial 16 - Creating Dialog Widget https://youtu.be/pPIpt_f5f3Q =========================================
Bruno Modal PopUp Dialog standart jQueryUI
 
06:29
The Modal Pop-up Dialog Box on jQuery, jQuery UI and DialogExtend with the skins in the style of Metro. Buy and Demo: http://codecanyon.net/item/bruno-modal-popup-dialog/8532920 Neat, simple, and ABSOLUTELY unobtrusive Extending (instead of replacing) original jQuery UI dialog Maximize, Minimize and Collapse buttons Show/Hide close button Double-clickable title bar Enhanced title bar options Configurable icons Custom events 20 color themes Bonus jsMetro skin for jsPanel
ASP.NET MVC JQueryUI Dialog Box Kullanımı
 
08:14
ASP.NET MVC JQueryUI Dialog Box Kullanımı
Views: 92 Fuat Atik
jquery ui video tutorial 15 - Creating Tooltip Widget
 
09:01
jquery ui video tutorial 15 - Creating Tooltip Widget jQuery UI - Creating Tooltip Widget: Tooltip Widget: extends the functionality of the title attribute available in HTML Tooltip widget helps us to create a theme able and customizable tooltip control Tooltips are used to show some additional information about an element to the user Creating Tooltip Widget: 1. Create a new HTML document with basic HTML document structure code <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Tooltip Demo</title> </head> <body> </body> </html> 2. Link the necessary jQueryUI libray files to the HTML document <link href="jquery-ui/jquery-ui.min.css" rel="stylesheet" type="text/css"/> <script src="jquery-ui/external/jquery/jquery.js" type="text/javascript"></script> <script src="jquery-ui/jquery-ui.min.js" type="text/javascript"></script> 3. Code the structure of the widget (i.e. HTML or markup): To create a Tooltip widget; we can create any HTML element with title attribute. <div title="You hovered on me" id="tooltip">Mouse over on me</div> <input type="text" title="Enter your name" id="txtName"/> 4. Select the element using jQuery and call the respective jQuery UI function on it Select the element using jQuery selector, call tooltip jQuery UI function on it <script type="text/javascript"> $("#tooltip").tooltip(); $("#txtName").tooltip(); </script> Note: As we can add title attribute to any HTML element, hence we can attach tooltip widget to any HTML element ========================================= Follow the link for next video: jquery ui video tutorial 16 - Creating Dialog Widget https://youtu.be/pPIpt_f5f3Q Follow the link for previous video: jquery ui video tutorial 14 - Creating Menu Widget https://youtu.be/J3x_qJa2cfE =========================================
Utilisez le potentiel du Framework JavaScript jQuery UI pour vos alert boite de dialoque
 
05:04
http://www.programmation-facile.com/jquery-facile-creer-sites-exceptionnels/ Ici, la suite du cours sur les boites de dialogue jQuery UI. Apprenez les options avancées pour personnaliser vos Pop Up jQuery UI. Cliquez ci-dessous pour télécharger le code source complet et commenté qui accompagne ce cours vidéo. http://www.programmation-facile.com/jquery-facile-creer-sites-exceptionnels/ Allez beaucoup plus loin dans l’apprentissage du jQuery, cliquez sur le lien ci-dessous. http://www.programmation-facile.com/formation-jquery-dojo/
jQuery UI Tutorial | The Position Utility
 
03:40
Want all of our free jQuery UI training videos? Visit our Learning Library, which features all of our training courses and tutorials at http://learn.infiniteskills.com?utm_source=youtube&utm_medium=youtube_video_description&utm_campaign=jquery_ui_position_utility&network=youtube More details on this jQuery UI training can be seen at http://www.infiniteskills.com/training/learning-jquery-ui.html?utm_source=youtube&utm_medium=youtube_video_description&utm_campaign=jquery_ui_position_utility&network=youtube. This clip is one example from the complete course. For more free jQuery UI tutorials please visit our main website. YouTube: https://www.youtube.com/user/OreillyMedia Facebook: https://www.facebook.com/OReilly/?fref=ts Twitter: https://twitter.com/OReillyMedia Website: http://www.oreilly.com/
show and hide jquery ui dialog with checkbox checked jquery 3.3.1
 
07:09
#jqueryuidialogshowhide #selectcheckboxshowhide #jqueryuicheckboxchecked show and hide the jquery dialog with checkbox select and unselect
Autocomplete Widget in jQuery UI — Scott Gonzalez — Frontend Masters
 
09:44
Scott walks you through various ins and outs of the jQuery UI Autocomplete widget. http://frontendmasters.com/courses/jquery-plugins-and-jquery-ui/jquery-ui-autocomplete-walkthrough/ This is a preview lesson from Scott Gonzalez's, "jQuery Plugins and jQuery UI" Workshop: http://frontendmasters.com/courses/jquery-plugins-and-jquery-ui/
Views: 13500 Frontend Masters
jQUERY PART 23 Dialog Box with description writing method in jquery programmingl by tech  studio
 
16:49
A dialog is a floating window that contains a title bar and a content area. The dialog window can be moved, resized and closed with the 'x' icon by default. If the content length exceeds the maximum height, a scrollbar will automatically appear. A bottom button bar and semi-transparent modal overlay layer are common options that can be added. Focus Upon opening a dialog, focus is automatically moved to the first item that matches the following: The first element within the dialog with the autofocus attribute The first :tabbable element within the dialog's content The first :tabbable element within the dialog's buttonpane The dialog's close button The dialog itself While open, the dialog widget ensures that keyboard navigation using the 'tab' key causes the focus to cycle amongst the focusable elements in the dialog, not elements outside of it. Modal dialogs additionally prevent mouse users from clicking on elements outside of the dialog. Upon closing a dialog, focus is automatically returned to the element that had focus when the dialog was opened. Theming The dialog widget uses the jQuery UI CSS framework to style its look and feel. If dialog specific styling is needed, the following CSS class names can be used: ui-dialog: The outer container of the dialog. ui-dialog-titlebar: The title bar containing the dialog's title and close button. ui-dialog-title: The container around the textual title of the dialog. ui-dialog-titlebar-close: The dialog's close button. ui-dialog-content: The container around the dialog's content. This is also the element the widget was instantiated with. ui-dialog-buttonpane: The pane that contains the dialog's buttons. This will only be present if the buttons option is set. ui-dialog-buttonset: The container around the buttons themselves. Additionally, when the modal option is set, an element with a ui-widget-overlay class name is appended to the Dependencies UI Core Widget Factory Position Button Draggable (optional; for use with the draggable option) Resizable (optional; for use with the resizable option) Effects Core (optional; for use with the show and hide options) height Type: Number or String Default: "auto" The height of the dialog. Multiple types supported: Number: The height in pixels. String: The only supported string value is "auto" which will allow the dialog height to adjust based on its content. https://api.jqueryui.com/dialog/
Views: 373 TECH Studio
Tooltip Widget Control in JQuery UI
 
10:04
Tooltip replaces native tooltips, making them themeable as well as allowing various customizations: 1. Display other content than just the title, like inline footnotes or extra content retrieved via Ajax. 2. Customize the positioning, e.g., to center the tooltip above elements. 3. Add extra styling to customize the appearance, for warning or error fields. A fade animation is used by default to show and hide the tooltip, making the appearance a bit more organic, compared to just toggling the visibility. This can be customized with the show and hide options. More Info on Tooltip in jQuery UI - http://api.jqueryui.com/tooltip/ Video by - Tanmay Sakpal Simple Snippets Channel link - https://www.youtube.com/simplesnippets
Views: 4652 Telusko
5 JQuery/CSS Modal dialog you can't miss
 
02:13
Need an idea for modal dialog? We've picked the best 5 jQuery/CSS3 Modal dialog that will rock your website! Source code at https://redstapler.co/tutorials/5-jquery-css-modal-dialog-cant-miss/
Views: 6478 Red Stapler
jquery selectmenu widget
 
08:52
Link for all dot net and sql server video tutorial playlists https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1 Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/07/jquery-selectmenu-widget.html In this video we will discuss jQuery selectmenu widget with examples. jQuery selectmenu duplicates and extends the functionality of a native HTML select element to overcome the limitations of the native control. <select id="selectMenu" style="width:200px"> <option value="1">USA</option> <option value="2" selected="selected">India</option> <option value="3">UK</option> <option value="4">Australia</option> <option value="5">Canada</option> </select> To use the jQuery selectmenu widget, call jQuery selectmenu() function on the select element $('#selectMenu').selectmenu(); Select element with optgroup elements : The optgroup element is used to group related options in a drop-down list. In this example, we are grouping cities by country. You can only select the elements of a group but not the group itself. <select id="selectMenu"> <optgroup label="USA"> <option value="1">New York</option> <option value="2">Los Angeles</option> </optgroup> <optgroup label="India"> <option value="3">New Delhi</option> <option value="4">Bangalore</option> </optgroup> </select> Dropdownlist button icon : Button icon is the image that you see on the right handside of the dropdownlist. The default button icon is ui-icon-triangle-1-s. You can change button icon using the icons option $('#selectMenu').selectmenu({ icons: { button: 'ui-icon-circle-arrow-s' } }); List of all jQuery icons http://api.jqueryui.com/theming/icons To control the width of the selectmenu, use width option. The width is in pixels. $('#selectMenu').selectmenu({ width : 200 }); How to retrieve the selected item value and label : Use the select event of the selectmenu. This event is raised when an item is selected. $('#selectMenu').selectmenu({ select: function (event, ui) { alert('Label = ' + ui.item.label + ' ' + 'Value = ' + ui.item.value); } });
Views: 17346 kudvenkat
Real use of jQuery - Dialogue Message with jQuery UI (Part-04)
 
10:59
Please Note: This is jQuery Tutorial in Bengali language. jQuery Bangla video tutorial- Dialogue Message with jQuery UI. ➠ ➠ Please do not hesitate to Knock Here ➠ ➠ ------------------------------------------------------------------------------------ ➽Visit our website: http://www.trainingwithliveproject.com ➽Like us: https://www.facebook.com/ProDelowar ➽Like us: https://www.facebook.com/twlpls ------------------------------------------------------------------------------------ ➤Playlist: https://www.youtube.com/playlist?list=PLTydW-y9HsbTyO6o_W-55HFwZcQD1VFAq ------------------------------------------------------------------------------------ ➤Play again this tutorial: https://www.youtube.com/watch?v=0m8VeQQKBvQ&index=26&list=PLTydW-y9HsbTyO6o_W-55HFwZcQD1VFAq ------------------------------------------------------------------------------------ ➤jQuery website : http://jquery.com/ ➤jQuery CDN: https://code.jquery.com/ ➤Google Hosted Libraries: https://developers.google.com/speed/libraries/ ➤Microsoft Ajax Content Delivery Network : http://www.asp.net/ajax/cdn ------------------------------------------------------------------------------------
jquery ui progress bar
 
10:37
Link for all dot net and sql server video tutorial playlists https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1 Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/07/jquery-ui-progress-bar.html In this video we will discuss jQuery progressbar widget. 2 simple steps to get the jQuery progressbar Step 1 : Include a div element with an id on the page <div id="progressbar"></div> Step 2 : Find the div element in the DOM and call progressbar() function $('#progressbar').progressbar(); There are 2 types of progressbars 1. Determinate progress bar - Use when the actual status can be accurately calculated 2. Indeterminate progress bar - Use to provide user feedback when the actual status cannot be calculated To get a determinate progress bar, set the value option of the progressbar() function to an integer value between 0 and the max. $('#progressbar').progressbar({ value : 65 }); To get an indeterminate progress bar, set the value option of the progressbar() function to false (boolean) $('#progressbar').progressbar({ value : false }); Get value for jQuery progressbar from a select element HTML Select Percentage : <select id="ddlPercentage"> <option value="10">10</option> <option value="20">20</option> <option value="30">30</option> <option value="40">40</option> <option value="50">50</option> <option value="60">60</option> <option value="70">70</option> <option value="80">80</option> <option value="90">90</option> <option value="100">100</option> </select> <input type="button" id="btn" value="Set Value" /> <br /><br /> <div id="progressbar"></div> jQuery $(document).ready(function () { var progressbarDiv = $('#progressbar'); progressbarDiv.progressbar(); $('#btn').click(function () { progressbarDiv.progressbar({ value: parseInt($('#ddlPercentage').val()) }); }); }); Display jQuery progress bar value HTML Select Percentage : <select id="ddlPercentage"> <option value="10">10</option> <option value="20">20</option> <option value="30">30</option> <option value="40">40</option> <option value="50">50</option> <option value="60">60</option> <option value="70">70</option> <option value="80">80</option> <option value="90">90</option> <option value="100">100</option> </select> <input type="button" id="btn" value="Set Value" /> <br /> <br /> <div id="progressbar" style="position:relative"> <span style="position:absolute; left:50%; top:20%" id="progressBar-label"> </span> </div> jQuery $(document).ready(function () { var progressbarDiv = $('#progressbar'); progressbarDiv.progressbar(); $('#btn').click(function () { progressbarDiv.progressbar({ value: parseInt($('#ddlPercentage').val()), change: function () { $('#progressBar-label').text(progressbarDiv.progressbar('value') + '%'); } }); }); });
Views: 21390 kudvenkat
modal popup closing automatically after few seconds using jquery 3.3.1
 
06:05
#closedialog #automaticallypopupclose #jquerymodelpopup jquery snippet to close modal popup automatically after 5 or 10 seconds
How to use jQuery UI with wordpress for beginners from scratch -  jQuery Dialog with Wordpress
 
16:59
In this video session we will learn about: How to use jQuery UI Dialog and its Effects with Wordpress jQuery Introduction with Wordpress (#1): https://goo.gl/2NvHcA jQuery Accordion with Wordpress (#2): https://goo.gl/Nm2iQz jQuery Autocomplete with Wordpress (#3): https://goo.gl/EdyaQu jQuery datepicker with Wordpress (#4): https://goo.gl/hs3vQ6 SOCIAL : =============== Subscribe : https://www.youtube.com/channel/UCB2flCo-gW6RhpVVXySqcMg FACEBOOK : https://www.facebook.com/onlinewebtutorhub/ TWITTER: https://twitter.com/owthub BLOG: https://onlinewebtutorhub.blogspot.in/ Also you can learn Wordpress Custom =============== Wordpress Theme Development: https://goo.gl/MZ8maF Wordpress Widget Development: https://goo.gl/Dc2htn Wordpress Plugin Development: https://goo.gl/BA7dYG Wordpress Theme Options Development: https://goo.gl/Vjv3Ub Learn backbone.js here! : https://goo.gl/Qd2Pcs Laravel tutorials: https://goo.gl/Nh9qJk CakePHP tutorials: https://goo.gl/uRsS3G Tags =================== wordpress jquery ui tutorial, jquery ui of wordpress, wordpress with jquery ui tutorials, jquery ui with wordpress tutorials for beginners, wordpress jquery ui from scratch, wordpress jquery ui tutorials for beginners from scratch, wordpress tutorials for jquery ui, wordpress lessons for jquery ui, how to use jquery ui with wordpress, jquery ui with wordpress beginners series, jquery ui with wordpress from scratch, wordpress jquery ui from scratch, beginners series of wordpress jquery ui, online web tutor, profotech solutions, Thanks Online Web Tutor Keep learning and Sharing :)
Views: 194 Online Web Tutor
jQuery UI Tutorial | Shared API Configuration Options
 
02:34
Want all of our free jQuery UI training videos? Visit our Learning Library, which features all of our training courses and tutorials at http://learn.infiniteskills.com?utm_source=youtube&utm_medium=youtube_video_description&utm_campaign=jquery_ui_shared_api_configuration_options&network=youtube More details on this jQuery UI training can be seen at http://www.infiniteskills.com/training/learning-jquery-ui.html?utm_source=youtube&utm_medium=youtube_video_description&utm_campaign=jquery_ui_shared_api_configuration_options&network=youtube. This clip is one example from the complete course. For more free jQuery UI tutorials please visit our main website. YouTube: https://www.youtube.com/user/OreillyMedia Facebook: https://www.facebook.com/OReilly/?fref=ts Twitter: https://twitter.com/OReillyMedia Website: http://www.oreilly.com/
Theming Theme Roller Customizations in JQuery UI
 
07:48
jQuery UI is primarily focused on the User Interface enhancements(hence the name jQuery UI ofcourse). Since its focussed on user interface enchancement, there is an option provided to style the inbuilt widgets in various ways to give it a particular look and feel. This can be achieved by the themeing option also known as Theme Roller. Check this link for more info - https://jqueryui.com/themeroller/ Video by - Tanmay Sakpal Simple Snippets Channel link - https://www.youtube.com/simplesnippets
Views: 5522 Telusko
jquery menu widget
 
11:37
Link for all dot net and sql server video tutorial playlists https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1 Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/07/jquery-menu-widget.html In this vide we will discuss jquery menu widget with examples 2 simple steps to get the jQuery menu widget on a page Step 1 : Create an HTML structure with parent/child relationship. The most commonly used element is the unordered list. To disable a menu item add ui-state-disabled class to that list item element. <ul id="menu"> <li>USA <ul> <li>Virginia</li> <li>Maryland</li> </ul> </li> <li>India <ul> <li>AP</li> <li class="ui-state-disabled">MP</li> <li>Karnataka <ul> <li>Bangalore</li> <li>Mangalore</li> <li>Mysore</li> </ul> </li> </ul> </li> <li>UK</li> <li>Australia</li> </ul> Step 2 : Find the unordered list element in the DOM and call menu() function $('#menu').menu(); To control the width, set the preferred with in the .ui-menu class. This class is applied to the unordered list by jquery ui. You can see this using the browser developer tools. <style> .ui-menu{ width:150px } </style> Please note : Another way you can control the width of the menu widget is by placing it as a child element in another element and setting the width of the parent element. <div style="width:150px"> Menu HTML here </div> You can add an icon to a menu item, by applying class names. For the list of icons provided by jQuery http://api.jqueryui.com/theming/icons/ <ul id="menu"> <li><span class="ui-icon ui-icon-flag"></span>USA <ul> <li>Virginia</li> <li>Maryland</li> </ul> </li> ... </ul> To associate a different icon to a submenu, use icons option $('#menu').menu({ icons: { submenu: 'ui-icon-circle-arrow-e' } }); To disable the menu, set disabled option to true $(document).ready(function () { $('#menu').menu({ disabled: true }); }); To get the selected item text, use the select event $('#menu').menu({ select: function (event, ui) { alert(ui.item.text()); } });
Views: 18240 kudvenkat
Message Box Widget in JQuery UI  2019
 
12:22
Message Box Widget in JQuery UI 2019 A dialog is a floating window that contains a title bar and a content area. The dialog window can be moved, resized and closed with the 'x' icon by default. If the content length exceeds the maximum height, a scrollbar will automatically appear. A bottom button bar and semi-transparent modal overlay layer are common options that can be added. More Info on dialog or MessageBox in jQuery UI - http://api.jqueryui.com/dialog/ jQuery UI icons - https://api.jqueryui.com/theming/icons/ Video by - Tanmay Sakpal Simple Snippets Channel link - https://www.youtube.com/simplesnippets Social Network for Developers ☞ https://morioh.com Developer's Store ☞ https://www.moteefe.com/store/developer?cp=WP6JDT Learn to code for free and get a developer job ☞ https://codequs.com/ Original video source: ---------------------------------------------------- Social Network for Developers: https://morioh.com Learn Startup: https://learnstartup.net Learn to code: https://codequs.com Fanpage: https://www.facebook.com/codek.tv Twitter: https://twitter.com/i_am_adeveloper Tumblr: https://codequsdotcom.tumblr.com/
Views: 0 JavaScript
jquery draggable widget
 
12:17
Link for all dot net and sql server video tutorial playlists https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1 Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/07/jquery-draggable-widget.html In this video we will discuss jquery draggable widget jquery draggable widget allow elements to be moved using the mouse. This widget is in interactions category on the jQuery UI website. http://jqueryui.com/draggable/ Consider the following HTML <div id="draggableDiv" class="divClass"> Drag me around </div> .divClass { height: 200px; width: 200px; background-color: red; color: white; display:table-cell; vertical-align:middle; text-align:center; } To make the above div element draggable $('#draggableDiv').draggable(); Some of the useful options to customize the draggable widget axis - Constrains dragging to either x or y axis containment - Constrains dragging to within the bounds of the specified element or region cursor - The CSS style of the cursor during the drag operation opacity - opacity during the drag operation revert - Boolean property that specifies if the element should revert to its start position when dragging stops revertDuration - The duration of the revert animation, in milliseconds snap - Specifies whether the element being dragged should snap to other elements. Value can be boolean or a selector. When set to true, the element will snap to all other draggable elements. When a selector is specified the element being dragged will snap to the element specified by the selector snapTolerance - The distance in pixels between the element being dragged and the element to which to snap to, at which snapping should occur. cancel - Prevents dragging from starting on specified elements Constrains dragging to x axis $('#draggableDiv').draggable({ axis : 'x' }); Constrains dragging to within the bounds of the parent element HTML <div id="containerDiv" style="height:300px; width:300px; border:3px solid black"> <div id="draggableDiv" class="divClass"> Drag me around </div> </div> jQuery $('#draggableDiv').draggable({ containment : 'parent' }); Changes the cursor style to "move" during the drag operation $('#draggableDiv').draggable({ cursor: 'move' }); Changes the opacity to 0.3 during the drag operation $('#draggableDiv').draggable({ opacity : '0.3' }); Reverts the div element to its start position when dragging stops. Revert animation completes in 1000 milli-seconds. $('#draggableDiv').draggable({ revert: true, revertDuration : 1000 }); The following example 1. Snaps the coloured div elements to the div element with thick black border. 2. The snapping occurs as soon as the distance between any of the coloured div element and the div element with thick black border is 50 pixels 3. The cancel option cancels dragging from starting on the div element with thick black border HTML <div id="redDiv" class="divClass" style="background-color: red"> Red Div </div> <div id="greeDiv" class="divClass" style="background-color: green"> Green Div </div> <div id="blueDiv" class="divClass" style="background-color: blue"> Blue Div </div> <div id="brownDiv" class="divClass" style="background-color: brown"> Brown Div </div> <br /> <br /> <div id="snapDiv" style="height: 400px; width: 400px; border: 5px solid black"> </div> Style .divClass { height: 200px; width: 200px; color: white; display: table-cell; vertical-align: middle; text-align: center; } jQuery $('div').draggable({ snap: '#snapDiv', snapTolerance: 50, cancel : '#snapDiv' });
Views: 26380 kudvenkat
jquery ui video tutorial 12 - Creating Autocomplete Widget
 
07:48
jquery ui video tutorial 12 - Creating Autocomplete Widget jQuery UI - Creating Autocomplete Widget: a textbox with suggestions dropdown list Auto complete widget: simplifies the searching of an item in a pre populated list of values It just filters out the list of values step by step based on the given search string from the pre populated list of values. Creating Auto complete widget: 1. Create a new HTML document with basic HTML document structure code <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title> Auto complete Demo</title> </head> <body> </body> </html> 2. Link the necessary jQueryUI libray files to the HTML document <link href="jquery-ui/jquery-ui.min.css" rel="stylesheet" type="text/css"/> <script src="jquery-ui/external/jquery/jquery.js" type="text/javascript"></script> <script src="jquery-ui/jquery-ui.min.js" type="text/javascript"></script> 3. Code the structure of the widget (i.e. HTML or markup): To create an auto complete widget; we need to create a text input field <input type="text" id="autocomplete"/> 4. Select the element using jQuery and call the respective jQuery UI function on it Select the element using jQuery selector, call autocomplete jQuery UI function on it and pass an object with its source value set to an array of values. <script type="text/javascript"> $("#autocomplete").autocomplete( { source: [ "AI" , "CG" , "DS" , "OS" ] } ); </script> ========================================= Follow the link for next video: jquery ui video tutorial 13 - Creating Selectmenu Widget https://youtu.be/chSS9ow06Fg Follow the link for previous video: jquery ui video tutorial 11 - Creating Spinner Widget https://youtu.be/5u-qoOiVLHc =========================================
How to use jQuery UI with wordpress for beginners from scratch - About Wordpress jQuery UI features
 
12:02
In this video session we will learn about: How to use jQuery UI with Wordpress Introduction & Idea jQuery Accordion with Wordpress (#2): https://goo.gl/Nm2iQz jQuery Autocomplete with Wordpress (#3): https://goo.gl/EdyaQu jQuery datepicker with Wordpress (#4): https://goo.gl/hs3vQ6 jQuery dialog with Wordpress (#5): https://goo.gl/Q2wH9J SOCIAL : =============== Subscribe : https://www.youtube.com/channel/UCB2flCo-gW6RhpVVXySqcMg FACEBOOK : https://www.facebook.com/onlinewebtutorhub/ TWITTER: https://twitter.com/owthub BLOG: https://onlinewebtutorhub.blogspot.in/ Also you can learn Wordpress Custom =============== Wordpress Theme Development: https://goo.gl/MZ8maF Wordpress Widget Development: https://goo.gl/Dc2htn Wordpress Plugin Development: https://goo.gl/BA7dYG Wordpress Theme Options Development: https://goo.gl/Vjv3Ub Learn backbone.js here! : https://goo.gl/Qd2Pcs Laravel tutorials: https://goo.gl/Nh9qJk CakePHP tutorials: https://goo.gl/uRsS3G Tags =================== wordpress jquery ui tutorial, jquery ui of wordpress, wordpress with jquery ui tutorials, jquery ui with wordpress tutorials for beginners, wordpress jquery ui from scratch, wordpress jquery ui tutorials for beginners from scratch, wordpress tutorials for jquery ui, wordpress lessons for jquery ui, how to use jquery ui with wordpress, jquery ui with wordpress beginners series, jquery ui with wordpress from scratch, wordpress jquery ui from scratch, beginners series of wordpress jquery ui, online web tutor, profotech solutions, Thanks Online Web Tutor Keep learning and Sharing :)
Views: 755 Online Web Tutor
jQuery Resizable Widget
 
13:44
Link for all dot net and sql server video tutorial playlists https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1 Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/07/jquery-resizable-widget.html In this video we will discuss jQuery Resizable Widget jQuery Resizable Widget allows you to change the size of an element using the mouse Consider the following HTML and CSS <div id="redDiv" class="divClass" style="background-color: red"> Red Div </div> <style> .divClass { font-family: Arial; height: 150px; width: 150px; text-align: center; color:white } </style> To make the div element resizable $(document).ready(function () { $('#redDiv').resizable(); }); jQuery Resizable Widget Options alsoResize - Allows to resize one or more elements synchronously with the resizable element animate - Animates to the final size after resizing. Include .ui-resizable-helper class to display outline while resizing aspectRatio - Specifies whether the element should preserve aspect ratio autoHide - Specifies whether the resize handles should hide when the user is not hovering over the element containment - Constrains resizing to within the bounds of the specified element or region ghost - specifies whether a semi-transparent helper element should be shown for resizing maxHeight - The maximum height you can resize to minHeight - The minimum height you can resize to maxWidth - The maximum width you can resize to minWidth - The minimum width you can resize to jQuery Resizable Widget Events start - Triggered at the start of a resize operation stop - Triggered at the end of a resize operation resize - Triggered during the resize operation Resizing redDiv will also resize blueDiv HTML <div id="redDiv" class="divClass" style="background-color: red"> Red Div </div> <br /> <div id="blueDiv" class="divClass" style="background-color: blue"> Red Div </div> jQuery $(document).ready(function () { $('#redDiv').resizable({ alsoResize:'#blueDiv' }); }); Constrains resizing to within the bounds of the container div HTML <div id="container" style="border: 3px solid black; height: 300px; width: 300px; padding:5px"> <div id="redDiv" class="divClass" style="background-color: red"> Red Div </div> </div> jQuery $('#redDiv').resizable({ containment: '#container' });
Views: 15089 kudvenkat
Dreamweaver Tutorial: JQuery UI Accordion
 
23:11
JQuery UI Accordion..its a simple process. step 1. make available required files like js and css with CDN step 2. create a div with an id accordion apply the accordion with some JQuery UI scripting using few additional optional parameters for added control like collapsible:true, / false, active:false/0, heightStyle:"fill"/ auto / content event:"mouseover" / "click" icons:{"header":"ui-icon-plus", "activeHeader":"ui-icon-minus"} Mohit Manuja- conducting online and offline training : across the Globe and in Mumbai, India , respectively. http://qualitylessons.net
jQuery UI center dialog buttons
 
02:56
reposition the buttons for jQuery UI dialog
Views: 1227 John Stewart
#1. Building Dialogs with Custom Regions
 
36:54
http://www.backbonerails.com/screencasts/building-dialogs-with-custom-regions Dialogs and modals are a popular plugin and commonly found in most Backbone applications. In this screencast we'll go through integrating a jQuery UI dialog into our Backbone application. You'll see how to create a custom region object with Marionette to serve as a specialized dialog, allowing your views to easily pass configuration options to the modal. I'll also cover how to trigger events which control how the dialog behaves. Github Repo - https://github.com/brian-mann/sc01-dialogs
Views: 2366 BackboneRails
jQuery Tutorial #17: Set minimum and maximum date dynamically in jQuery UI Datepicker
 
08:33
Welcome, all we will see how to set minimum and maximum date dynamically in jQuery UI Datepicker. The website for code:- https://www.thapatechnical.com set max date as today in jquery datepicker set min and max date in jquery datepicker how to set min date in datepicker using javascript set min date in datepicker using jquery jquery datepicker mindate maxdate example jquery datepicker mindate maxdate dynamic jquery datepicker set mindate based on another datepicker how to set min date in datepicker in angularjs
Views: 4841 Thapa Technical
jQuery UI Tutorial - Tabs & Customize CSS -
 
06:42
jQuery UI Tutorial - Tabs & Customize CSS - Code: http://codingwithsara.com/jquery-ui-tutorial-tabs-customize-css/
Views: 1254 Coding with Sara
jQuery datepicker in asp net
 
11:09
Link for all dot net and sql server video tutorial playlists https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1 Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/06/jquery-datepicker-in-aspnet.html The jQuery UI Datepicker is a highly configurable plugin that adds datepicker functionality to your pages. It is very easy to implement datepicker functionality in an asp.net web form using jquery. Drag and drop a textbox control <asp:TextBox ID="txtDate" runat="server"> </asp:TextBox> In the jQuery ready function, call the datepicker() function $('#txtDate').datepicker(); For the complete list of options that are available to customize the datepicker widget http://api.jqueryui.com/datepicker Some of the useful options appendText - The text to display after date field showOn - When the datepicker should appear. The datepicker can appear when the field receives focus ("focus"), when a button is clicked ("button"), or when either event occurs ("both") buttonText - The text to display on the trigger button dateFormat - The date format showWeek - show week number of the year numberOfMonths - The number of months to show at once changeMonth - Whether the month should be rendered as a dropdown instead of text changeYear - Whether the year should be rendered as a dropdown instead of text minDate - The minimum selectable date. When set to null, there is no minimum maxDate - The maximum selectable date. When set to null, there is no maximum Localization : To localize the datapicker reference the corresponding localization file. Localization files can be found at the following URL https://github.com/jquery/jquery-ui/tree/master/ui/i18n
Views: 54630 kudvenkat
jquery tooltip widget
 
08:32
Link for all dot net and sql server video tutorial playlists https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1 Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/06/jquery-tooltip-widget.html In this video we will discuss jQuery tooltip widget with examples. To get a tooltip without using jQuery all you do is set the title attribute. At this point when we hover over the element the content that is specified as the value for the title attribute will be displayed as the tooltip. jQuery Tooltip widget replaces native tooltip and allows lot of customization 1. Display other content than just the title, like inline footnotes or extra content retrieved via Ajax. 2. Customize the positioning, e.g., to center the tooltip above elements. 3. Add extra styling to customize the appearance, for warning or error fields. In the following example label element display the native tooltip where as the textbox displays jQuery tooltip HTML <label id="lblName" for="txtName" title="Full Name">Name</label> <input id="txtName" type="text" title="Your full name as it appears in paasport" /> jQuery $('#txtName').tooltip(); In the following example we are calling tooltip() function on the document object, so this will display jQuery tooltip for all the elements that have title attribute $(document).tooltip(); You can also use the content option, to specify the content for tooltip. When both title attribute and content options are specified, the content specified by the content option will override the content specified by the title attribute. HTML <input id="txtName" type="text" title="Your full name as it appears in paasport" /> jQuery $('#txtName').tooltip({ content : '<u>content option</u> tooltip overriding title attribute tooltip' }); content option supports multiple types. string or a function. HTML <input id="txtName" type="text" title="Your full name as it appears in paasport" /> jQuery $(document).ready(function () { $('#txtName').tooltip({ content: toolTipFunction }); function toolTipFunction() { return 'Tooltip from a function'; } }); Set track option to true to make the tooltip follow the mouse HTML <input id="txtName" type="text" title="Your full name as it appears in paasport" /> jQuery $('#txtName').tooltip({ track: true }); show and hide options can be used to animate the showing and hiding of the tooltip. Both of these options support multiple types. For the detailed description please check the following jquery documentation page http://api.jqueryui.com/tooltip In the following example we are using a JavaScript object, to specify the animation duration, effect and delay while the tooltip is being shown and hidden HTML <input id="txtName" type="text" title="Your full name as it appears in paasport" /> jQuery $('#txtName').tooltip({ show : {delay:10, duration:500, effect: 'slideDown'}, hide: { delay: 10, duration: 500, effect: 'slideUp' } });
Views: 21978 kudvenkat
jQuery Tutorial for Beginners - 24 - Introduction to jQuery UI
 
02:08
Introduction to the jQuery UI.
Views: 12427 EJ Media
jquery ui video tutorial 13 - Creating Selectmenu Widget
 
07:55
jquery ui video tutorial 13 - Creating Selectmenu Widget jQuery UI - Creating Selectmenu Widget: Select menu Widget: extends the functionality of the select tag available in HTML Select menu widget converts the HTML select tag into a theme able and customizable control Creating Select menu Widget: 1. Create a new HTML document with basic HTML document structure code <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title> Selectmenu Demo</title> </head> <body> </body> </html> 2. Link the necessary jQueryUI libray files to the HTML document <link href="jquery-ui/jquery-ui.min.css" rel="stylesheet" type="text/css"/> <script src="jquery-ui/external/jquery/jquery.js" type="text/javascript"></script> <script src="jquery-ui/jquery-ui.min.js" type="text/javascript"></script> 3. Code the structure of the widget (i.e. HTML or markup): To create a select menu widget; we need to create select tag with list of options <h3>Marital status</h3> <select id="selectmenu"> <option value="s">Single</option> <option value="m">Married</option> <option value="d">Divorced</option> <option value="w">Widow</option> </select> 4. Select the element using jQuery and call the respective jQuery UI function on it Select the element using jQuery selector, call selectmenu jQuery UI function on it <script type="text/javascript"> $("#selectmenu").selectmenu(); </script> ========================================= Follow the link for next video: jquery ui video tutorial 14 - Creating Menu Widget https://youtu.be/J3x_qJa2cfE Follow the link for previous video: jquery ui video tutorial 12 - Creating Autocomplete Widget https://youtu.be/fx2YflCP6pg =========================================
How to use jQuery UI with wordpress for beginners from scratch -  jQuery UI Accordion with Wordpress
 
19:52
In this video session we will learn about: How to use jQuery UI Accordion with Wordpress jQuery Introduction with Wordpress (#1): https://goo.gl/2NvHcA jQuery Autocomplete with Wordpress (#3): https://goo.gl/EdyaQu jQuery datepicker with Wordpress (#4): https://goo.gl/hs3vQ6 jQuery dialog with Wordpress (#5): https://goo.gl/Q2wH9J SOCIAL : =============== Subscribe : https://www.youtube.com/channel/UCB2flCo-gW6RhpVVXySqcMg FACEBOOK : https://www.facebook.com/onlinewebtutorhub/ TWITTER: https://twitter.com/owthub BLOG: https://onlinewebtutorhub.blogspot.in/ Also you can learn Wordpress Custom =============== Wordpress Theme Development: https://goo.gl/MZ8maF Wordpress Widget Development: https://goo.gl/Dc2htn Wordpress Plugin Development: https://goo.gl/BA7dYG Wordpress Theme Options Development: https://goo.gl/Vjv3Ub Learn backbone.js here! : https://goo.gl/Qd2Pcs Laravel tutorials: https://goo.gl/Nh9qJk CakePHP tutorials: https://goo.gl/uRsS3G Tags =================== wordpress jquery ui tutorial, jquery ui of wordpress, wordpress with jquery ui tutorials, jquery ui with wordpress tutorials for beginners, wordpress jquery ui from scratch, wordpress jquery ui tutorials for beginners from scratch, wordpress tutorials for jquery ui, wordpress lessons for jquery ui, how to use jquery ui with wordpress, jquery ui with wordpress beginners series, jquery ui with wordpress from scratch, wordpress jquery ui from scratch, beginners series of wordpress jquery ui, online web tutor, profotech solutions, Thanks Online Web Tutor Keep learning and Sharing :)
Views: 409 Online Web Tutor
jQuery UI Tutorial | Easings
 
02:36
Want all of our free jQuery UI training videos? Visit our Learning Library, which features all of our training courses and tutorials at http://learn.infiniteskills.com?utm_source=youtube&utm_medium=youtube_video_description&utm_campaign=jquery_ui_easings&network=youtube More details on this jQuery UI training can be seen at http://www.infiniteskills.com/training/learning-jquery-ui.html?utm_source=youtube&utm_medium=youtube_video_description&utm_campaign=jquery_ui_easings&network=youtube. This clip is one example from the complete course. For more free jQuery UI tutorials please visit our main website. YouTube: https://www.youtube.com/user/OreillyMedia Facebook: https://www.facebook.com/OReilly/?fref=ts Twitter: https://twitter.com/OReillyMedia Website: http://www.oreilly.com/
Disable weekends sat and sun in calendar jQuery UI datepicker
 
07:30
Implement jQueryUI DatePicker Calendar disable weekends
How to use jQuery UI with wordpress for beginners from scratch -  jQuery Autocomplete with Wordpress
 
18:03
In this video session we will learn about: How to use jQuery UI Autocomplete with Wordpress jQuery Introduction with Wordpress (#1): https://goo.gl/2NvHcA jQuery Accordion with Wordpress (#2): https://goo.gl/Nm2iQz jQuery datepicker with Wordpress (#4): https://goo.gl/hs3vQ6 jQuery dialog with Wordpress (#5): https://goo.gl/Q2wH9J SOCIAL : =============== Subscribe : https://www.youtube.com/channel/UCB2flCo-gW6RhpVVXySqcMg FACEBOOK : https://www.facebook.com/onlinewebtutorhub/ TWITTER: https://twitter.com/owthub BLOG: https://onlinewebtutorhub.blogspot.in/ Also you can learn Wordpress Custom =============== Wordpress Theme Development: https://goo.gl/MZ8maF Wordpress Widget Development: https://goo.gl/Dc2htn Wordpress Plugin Development: https://goo.gl/BA7dYG Wordpress Theme Options Development: https://goo.gl/Vjv3Ub Learn backbone.js here! : https://goo.gl/Qd2Pcs Laravel tutorials: https://goo.gl/Nh9qJk CakePHP tutorials: https://goo.gl/uRsS3G Tags =================== wordpress jquery ui tutorial, jquery ui of wordpress, wordpress with jquery ui tutorials, jquery ui with wordpress tutorials for beginners, wordpress jquery ui from scratch, wordpress jquery ui tutorials for beginners from scratch, wordpress tutorials for jquery ui, wordpress lessons for jquery ui, how to use jquery ui with wordpress, jquery ui with wordpress beginners series, jquery ui with wordpress from scratch, wordpress jquery ui from scratch, beginners series of wordpress jquery ui, online web tutor, profotech solutions, Thanks Online Web Tutor Keep learning and Sharing :)
Views: 221 Online Web Tutor
jQueryUI video tutorial 19 - Creating Control group Widget
 
20:01
jQueryUI video tutorial 19 - Creating Control group Widget jquery ui - Creating Controlgroup Widget: Controlgroup Widget: is used to group multiple jQuery UI widgets into a single set Creating Control group Widget: 1. Create a new HTML document with basic HTML document structure code <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Control group Demo</title> </head> <body> </body> </html> 2. Link the necessary jQueryUI libray files to the HTML document <link href="jquery-ui/jquery-ui.min.css" rel="stylesheet" type="text/css"/> <script src="jquery-ui/external/jquery/jquery.js" type="text/javascript"></script> <script src="jquery-ui/jquery-ui.min.js" type="text/javascript"></script> 3. Code the structure of the widget (i.e. HTML or markup): To create a Controlgroup widget; we need to create a div element with set of input elements Note: add class ui-controlgroup-item to all elements in the control group, because only few elements are considered as the control group items. To consider an element as an item of control group we must add ui-controlgroup-item class. <form name="frmStudDetails" id="frmStudDetails" action="#" method="get"> <div id="controlgroup"> <label for="txtStudName" class="ui-controlgroup-item">Student Name:</label> <input type="text" name="txtStudName" id="txtStudName" value="" class="ui-controlgroup-item"/> <label for="slctQual" class="ui-controlgroup-item">Qualification:</label> <select name="slctQual" id="slctQual" class="ui-controlgroup-item"> <option value="u">UG</option> <option value="p">PG</option> </select> <label for="rdbGender" class="ui-controlgroup-item">Gender:</label> <label for="rdbMale" class="ui-controlgroup-item">Male</label> <input type="radio" name="rdbGender" id="rdbMale" value="m" checked class="ui-controlgroup-item"/> <label for="rdbFemale" class="ui-controlgroup-item">Female</label> <input type="radio" name="rdbGender" id="rdbFemale" value="f" class="ui-controlgroup-item"/> <label for="chkHobbies" class="ui-controlgroup-item">Hobbies:</label> <label for="chkMusic" class="ui-controlgroup-item">Music</label> <input type="checkbox" name="chkHobbies" id="chkMusic" value="m" class="ui-controlgroup-item"/> <label for="chkDrawing" class="ui-controlgroup-item">Drawing</label> <input type="checkbox" name="chkHobbies" id="chkDrawing" value="d" class="ui-controlgroup-item"/> <label for="dateOfJoining" class="ui-controlgroup-item">Date Of Joining:</label> <input type="text" name="dateOfJoining" id=" dateOfJoining" value="" class="ui-controlgroup-item"/> <input type="submit" value="SUBMIT" class="ui-controlgroup-item"/> </div> </form> 4. Select the element using jQuery and call the respective jQuery UI function on it Select the element using jQuery selector, call controlgroup jQuery UI function on it <script type="text/javascript"> $("# dateOfJoining").datepicker(); $("#controlgroup").controlgroup( {direction:"vertical"} ); </script> ========================================= Follow the link for previous video: jquery ui video tutorial 18 - Creating Button Widget https://youtu.be/iAQrPfPhbV8 =========================================
jquery button widget
 
11:09
Link for all dot net and sql server video tutorial playlists https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1 Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/07/jquery-button-widget.html In this video we will discuss jQuery button widget jQuery button widget enhances standard form elements like buttons, inputs and anchors to buttons. In the HTML below we have a 1. Button 2. Submit 3. Anchor <input type="button" value="Button Element" /> <input type="submit" value="Submit Button" /> <a href="#">Anchor Element</a> jQuery code to enhance the above elements to buttons $('input[type="button"], input[type="submit"], a').button(); To associate icons with the buttons, use icons option of the button widget. A button can have primary and secondary icons. By default, the primary icon is displayed on the left and the secondary is displayed on the right. $('input[type="button"], input[type="submit"], a').button({ icons: { primary: 'ui-icon-circle-triangle-w', secondary: 'ui-icon-circle-triangle-e' } }); Please note : Icons are not supported with input elements of type button, submit or reset jQuery UI icons http://api.jqueryui.com/theming/icons jQuery button widget can also enhance checkboxes to buttons <input type="checkbox" id="Bold" /><label for="Bold">B</label> <input type="checkbox" id="Underline" /><label for="Underline">U</label> <input type="checkbox" id="Italic" /><label for="Italic">I</label> jQuery code to enhance above checkboxes to buttons $('input[type="checkbox"]').button().click(function () { var isChecked = $(this).is(':checked') ? 'Checked' : 'Unchecked' alert($(this).attr('id') + ' Checkbox ' + isChecked) }); jQuery button widget can also encahnce radiobuttons to buttons <input type="radio" id="Male" name="Gender" /><label for="Male">Male</label> <input type="radio" id="Female" name="Gender" /><label for="Female">Female</label> jQuery code to enhance above radiobuttons to buttons $('input[type="radio"]').button().click(function () { alert($(this).attr('id') + ' radio button selected') }); buttonset() widget is useful to enhance a group of radio buttons or checkboxes to buttons <div id="radioButtons"> <input type="radio" id="Male" name="Gender" /><label for="Male">Male</label> <input type="radio" id="Female" name="Gender" /><label for="Female">Female</label> </div> jQuery code to enhance a group of radio buttons to buttons $('#radioButtons').buttonset(); $('#radioButtons input[type="radio"]').click(function () { alert($(this).attr('id') + ' radio button selected') });
Views: 15117 kudvenkat
Buttons and modal dialog preview
 
00:40
Here's a preview of the buttons "active" state, on which the box-shadow is removed to give a little more feedback to the user. Also the modal dialog's hiding options are demonstrated
Views: 296 Vincent Barbin
jQuery UI - Tooltip method
 
11:21
https://www.udemy.com/jquery-ui-ultimatedesign-amazing-interfaces-using-jquery-ui/?couponCode=utube Understand the implementation of tooltip method in your user interface.
Views: 91 Kunal Asudani
Backbone.ModalDialog.js v0.2
 
00:40
Visual demo of the Backbone.ModalDialog.js v0.2 which adds the following features : * Added option to render the modal dialog into a given container element allowing relative absolute positioning. * Added option to slide the modal dialog down from above or up from below. * You can now provide an css properties to be applied to the modal dialog. * Clicking on a jQuery ui calender control no longer causes the modal dialog to close. * Improved the default position of the modal dialog to be more central. https://github.com/GarethElms/BackboneJSModalView
Views: 1540 Gareth Elms