jQuery and AJAX Tutorials 38 | Using the jQuery UI Video Lecture | AJAX and jQuery: Complete Series for Beginners - Front-End Programming

hey what's up guys my name is Ilias and
this is your thirty eight tutorial oh my
god we did a lot already so and I hope
you guys are not overwhelmed with the
stuff which we had in the previous
tutorial because I made a lot but so
this tutorial is going to be nice and
easy so I hope you guys already play
around with this portable and you know
how it works and stuff and so right now
we want to download this jQuery UI the
same as we download jQuery and amber it
to a page so I just go to download and
we don't need all that jQuery UI
features because we only need features
which are related to the sortable and we
can actually get rid of all these
widgets but we would like to leave the
UI UI core just in case so I'll just go
ahead and get rid of this widgets and
effects so now we have only interactions
than you our core and we can download
our custom version of jQuery UI so just
go ahead and download this and after you
download it I want you guys to copy that
file into your Jas directory but after
you downloaded this archive you'd
extract it of course and then you don't
need the whole contents of this jQuery
UI folder because for instance when you
open this HTML document it just shows
you all the features you can you have
all the components and stuff but we
don't actually need that all so we only
need to go to this Jas folder and copy
jQuery UI custom Minjae s minimize
version of jQuery UI so make sure you
copy this file into your working folder
within and paste it within the J's
directory in your project folder like
this so
have it right here I have the jQuery UI
custom and your next step would be to
highlight its name and pay and copy that
to the clipboard and then you would go
to your HTML well it was HTML but now
it's PHP anyway to your HTML document
and just ambit it like we did it before
with jQuery so we'll just write the path
and copy I mean a paste the file name so
now we pretty much embedded the jQuery
UI to our document or project and we can
work with it and we don't need the
jQuery UI page anymore in our browser
and we can reload the page and make sure
you guys are all the page every time you
make any changes to your to your project
all right now we should be able to sort
the elements like this hold on let me
reload the page well I forgot something
very important of course I want you guys
to go to the script and activate the
sortable thing so how we do that well
it's very easy you just select this
portfolio which we have here this
portfolio unordered list this one and
then you wanna run a function apply
function on it called sortable and
that's it
and then when you run your code and load
the page about the patient run the code
you will be able to do this awesome
thing look guys I just grabbed this this
image and I like pulled right here and
drop it so this is how you will be able
to to be the boss of your portfolio so
that you can change the order of
appearance of these pictures in your
portfolio okay great so now we just did
it for for only one session which means
when I reload the page we'll go back to
the previous state like it was so the
picture number one got the picture
number one again and stuff
and in next tutorial we'll write some
edge exclude which will generate an a
synchronic
request written in jQuery and send it to
the server and ask the server to save
the order of appearance of this images
and this is something what we are going
to do next tutorial and I suppose we
well I guess we will only need one
tutorial to do that or maybe two
tutorials anyway the next two tutorials
will be definitely fun and I hope you
guys will follow along and stay with us
so I'll see you guys in the next
tutorial