JQuery Balloon plugin Place HTML code inside baloon

In the demo site of baloon plugin:
I find this code to place html inside a baloon

  contents: '<a href="#">Any HTML!</a><br />'
    +'<input type="text" size="40" />'
    +'<input type="submit" value="Search" />'

I don’t like it because I need to write html tag as literal string…
I want to write HTML code directly on the page and pass it to contents of the ballon.
I prefer this because I need to manipulate that html elements by server side code.
That’s my solution:

<div id="user_info">
<span><asp:Literal runat="server" ID="LiteralUser" /></span>
<ul id="user_ballon">
    <li runat="server"><a href="#" >Cambia password</a></li>
    <li runat="server"><a href="#">Modifica anagrafica</a></li>
<script type="text/javascript">
    $(document).ready(function () {
       var userBaloon = $('#user_ballon');
       if (userBaloon != null) {
                classname: 'palloncino',
                position: 'bottom',
                contents: userBaloon.clone(),
                css: {
                    minWidth: "20px",
                    padding: "10px",
                    boxShadow: "none",
                    borderRadius: "6px",
                    border: "solid 1px #9db6db",
                    color: "#666",
                    backgroundColor: "#9db6db",
                    opacity: "1",
                    zIndex: "32767",
                    textAlign: "left"


by javascript I find the html code I need to show, then I clone it as contents of ballon and I hide it to the page, because I don’t want show it outside baloon.
Then I setup the ballon for the ‘#user_info’ div


Informazioni su Andrea Regoli

Project Manager .Net Developer WPF WP7 Asp.Net c# javascript ajax SQL sharepoint
Questa voce è stata pubblicata in .Net, jquery e contrassegnata con , . Contrassegna il permalink.


Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )


Connessione a %s...

This site uses Akismet to reduce spam. Learn how your comment data is processed.