UIウィジェット内にテキストと画像を統合する

こんにちは私は、UIウィジェット内でテキストと画像をどのように追加できるのかを知りたいと思います。バックグラウンドがないようにしたいのですが、自分のテキストと表示を書きたい私はそれを書いている間。UIウィジェット内にテキストと画像を統合する

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>

スクリプト

$('.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/

出典

2016-04-25 johndoe

コードを読みやすくするために、コードを均等にインデントしてください。 – Oisin

あなたの仕事fiddle。

これは、あなたが入力すると、UIウィジェットにHTMLを表示することができますものです：

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

入力がフォーカスを持っていますが、それはすべてのからkeyupイベントの後に、それ自身の値にウィジェットのHTMLを割り当てます。

出典

2016-04-25 16:39:04

ありがとう、これは私が探していたものです。あなたはUIを取り除く方法を知っていますが、同じ機能を持っています。私は灰色のバーなしでテキストを見ることができるだけでなく、透明な背景を持ってテキストを移動し、それはうまくいけません。私はあなたに感謝します。Arleigh Hix – johndoe

@johndoe、ちょうどUIコンテナをdivに置き換え、同じ 'id =" dialog "'を与えると、上記のJavaScriptは同じように動作します。 divに必要なスタイルを追加するだけです。 –

UIウィジェット内にテキストと画像を統合する

答えて

関連する問題