بيانات الشركة والبلدية والمقاطعة فظيعة للغاية. يتم استخدامه لإنشاء معرفات من نظام EHR للمطابقة. على سبيل المثال ، تتوافق مقاطعة فوجيان مع ID 01211014AOP145 ، والمدينة تتوافق أيضًا مع معرف ، ثم تتجاهلها المناطق والمقاطعات. ثم وجدت مجموعة من المكونات الإضافية للموارد عبر الإنترنت. لم يكن الشعور قابلاً للتطبيق ، لذلك قررت أن أكتب بنفسي. لأنني لا أعرف كيفية صنع الواجهة التي تقع نصف دلو من الماء ، وهو تنسيق وأسلوب ومطابقة ألوان. لقد بحثت بصمت عن JD.com و Amazon و Taobao و Dangdang وغيرهم من الأشخاص حول كيفية القيام بالمقاطعات والمدن والمناطق. الصورة كما يلي:
أخيرًا ، قمت بدمجه في الشكل التالي:
لنتحدث عن الكود المصدري دون الكثير من الهراء:
<style type = "text/css"> #divprocity {position: absolute ؛ العرض: 350 بكسل ؛ الحد الأقصى-ارتفاع: 220 بكسل ؛ الارتفاع: السيارات ؛ العرض: لا شيء ؛ الحدود: 1px الصلبة #D3D3D3 ؛ Z-index: 100 ؛ الفائض: السيارات ؛ Overflow-X: Hidden ؛ } .headmenu {height: 34px ؛ الخلفية: #f6f6f6 ؛ الهامش: 0 ؛ الحشو: 0 ؛ } .headmenu li {float: left ؛ محاذاة النص: المركز ؛ العرض: 60px ؛ الارتفاع: 32 بكسل ؛ على غرار القائمة: لا شيء ؛ الخلفية: #f6f6f6 ؛ Line-Leight: 32px ؛ حجم الخط: 13px ؛ المؤشر: مؤشر. } .headmenu li.lidefault {background: #f60 ؛ اللون: #fff ؛ الهامش: 0 ؛ الحشو: 0 ؛ } .lidiv1 ، .lidiv2 {الارتفاع: auto ؛ MINIight: 30px ؛ أعلى الحدود: 2.5 بكسل Solid #F60 ؛ الهامش: -2px ؛ } .lidiv3 {الارتفاع: auto ؛ MINIight: 30px ؛ Max-Height: 200px ؛ أعلى الحدود: 2 بكسل الصلبة #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 ؛ على غرار القائمة: لا شيء ؛ المؤشر: مؤشر. محاذاة النص: المركز ؛ } .lidiv1 ul li: hover ، .lidiv2 ul li: hover ، .lidiv3 ul li: hover {color: #8b51cb ؛ المؤشر: مؤشر. تدمير النص: لا شيء ؛ الحشو: 0 ؛ الخلفية: #CCC ؛ } .btn_img1 {width: 20px ؛ المحاذاة الرأسية: الأوسط ؛ الهامش اليساري: -31px ؛ الحدود: لا شيء ؛ الخطوط العريضة: لا شيء ؛ الارتفاع: 10 بكسل ؛ المؤشر: مؤشر. الخلفية: url (صور/img_1.png) مركز مركز عدم التكرار ؛ Z-Index: 10 ؛ } .btn_img2 {margin-left: -31px ؛ هامش القاع: 2px ؛ العرض: 20 بكسل ؛ الارتفاع: 10 بكسل ؛ الحدود: لا شيء ؛ الخطوط العريضة: لا شيء ؛ المحاذاة الرأسية: الأوسط ؛ المؤشر: مؤشر. الخلفية: URL (الصور/img_2.png) مركز مركز عدم التكرار ؛ Z-Index: 10 ؛ } </style>تخطيط الصفحة:
<Head> <title> قابلية التوسع للروابط الإقليمية والبلدية </title> <script type = "text/javaScript" src = "scripts/jQuery -1.1.1.min.js"> </script> </head> <body> <body> حدد ما إذا كان للذهاب إلى الخارج: </label> <simpl> name = "radio1" value = "2" /> forefic <br /> <br /> <blable> Query Probincial and Municipal Rinkages: </bally> <input type = "text" id = "txt_procity" onKeyup = "getOutCounty ()" readonly "runat =" server " / onClick = "changeimg ()"/> <br/> <blable> عرض الموقع: </label> <br/> <div id = "divprocity"> <ul> <li> المقاطعة </li> <li> المدينة </li> [html] fuzhou </li> <li> fuzhou fuzhou </li> <li> fuzhou fuzhou </li> <li> fuzhou fuzhou </li> <li> fuzhou fuzhou </li> </li> fuzhou fuzhou </li> <li> fuzhou </li> <li> fujian </li> <li> anhui </li> <li> fuzhou </li> <li> fuzhou </li> <li> fuzhou </li> <li> fuzhou </li> <li> fuzhou </li> <li> fuzhou </li> <li> fuzhou </li> <li> fuzhou </li> <li> fuzhou </li> <li> fuzhou </li> <li> fuzhou </li> <li> fuzhou </li> <li> fuzhou </li> <li> fuzhou </li> <li> fuzhou </li> <li> fuzhou </li> <li> fuzhou </li> <li> fuzhou </li> <li> fuzhou </li> <li> fuzhou </li> <li> fuzhou </li> <li> fuzhou </li> <li> fuzhou </li> <li> fuzhou </li> <li> fuzhou </li> <li> fuzhou </li> </viv> <viv> <p style = "text-align: center ؛ color:#f60" </strong> </p> </viv>
السيناريو:
<script type = "text/javaScript"> $ (document) .Ready (function () {$ ('#divprocity ul.headmenu li'). انقر فوق (function () {var index = $ (this) .index () ؛ $ (this) .addClass ("Lidefault"). الأشقاء (div '). $ (هذا) .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 (). اليسار ؛ $ ('#divprocity'). css ({display: "block" ، left: y + "px" ، top: x + height + 8 + "px"}) ؛ $ ('#divprocity ul.headmenu li'). eq (2) .Show (). $ ('#divprocity'). الأطفال ('div'). eq (2) .Show (). الأشقاء ('div'). $ ('#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) ؛ } // انقر فوق الزر الأيمن في المنزل والخارج لتحميل وظيفة changeImg () {var _selectvalue = $ ("الإدخال: محدد [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 (). اليسار ؛ var name = $ ('#btnimg'). attr ("name") ؛ if (name == "img1") {$ ('#btnimg'). attr ("class" ، "btn_img2") ؛ $ ('#btnimg'). attr ("name" ، "img2") ؛ $ ('#divprocity'). css ({display: "block" ، left: y + "px" ، top: x + height + 8 + "px"}) ؛ // 1 عناصر قائمة لوحة التحكم المحلية والغنائية معروضة إذا (_selectValue == 1) {$ ('#divprocity ul.headmenu li'). Eq (2) .hide (). الأشقاء (). $ ('#divprocity'). الأطفال ('div'). eq (0) .Show (). الأشقاء ('div'). Hide () ؛ } آخر {$ ('#divprocity ul.headmenu li'). Eq (2) .Show (). $ ('#divprocity'). الأطفال ('div'). eq (2) .Show (). الأشقاء ('div'). }} آخر {$ ('#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 $ (.يمكن الحصول على البيانات الديناميكية SS من خلال AJAX وتم اجتيازها من خلال اجتياز الخلفية.
var ss = <ul> <li id = "01211014AOP145" onClick = "getli (this)"
على سبيل المثال ، ما يلي هو طريقة الكتابة لـ .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/"cellspacing = '0'>") ؛ //strbuild.appendformat(" <tr><div class =/"dialogtitle1/"> " + title3 +" </viv> <tr> ") ؛ foreach (dataRow dr in ds.tables [0] .Rows) {strbuild.append ("<tr id =" " + dr [" value "] +" onMouseover =/"this.bgColor = '#faebd7'/" onMouseout =/ 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 صالح فقط لمربعات الإدخال وصناديق إدخال نص متعددة ، ولن يتم تغيير نمط النص. التجربة الأساسية المعوقة مع جميع العناصر ، ولكن كن على دراية بتوافقها. يتم تعيين سمة Runat في مربع النص أعلاه لتسهيل خلفية .NET لقراءة البيانات مباشرة.