UI JScript~HTA+jQuery UI 입력 형식
좀 더 자유로운 UI를 만들고 싶다면 HTA지만, HTML에서 자신의 표현력이 부족한 경우도 있고, 반대로 너무 자유로워 자유롭지 못한 부분이 많다.움직여야 하는데 눈도 안 보이는 촌스러운 것들이다.
HTA에서는 jQuery UI를 사용할 수 없습니까?그렇게 여러 번 해보다가 마침내 자신의 인상과 가까운 곳에 왔기에 필기 대신 여기에 남게 됐다.
기본적인 생각은 다음과 같다.
・ 다양한 균형의 IE9 모드 HTA를 사용합니다.
· jQuery UI를 통해 대화 상자를 표시합니다.
• 대화 상자의 크기에 따라 HTA 창의 크기를 조정합니다.
·BORDER="dialog"를 지정하여 HTA 창의 크기 조정 작업을 금지합니다.
• 대화 상자 버튼을 처리할 코드를 적으십시오.
・ 대화 상자가 끝나면 HTA 자체를 close하고 종료합니다.
따라서 '직접 대화상자를 열어 처리하는 것' 처럼 보인다.드디어 이곳에 왔습니다.이 기본 모양만으로도 여러 가지를 판매할 수 있을 뿐만 아니라 더욱 신경 쓰는 모양도 만들 수 있다.
그리고 이것은 코드입니다.
HTAdialog.hta
<!DOCTYPE html>
<html lang="ja">
<!--
ダイアログサンプルHTA
-->
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<title>HTAdialog</title>
<hta:application id="oHTA"
applicationname="HTAdialog"
border="dialog"
caption="yes"
maximizebutton = "yes"
minimizebutton = "yes"
scroll = "no"
selection = "yes"
showintaskbar = "yes"
singleinstance = "no"
sysmenu = "yes"
windowstate = "normal">
<style type="text/css">
* { margin: 0; padding: 0; }
</style>
<link rel="stylesheet" type="text/css"
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" />
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body style="background-color: white;" >
<div id="mainArea"></div>
<script type="text/javascript">
// var fso = new ActiveXObject('Scripting.FileSystemObject') ;
// var WshShell = new ActiveXObject('WScript.Shell');
$(function() {
// 入力ダイアログ生成
$('body').append( '<input type="text" id="inputText"/>' );
$("#input").dialog({
width: 400,
position : { my: "left top", at: "left top", of: "#mainArea" },
modal:true, //モーダル表示
draggable:false, //ドラッグ不可
open: function( event, ui ) {
if( oHTA.caption==='no' ) {
window.resizeTo( $(".ui-dialog").width()+9, $('.ui-dialog').height()+11 );
} else {
window.resizeTo( $('.ui-dialog').width()+25, $('.ui-dialog').height()+49 );
}
},
close: function() {
// X の処理
window.close();
},
buttons: { //ボタン
"OK": function() {
// OKの処理
alert('名前:' + $("#name").val() + '\n電話:' + $("#tel").val() );
window.close();
// $(this).dialog("close");
},
"Cancel": function() {
// Cancel の処理
alert('Cancel');
window.close();
// $(this).dialog("close");
}
}
});
});
</script>
<div id="input" title="テストダイアログ">
<table>
<tr>
<td colspan=2>名前と電話番号を入力してください。</td>
</tr>
<tr>
<th>名前</th>
<td><input type="text" id="name" /></td>
</tr>
<tr>
<th>電話</th>
<td><input type="text" id="tel" /></td>
</tr>
</table>
</div>
</body>
</html>
제목 표시줄 표시(CAPTION="yes")
제목 표시줄 숨기기(CAPTION = "no")
창을 움직일 수 없다면 외관이 좋은 CAPTION="yes", 움직일 수 없도록 하세요. 이럴 경우 외관을 희생하고 CAPTION="no"를 선택하여 대응하세요.
앞으로의 과제는 다음과 같다.
・끊임없이 사용해 보세요.
• 대화 상자의 기본 형태를 변경합니다.
·CAPTION="yes"를 사용하여 해당 창을 이동하는 방법을 찾습니다.
네?드디어 이곳에 왔습니다.이런 느낌이야.
Reference
이 문제에 관하여(UI JScript~HTA+jQuery UI 입력 형식), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/itasnasal/items/e3c85d720919893f1051텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
