JQuery Balloon plugin Place HTML code inside baloon

In the demo site of baloon plugin:
http://www.linxlab.it/wp-content/uploads/2012/06/balloon.demo_.html
I find this code to place html inside a baloon

$('.sample4-1').balloon({
  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:
Html:

<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>
</ul>
<div>
<script type="text/javascript">
    $(document).ready(function () {
       var userBaloon = $('#user_ballon');
       if (userBaloon != null) {
            $('#user_info').balloon({
                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"
                }
            });
            userBaloon.hide();
        }

    });
</script>

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

Annunci

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.

Rispondi

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 )

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 )

Google+ photo

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

Connessione a %s...