Integrieren Sie Text und Bild in UI Widget

Hallo Ich möchte gerne wissen, wie ich Text und Bild in einem UI Widget hinzufügen kann Ich möchte auch ohne Hintergrund sein bitte helfen Ich möchte in der Lage sein, meinen eigenen Text und Display zu schreiben während ich es schreibe.Integrieren Sie Text und Bild in UI Widget

CSS

.thumbs img{ 
margin:3px; 
width:50px; 
float:left; 
} 
.bottlesWrapper img{ 
margin:3px; 
width:400px; 
float:left; 
} 

#main { border:1px solid #eee; margin:20px; width:410px; height:220px;}

HTML

<html> 
<head> 
<script 
src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<meta charset=utf-8 /> 
<title>UI widget</title><link rel="stylesheet" 
href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" /> 
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
    <link rel="stylesheet" 
href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
<script src="//code.jquery.com/jquery-1.10.2.js"></script> 

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 

<link rel="stylesheet" href="/resources/demos/style.css"> 
</head> 
<body> 
<form method="post" action="<?php echo $PHP_SELF;?>"> 

<textarea rows="5" cols="20" name="quote" wrap="physical">Enter your favorite quote!</textarea><br /> 

<input type="submit" value="submit" name="submit"> 
</form> 
<div id='main'> 
<div class="bottlesWrapper"> 

<div id="dialog" class="ui-widget-content"> 
    <? 


    echo "<i>".$quote."</i><br />"; 


    ?> 
    </div> 

<img src="http://placehold.it/300x160/f1f" /> 
</div> 

    <div class="thumbs"> 
<img src="http://placehold.it/300x180/444" /> 
<img src="http://placehold.it/300x160/f1f" /> 


    </div></div> 

    </body> 
    </html>

Script

$('.thumbs img').click(function() { 
var thmb = this; 
var src = this.src; 
$(thmb).parent('.thumbs').prev('.bottlesWrapper').find('img').fadeout (400,function(){ 
    thmb.src = this.src; 
    $(this).fadeIn(400)[0].src = src; 
    }); 
    }); 

    </script> <script> 
    $("#dialog").dialog({ 
    open: function(event, ui) { 
    var vDlg = $(event.target).parent(); 
    var vCont = $('#main'); 
    vDlg.draggable("option", "containment", vCont).appendTo(vCont); 
    $(this).dialog("option", "position", "center"); 
    } 
    });

https://jsfiddle.net/barronfidel7/c1yfj0wv/

Quelle

2016-04-25 johndoe

Bitte den Code in einheitlicher Form einrücken, um das Lesen zu erleichtern. – Oisin

Ihre Arbeit fiddle.

Dies ist, was Sie den HTML-Code in der UI-Widget sehen können, wie Sie schreiben:

$(document).ready(function(){ 
    $('#dialog').html($('#quote').val()); 
    $('#quote').on('keyup', function(){ 
    $('#dialog').html($(this).val()); 
    }); 
});

Während der Eingabefokus hat, den HTML-Code des Widget auf seinen eigenen Wert nach jedem keyup Ereignis zuordnet.

Quelle

2016-04-25 16:39:04

danke das ist, was ich gesucht habe. auf jeden Fall wissen Sie, wie Sie die Benutzeroberfläche loswerden, aber immer noch die gleichen Funktionen Ich möchte in der Lage sein, nur den Text ohne die graue Leiste zu sehen und auch einen transparenten Hintergrund möchte den Text verschieben und auch die Größe ändern, aber wenn nicht das ist gut, ich danke Ihnen Arleigh Hix – johndoe

@ johndoe, Ersetzen Sie einfach den UI-Container mit einem div, und wenn Sie es geben, die gleiche 'ID = "Dialog" ', dann das oben genannte JavaScript wird immer noch das gleiche funktionieren. Fügen Sie einfach die gewünschten Stile zum div hinzu. –

Integrieren Sie Text und Bild in UI Widget

Antwort

Verwandte Themen