jquery對話框，更改文本字段的大小和字體

我在HTML 5中編寫了一個Canvas遊戲，我想將一個div浮在畫布上，以便用戶可以將其名稱輸入框中並且遊戲捕獲它。。jquery對話框，更改文本字段的大小和字體

我有這個工作，但我不知道如何真正改變框的文本，字體和長度尺寸的用戶類型

我的JS如下：

$("#menuBox").dialog({ 
    resizable : false, 
    position : [30,30], 
    minHeight : 100, 
    minWidth : 10, 
    height : 200, 
    width  : 500 
});

在身體

<body> 
    <div id="wrapper"> 
    <div id="container"> 
    <div id="menuBox" style="display:none"> 
    <form action="POST"> <input type="text" /></form> 
    </div> 

    </div> 
</body>

和CSS

#wrapper{ 
    position: relative; 
    left:10px; 
    top:10px; 
} 

#container{ 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    background-image: url("Main.jpg"); 
    height: 540px; 
    width: 900px; 
} 

div.ui-dialog div.ui-widget-header { 
    border: none; 
    display: none; 
} 

.ui-dialog .ui-dialog-content { 
    border: none; 
    padding: 0; 
} 

.ui-dialog { 
    width: 500px; 
    padding: 0; 
}

所以這個想法是用戶看到的唯一的東西是長文本框，它只是出現在我格式化的畫布環境上。

我是新來的JQuery（這就是爲什麼第一位仍然是非JQuery），所以我甚至不知道我想要什麼是可能的。如果我想使字體大小爲20，Tomoha和輸入框長度爲300px，我無法看到我要輸入的位置，或者即使我可以使其發生，因爲使用.dialog中的參數似乎不會改變那個輸入字段。有什麼建議？

感謝您的閱讀。

來源

2012-11-22 Craigeve

如果問題只是更新對話框內容的樣式，您可以提到特定的父ID或類，如下所示。

如果這樣做沒有解決，如果您可以向我展示由jQuery生成的對話框html代碼，則最好提供快速解決方案。

#menuBox .ui-dialog-content { 
    font-size:20px; 
    font-family:Tomoha; 
} 
#menuBox .ui-dialog-content input { 
    max-width: 320px; 
    width: 300px; 
}

來源

2012-11-22 11:01:40

完美，我沒有意識到你可以將輸入添加到.ui-dialog-content>一旦我完成了並設置了所有屬性，我就可以做任何我想做的事情。非常感謝！ – Craigeve

做你tryed類似：

？

或CSS：你需要使用!important到ovveride規則，即：

.dialog{ 
width:300px !important; 
}

來源

2012-11-22 10:37:35 sbaaaang

是的，兩者都是它自己的，並且在初始對話框調用結束時添加爲.css。我不確定您是否可以在用戶輸入文字的地方實際修改「白盒」。 – Craigeve

用戶如何提交文本？你可以顯示一些代碼或jsfiddle嗎？ – sbaaaang

好吧，我現在很困惑。我在jsfiddle中敲了一個簡單的例子，它在那裏工作，但代碼不在我的大型程序中，但它的行也一樣！ http://jsfiddle.net/KhhH4/28/ – Craigeve

通用的答案：使用瀏覽器的DOM檢查功能，以可視化的對話框的結構，然後用這些知識來構建所需的CSS選擇。我推薦看w3schools CSS selector reference。

來源

2012-11-22 10:40:41

jquery對話框，更改文本字段的大小和字體

回答

相關問題