KatsolAgency

Programming languages and web development including java , html, css ,java script,Tutorials Android phone tricks and Tech news around the world.

Wednesday, July 19, 2017

Linking Buttons


Linking Buttons in jQuery

Hey guys, to day i will be showing you guys  how to make jQuery buttons work,
by using the html anchor element,
 Anchor Button
  a href="#" is where you will link your html file.(a href="go.html")
Copy the code blow and past it after the paragraph
which is in the  main contentif you are following this tutorials 


<a href="menu.html" class="ui-btn ui-btn-b">Anchor Button</a>

 here i name my html file as menu.hmtl,  href="menu.html" 
You most call this  button class in the container, if you are following this tutorials since in
the beginning  this is how it will look
<div role="main" class="ui-content"> <!--  content-->
<img src="img/app.jpg">
<p>this is the main content of your app, where u can put anything</p>
<a href="menu.html" class="ui-btn ui-btn-b">Anchor Button</a>
</div><!-- end of content-->

and you have you button in the container  And this how it will look

Jquery buttton



Now if we  click on this button it will take us to this page
Let us call this page the menu page

you maybe wondering how this page is so classic,
well i linked a CSS file i

<link rel="stylesheet" href="css/themes/default/theme-classic.css">

Download the CSS file here
In this menu page we have 4 buttons, and all the 4 buttons are call in the header div,
<div data-role="header">

the first button name back  on top of the head (my menu page), its function is to take you back the home page, and it is define as data-rel="back"  after the  a href="#" folows by the button class  class="ui-btn ui-corner-all "
this is how the line of code for the back button will look,
<a href="#" data-rel="back" class="ui-btn ui-corner-all ">Back</a>

    Choose :
  • OR
  • To comment
No comments:
Write comments