Я использую «Jquery UI 1./Dan Wellman / Packt Publishing» для изучения JQuery UI. Я работаю над разделом «Виджет диалога».
После того, как я выполнил серию упражнений для создания виджета Dialog (используя Google Chrome), я попытался поработать с Internet Explorer и Firefox.
Результат был неутешительным.
- Хром был безупречен
- В Internet Explorer (1) заголовок диалогового виджета не отображался, (2) местоположение диалогового виджета было неправильным (с учетом позиции : ["center", "center"] ). Это было довольно смещено влево.
- В Firefox местоположение было уважаемым. Однако был виден только внешний контейнер. содержимое отсутствовало, просто пустой контейнер.
- Также с помощью Option Show: true и Hide: true работали только с Chrome.
Теперь мне интересно, должен ли пользовательский интерфейс JQuery использоваться только с Google Chrome. Я просто думаю, что я мог бы пропустить некоторые директивы, чтобы заставить его работать с основными браузерами (как утверждал автор в своей книге).
Вот код. Поскольку я использую ASP.NET MVC, некоторые коды, такие как элемент CSS, не отображаются. Но в остальном весь функционирующий код ниже.
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<p>
The goal of this tutorial is to explain one method of creating
model classes for an ASP.NET MVC application. In this tutorial,
you learn how to build model classes and perform database access
by taking advantage of Microsoft LINQ to SQL. In this tutorial,
we build a basic Movie database application. We start by creating
the Movie database application in the fastest and easiest way possible.
We perform all of our data access directly from our controller actions.
</p>
<div style = "font-size:.7em" id = "myDialog" title = "This is the title">
In this tutorial -- in order to illustrate how you can build model classes
-- we build a simple Movie database application.
The first step is to create a new database. Right-click the
App_Data folder in the Solution Explorer window and select the menu option
Add, New Item. Select the SQL Server Database template, give it the name
MoviesDB.mdf, and click the Add button (see Figure 1).
</div>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ScriptContent"
runat="server">
<script src="../../Content/development-bundle/jquery-1.3.2.js"
type="text/javascript"></script>
<script src="../../Content/development-bundle/ui/ui.core.js"
type="text/javascript"></script>
<script src="../../Content/development-bundle/ui/ui.dialog.js"
type="text/javascript"></script>
<script src="../../Content/development-bundle/ui/ui.draggable.js"
type="text/javascript"></script>
<script src="../../Content/development-bundle/ui/ui.resizable.js"
type="text/javascript"></script>
<script
src="../../Content/development-bundle/external/bgiframe/jquery.bgiframe.js"
type="text/javascript"></script>
<script type = "text/javascript">
$(function() {
var execute = function() { }
var cancel = function() { }
var dialogOpts = {
position: ["center", "center"],
title: '<a href="/Home/About">A link title!<a>',
modal: true,
minWidth: 500,
minHeight: 500,
buttons: {
"OK": execute,
"Cancel": cancel
},
show:true,
hide: true,
bgiframe:true
};
$("#myDialog").dialog(dialogOpts);
});
</script>
Спасибо за помощь.
EDIT
Я вчера сделал то же самое упражнение. С начала и до конца, каждый раз, когда я представлял поведение, я проверял свою работу во всех трех браузерах (IE, Firefox, Chrome).
- Все работает, пока я не добавлю опцию Показать и скрыть. Тогда работает только Chrome.
- Если я уберу «Показать и скрыть», все снова будет работать.
- Если я оставлю только Показать и Скрыть, все отлично работает
Возможно, параметры Показать и Скрыть для диалогового виджета плохо сочетаются с другими параметрами.
Спасибо за помощь.