Провинциальные, муниципальные и окружные данные компании довольно ужасны. Он используется для сгенерирования идентификаторов из системы EHR, чтобы соответствовать. Например, провинция Фуцзянь соответствует ID 01211014AOP145, а город также соответствует идентификатору, а затем округа и округа игнорируют его. Затем я нашел кучу плагинов ресурсов в Интернете. Чувство не было применимым, поэтому я решил написать его сам. Потому что я не знаю, как сделать интерфейс, который является половиной ведра воды, который формат, стиль и сопоставление цвета. Я молча искал JD.com, Amazon, Taobao, Dangdang и других людей о том, как были сделаны провинции, города и районы. Картина следующая:
Наконец, я объединил его в следующую рисунок:
Давайте поговорим о исходном коде без большой чушь:
<style type = "text/css"> #divprocity {position: Absolute; Ширина: 350px; Макс-высот: 220px; Высота: Авто; дисплей: нет; Граница: 1PX SOLID #D3D3D3; Z-Index: 100; переполнение: авто; Overflow-X: скрытый; } .Headmenu {height: 34px; Фон: #f6f6f6; поля: 0; Заполнение: 0; } .Headmenu li {float: left; Текст-альбом: Центр; Ширина: 60px; Высота: 32px; Список стиля: нет; Фон: #f6f6f6; высота линии: 32px; размер шрифта: 13px; курсор: указатель; } .Headmenu li.lidefault {founale: #f60; Цвет: #fff; поля: 0; Заполнение: 0; } .lidiv1, .lidiv2 {height: auto; мин-высот: 30px; Пограничная топ: 2,5PX SOLID #F60; маржинальная версия: -2px; } .lidiv3 {height: auto; мин-высот: 30px; Макс-высот: 200px; Пограничная топ: 2PX SOLID #F60; маржинальная версия: -2px; } .lidiv2, .lidiv3 {display: none; } .lidiv1 ul, .lidiv2 ul {padding: 2px; поля: 0; ясно: оба; } .lidiv3 ul {padding: 2px; поля: 0; ясно: оба; } .lidiv1 ul li, .lidiv2 ul li {float: left; размер шрифта: 14px; Ширина: 60px; высота линии: 180%; Список стиля: нет; Цвет: #252525; Полевая: 0 4px; курсор: указатель; Текст-альбом: Центр; } .lidiv3 ul li {float: left; размер шрифта: 13px; высота линии: 150%; Цвет: #252525; Покрас: 1px 3px; Список стиля: нет; курсор: указатель; Текст-альбом: Центр; }. курсор: указатель; Текстовое декорация: нет; Заполнение: 0; Фон: #CCC; } .btn_img1 {width: 20px; Вертикальная атака: средняя; Мяглевая маржа: -31PX; граница: нет; Схема: нет; Высота: 10px; курсор: указатель; Фон: URL (Images/img_1.png) Центр без повторного переписки; z-index: 10; } .btn_img2 {margin-left: -31px; маржинальный бат: 2px; Ширина: 20px; Высота: 10px; граница: нет; Схема: нет; Вертикальная атака: средняя; курсор: указатель; Фон: URL (Images/img_2.png) Центр без повторного перепорачивания; z-index: 10; } </style>Пейзаж:
<Head> <title> Масштабируемость провинциальных и муниципальных связей </title> <script type = "text/javascript" src = "scripts/jquery-1.9.1.min.js"> </script> </head> <body> <babel> select, выбирайте ли alfod a Home: </label> <input = "vame" value = "/"/"/"/"/"/"/"/"/"/"/" 1 "/" 1 radio ". name = "radio1" value = "2" /> Foreign <Br /> <br /> <babel> Провинциальные и муниципальные связи: < /label> <input type = "text" id = "txt_procity" Onkeyup = "getOutCounty ()" readonly = "readonly" runat = " /> <input type =" button "id =" bt "bt name" im vame "runat =" /> <input = "id" bt "runat =" /> <input = "" bt "runat =" /> <input = "" bt ". onclick = "changeImg ()"/> <br/> <Babel> Показать местоположение: </label> <br/> <div id = "divprocity"> <ul> <li> провинция </li> <li> </li> [html] Просмотр простых копий <li> Foreenme </li> </ul> <div> <ul> <ul> <li> fu Fuzhou </li> <li> fuzhou fuzhou </li> <li> fuzhou fuzhou </li> <li> fuzhou fuzhou </li> <li> fuzhou fuzhou </li> <li> fu <li> fujian </li> <li> anhui </li> <li> fuzhou </li> <li> fuzhou </li> <li> fuzhou </li> <li> fuzhou </li> <li> fuzhou </li> <li> fu <li> fuzhou </li> <li> fuzhou </li> <li> fuzhou </li> <li> fuzhou </li> <li> fuzhou </li> <li> fuzhou </li> <li> fuzhou </li> <li> fu <li> fuzhou </li> <li> fuzhou </li> <li> fuzhou </li> <li> fuzhou </li> <li> fuzhou </li> <li> fuzhou </li> <li> fuzhou </li> <li> fu <li> fuzhou </li> <li> fuzhou </li> <li> fuzhou </li> <li> fuzhou </li> <li> fuzhou </li> </div> <div> <p style = "text-salign: center; color:#f60"> <strong>, пожалуйста, выберите сначала провинцию! </strong> </p> </div>
Скрипт:
<script type = "text/javascript"> $ (document) .ready (function () {$ ('#div -procity ul.headmenu li'). Click (function () {var index = $ (this) .index (); // Click wair Invalid if (index == 2) {return false;} $ (this) .adclass ("lidefault"). = $ (this) .val (); $ ('#btnimg'). ATTR ("Имя", "IMG1"); "readonly"); var txt = $ ("input [id*= txt_procity]"); if (txt.val (). trim () == "") {return false; } var height = txt.height (); var x = txt.offset (). top; var y = txt.offset (). Left; $ ('#divprocity'). css ({display: "block", слева: y + "px", top: x + height + 8 + "px"}); $ ('#divprocity ul.headmenu li'). eq (2) .show (). CSS ("ширина", "70px"). addClass ("lidefault"). Сестры (). Hide (); $ ('#Div -Prococity'). Дети ('div'). Уравнение (2) .show (). Братья ('div'). Hide (); $ ('#btnimg'). attr ("class", "btn_img2"); $ ('#btnimg'). attr ("name", "img2"); // пометить изображение переключения // Код, связанный с нечетким запросом, var ss = "<ul> <li> fuzhou fuzhou </li> <li> fuzhou fuzhou </li> <li> Префектура fufuzhou </li> </ul>"; $ ('. lidiv3'). html (''); $ ('. LIDIV3'). HTML (SS); } // Нажмите правую кнопку на доме и за рубежом, чтобы загрузить функцию function informimg () {var _selectvalue = $ ("input: checked [name $ = radio1]"). Val (); if (_SelectValue == "" || _SelectValue == Undefined) {alert («Пожалуйста, выберите, нужно ли сначала уехать за границу!»); вернуть ложь; } var txt = $ ("input [id*= txt_procity]"); var height = txt.height (); var x = txt.offset (). top; var y = txt.offset (). Left; var name = $ ('#btnimg'). attr ("name"); if (name == "img1") {$ ('#btnimg'). attr ("class", "btn_img2"); $ ('#btnimg'). attr ("name", "img2"); $ ('#divprocity'). css ({display: "block", слева: y + "px", top: x + height + 8 + "px"}); // 1 домашнее и 2 пункты меню панели управления, отображаемая if (_selectvalue == 1) {$ ('#div -procity ul. $ ('#div -prococity'). дети ('div'). EQ (0) .show (). Братья ('div'). Hide (); } else {$ ('#divprocity ul.headmenu li'). eq (2) .show (). css ("width", "70px"). addclass ("lidefault"). Братья (). Hide (); $ ('#Div -Prococity'). Дети ('div'). Уравнение (2) .show (). Братья ('div'). Hide (); }} else {$ ('#btnimg'). attr ("class", "btn_img1"); $ ('#btnimg'). attr ("name", "img1"); $ ('#divprocity'). css ("Display", "none"); }} </script>Логика состоит в том, чтобы выбирать домашнее или иностранное сначала. Треугольник - это картина, не нарисованная холстом H5. В Интернете много таких фотографий.
1. Я использую кнопку типа ввода в качестве контейнера для изображения, но я даже не могу получить ее с IMG (возможно, я поливаю). Ввод имеет кнопку стиля по умолчанию, нажмите на синюю границу снаружи, удалите контур: нет; Не пишите это, как я, как я
2. Чувствуйте, как писать в процессе, ориентированном на процесс, нажмите «Треугольник», чтобы загрузить всю информацию, переключить изображение, нажмите на картинку и закройте его. Некоторая логика - свободно расширяться. Если вам не нужны иностранные коды, удалите иностранные коды и добавьте аналогичные провинции и города для расширения.
3. Например, динамическая загрузка данных является соответствующим названием класса DIV провинции LIDIV1, а его структура коробки
<div <ul> <li> fuzhou fuzhou </li> <li> fuzhou fuzhou </li> <li> fufuzhou </li> <li> fufuzhou </li> </ul> "; $ ('. Lidiv3'). Html (''); // clear $ ('. lidiv3').Динамические данные SS могут быть получены через AJAX и пройдены посредством прохождения фонового прохождения.
var ss = <ul> <li id = "01211014aop145" onclick = "getli (this)"> провинция Fujian </li> </ul>
Например, ниже приведен метод написания .NET (не возражайте, если вы напишите его низко) и передайте его передний Ajax, чтобы получить возвращенное значение, и напрямую добавить в $ ('. Lidiv3'). HTML (SS); Чтобы получить динамические данные
if (ds! = null && ds.tables.count> 0 && ds.tables [0] .rows.count> 0) {strbuild.append ("<table id =/" tableshow/"class =/" gridtable/"cellspecing = '0'>"); //strbuild.appendformat("<tr>< didiv class =/"dialogtitle1/"> " + title3 +" </div> <tr> "); foreach (dataRow dr в ds.tables [0] .rows) {strbuild.append ("<tr id = '" + dr ["value"] + "' onmouseover =/" this.bgcolor = '#faebd7'/"onmouseout =/" this.bgcolor = ''/"onclick =/" clickonware (this.bgcolor = ''/"onclick =/". strbuild.appendformat ("<td> {0} </td>", dr ["name"]. toString ()); strbuild.append ("</tr>"); } strbuild.append ("</table>"); }Получите данные, нажмите провинцию Фуцзянь, чтобы написать общее событие щелчка, и фоновый сплайсинг onclick = "getli (это)"
Напишите это на передней части
функция getLi (obj) {var id = $ (obj) .attr ("id"); var text = $ (obj) .text (); // Вы можете написать Ajax через идентификатор провинции, чтобы получить данные города}Затем получен текстовый идентификатор провинции, и данные города могут быть получены через событие клика. Тот же загруженный идентификатор и текст. Текстовое сплайсинг в верхней части окна ввода является конечным результатом (это еще не было написано, это очень просто, я не хочу писать его, когда у меня есть ленивые атаки рака). Кстати, вышеупомянутый текст был установлен для чтения только для чтения. Когда дело доходит до только чтения, мы должны поговорить о разнице между Readonly и отключенными. Readonly действителен только для поля ввода и множества текстовых вводов, и стиль текста не будет изменен. Основное исследование отключено со всеми элементами, но имейте в виду его совместимость. Атрибут Runat устанавливается в текстовом поле выше, чтобы облегчить фон .NET для непосредственного считывания данных.