jQuery UI instance - Button (Button)
With appropriate use hover (hover) and activation (active) styles can be themed button to enhance the standard form elements (such as buttons, input boxes, anchor) function.
For more details about button components, see the API documentation button member (the Button the Widget) .
The default function
Examples of markers can be used for buttons: a button element, a type of input elements and to submit an anchor.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI button (Button) - The default function </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "Input [type = submit], a, button")
.button ()
.click (function (event) {
event.preventDefault ();
});
});
</ Script>
</ Head>
<Body>
<Button> element of a button </ button>
<Input type = "submit" value = "Submit a Button">
<a href="#"> an anchor </a>
</ Body>
</ Html>
Checkbox
By means of the button check box is a toggle button style. label elements associated with the box as the button text.
In this instance by calling on a public container .buttonset() , as demonstrated three display button styles box.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI button (Button) - checkbox </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#check") .button ();
$ ( "#format") .buttonset ();
});
</ Script>
<Style>
#format {margin-top: 2em;}
</ Style>
</ Head>
<Body>
<Input type = "checkbox" id = "check"> <label for = "check"> switch </ label>
<Div id = "format">
<Input type = "checkbox" id = "check1"> <label for = "check1"> B </ label>
<Input type = "checkbox" id = "check2"> <label for = "check2"> I </ label>
<Input type = "checkbox" id = "check3"> <label for = "check3"> U </ label>
</ Div>
</ Body>
</ Html>
icon
Some with various combinations of text and icon buttons
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI button (Button) - icon </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "Button: first") .button ({
icons: {
primary: "ui-icon-locked"
},
text: false
}). Next (). Button ({
icons: {
primary: "ui-icon-locked"
}
}). Next (). Button ({
icons: {
primary: "ui-icon-gear",
secondary: "ui-icon-triangle-1-s"
}
}). Next (). Button ({
icons: {
primary: "ui-icon-gear",
secondary: "ui-icon-triangle-1-s"
},
text: false
});
});
</ Script>
</ Head>
<Body>
<Button> icon button with only </ button>
<Button> icon button on the left </ button>
<Button> button with two icons </ button>
<Button> with two buttons with text icon without </ button>
</ Body>
</ Html>
Radio
Three radio buttons into a button.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI button (Button) - Radio </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#radio") .buttonset ();
});
</ Script>
</ Head>
<Body>
<Form>
<Div id = "radio">
<Input type = "radio" id = "radio1" name = "radio"> <label for = "radio1"> Select 1 </ label>
<Input type = "radio" id = "radio2" name = "radio" checked = "checked"> <label for = "radio2"> select 2 </ label>
<Input type = "radio" id = "radio3" name = "radio"> <label for = "radio3"> Select 3 </ label>
</ Div>
</ Form>
</ Body>
</ Html>
Split button
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI button (Button) - Split Button </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
.ui-menu {position: absolute; width: 100px;}
</ Style>
<Script>
$ (Function () {
$ ( "#rerun")
.button ()
.click (function () {
alert ( "Running the last action");
})
.next ()
.button ({
text: false,
icons: {
primary: "ui-icon-triangle-1-s"
}
})
.click (function () {
var menu = $ (this) .parent (). next (). show (). position ({
my: "left top",
at: "left bottom",
of: this
});
$ (Document) .one ( "click", function () {
menu.hide ();
});
return false;
})
.parent ()
.buttonset ()
.next ()
.hide ()
.menu ();
});
</ Script>
</ Head>
<Body>
<Div>
<Div>
<Button id = "rerun"> Run last action </ button>
<Button id = "select"> select an action </ button>
</ Div>
<Ul>
<Li> <a href="#"> open ... </a> </ li>
<Li> <a href="#"> save </a> </ li>
<Li> <a href="#"> delete </a> </ li>
</ Ul>
</ Div>
</ Body>
</ Html>
toolbar
A multimedia player toolbar. Look-based markers: Some button element, Shuffle button is a checkbox for the type of input, Repeat options are three types of radio input.
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI button (Button) - Toolbar </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
#toolbar {
padding: 4px;
display: inline-block;
}
/ * Support: IE7 * /
* + Html #toolbar {
display: inline;
}
</ Style>
<Script>
$ (Function () {
$ ( "#beginning") .button ({
text: false,
icons: {
primary: "ui-icon-seek-start"
}
});
$ ( "#rewind") .button ({
text: false,
icons: {
primary: "ui-icon-seek-prev"
}
});
$ ( "#play") .button ({
text: false,
icons: {
primary: "ui-icon-play"
}
})
.click (function () {
var options;
if ($ (this) .text () === "play") {
options = {
label: "pause",
icons: {
primary: "ui-icon-pause"
}
};
} Else {
options = {
label: "play",
icons: {
primary: "ui-icon-play"
}
};
}
$ (This) .button ( "option", options);
});
$ ( "#stop") .button ({
text: false,
icons: {
primary: "ui-icon-stop"
}
})
.click (function () {
$ ( "#play") .button ( "Option", {
label: "play",
icons: {
primary: "ui-icon-play"
}
});
});
$ ( "#forward") .button ({
text: false,
icons: {
primary: "ui-icon-seek-next"
}
});
$ ( "#end") .button ({
text: false,
icons: {
primary: "ui-icon-seek-end"
}
});
$ ( "#shuffle") .button ();
$ ( "#repeat") .buttonset ();
});
</ Script>
</ Head>
<Body>
<Div id = "toolbar" class = "ui-widget-header ui-corner-all">
<Button id = "beginning"> beginning </ button>
<Button id = "rewind"> rewind </ button>
<Button id = "play"> Play </ button>
<Button id = "stop"> Stop </ button>
<Button id = "forward"> Fast forward </ button>
<Button id = "end"> end </ button>
<Input type = "checkbox" id = "shuffle"> <label for = "shuffle"> Shuffle </ label>
<Span id = "repeat">
<Input type = "radio" id = "repeat0" name = "repeat" checked = "checked"> <label for = "repeat0"> No Repeat </ label>
<Input type = "radio" id = "repeat1" name = "repeat"> <label for = "repeat1"> Once </ label>
<Input type = "radio" id = "repeatall" name = "repeat"> <label for = "repeatall"> All </ label>
</ Span>
</ Div>
</ Body>
</ Html>