Skip to content

Instantly share code, notes, and snippets.

@kakari2
Created January 24, 2016 02:46
Show Gist options
  • Select an option

  • Save kakari2/487bc5511aea64d60a77 to your computer and use it in GitHub Desktop.

Select an option

Save kakari2/487bc5511aea64d60a77 to your computer and use it in GitHub Desktop.
jQueryUI_dialog_suggestion
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link href="style1.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="js/jquery-ui-1.11.4.custom/jquery-ui.min.css">
<script src="js/jquery-1.12.0.js"></script>
<script src="js/jquery-ui-1.11.4.custom/jquery-ui.min.js"></script>
</head>
<body>
<div class="container">
<div class="left">
<ul>
<li>a
<li>b
</ul>
</div>
<div class="contents">
<button id="opener">Open Dialog</button>
<input tyle="text" id="txtname" />
<ul>
<li>adefgabcdefgabcdefgabdefgabcdefgabcdefgabdefgabcdefgabcdefgabdefgabcdefgabcdefgab
<li>bdefgabcdefgabcdefgabdefgabcdefgabcdefgabdefgabcdefgabcdefgabdefgabcdefgabcdefgab
<li>adefgabcdefgabcdefgabdefgabcdefgabcdefgabdefgabcdefgabcdefgabdefgabcdefgabcdefgab
<li>bdefgabcdefgabcdefgabdefgabcdefgabcdefgabdefgabcdefgabcdefgabdefgabcdefgabcdefgab
</ul>
</div>
</div>
<div id="dialog" title="入力例">
<ul ID="items">
<li />候補A
<li />候補B
<li />候補C
</ul>
</div>
<script type="text/javascript">
$(function(){
$( "#opener" ).click(function() {
$("#dialog").dialog({
modal: true
});
});
$('#items > li').click(function(){
var str = $(this).html();
//alert(str);
$("#txtname").val(str);
$("#dialog").dialog( "close" );
})
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment