php with mysql tutorial with mark zuckerberg | post to facebook using php
 


 

A Workaround to use Secondary icon to jQuery-UI buttons with jQuery-UI-bootstrap



jQuery UI Bootstrap is a project which brings the beauty of Twitter Bootstrap to jQuery UI widgets, as is mentioned by Addy Osmani, the creator of jQuery-UI-bootstrap.

jQuery-UI offers a lot of themes. You can test different themes (even third party themes as jQuery-UI-bootstrap or Wijmo) with jui_theme_switch, a plugin, I have developed, here). I guess you will agree that jQuery-UI-bootstrap is the most beautiful :-)

Actually, jQuery-UI-bootstrap is NOT ONLY a third party theme for jQuery-UI. Moreover, with jQuery-UI-bootstrap you can also use (most) of Twitter Bootstrap side by wide with jQuery-UI widgets without components breaking visually.

In the following example I use jQuery-UI-bootstrap just as a jQuery-UI theme. Twitter Bootstrap is not used. As you can see, I had problems using secondary icon (the right-side icon) on jQuery-UI buttons. The provided solution is just a workaround and probably not a permanent solution. This example uses jQuery 1.10.2 and jQuery-UI 1.10.3

The problem

Inside the following iframe there are six jquery-ui buttons using ui-lightness jquery-ui theme. All compinations are displayed (only icon, only text, primary icon, secondary icon).

Using the jquery-ui-bootstrap theme, button layout breaks when secondary icon is used.

This is the result after applying a CSS fix. The code is following.

The code

This is the CSS code applied to fix the above problems.

<style type="text/css">

	/* icon only - primary icon */
	#test1 {
		width: 3.1em;
	}
	#test1 .ui-button-text {
		padding: .4em 0 .4em 0;
	}
	#test1 span {
		display: inline-block;
	}

	/* icon only - primary + secondary icon */
	#test2 {
		width: 5.3em;
	}
	#test2 span {
		display: inline-block;
	}

	/* text + icon - primary icon */
	#test3 span {
		display: inline-block;
	}
	#test3 .ui-button-text {
		padding: .62em 1em .62em 1em;
	}

	/* text + icon - secondary icon */
	#test4 span {
		display: inline-block;
	}
	#test4 .ui-button-text {
		padding: .4em .6em .4em .6em;
	}

	/* text + icon - primary + secondary icon */
	#test5 span {
		display: inline-block;
	}
	#test5 .ui-button-text {
		padding: .4em 1em .4em 1em;
	}

	/* text only */
	#test6 span {
		display: inline-block;
	}
	#test6 .ui-button-text {
		padding: .4em 1em .4em 1em;
	}

</style>

Appendix

For your convenience, this is the HTML of each iframe, WITHOUT the CSS fix.

<html>
<head>
	<meta charset="utf-8"/>

	<link rel="stylesheet"
		  src="//normalize-css.googlecode.com/svn/trunk/normalize.css"/>


	<!-- USE ONLY ONE OF THE FOLLOWING - COMMENT APPROPRIATELY-->
	<link rel="stylesheet"
		  href="http://code.jquery.com/ui/1.10.3/themes/ui-lightness/jquery-ui.css">

	<link rel="stylesheet"
		  href="http://addyosmani.github.io/jquery-ui-bootstrap/css/custom-theme/jquery-ui-1.10.3.custom.css">
	<!-- USE ONLY ONE OF THE ABOVE - COMMENT APPROPRIATELY-->


	<!-- APPLY THE CSS FIX HERE -->


	<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

	<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

	<script type="text/javascript">
		$(function() {

			$("#test1").button({
				icons: {
					primary: "ui-icon-triangle-1-s"
				},
				text: false
			});

			$("#test2").button({
				icons: {
					primary: "ui-icon-gear",
					secondary: "ui-icon-triangle-1-s"
				},
				text: false
			});

			$("#test3").button({
				icons: {
					primary: "ui-icon-triangle-1-s"
				}
			});

			$("#test4").button({
				icons: {
					secondary: "ui-icon-triangle-1-s"
				}
			});

			$("#test5").button({
				icons: {
					primary: "ui-icon-gear",
					secondary: "ui-icon-triangle-1-s"
				}
			});

			$("#test6").button();

		});
	</script>

</head>

<body>

<button id="test1">test1</button>
<button id="test2">test2</button>
<button id="test3">test3</button>
<button id="test4">test4</button>
<button id="test5">test5</button>
<button id="test6">test6</button>

</body>
</html>
Εγγραφή!
Sign-up for our free email newsletter. Get updates when new tutorials and tips are published. You can unsubscribe anytime with a click.

Your comments are welcomed!

This site actively encourages commenting on any post. Comments are not pre-moderated, but this community does not tolerate direct or indirect attacks, name-calling or insults. Please, read terms of use and Comment Policy at privacy policy.

comments powered by Disqus
How to Auto Post on Facebook with PHP Dynamically Bind Params in Prepared Statements with MySQLi